Local modifications to ClusterLabs/Anvil by Alteeve
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

57 lines
1.5 KiB

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;