All files / SpeedDial index.tsx

0% Statements 0/16
0% Branches 0/2
0% Functions 0/4
0% Lines 0/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99                                                                                                                                                                                                     
import React from "react";
import Box from "@mui/material/Box";
import {
  Backdrop,
  SpeedDial as MUISpeedDial,
  SpeedDialAction as MUISpeedDialAction,
} from "@mui/material";
import { Icon } from "../Icon";
import { contentTypes } from "../../shared/iconTypes/icons";
import { colors } from "../../theme/colors";
 
type Action = {
  icon: keyof typeof contentTypes;
  name: string;
  onClick: () => void;
};
 
interface SpeedDialIconProps {
  actions: Action[];
  speedDialIcon: keyof typeof contentTypes;
  mode?: "primary" | "secondary" | "tertiary";
  style?: React.CSSProperties;
}
 
export const SpeedDial = ({
  actions,
  speedDialIcon,
  mode = "primary",
  style = {},
}: SpeedDialIconProps) => {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
 
  const speedDialStyle = {
    primary: {
      backgroundColor: colors.accent[500],
      color: "white",
    },
    secondary: {
      backgroundColor: "transparent",
      color: colors.accent[500],
      border: `1px dashed ${colors.accent[500]}`,
    },
    tertiary: {
      backgroundColor: "transparent",
      color: colors.accent[500],
      border: `1px solid ${colors.accent[500]}`,
    },
  };
 
  const iconColor = speedDialStyle[mode].color;
 
  return (
    <Box
      sx={{
        height: 320,
        transform: "translateZ(0px)",
        flexGrow: 1,
      }}
    >
      <Backdrop open={open} />
      <MUISpeedDial
        ariaLabel="SpeedDial"
        sx={{ position: "absolute", bottom: 16, right: 16 }}
        icon={<Icon name={speedDialIcon} color={iconColor} />}
        onClose={handleClose}
        onOpen={handleOpen}
        open={open}
        FabProps={{
          style: {
            ...speedDialStyle[mode],
            borderRadius: "10px",
            boxShadow: "none",
            ...style,
          },
        }}
      >
        {actions.map((action) => (
          <MUISpeedDialAction
            key={action.name}
            icon={<Icon name={action.icon} color={iconColor} size={20} />}
            tooltipTitle={action.name}
            onClick={action.onClick}
            FabProps={{
              style: {
                ...speedDialStyle[mode],
                borderRadius: "10px",
                boxShadow: "none",
                ...style,
              },
            }}
          />
        ))}
      </MUISpeedDial>
    </Box>
  );
};