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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _pt = require('prop-types');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var toastStyle = require('./toast-style.js');
var mergeProps = require('../utils/mergeProps.js');
var react = require('@icon-park/react');
var withStyle = require('../utils/withStyle.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _pt__default = /*#__PURE__*/_interopDefaultLegacy(_pt);

var defaultProps = {
  duration: 2000
};

var ToastInternal = function ToastInternal(p) {
  var _useState = React.useState(false),
      _useState2 = _slicedToArray__default["default"](_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

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

    return function () {
      if (timer.current) {
        clearTimeout(timer.current);
      }
    };
  }, []);
  React.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 jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
    "in": visible,
    unmountOnExit: true,
    timeout: 300,
    classNames: "ultra-toast-wrapper",
    children: jsxRuntime.jsx("div", {
      css: toastStyle.toastWrapperStyles(props),
      className: "ultra-toast-wrapper",
      children: jsxRuntime.jsxs("div", {
        className: "ultra-toast",
        children: [icon && jsxRuntime.jsx("span", {
          className: "ultra-toast__icon",
          children: icon
        }), children || content, !hideClose && jsxRuntime.jsx(react.Close, {
          className: "ultra-toast__close",
          onClick: closehandler
        })]
      })
    })
  });
};

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

exports["default"] = ToastInternal$1;