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 = () => {
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        >
58          <Icon className={classes.extendedIcon}>directions_car</Icon>
59          Ajouter
60        </Fab>
61      </div>
62    </>
63  );
64};
65
66const useStyles = makeStyles((theme) => ({
67  fabContainer: ({ open }) => ({
68    position: "fixed",
69    bottom: open ? "-4rem" : theme.spacing(2),
70    right: theme.spacing(2),
71    transition: "all 0.3s ease",
72    transform: open ? "rotate(45deg)" : "",
73    zIndex: theme.zIndex.speedDial,
74  }),
75  actionContainer: ({ open }) => ({
76    position: "fixed",
77    bottom: open ? 0 : "-100vh",
78    left: 0,
79    right: 0,
80    display: "flex",
81    flexDirection: "column",
82    justifyContent: "flex-end",
83    transition: "all 0.3s ease",
84    height: "100vh",
85  }),
86  extendedIcon: {
87    marginRight: theme.spacing(2),
88  },
89  extendedFab: {
90    width: "11rem",
91    marginLeft: "auto",
92    marginRight: "auto",
93    marginBottom: theme.spacing(2),
94  },
95}));
96
97export default EventFab;