FloatingSpeeddial.tsx

import SpeedDial from "@material-ui/lab/SpeedDial";
import SpeedDialIcon from "@material-ui/lab/SpeedDialIcon";
import SpeedDialAction from "@material-ui/lab/SpeedDialAction";
import { useState } from "react";

const FloatingSpeeddial = ({ actions }) => {
  const [speeddialOpen, setSpeeddialOpen] = useState(false);

  const handleCloseSpeeddial = () => {
    setSpeeddialOpen(false);
  };

  const handleOpenSpeeddial = () => {
    setSpeeddialOpen(true);
  };

  const handleClick = onClick => {
    console.log("handleClick");
    onClick();
    setSpeeddialOpen(false);
  };

  return (
    <SpeedDial
      ariaLabel="Actions"
      icon={<SpeedDialIcon />}
      onClose={handleCloseSpeeddial}
      onOpen={handleOpenSpeeddial}
      open={speeddialOpen}
      // direction={}
      style={{
        position: "fixed",
        right: 20,
        bottom: 20
      }}>
      {actions.map(({ name, icon, onClick }) => (
        <SpeedDialAction
          key={name}
          icon={icon}
          tooltipTitle={name}
          tooltipOpen
          onClick={() => handleClick(onClick)}
        />
      ))}
    </SpeedDial>
  );
};

export default FloatingSpeeddial;