zarm-web/lib/modal/Modal.js

基于 React 的桌面端UI库

"use strict";

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

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

var _reactDom = require("react-dom");

var _classnames3 = _interopRequireDefault(require("classnames"));

var _events = _interopRequireDefault(require("../utils/events"));

var _dom = _interopRequireDefault(require("../utils/dom"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var getSupportedPropertyName = _dom.default.getSupportedPropertyName;
var animationDurationKey = getSupportedPropertyName('animationDuration') || 'animationDuration';

if (animationDurationKey && animationDurationKey !== 'animationDuration' && !animationDurationKey.startsWith('ms')) {
  animationDurationKey = animationDurationKey.charAt(0).toUpperCase() + animationDurationKey.slice(1);
}

function toggleBodyOverflow(show) {
  var scrollBarWidth = window.innerWidth - document.documentElement.offsetWidth;

  if (show === true) {
    document.body.classList.add('ui-modal-body-overflow');

    if (scrollBarWidth > 0) {
      document.body.style.setProperty('padding-right', "".concat(scrollBarWidth, "px"));
    }
  } else {
    document.body.classList.remove('ui-modal-body-overflow');
    document.body.style.setProperty('padding-right', null);
  }
}

var Modal =
/*#__PURE__*/
function (_Component) {
  _inherits(Modal, _Component);

  _createClass(Modal, null, [{
    key: "handleVisbibleList",
    value: function handleVisbibleList(instance, visible, noAnimation) {
      if (visible) {
        var lastIndex = Modal.visibleList.length - 1;

        if (lastIndex >= 0) {
          Modal.visibleList[lastIndex].sleep = true;

          if (noAnimation) {
            Modal.visibleList[lastIndex].setState({
              isPending: true,
              isShow: false
            });
          } else {
            Modal.visibleList[lastIndex].leave();
          }
        }

        Modal.visibleList.push(instance);
      } else {
        Modal.visibleList.pop();
        var index = Modal.visibleList.length;

        if (index > 0) {
          var modal = Modal.visibleList[index - 1];
          var currentVisible = modal.props.visible;

          if (currentVisible) {
            modal.enter();
            modal.sleep = false;
          }
        } // eslint-disable-next-line no-plusplus


        while (index--) {
          var _modal = Modal.visibleList[index];
          var _currentVisible = _modal.props.visible;

          if (!_currentVisible) {
            _modal.sleep = false;
            Modal.visibleList.splice(index, 1);
          }
        }
      }
    }
  }, {
    key: "unmountModalInstance",
    value: function unmountModalInstance(instance, callback) {
      var instanceIndex = Modal.instanceList.findIndex(function (item) {
        return item === instance;
      });

      if (instanceIndex >= 0) {
        Modal.instanceList.splice(instanceIndex, 1);
      }

      if (Modal.instanceList.length === 0) {
        callback();
      }
    }
  }]);

  function Modal(props) {
    var _this;

    _classCallCheck(this, Modal);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Modal).call(this, props));
    _this.sleep = false;
    _this.modal = void 0;
    _this.div = document.createElement('div');
    _this.modalContent = void 0;
    _this.appended = false;

    _this.animationEnd = function () {
      if (_this.state.animationState === 'leave') {
        _this.setState({
          isShow: false,
          isPending: false
        });
      } else {
        _this.setState({
          isShow: true,
          isPending: false
        });
      }
    };

    _this.onKeyDown = function (e) {
      if (_this.state.isShow && _this.state.animationState !== 'leave') {
        if (e.keyCode === 27) {
          _react.default.Children.forEach(_this.props.children, function (elem) {
            if (elem && typeof elem !== 'string' && typeof elem !== 'number') {
              if (elem.props.onClose) {
                elem.props.onClose();
              }
            }
          });
        }
      }
    };

    _this.onKeyPress = function (e) {
      if (document.activeElement === _this.modalContent) {
        if (_this.state.isShow && _this.state.animationState !== 'leave') {
          if (_this.props.onKeyPress) {
            _this.props.onKeyPress(e.nativeEvent);
          }
        }
      }
    };

    _this.onMaskClick = function (e) {
      return e.stopPropagation();
    };

    _this.getModalRef = function (ele) {
      if (ele) {
        _this.modal = ele;
      }
    };

    _this.modalContentRef = function (elem) {
      _this.modalContent = elem;
    };

    _this.state = {
      isShow: false,
      isPending: false,
      animationState: 'leave'
    };
    Modal.instanceList.push(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(Modal, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var visible = this.props.visible;

      if (this.sleep === true) {
        return;
      }

      if (visible) {
        if (!this.appended) {
          document.body.appendChild(this.div);
          this.appended = true;
        }

        this.enter();
        Modal.handleVisbibleList(this, true, true);
      }

      if (this.modal) {
        _events.default.on(this.modal, 'webkitAnimationEnd', this.animationEnd);

        _events.default.on(this.modal, 'animationend', this.animationEnd);
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var visible = this.props.visible;

      if (this.sleep === true) {
        return;
      }

      if (!visible && nextProps.visible) {
        if (!this.appended) {
          document.body.appendChild(this.div);
          this.appended = true;
        }

        Modal.visibleList.forEach(function (item) {
          item.setState({
            isShow: false
          });
        });
        this.enter();
        Modal.handleVisbibleList(this, true);
      } else if (visible && !nextProps.visible) {
        Modal.handleVisbibleList(this, false);
        this.leave();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var isShow = this.state.isShow;

      if (this.modalContent) {
        if (isShow) {
          this.modalContent.focus();
        } else {
          this.modalContent.blur();
        }
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _this2 = this;

      _events.default.off(this.modal, 'webkitAnimationEnd', this.animationEnd);

      _events.default.off(this.modal, 'animationend', this.animationEnd);

      Modal.unmountModalInstance(this, function () {
        toggleBodyOverflow(false);
      });
      setTimeout(function () {
        (0, _reactDom.unmountComponentAtNode)(_this2.div);
        var parentNode = _this2.div.parentNode;

        if (parentNode) {
          // 对已插入document的节点进行删除
          document.body.removeChild(_this2.div);
        }
      });
    }
  }, {
    key: "enter",
    value: function enter() {
      if (Modal.visibleList.length === 0) {
        toggleBodyOverflow(true);
      }

      this.setState({
        isShow: true,
        isPending: true,
        animationState: 'enter'
      });
    }
  }, {
    key: "leave",
    value: function leave() {
      this.setState({
        isShow: true,
        isPending: true,
        animationState: 'leave'
      });

      if (Modal.visibleList.length === 0) {
        toggleBodyOverflow(false);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classnames, _classnames2, _modal2;

      var _this$props = this.props,
          prefixCls = _this$props.prefixCls,
          animationType = _this$props.animationType,
          animationDuration = _this$props.animationDuration,
          width = _this$props.width,
          minWidth = _this$props.minWidth,
          isRadius = _this$props.isRadius,
          isRound = _this$props.isRound,
          className = _this$props.className,
          onMaskClick = _this$props.onMaskClick,
          children = _this$props.children;
      var _this$state = this.state,
          isShow = _this$state.isShow,
          isPending = _this$state.isPending,
          animationState = _this$state.animationState;
      var classes = {
        modal: (0, _classnames3.default)((_classnames = {}, _defineProperty(_classnames, prefixCls, true), _defineProperty(_classnames, "radius", 'radius' in this.props || isRadius), _defineProperty(_classnames, "round", 'round' in this.props || isRound), _defineProperty(_classnames, "fade-".concat(animationState), isPending), _defineProperty(_classnames, className, !!className), _classnames)),
        dialog: (0, _classnames3.default)((_classnames2 = {}, _defineProperty(_classnames2, "".concat(prefixCls, "-dialog"), true), _defineProperty(_classnames2, "".concat(animationType, "-").concat(animationState), true), _classnames2))
      };
      var style = {
        modal: (_modal2 = {}, _defineProperty(_modal2, animationDurationKey, "".concat(animationDuration, "ms")), _defineProperty(_modal2, "position", 'fixed'), _modal2),
        dialog: _defineProperty({
          width: Number(width),
          minWidth: Number(minWidth)
        }, animationDurationKey, "".concat(animationDuration, "ms"))
      };

      if (!isShow) {
        style.modal.display = 'none';
      }

      return (0, _reactDom.createPortal)(_react.default.createElement("div", {
        className: classes.modal,
        style: style.modal,
        onClick: onMaskClick,
        ref: this.getModalRef
      }, _react.default.createElement("div", {
        className: "".concat(prefixCls, "-wrapper")
      }, _react.default.createElement("div", {
        ref: this.modalContentRef,
        tabIndex: -1,
        className: classes.dialog,
        style: style.dialog,
        onClick: this.onMaskClick,
        onKeyDown: this.onKeyDown,
        onKeyPress: this.onKeyPress
      }, children))), this.div);
    }
  }]);

  return Modal;
}(_react.Component); // tslint:disable-next-line:no-namespace
// eslint-disable-next-line no-redeclare


Modal.Header = void 0;
Modal.Body = void 0;
Modal.Footer = void 0;
Modal.defaultProps = {
  prefixCls: 'ui-modal',
  visible: false,
  animationType: 'zoom',
  animationDuration: 300,
  width: 600,
  minWidth: 270,
  isRadius: false,
  isRound: false,
  onMaskClick: function onMaskClick() {}
};
Modal.instanceList = [];
Modal.visibleList = [];
var _default = Modal;
exports.default = _default;