ultra-design/lib/modal/modal.js

'use strict';

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

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var _pt = require('prop-types');
var _regeneratorRuntime = require('@babel/runtime/regenerator');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var overlay = require('../overlay/overlay.js');
var modalStyle = require('./modal-style.js');
var button = require('../button/button.js');
var react = require('@icon-park/react');
var mergeProps = require('../utils/mergeProps.js');
var clsx = require('clsx');
var winhooks = require('winhooks');
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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
var _pt__default = /*#__PURE__*/_interopDefaultLegacy(_pt);
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);

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__default["default"](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 = mergeProps.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 = winhooks.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__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(e) {
      var cancelClose;
      return _regeneratorRuntime__default["default"].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);
    };
  }();

  React.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 jsxRuntime.jsxs(Portal, {
    children: [jsxRuntime.jsx(overlay["default"], {
      visible: visible,
      timeout: 300
    }), jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
      "in": visible,
      unmountOnExit: true,
      timeout: 300,
      classNames: "ultra-modal-wrapper",
      children: jsxRuntime.jsx("div", {
        css: modalStyle.modalWrapperStyles(props),
        className: "ultra-modal-wrapper",
        children: jsxRuntime.jsxs("div", {
          className: clsx__default["default"]('ultra-modal', className),
          children: [jsxRuntime.jsxs("div", {
            className: "ultra-modal-header",
            children: [!hideClose && jsxRuntime.jsx(react.Close, {
              className: "ultra-modal-header__close",
              onClick: closeHandler
            }), title && jsxRuntime.jsx("h4", {
              className: "ultra-modal-header__title",
              children: title
            })]
          }), jsxRuntime.jsx("div", {
            className: "ultra-modal-body",
            children: children
          }), !(confirmButton === null && cancelButton === null) && jsxRuntime.jsxs("div", {
            className: "ultra-modal-footer",
            children: [cancelButton !== null && jsxRuntime.jsx(button["default"], _objectSpread(_objectSpread({
              theme: props.theme
            }, cancelBtnProps), {}, {
              onClick: closeHandler
            })), confirmButton !== null && jsxRuntime.jsx(button["default"], _objectSpread(_objectSpread({
              theme: props.theme
            }, confirmButtonProps), {}, {
              onClick: onOk
            }))]
          })]
        })
      })
    })]
  });
};

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

exports["default"] = ModalComponent$1;