ps-frame-father/lib/components/Modal/index.js

An enterprise-class UI design language and React components implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _Button = _interopRequireDefault(require("../Button"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _propTypes = _interopRequireDefault(require("prop-types"));

require("./index.css");

var hiddenCount = 0;
/**
 * Modal Modal组件
 * @param {afterClose} func Modal完全关闭后的回调
 * @param {bodyStyle} object Modal body的样式
 * @param {cancelText} string|ReactNode 取消按钮文字
 * @param {centered} bool 居中展示Modal
 * @param {closable} bool 是否展示右上角的关闭按钮
 * @param {closeIcon} ReactNode 自定义关闭图标
 * @param {destroyOnClose} bool 关闭时销毁Modal里的子元素
 * @param {footer} null|ReactNode 底部内容，当不需要底部默认按钮时，可以设置为footer={null}
 * @param {keyboard} bool 是否支持键盘的esc键退出
 * @param {mask} bool 是否展示遮罩
 * @param {maskclosable} bool 点击蒙层是否允许关闭
 * @param {maskStyle} object 遮罩样式
 * @param {okText} string|ReactNode 确认按钮的文本
 * @param {title} string|ReactNode 标题内容
 * @param {visible} bool Modal是否可见
 * @param {width} string Modal宽度
 * @param {onCancel} func 点击遮罩或者取消按钮，或者键盘esc按键时的回调
 * @param {onOk} func 点击确定的回调
 */

function Modal(props) {
  var afterClose = props.afterClose,
      bodyStyle = props.bodyStyle,
      _props$cancelText = props.cancelText,
      cancelText = _props$cancelText === void 0 ? '取消' : _props$cancelText,
      centered = props.centered,
      _props$closable = props.closable,
      closable = _props$closable === void 0 ? true : _props$closable,
      closeIcon = props.closeIcon,
      destroyOnClose = props.destroyOnClose,
      footer = props.footer,
      keyboard = props.keyboard,
      _props$mask = props.mask,
      mask = _props$mask === void 0 ? true : _props$mask,
      _props$maskclosable = props.maskclosable,
      maskclosable = _props$maskclosable === void 0 ? true : _props$maskclosable,
      maskStyle = props.maskStyle,
      _props$okText = props.okText,
      okText = _props$okText === void 0 ? '确认' : _props$okText,
      title = props.title,
      _props$visible = props.visible,
      visible = _props$visible === void 0 ? false : _props$visible,
      _props$width = props.width,
      width = _props$width === void 0 ? '520px' : _props$width,
      onCancel = props.onCancel,
      onOk = props.onOk,
      children = props.children;

  var _useState = (0, _react.useState)(!visible),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      isHidden = _useState2[0],
      setHidden = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      destroyChild = _useState4[0],
      setDestroyChild = _useState4[1];

  var hiddenModal = function hiddenModal(cb) {
    setHidden(function () {
      cb && cb();
      return true;
    });

    if (destroyOnClose) {
      setDestroyChild(true);
    }

    document.body.style.overflow = 'auto';
  };

  var handleClose = function handleClose() {
    hiddenModal(onCancel);
  };

  var handleOk = function handleOk() {
    hiddenModal(onOk);
  };

  var toggle = function toggle() {
    setHidden(function (prev) {
      return !prev;
    });
  };

  var closeModal = function closeModal(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    if (e && e.keyCode === 27) {
      handleClose();
    }
  };

  (0, _react.useEffect)(function () {
    if (isHidden && hiddenCount) {
      hiddenCount = 0;
      afterClose && afterClose();
    }

    hiddenCount = 1;
  }, [isHidden]);
  (0, _react.useEffect)(function () {
    if (!isHidden) {
      document.body.style.overflow = 'hidden';
    }
  }, [isHidden]);
  (0, _react.useEffect)(function () {
    if (visible) {
      if (destroyOnClose) {
        setDestroyChild(true);
      }
    }
  }, [visible, destroyOnClose]);
  (0, _react.useEffect)(function () {
    keyboard && document.addEventListener('keydown', closeModal, false);
    return function () {
      keyboard && document.removeEventListener('keydown', closeModal, false);
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "xModalWrap",
    style: {
      display: isHidden ? 'none' : 'block'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "xModalContent".concat(centered ? ' xCentered' : ''),
    style: {
      width: width
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "xModalHeader"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "xModalTitle"
  }, title)), closable && /*#__PURE__*/_react.default.createElement("span", {
    className: "xModalCloseBtn",
    onClick: handleClose
  }, closeIcon || /*#__PURE__*/_react.default.createElement(_Icon.default, {
    type: "FaTimes"
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "xModalBody",
    style: bodyStyle
  }, destroyChild ? null : children), footer === null ? null : /*#__PURE__*/_react.default.createElement("div", {
    className: "xModalFooter"
  }, footer ? footer : /*#__PURE__*/_react.default.createElement("div", {
    className: "xFooterBtn"
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    className: "xFooterBtnCancel",
    onClick: handleClose,
    type: "pure"
  }, cancelText), /*#__PURE__*/_react.default.createElement(_Button.default, {
    className: "xFooterBtnOk",
    onClick: handleOk
  }, okText)))), mask && /*#__PURE__*/_react.default.createElement("div", {
    className: "xModalMask",
    style: maskStyle,
    onClick: maskclosable && handleClose
  }));
}

Modal.propTypes = {
  afterClose: _propTypes.default.func,
  bodyStyle: _propTypes.default.object,
  cancelText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
  centered: _propTypes.default.bool,
  closable: _propTypes.default.bool,
  closeIcon: _propTypes.default.element,
  destroyOnClose: _propTypes.default.bool,
  footer: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.object]),
  keyboard: _propTypes.default.bool,
  mask: _propTypes.default.bool,
  maskclosable: _propTypes.default.bool,
  maskStyle: _propTypes.default.object,
  okText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
  visible: _propTypes.default.bool,
  width: _propTypes.default.string,
  onCancel: _propTypes.default.func,
  onOk: _propTypes.default.func
};
var _default = Modal;
exports.default = _default;