@geneui/components/Toaster/index.js

The Gene UI components library designed for BI tools

import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import '../dateValidation-67caec66.js';
import { g as guid } from '../guid-8ddf77b3.js';
import 'react-dom';
import Portal from '../Portal/index.js';
import Notification from '../Notification/index.js';
import Alert, { alertTypes } from '../Alert/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../_commonjsHelpers-24198af3.js';
import '../GeneUIProvider/index.js';
import '../hooks/useDeviceType.js';
import '../configs-00612ce0.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../Icon/index.js';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .toaster-holder{max-width:38rem;padding:1.5rem;position:fixed;width:100%;z-index:500}[data-gene-ui-version=\"2.16.5\"] .toaster-holder>*+*{margin:2rem 0 0}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.left-top{left:0;top:var(--header-height,0)}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.left-bottom{bottom:0;left:0}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.right-top{right:0;top:var(--header-height,0)}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.right-bottom{bottom:0;right:0}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.bottom,[data-gene-ui-version=\"2.16.5\"] .toaster-holder.top{left:50%;transform:translate3d(-50%,0,0)}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.top{top:var(--header-height,0)}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.center{left:50%;top:50%;transform:translate3d(-50%,-50%,0)}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.bottom{bottom:0}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.mobile-view{transform:none;width:100%}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.mobile-view:not(.top,.bottom){padding:0}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.mobile-view.center:not(.top,.bottom){padding:0 1.5rem}[data-gene-ui-version=\"2.16.5\"] .toaster-holder:empty{pointer-events:none}";
styleInject(css_248z);

const toasterPositions = ['top', 'bottom', 'center', 'left-top', 'left-bottom', 'right-top', 'right-bottom'];
function Toaster(_ref) {
  let {
    defaultDuration,
    toasterPosition,
    notificationPosition
  } = _ref;
  const [messages, setMessages] = useState([]);
  const [notifications, setNotifications] = useState([]);
  const removeItem = useCallback((key, id) => {
    const setState = key === 'messages' ? setMessages : setNotifications;
    setState(prev => prev.filter(item => item.id !== id));
  }, []);
  const runRenderTask = useCallback((key, duration, option) => {
    const timerId = setTimeout(() => {
      removeItem(key, option.id);
    }, duration || defaultDuration);
    const setState = key === 'messages' ? setMessages : setNotifications;
    setState(prev => [...prev, {
      ...option,
      onClose: e => {
        removeItem(key, option.id);
        clearTimeout(timerId);
        option.onClose && option.onClose(e);
      }
    }]);
  }, [defaultDuration, removeItem]);
  useEffect(() => {
    Toaster.notify = options => {
      const {
        duration,
        ...rest
      } = options;
      const notification = {
        ...rest,
        id: guid()
      };
      runRenderTask('notifications', duration, notification);
    };
    alertTypes.forEach(type => {
      Toaster[type] = options => {
        const {
          duration,
          ...rest
        } = options;
        const message = {
          ...rest,
          type,
          id: guid()
        };
        runRenderTask('messages', duration, message);
      };
    });
  }, [runRenderTask]);
  const createPortal = (Comp, options, className, position) => /*#__PURE__*/React__default.createElement(Portal, {
    isOpen: !!options.length,
    className: classnames(className, position)
  }, options.map(option => {
    const {
      Component,
      id,
      ...rest
    } = option;
    return /*#__PURE__*/React__default.isValidElement(Component) ? /*#__PURE__*/React__default.createElement(Component, _extends({
      key: id
    }, rest)) : /*#__PURE__*/React__default.createElement(Comp, _extends({
      key: id
    }, rest));
  }));
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, createPortal(Alert, messages, 'toaster-holder', toasterPosition), createPortal(Notification, notifications, 'toaster-holder', notificationPosition));
}
Toaster.propTypes = {
  /**
   * Determines how long should component be displayed
   */
  defaultDuration: PropTypes.number,
  /**
   * Determines toaster position on window,
   * On of ['top', 'bottom', 'center', 'left-top', 'left-bottom', 'right-top', 'right-bottom']
   */
  toasterPosition: PropTypes.string,
  /**
   * Determines notification position on window,
   * On of ['top', 'bottom', 'center', 'left-top', 'left-bottom', 'right-top', 'right-bottom']
   */
  notificationPosition: PropTypes.string
};
Toaster.defaultProps = {
  defaultDuration: 4000,
  toasterPosition: 'right-top',
  notificationPosition: 'right-top'
};

export { Toaster as default, toasterPositions };