Skip to content

Commit 5ea9f1f

Browse files
hs05junehs05june
committed
UI Channel Form
Signed-off-by: hs05june <[email protected]>
1 parent 8c5220e commit 5ea9f1f

File tree

2 files changed

+152
-72
lines changed

2 files changed

+152
-72
lines changed

‎client/src/components/Forms/ChannelForm.js‎

Lines changed: 68 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -6,84 +6,80 @@ import React, { Component } from 'react';
66
import Button from '@material-ui/core/Button';
77
import TextField from '@material-ui/core/TextField';
88
import { withStyles } from '@material-ui/core/styles';
9+
import FileInput from './FileInput';
910

1011
const styles = theme => ({
11-
container: {
12-
display: 'flex',
13-
flexWrap: 'wrap',
14-
},
15-
form: {
16-
width: 310,
17-
},
18-
textField: {
19-
marginLeft: theme.spacing.unit,
20-
marginRight: theme.spacing.unit,
21-
width: 130,
22-
},
23-
fileField: {
24-
marginLeft: theme.spacing.unit,
25-
marginRight: theme.spacing.unit,
26-
width: 300,
27-
},
28-
menu: {
29-
width: 200,
30-
},
12+
container: {
13+
display: 'flex',
14+
flexWrap: 'wrap'
15+
},
16+
form: {
17+
width: 310
18+
},
19+
textField: {
20+
marginLeft: theme.spacing.unit,
21+
marginRight: theme.spacing.unit,
22+
width: 130
23+
},
24+
fileField: {
25+
marginLeft: theme.spacing.unit,
26+
marginRight: theme.spacing.unit,
27+
width: 300
28+
},
29+
menu: {
30+
width: 200
31+
},
32+
button: {
33+
fontSize: 16,
34+
color: '#466bd4',
35+
margin: 'auto',
36+
display: 'block',
37+
border: 'none'
38+
}
3139
});
3240

3341
class ChannelForm extends Component {
34-
render() {
35-
const { classes } = this.props;
42+
render() {
43+
const { classes } = this.props;
3644

37-
return (
38-
// TODO : Replace with liform-react
39-
<div>
40-
<form className={classes.container}>
41-
<TextField
42-
id="channel-name"
43-
label="Name"
44-
className={classes.textField}
45-
margin="normal"
46-
/>
47-
<TextField
48-
id="org-name"
49-
label="Org Name"
50-
className={classes.textField}
51-
margin="normal"
52-
/>
53-
</form>
54-
<br />
55-
<form className={classes.form}>
56-
<TextField
57-
type="file"
58-
id="org-path"
59-
label="Org Path"
60-
className={classes.fileField}
61-
helperText="path to org config"
62-
margin="normal"
63-
/>
64-
<TextField
65-
type="file"
66-
id="channel-path"
67-
label="Channel Path"
68-
className={classes.fileField}
69-
helperText="path to channel config"
70-
margin="normal"
71-
/>
72-
<TextField
73-
type="file"
74-
id="network-path"
75-
label="Network Path"
76-
className={classes.fileField}
77-
helperText="path to network config"
78-
margin="normal"
79-
/>
80-
<Button size="small" color="primary">
81-
Submit
82-
</Button>
83-
</form>
84-
</div>
85-
);
86-
}
45+
return (
46+
// TODO : Replace with liform-react
47+
<div>
48+
<form className={classes.container}>
49+
<TextField
50+
id="channel-name"
51+
label="Name"
52+
className={classes.textField}
53+
margin="normal"
54+
/>
55+
<TextField
56+
id="org-name"
57+
label="Org Name"
58+
className={classes.textField}
59+
margin="normal"
60+
/>
61+
</form>
62+
<form className={classes.form}>
63+
<FileInput
64+
id="org-path"
65+
label="Org Path"
66+
helperText="path to org config"
67+
/>
68+
<FileInput
69+
id="channel-path"
70+
label="Channel Path"
71+
helperText="path to channel config"
72+
/>
73+
<FileInput
74+
id="network-path"
75+
label="Network Path"
76+
helperText="path to network config"
77+
/>
78+
<Button className={classes.button}>Submit</Button>
79+
</form>
80+
</div>
81+
);
82+
}
8783
}
8884

8985
export default withStyles(styles)(ChannelForm);

‎client/src/components/Forms/FileInput.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* SPDX-License-Identifier: Apache-2.0
3+
*/
4+
5+
import React, { Component } from 'react';
6+
import { withStyles } from '@material-ui/core/styles';
7+
import Box from '@material-ui/core/Box';
8+
import TextField from '@material-ui/core/TextField';
9+
import ButtonBase from '@material-ui/core/ButtonBase';
10+
11+
const styles = theme => ({
12+
field: {
13+
'& .MuiFormLabel-root.Mui-disabled': {
14+
color: theme.palette.text.secondary
15+
}
16+
},
17+
button: {
18+
width: '100%',
19+
height: '100%',
20+
overflow: 'hidden'
21+
},
22+
box: {
23+
marginLeft: theme.spacing.unit,
24+
marginRight: theme.spacing.unit,
25+
borderBottom: '1px #8b8e91 solid',
26+
'&:hover': {
27+
borderBottom: '2px #1f2020 solid'
28+
}
29+
}
30+
});
31+
32+
class FileInput extends Component {
33+
constructor(props) {
34+
super(props);
35+
this.state = {
36+
attachment: null
37+
};
38+
this.ref = React.createRef();
39+
}
40+
41+
handleChange = event => {
42+
const files = Array.from(event.target.files);
43+
const [file] = files;
44+
this.setState({ attachment: file });
45+
};
46+
47+
render() {
48+
const { label, helperText, classes } = this.props;
49+
const { attachment } = this.state;
50+
51+
return (
52+
<Box position="relative" height={98} className={classes.box}>
53+
<Box position="absolute" top={0} bottom={0} left={0} right={0}>
54+
<TextField
55+
variant="standard"
56+
className={classes.field}
57+
InputProps={{ disableUnderline: true }}
58+
margin="normal"
59+
fullWidth
60+
disabled
61+
label={label}
62+
value={attachment?.name || ''}
63+
helperText={helperText}
64+
/>
65+
</Box>
66+
<ButtonBase
67+
className={classes.button}
68+
component="label"
69+
onKeyDown={e => e.keyCode === 32 && this.ref.current.click()}
70+
>
71+
<input
72+
ref={this.ref}
73+
type="file"
74+
hidden
75+
onChange={this.handleChange}
76+
helperText={helperText}
77+
/>
78+
</ButtonBase>
79+
</Box>
80+
);
81+
}
82+
}
83+
84+
export default withStyles(styles)(FileInput);

0 commit comments

Comments
 (0)