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 color="primary" 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 }),
76 actionContainer: ({ open }) => ({
77 position: "fixed",
78 bottom: open ? 0 : "-100vh",
79 left: 0,
80 right: 0,
81 display: "flex",
82 flexDirection: "column",
83 justifyContent: "flex-end",
84 transition: "all 0.3s ease",
85 height: "100vh",
86 }),
87 extendedIcon: {
88 marginRight: theme.spacing(2),
89 },
90 extendedFab: {
91 width: "11rem",
92 marginLeft: "auto",
93 marginRight: "auto",
94 marginBottom: theme.spacing(2),
95 },
96}));
97
98export default EventFab;