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

An enterprise-class UI design language and React components implementation

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from "react";
import { useState, useEffect } from 'react';
import Button from '../Button';
import Icon from '../Icon';
import PropTypes from 'prop-types';
import "./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 = useState(!visible),
      _useState2 = _slicedToArray(_useState, 2),
      isHidden = _useState2[0],
      setHidden = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_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();
    }
  };

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

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

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