UI Channel Form

Signed-off-by: hs05june <[email protected]>
hs05june · May 12, 2023 · 5ea9f1f · 5ea9f1f
1 parent 8c5220e
commit 5ea9f1f
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 72 deletions.
diff --git a/client/src/components/Forms/ChannelForm.js b/client/src/components/Forms/ChannelForm.js
@@ -6,84 +6,80 @@ import React, { Component } from 'react';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import { withStyles } from '@material-ui/core/styles';
+import FileInput from './FileInput';
 
 const styles = theme => ({
-  container: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  form: {
-    width: 310,
-  },
-  textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
-    width: 130,
-  },
-  fileField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
-    width: 300,
-  },
-  menu: {
-    width: 200,
-  },
+	container: {
+		display: 'flex',
+		flexWrap: 'wrap'
+	},
+	form: {
+		width: 310
+	},
+	textField: {
+		marginLeft: theme.spacing.unit,
+		marginRight: theme.spacing.unit,
+		width: 130
+	},
+	fileField: {
+		marginLeft: theme.spacing.unit,
+		marginRight: theme.spacing.unit,
+		width: 300
+	},
+	menu: {
+		width: 200
+	},
+	button: {
+		fontSize: 16,
+		color: '#466bd4',
+		margin: 'auto',
+		display: 'block',
+		border: 'none'
+	}
 });
 
 class ChannelForm extends Component {
-  render() {
-    const { classes } = this.props;
+	render() {
+		const { classes } = this.props;
 
-    return (
-      // TODO : Replace with liform-react
-      <div>
-        <form className={classes.container}>
-          <TextField
-            id="channel-name"
-            label="Name"
-            className={classes.textField}
-            margin="normal"
-          />
-          <TextField
-            id="org-name"
-            label="Org Name"
-            className={classes.textField}
-            margin="normal"
-          />
-        </form>
-        <br />
-        <form className={classes.form}>
-          <TextField
-            type="file"
-            id="org-path"
-            label="Org Path"
-            className={classes.fileField}
-            helperText="path to org config"
-            margin="normal"
-          />
-          <TextField
-            type="file"
-            id="channel-path"
-            label="Channel Path"
-            className={classes.fileField}
-            helperText="path to channel config"
-            margin="normal"
-          />
-          <TextField
-            type="file"
-            id="network-path"
-            label="Network Path"
-            className={classes.fileField}
-            helperText="path to network config"
-            margin="normal"
-          />
-          <Button size="small" color="primary">
-            Submit
-          </Button>
-        </form>
-      </div>
-    );
-  }
+		return (
+			// TODO : Replace with liform-react
+			<div>
+				<form className={classes.container}>
+					<TextField
+						id="channel-name"
+						label="Name"
+						className={classes.textField}
+						margin="normal"
+					/>
+					<TextField
+						id="org-name"
+						label="Org Name"
+						className={classes.textField}
+						margin="normal"
+					/>
+				</form>
+				<form className={classes.form}>
+					<FileInput
+						id="org-path"
+						label="Org Path"
+						helperText="path to org config"
+					/>
+					<FileInput
+						id="channel-path"
+						label="Channel Path"
+						helperText="path to channel config"
+					/>
+					<FileInput
+						id="network-path"
+						label="Network Path"
+						helperText="path to network config"
+					/>
+					<Button className={classes.button}>Submit</Button>
+				</form>
+			</div>
+		);
+	}
 }
 
 export default withStyles(styles)(ChannelForm);
diff --git a/client/src/components/Forms/FileInput.js b/client/src/components/Forms/FileInput.js
@@ -0,0 +1,84 @@
+/**
+ *    SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import TextField from '@material-ui/core/TextField';
+import ButtonBase from '@material-ui/core/ButtonBase';
+
+const styles = theme => ({
+	field: {
+		'& .MuiFormLabel-root.Mui-disabled': {
+			color: theme.palette.text.secondary
+		}
+	},
+	button: {
+		width: '100%',
+		height: '100%',
+		overflow: 'hidden'
+	},
+	box: {
+		marginLeft: theme.spacing.unit,
+		marginRight: theme.spacing.unit,
+		borderBottom: '1px #8b8e91 solid',
+		'&:hover': {
+			borderBottom: '2px #1f2020 solid'
+		}
+	}
+});
+
+class FileInput extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			attachment: null
+		};
+		this.ref = React.createRef();
+	}
+
+	handleChange = event => {
+		const files = Array.from(event.target.files);
+		const [file] = files;
+		this.setState({ attachment: file });
+	};
+
+	render() {
+		const { label, helperText, classes } = this.props;
+		const { attachment } = this.state;
+
+		return (
+			<Box position="relative" height={98} className={classes.box}>
+				<Box position="absolute" top={0} bottom={0} left={0} right={0}>
+					<TextField
+						variant="standard"
+						className={classes.field}
+						InputProps={{ disableUnderline: true }}
+						margin="normal"
+						fullWidth
+						disabled
+						label={label}
+						value={attachment?.name || ''}
+						helperText={helperText}
+					/>
+				</Box>
+				<ButtonBase
+					className={classes.button}
+					component="label"
+					onKeyDown={e => e.keyCode === 32 && this.ref.current.click()}
+				>
+					<input
+						ref={this.ref}
+						type="file"
+						hidden
+						onChange={this.handleChange}
+						helperText={helperText}
+					/>
+				</ButtonBase>
+			</Box>
+		);
+	}
+}
+
+export default withStyles(styles)(FileInput);