|
|
|
import { Box, IconButton, Input, InputLabel } from '@material-ui/core';
|
|
|
|
import AddIcon from '@material-ui/icons/Add';
|
|
|
|
import { makeStyles } from '@material-ui/styles';
|
|
|
|
import { useRef } from 'react';
|
|
|
|
|
|
|
|
import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE';
|
|
|
|
import { Panel } from '../Panels';
|
|
|
|
import Spinner from '../Spinner';
|
|
|
|
import { HeaderText } from '../Text';
|
|
|
|
|
|
|
|
const useStyles = makeStyles(() => ({
|
|
|
|
addFileButton: ICON_BUTTON_STYLE,
|
|
|
|
addFileInput: {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
|
|
|
|
const Files = (): JSX.Element => {
|
|
|
|
const classes = useStyles();
|
|
|
|
const addFileInputRef = useRef<HTMLInputElement>();
|
|
|
|
|
|
|
|
// Let the icon button trigger the invisible input element.
|
|
|
|
const onAddFileButtonClick = () => {
|
|
|
|
addFileInputRef.current?.click();
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Panel>
|
|
|
|
<Box display="flex">
|
|
|
|
<Box flexGrow={1}>
|
|
|
|
<HeaderText text="Files" />
|
|
|
|
</Box>
|
|
|
|
<Box>
|
|
|
|
<form encType="multipart/form-data">
|
|
|
|
<InputLabel htmlFor="add-file-input">
|
|
|
|
<Input
|
|
|
|
className={classes.addFileInput}
|
|
|
|
id="add-file-input"
|
|
|
|
ref={addFileInputRef}
|
|
|
|
type="file"
|
|
|
|
/>
|
|
|
|
<IconButton
|
|
|
|
className={classes.addFileButton}
|
|
|
|
onClick={onAddFileButtonClick}
|
|
|
|
>
|
|
|
|
<AddIcon />
|
|
|
|
</IconButton>
|
|
|
|
</InputLabel>
|
|
|
|
</form>
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
<Spinner />
|
|
|
|
</Panel>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Files;
|