ultra-design/es/toast/toast-internal.js

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _pt from 'prop-types';
import { useState, useRef, useEffect } from 'react';
import { CSSTransition } from 'react-transition-group';
import { toastWrapperStyles } from './toast-style.js';
import { useMergeProps } from '../utils/mergeProps.js';
import { Close } from '@icon-park/react';
import withStyle from '../utils/withStyle.js';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';

var defaultProps = {
  duration: 2000
};

var ToastInternal = function ToastInternal(p) {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var props = useMergeProps(defaultProps, p);
  var onClose = props.onClose,
      hideClose = props.hideClose,
      duration = props.duration,
      icon = props.icon,
      content = props.content,
      children = props.children;
  var timer = useRef(null);
  useEffect(function () {
    setVisible(true); // clearTimeout when component unmounted

    return function () {
      if (timer.current) {
        clearTimeout(timer.current);
      }
    };
  }, []);
  useEffect(function () {
    if (!visible) return;
    if (!duration) return;
    timer.current = setTimeout(function () {
      setVisible(false);
      onClose === null || onClose === void 0 ? void 0 : onClose();
    }, duration);
  }, [visible]);

  var closehandler = function closehandler() {
    setVisible(false);
    onClose === null || onClose === void 0 ? void 0 : onClose();
  };

  return jsx(CSSTransition, {
    "in": visible,
    unmountOnExit: true,
    timeout: 300,
    classNames: "ultra-toast-wrapper",
    children: jsx("div", {
      css: toastWrapperStyles(props),
      className: "ultra-toast-wrapper",
      children: jsxs("div", {
        className: "ultra-toast",
        children: [icon && jsx("span", {
          className: "ultra-toast__icon",
          children: icon
        }), children || content, !hideClose && jsx(Close, {
          className: "ultra-toast__close",
          onClick: closehandler
        })]
      })
    })
  });
};

ToastInternal.propTypes = {
  content: _pt.node,
  duration: _pt.number,
  onClose: _pt.func,
  top: _pt.string,
  hideClose: _pt.bool,
  icon: _pt.node
};
ToastInternal.displayName = 'UltraToast';
var ToastInternal$1 = withStyle(ToastInternal);

export { ToastInternal$1 as default };