# 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>
      );
    };