@spaced-out/ui-design-system/lib/components/Toast/ToastContainer.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ToastContainer = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _hooks = require("../../hooks");
var _classify = require("../../utils/classify");
var _ = require("./");
var _ToastContainerModule = _interopRequireDefault(require("./ToastContainer.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
// Type definitions for toast content props

const ADD = 'ADD';
const REMOVE = 'REMOVE';
const reducer = (state, action) => {
  const {
    type,
    data
  } = action;
  if (type === ADD) {
    if (state.filter(i => i.uniqueCode && i.uniqueCode === data.uniqueCode).length) {
      return state;
    }
    return [...state, data];
  } else if (type === REMOVE) {
    return state.filter(i => i.id !== data.id);
  }
  return state;
};
const ToastContainer = () => {
  const [data, dispatch] = (0, _react.useReducer)(reducer, []);
  const toastRef = (0, _react.useRef)(null);
  const {
    loaded
  } = (0, _hooks.useToastPortal)({
    toastRef
  });
  const callback = (actionType, content, options) => {
    if (actionType === ADD) {
      dispatch({
        type: ADD,
        data: {
          content,
          ...options,
          key: `${options.id}`
        }
      });
    }
    if (actionType === REMOVE) {
      dispatch({
        type: REMOVE,
        data: {
          id: options.id
        }
      });
    }
    if (options.autoClose) {
      window.setTimeout(() => {
        dispatch({
          type: REMOVE,
          data: {
            id: options.id
          }
        });
      }, options.timeout);
    }
  };
  (0, _react.useEffect)(() => {
    _.toastManager.subscribe(callback);
  }, []);
  const positionMaintainer = () => {
    const mapper = {};
    data.map(_ref => {
      let {
        position,
        ...rest
      } = _ref;
      if (position) {
        if (!mapper[position]) {
          mapper[position] = [];
        }
        mapper[position].push(rest);
      }
    });
    return mapper;
  };
  const markup = () => {
    const mapper = positionMaintainer();
    return Object.keys(mapper).map(position => {
      const content = mapper[position].map(_ref2 => {
        let {
          content,
          id
        } = _ref2;
        if (/*#__PURE__*/_react.default.isValidElement(content)) {
          return /*#__PURE__*/_react.default.cloneElement(content, {
            key: id,
            onClose: () => dispatch({
              type: REMOVE,
              data: {
                id
              }
            })
          });
        }
        return content;
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classify.classify)(_ToastContainerModule.default.toastContainer, _ToastContainerModule.default[position]),
        children: content
      }, position.toString());
    });
  };
  if (!toastRef.current) {
    return null;
  }
  return loaded ? /*#__PURE__*/(0, _reactDom.createPortal)(markup(), toastRef.current) : null;
};
exports.ToastContainer = ToastContainer;