glide-design-system/src/lib/components/snackbar/Snackbar.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, { useState, useEffect } from "react";
import styles from "./snackbar.module.css";
import { Text } from "../text/Text";

export const Snackbar = ({
  open,
  message,
  autoHideDuration = 1500000,
  type,
  position = "top-center",
  onClose,
  className,
  style,
  id,
  name,
}) => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    if (open) {
      const progress = setInterval(() => {
        setProgress((oldProgress) => {
          if (oldProgress > 100) {
            onClose();
            clearInterval(progress);
            return 0;
          } else {
            return oldProgress + 5;
          }
        });
      }, 300);

      return () => {
        clearInterval(progress);
      };
    } else {
      onClose();
    }
  }, [open]);

  const handleClose = () => {
    setProgress(0);
    onClose();
  };

  const getPositionStyles = () => {
    const [v, h] = position.split("-");
    let styles = {};

    if (v === "top") {
      styles.top = "20px";
    } else if (v === "bottom") {
      styles.bottom = "20px";
    } else {
      styles.top = "50%";
      styles.transform = "translateY(-50%)";
    }

    if (h === "left") {
      styles.left = "20px";
    } else if (h === "right") {
      styles.right = "20px";
    } else {
      styles.left = "50%";
      styles.transform += " translateX(-50%)";
    }

    return styles;
  };

  const getColorStyles = () => {
    switch (type) {
      case "success":
        return { color: "rgba(76, 175, 80, 0.99)" };
      case "warning":
        return { color: "rgb(254, 174, 95)" };
      case "info":
        return { color: "rgb(2, 167, 240)" };
      case "error":
        return { color: "#ee4357" };
      default:
        return { color: "#333" };
    }
  };

  const positionStyles = getPositionStyles();
  const colorStyles = getColorStyles();

  const snackbarStyles = {
    position: "fixed",
    flex: 1,
    justifyContent: "center",
    flexDirection: "row",
    alignItems: "center",
    zIndex: 99999,
    borderRadius: "10px",
    padding: "10px",
    ...positionStyles,
    ...colorStyles,
    paddingBottom: "0px",
  };

  const getColor = () => {
    if (type === "success") {
      return "rgba(76, 175, 80, 0.99)";
    } else if (type === "warning") {
      return "rgb(254, 174, 95)";
    } else if (type === "error") {
      return "#ee4357";
    } else if (type === "info") {
      return "rgb(2, 167, 240)";
    } else {
      return "#d7d7d7";
    }
  };

  return (
    <div data-testid={id} id={id}>
      <div
        className={`${styles.snackbar} ${open ? styles.open : ""} ${
          className ? className : ""
        }`}
        style={{
          ...positionStyles,
          ...colorStyles,
          ...style,
          backgroundColor: "white",
        }}
      >
        <div id={id} name={name}>
          <div className={styles.snackbarContent} style={{ padding: "10px" }}>
            {type === "success" ? (
              <span
                style={{ marginRight: "6px" }}
                className="material-symbols-outlined"
              >
                sentiment_satisfied
              </span>
            ) : type === "error" ? (
              <span
                style={{ marginRight: "6px" }}
                className="material-symbols-outlined"
              >
                sentiment_dissatisfied
              </span>
            ) : type === "info" ? (
              <span
                style={{ marginRight: "6px" }}
                className="material-symbols-outlined"
              >
                info
              </span>
            ) : type === "warning" ? (
              <span
                style={{ marginRight: "6px" }}
                className="material-symbols-outlined"
              >
                warning
              </span>
            ) : (
              ""
            )}
            <div style={{ marginRight: 20, marginLeft: 10 }}>
              <Text style={{ fontWeight: "600", fontSize: "18px" }}>
                {type?.charAt(0)?.toUpperCase() + type?.slice(1)}
              </Text>
              <Text style={{ color: "black" }}>{message}</Text>
            </div>
            <span
              style={{
                color: "#d7d7d7",
                fontSize: "18px",
                fontWeight: "bold",
                cursor: "pointer",
              }}
              className="material-symbols-outlined mat-symbol"
              onClick={handleClose}
            >
              close
            </span>
          </div>
          <div
            className={styles.loader}
            style={{ backgroundColor: getColor() }}
          ></div>
        </div>
      </div>
    </div>
  );
};