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 return await navigator.share({
21 title: `Caroster ${event.name}`,
22 url: `${window.location.href}`,
23 });
24 // Else copy URL in clipboard
25 else if (!!navigator.clipboard) {
26 await navigator.clipboard.writeText(window.location.href);
27 addToast(t('event.actions.copied'));
28 return true;
29 }
30 };
31
32 return (
33 <>
34 <div className={classes.fabContainer}>
35 <Fab aria-label="more" onClick={toggleOpen}>
36 <Icon>add</Icon>
37 </Fab>
38 </div>
39 <div
40 className={classes.actionContainer}
41 onClick={toggleOpen}
42 role="dialog"
43 >
44 <Fab
45 color="primary"
46 aria-label="share"
47 variant="extended"
48 className={classes.extendedFab}
49 onClick={onShare}
50 >
51 <Icon className={classes.extendedIcon}>share</Icon>
52 Partager
53 </Fab>
54 <Fab
55 color="secondary"
56 aria-label="add-car"
57 variant="extended"
58 className={classes.extendedFab}
59 onClick={toggleNewCar}
60 >
61 <Icon className={classes.extendedIcon}>directions_car</Icon>
62 Ajouter
63 </Fab>
64 </div>
65 </>
66 );
67};
68
69const useStyles = makeStyles(theme => ({
70 fabContainer: ({open}) => ({
71 position: 'fixed',
72 bottom: open ? '-4rem' : theme.spacing(2),
73 right: theme.spacing(2),
74 transition: 'all 0.3s ease',
75 transform: open ? 'rotate(45deg)' : '',
76 zIndex: theme.zIndex.speedDial,
77 '& .MuiFab-root': {
78 backgroundColor: theme.palette.accent.yellow,
79 },
80 }),
81 actionContainer: ({open}) => ({
82 position: 'fixed',
83 bottom: open ? 0 : '-100vh',
84 left: 0,
85 right: 0,
86 display: 'flex',
87 flexDirection: 'column',
88 justifyContent: 'flex-end',
89 transition: 'all 0.3s ease',
90 height: '100vh',
91 }),
92 extendedIcon: {
93 marginRight: theme.spacing(2),
94 },
95 extendedFab: {
96 width: '11rem',
97 marginLeft: 'auto',
98 marginRight: 'auto',
99 marginBottom: theme.spacing(2),
100 },
101}));
102
103export default EventFab;