ultra-design/es/modal/modal.js

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _pt from 'prop-types';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import { useEffect } from 'react';
import { CSSTransition } from 'react-transition-group';
import Overlay from '../overlay/overlay.js';
import { modalWrapperStyles } from './modal-style.js';
import Button from '../button/button.js';
import { Close } from '@icon-park/react';
import { useMergeProps } from '../utils/mergeProps.js';
import clsx from 'clsx';
import { usePortal } from 'winhooks';
import withStyle from '../utils/withStyle.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultProps = {
  visible: false,
  keyboard: true,
  width: '50%'
};

var ModalComponent = function ModalComponent(p) {
  var props = useMergeProps(defaultProps, p);
  var title = props.title,
      visible = props.visible,
      onClose = props.onClose,
      onOk = props.onOk,
      confirmButton = props.confirmButton,
      cancelButton = props.cancelButton,
      keyboard = props.keyboard,
      beforeClose = props.beforeClose,
      hideClose = props.hideClose,
      className = props.className,
      children = props.children;

  var _usePortal = usePortal({
    id: 'ultra-modal'
  }),
      Portal = _usePortal.Portal;

  var _props$locale$Modal = props.locale.Modal,
      cancelText = _props$locale$Modal.cancelText,
      okText = _props$locale$Modal.okText;
  var confirmButtonProps = Object.assign({}, {
    type: 'primary',
    children: okText
  }, confirmButton);
  var cancelBtnProps = Object.assign({}, {
    children: cancelText
  }, cancelButton);

  var closeHandler = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
      var cancelClose;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!beforeClose) {
                _context.next = 7;
                break;
              }

              _context.next = 3;
              return beforeClose();

            case 3:
              _context.t0 = _context.sent;
              cancelClose = _context.t0 === false;

              if (!cancelClose) {
                _context.next = 7;
                break;
              }

              return _context.abrupt("return");

            case 7:
              onClose === null || onClose === void 0 ? void 0 : onClose(e);

            case 8:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function closeHandler(_x) {
      return _ref.apply(this, arguments);
    };
  }();

  useEffect(function () {
    if (!keyboard) return;

    var listenEscKeyDown = function listenEscKeyDown(e) {
      if (e.code === 'Escape') {
        closeHandler(e);
      }
    };

    window.addEventListener('keydown', listenEscKeyDown);
    return function () {
      window.removeEventListener('keydown', listenEscKeyDown);
    };
  }, []);
  return jsxs(Portal, {
    children: [jsx(Overlay, {
      visible: visible,
      timeout: 300
    }), jsx(CSSTransition, {
      "in": visible,
      unmountOnExit: true,
      timeout: 300,
      classNames: "ultra-modal-wrapper",
      children: jsx("div", {
        css: modalWrapperStyles(props),
        className: "ultra-modal-wrapper",
        children: jsxs("div", {
          className: clsx('ultra-modal', className),
          children: [jsxs("div", {
            className: "ultra-modal-header",
            children: [!hideClose && jsx(Close, {
              className: "ultra-modal-header__close",
              onClick: closeHandler
            }), title && jsx("h4", {
              className: "ultra-modal-header__title",
              children: title
            })]
          }), jsx("div", {
            className: "ultra-modal-body",
            children: children
          }), !(confirmButton === null && cancelButton === null) && jsxs("div", {
            className: "ultra-modal-footer",
            children: [cancelButton !== null && jsx(Button, _objectSpread(_objectSpread({
              theme: props.theme
            }, cancelBtnProps), {}, {
              onClick: closeHandler
            })), confirmButton !== null && jsx(Button, _objectSpread(_objectSpread({
              theme: props.theme
            }, confirmButtonProps), {}, {
              onClick: onOk
            }))]
          })]
        })
      })
    })]
  });
};

ModalComponent.propTypes = {
  title: _pt.node,
  visible: _pt.bool.isRequired,
  onClose: _pt.func,
  onOk: _pt.func,
  beforeClose: _pt.func,
  top: _pt.oneOfType([_pt.string, _pt.number]),
  width: _pt.string,
  center: _pt.bool,
  keyboard: _pt.bool,
  hideClose: _pt.bool,
  children: _pt.node,
  className: _pt.string
};
ModalComponent.displayName = 'UltraModal';
var Modal = withStyle(ModalComponent);
var ModalComponent$1 = Modal;

export { ModalComponent$1 as default };