glide-design-system/src/lib/components/speedDialButton/SpeedDialButton.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useEffect, useRef } from "react";
import styles from "./speedDial.module.css";

const SpeedDialButton = ({
  containerClass,
  className,
  style,
  containerStyle,
  icon,
  children,
  contentStyle,
  contentClassName,
  flexDirection,
  ...props
}) => {
  const combinedStyle = {
    flexDirection: flexDirection ? flexDirection : "column-reverse",
    ...contentStyle,
  };

  const speedDialContentRef = useRef(null);
  const speedDialBtnRef = useRef(null);

  useEffect(() => {
    const element1 = speedDialContentRef.current;
    const element2 = speedDialBtnRef.current;

    const handleMouseOver = () => {
      element1.classList.add(styles.showSpeedDialContent);
      element2.classList.add(styles.showSpeedDialBtn);
    };

    const handleMouseOut = () => {
      element1.classList.remove(styles.showSpeedDialContent);
      element2.classList.remove(styles.showSpeedDialBtn);
    };

    const handleClick = () => {
      element1.classList.toggle(styles.showSpeedDialContent);
      element2.classList.toggle(styles.showSpeedDialBtn);
    };

    element2.addEventListener("mouseover", handleMouseOver);
    element2.addEventListener("mouseout", handleMouseOut);
    element2.addEventListener("click", handleClick);
    element1.addEventListener("mouseover", handleMouseOver);
    element1.addEventListener("mouseout", handleMouseOut);

    return () => {
      element2.removeEventListener("mouseover", handleMouseOver);
      element2.removeEventListener("mouseout", handleMouseOut);
      element2.removeEventListener("click", handleClick);
      element1.removeEventListener("mouseover", handleMouseOver);
      element1.removeEventListener("mouseout", handleMouseOut);
    };
  }, []);

  return (
    <div
      style={containerStyle}
      className={`${styles.speedDialContainer} ${
        containerClass && containerClass
      }`}
    >
      <div
        ref={speedDialBtnRef}
        style={style}
        className={`${styles.speedDialBtn} ${className && className}`}
        {...props}
      >
        {icon ? icon : <span className="material-symbols-outlined">add</span>}
      </div>
      <div
        ref={speedDialContentRef}
        style={combinedStyle}
        className={`${styles.speedDialContent} ${
          contentClassName && contentClassName
        }`}
      >
        {children}
      </div>
    </div>
  );
};

export default SpeedDialButton;