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;