frontend/containers/Fab/index.js (view raw)
1import React from 'react';
2import Icon from '@material-ui/core/Icon';
3import FabMui from '@material-ui/core/Fab';
4import {makeStyles} from '@material-ui/core/styles';
5
6const Fab = ({open, children = null, ...props}) => {
7 const variant = children ? 'extended' : 'round';
8 const classes = useStyles({open, variant});
9
10 return (
11 <div className={classes.container}>
12 <FabMui color="secondary" variant={variant} {...props}>
13 <Icon className={classes.icon}>add</Icon>
14 {children}
15 </FabMui>
16 </div>
17 );
18};
19
20const useStyles = makeStyles(theme => ({
21 container: ({open}) => ({
22 position: 'fixed',
23 bottom: open ? -theme.spacing(8) : theme.spacing(3),
24 right: theme.spacing(3),
25 transition: 'all 0.3s ease',
26 transform: open ? 'rotate(45deg)' : '',
27 zIndex: theme.zIndex.speedDial,
28 }),
29 icon: ({variant}) => ({
30 marginRight: variant === 'extended' ? theme.spacing(1) : theme.spacing(0),
31 }),
32}));
33
34export default Fab;