app/src/containers/EventFab/index.js (view raw)
1import React, {useReducer} from 'react';
2import Icon from '@material-ui/core/Icon';
3import Fab from '@material-ui/core/Fab';
4import {makeStyles} from '@material-ui/core/styles';
5import {useTranslation} from 'react-i18next';
6import {useEvent} from '../../contexts/Event';
7import {useToast} from '../../contexts/Toast';
8
9const EventFab = ({toggleNewCar}) => {
10 const {t} = useTranslation();
11 const [open, toggleOpen] = useReducer(i => !i, false);
12 const classes = useStyles({open});
13 const {event} = useEvent();
14 const {addToast} = useToast();
15
16 const onShare = async () => {
17 if (!event) return null;
18 // If navigator as share capability
19 if (!!navigator.share) {
20 const shareData = {
21 title: `Caroster ${event.name}`,
22 url: `${window.location.href}`,
23 };
24 return await navigator.share(shareData);
25 }
26 // Else copy URL in clipboard
27 else if (!!navigator.clipboard) {
28 await navigator.clipboard.writeText(window.location.href);
29 addToast(t('event.actions.copied'));
30 return true;
31 }
32 };
33
34 return (
35 <>
36 <div className={classes.fabContainer}>
37 <Fab aria-label="more" onClick={toggleOpen}>
38 <Icon>add</Icon>
39 </Fab>
40 </div>
41 <div className={classes.actionContainer} onClick={toggleOpen}>
42 <Fab
43 color="primary"
44 aria-label="share"
45 variant="extended"
46 className={classes.extendedFab}
47 onClick={onShare}
48 >
49 <Icon className={classes.extendedIcon}>share</Icon>
50 Partager
51 </Fab>
52 <Fab
53 color="secondary"
54 aria-label="add-car"
55 variant="extended"
56 className={classes.extendedFab}
57 onClick={toggleNewCar}
58 >
59 <Icon className={classes.extendedIcon}>directions_car</Icon>
60 Ajouter
61 </Fab>
62 </div>
63 </>
64 );
65};
66
67const useStyles = makeStyles(theme => ({
68 fabContainer: ({open}) => ({
69 position: 'fixed',
70 bottom: open ? '-4rem' : theme.spacing(2),
71 right: theme.spacing(2),
72 transition: 'all 0.3s ease',
73 transform: open ? 'rotate(45deg)' : '',
74 zIndex: theme.zIndex.speedDial,
75 '& .MuiFab-root': {
76 backgroundColor: theme.palette.accent.yellow,
77 },
78 }),
79 actionContainer: ({open}) => ({
80 position: 'fixed',
81 bottom: open ? 0 : '-100vh',
82 left: 0,
83 right: 0,
84 display: 'flex',
85 flexDirection: 'column',
86 justifyContent: 'flex-end',
87 transition: 'all 0.3s ease',
88 height: '100vh',
89 }),
90 extendedIcon: {
91 marginRight: theme.spacing(2),
92 },
93 extendedFab: {
94 width: '11rem',
95 marginLeft: 'auto',
96 marginRight: 'auto',
97 marginBottom: theme.spacing(2),
98 },
99}));
100
101export default EventFab;