glide-design-system/dist/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.

"use strict";

require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Snackbar = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _snackbarModule = _interopRequireDefault(require("./snackbar.module.css"));
var _Text = require("../text/Text");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
const Snackbar = _ref => {
  var _type$charAt;
  let {
    open,
    message,
    autoHideDuration = 1500000,
    type,
    position = "top-center",
    onClose,
    className,
    style,
    id,
    name
  } = _ref;
  const [progress, setProgress] = (0, _react.useState)(0);
  (0, _react.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 = _objectSpread(_objectSpread(_objectSpread({
    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 /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": id,
    id: id
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(_snackbarModule.default.snackbar, " ").concat(open ? _snackbarModule.default.open : "", " ").concat(className ? className : ""),
    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, positionStyles), colorStyles), style), {}, {
      backgroundColor: "white"
    })
  }, /*#__PURE__*/_react.default.createElement("div", {
    id: id,
    name: name
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _snackbarModule.default.snackbarContent,
    style: {
      padding: "10px"
    }
  }, type === "success" ? /*#__PURE__*/_react.default.createElement("span", {
    style: {
      marginRight: "6px"
    },
    className: "material-symbols-outlined"
  }, "sentiment_satisfied") : type === "error" ? /*#__PURE__*/_react.default.createElement("span", {
    style: {
      marginRight: "6px"
    },
    className: "material-symbols-outlined"
  }, "sentiment_dissatisfied") : type === "info" ? /*#__PURE__*/_react.default.createElement("span", {
    style: {
      marginRight: "6px"
    },
    className: "material-symbols-outlined"
  }, "info") : type === "warning" ? /*#__PURE__*/_react.default.createElement("span", {
    style: {
      marginRight: "6px"
    },
    className: "material-symbols-outlined"
  }, "warning") : "", /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: 20,
      marginLeft: 10
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
    style: {
      fontWeight: "600",
      fontSize: "18px"
    }
  }, (type === null || type === void 0 || (_type$charAt = type.charAt(0)) === null || _type$charAt === void 0 ? void 0 : _type$charAt.toUpperCase()) + (type === null || type === void 0 ? void 0 : type.slice(1))), /*#__PURE__*/_react.default.createElement(_Text.Text, {
    style: {
      color: "black"
    }
  }, message)), /*#__PURE__*/_react.default.createElement("span", {
    style: {
      color: "#d7d7d7",
      fontSize: "18px",
      fontWeight: "bold",
      cursor: "pointer"
    },
    className: "material-symbols-outlined mat-symbol",
    onClick: handleClose
  }, "close")), /*#__PURE__*/_react.default.createElement("div", {
    className: _snackbarModule.default.loader,
    style: {
      backgroundColor: getColor()
    }
  }))));
};
exports.Snackbar = Snackbar;