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, ...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;