rc-dialog/lib/Dialog.js

"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

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

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

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

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

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

var ReactDOM = _interopRequireWildcard(require("react-dom"));

var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));

var _contains = _interopRequireDefault(require("rc-util/lib/Dom/contains"));

var _rcAnimate = _interopRequireDefault(require("rc-animate"));

var _LazyRenderBox = _interopRequireDefault(require("./LazyRenderBox"));

var uuid = 0;
/* eslint react/no-is-mounted:0 */

function getScroll(w, top) {
  var ret = w["page".concat(top ? 'Y' : 'X', "Offset")];
  var method = "scroll".concat(top ? 'Top' : 'Left');

  if (typeof ret !== 'number') {
    var d = w.document;
    ret = d.documentElement[method];

    if (typeof ret !== 'number') {
      ret = d.body[method];
    }
  }

  return ret;
}

function setTransformOrigin(node, value) {
  var style = node.style;
  ['Webkit', 'Moz', 'Ms', 'ms'].forEach(function (prefix) {
    style["".concat(prefix, "TransformOrigin")] = value;
  });
  style.transformOrigin = value;
}

function offset(el) {
  var rect = el.getBoundingClientRect();
  var pos = {
    left: rect.left,
    top: rect.top
  };
  var doc = el.ownerDocument;
  var w = doc.defaultView || doc.parentWindow;
  pos.left += getScroll(w);
  pos.top += getScroll(w, true);
  return pos;
}

var Dialog = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2.default)(Dialog, _React$Component);

  var _super = (0, _createSuper2.default)(Dialog);

  function Dialog(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Dialog);
    _this = _super.call(this, props);
    _this.inTransition = false;

    _this.onAnimateLeave = function () {
      var _this$props = _this.props,
          afterClose = _this$props.afterClose,
          getOpenCount = _this$props.getOpenCount,
          focusTriggerAfterClose = _this$props.focusTriggerAfterClose,
          mask = _this$props.mask; // need demo?
      // https://github.com/react-component/dialog/pull/28

      if (_this.wrap) {
        _this.wrap.style.display = 'none';
      }

      _this.inTransition = false; // 如果没有打开的状态，则清除 effect 和 overflow: hidden;
      // https://github.com/ant-design/ant-design/issues/21539

      if (!getOpenCount()) {
        _this.switchScrollingEffect();
      }

      if (mask && _this.lastOutSideFocusNode && focusTriggerAfterClose) {
        try {
          _this.lastOutSideFocusNode.focus();
        } catch (e) {
          _this.lastOutSideFocusNode = null;
        }

        _this.lastOutSideFocusNode = null;
      }

      if (afterClose) {
        afterClose();
      }
    };

    _this.onDialogMouseDown = function () {
      _this.dialogMouseDown = true;
    };

    _this.onMaskMouseUp = function () {
      if (_this.dialogMouseDown) {
        _this.timeoutId = setTimeout(function () {
          _this.dialogMouseDown = false;
        }, 0);
      }
    };

    _this.onMaskClick = function (e) {
      // android trigger click on open (fastclick??)
      if (Date.now() - _this.openTime < 300) {
        return;
      }

      if (e.target === e.currentTarget && !_this.dialogMouseDown) {
        _this.close(e);
      }
    };

    _this.onKeyDown = function (e) {
      var _this$props2 = _this.props,
          keyboard = _this$props2.keyboard,
          visible = _this$props2.visible;

      if (keyboard && e.keyCode === _KeyCode.default.ESC) {
        e.stopPropagation();

        _this.close(e);

        return;
      } // keep focus inside dialog


      if (visible) {
        if (e.keyCode === _KeyCode.default.TAB) {
          var _document = document,
              activeElement = _document.activeElement;

          if (e.shiftKey) {
            if (activeElement === _this.sentinelStart) {
              _this.sentinelEnd.focus();
            }
          } else if (activeElement === _this.sentinelEnd) {
            _this.sentinelStart.focus();
          }
        }
      }
    };

    _this.getDialogElement = function () {
      var _this$props3 = _this.props,
          closable = _this$props3.closable,
          prefixCls = _this$props3.prefixCls,
          width = _this$props3.width,
          height = _this$props3.height,
          footer = _this$props3.footer,
          title = _this$props3.title,
          closeIcon = _this$props3.closeIcon,
          style = _this$props3.style,
          className = _this$props3.className,
          visible = _this$props3.visible,
          forceRender = _this$props3.forceRender,
          bodyStyle = _this$props3.bodyStyle,
          bodyProps = _this$props3.bodyProps,
          children = _this$props3.children,
          destroyOnClose = _this$props3.destroyOnClose,
          modalRender = _this$props3.modalRender;
      var dest = {};

      if (width !== undefined) {
        dest.width = width;
      }

      if (height !== undefined) {
        dest.height = height;
      }

      var footerNode;

      if (footer) {
        footerNode = React.createElement("div", {
          className: "".concat(prefixCls, "-footer"),
          ref: _this.saveRef('footer')
        }, footer);
      }

      var headerNode;

      if (title) {
        headerNode = React.createElement("div", {
          className: "".concat(prefixCls, "-header"),
          ref: _this.saveRef('header')
        }, React.createElement("div", {
          className: "".concat(prefixCls, "-title"),
          id: _this.titleId
        }, title));
      }

      var closer;

      if (closable) {
        closer = React.createElement("button", {
          type: "button",
          onClick: _this.close,
          "aria-label": "Close",
          className: "".concat(prefixCls, "-close")
        }, closeIcon || React.createElement("span", {
          className: "".concat(prefixCls, "-close-x")
        }));
      }

      var content = React.createElement("div", {
        className: "".concat(prefixCls, "-content")
      }, closer, headerNode, React.createElement("div", Object.assign({
        className: "".concat(prefixCls, "-body"),
        style: bodyStyle,
        ref: _this.saveRef('body')
      }, bodyProps), children), footerNode);
      var styleBox = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), dest);
      var sentinelStyle = {
        width: 0,
        height: 0,
        overflow: 'hidden',
        outline: 'none'
      };

      var transitionName = _this.getTransitionName();

      var dialogElement = React.createElement(_LazyRenderBox.default, {
        key: "dialog-element",
        role: "document",
        ref: _this.saveRef('dialog'),
        style: styleBox,
        className: "".concat(prefixCls, " ").concat(className || ''),
        visible: visible,
        forceRender: forceRender,
        onMouseDown: _this.onDialogMouseDown
      }, React.createElement("div", {
        tabIndex: 0,
        ref: _this.saveRef('sentinelStart'),
        style: sentinelStyle,
        "aria-hidden": "true"
      }), modalRender ? modalRender(content) : content, React.createElement("div", {
        tabIndex: 0,
        ref: _this.saveRef('sentinelEnd'),
        style: sentinelStyle,
        "aria-hidden": "true"
      }));
      return React.createElement(_rcAnimate.default, {
        key: "dialog",
        showProp: "visible",
        onLeave: _this.onAnimateLeave,
        transitionName: transitionName,
        component: "",
        transitionAppear: true
      }, visible || !destroyOnClose ? dialogElement : null);
    };

    _this.getZIndexStyle = function () {
      var style = {};
      var zIndex = _this.props.zIndex;

      if (zIndex !== undefined) {
        style.zIndex = zIndex;
      }

      return style;
    };

    _this.getWrapStyle = function () {
      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.getZIndexStyle()), _this.props.wrapStyle);
    };

    _this.getMaskStyle = function () {
      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.getZIndexStyle()), _this.props.maskStyle);
    };

    _this.getMaskElement = function () {
      var _this$props4 = _this.props,
          mask = _this$props4.mask,
          prefixCls = _this$props4.prefixCls,
          visible = _this$props4.visible,
          maskProps = _this$props4.maskProps;
      var maskElement;

      if (mask) {
        var maskTransition = _this.getMaskTransitionName();

        maskElement = React.createElement(_LazyRenderBox.default, Object.assign({
          style: _this.getMaskStyle(),
          key: "mask",
          className: "".concat(prefixCls, "-mask"),
          hiddenClassName: "".concat(prefixCls, "-mask-hidden"),
          visible: visible
        }, maskProps));

        if (maskTransition) {
          maskElement = React.createElement(_rcAnimate.default, {
            key: "mask",
            showProp: "visible",
            transitionAppear: true,
            component: "",
            transitionName: maskTransition
          }, maskElement);
        }
      }

      return maskElement;
    };

    _this.getMaskTransitionName = function () {
      var _this$props5 = _this.props,
          maskTransitionName = _this$props5.maskTransitionName,
          maskAnimation = _this$props5.maskAnimation,
          prefixCls = _this$props5.prefixCls;
      var transitionName = maskTransitionName;
      var animation = maskAnimation;

      if (!transitionName && animation) {
        transitionName = "".concat(prefixCls, "-").concat(animation);
      }

      return transitionName;
    };

    _this.getTransitionName = function () {
      var _this$props6 = _this.props,
          transitionName = _this$props6.transitionName,
          animation = _this$props6.animation,
          prefixCls = _this$props6.prefixCls;
      var transitionNameResult = transitionName;

      if (!transitionName && animation) {
        transitionNameResult = "".concat(prefixCls, "-").concat(animation);
      }

      return transitionNameResult;
    };

    _this.close = function (e) {
      var onClose = _this.props.onClose;

      if (onClose) {
        onClose(e);
      }
    };

    _this.saveRef = function (name) {
      return function (node) {
        _this[name] = node;
      };
    };

    _this.titleId = "rcDialogTitle".concat(uuid);
    uuid += 1;

    _this.switchScrollingEffect = props.switchScrollingEffect || function () {};

    return _this;
  }

  (0, _createClass2.default)(Dialog, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.componentDidUpdate({}); // if forceRender is true, set element style display to be none;

      if (this.props.forceRender && this.props.visible) {
        return;
      }

      if ((this.props.forceRender || this.props.getContainer === false && !this.props.visible) && this.wrap) {
        this.wrap.style.display = 'none';
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this$props7 = this.props,
          visible = _this$props7.visible,
          mousePosition = _this$props7.mousePosition;

      if (visible) {
        // first show
        if (!prevProps.visible) {
          this.openTime = Date.now();
          this.switchScrollingEffect();
          this.tryFocus(); // eslint-disable-next-line react/no-find-dom-node

          var dialogNode = ReactDOM.findDOMNode(this.dialog);

          if (mousePosition) {
            var elOffset = offset(dialogNode);
            setTransformOrigin(dialogNode, "".concat(mousePosition.x - elOffset.left, "px ").concat(mousePosition.y - elOffset.top, "px"));
          } else {
            setTransformOrigin(dialogNode, '');
          }
        }
      } else if (prevProps.visible) {
        this.inTransition = true;
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _this$props8 = this.props,
          visible = _this$props8.visible,
          getOpenCount = _this$props8.getOpenCount;

      if ((visible || this.inTransition) && !getOpenCount()) {
        this.switchScrollingEffect();
      }

      clearTimeout(this.timeoutId);
    }
  }, {
    key: "tryFocus",
    value: function tryFocus() {
      if (!(0, _contains.default)(this.wrap, document.activeElement)) {
        this.lastOutSideFocusNode = document.activeElement;
        this.sentinelStart.focus();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var props = this.props;
      var prefixCls = props.prefixCls,
          maskClosable = props.maskClosable;
      var style = this.getWrapStyle(); // clear hide display
      // and only set display after async anim, not here for hide

      if (props.visible) {
        style.display = null;
      }

      return React.createElement("div", {
        className: "".concat(prefixCls, "-root")
      }, this.getMaskElement(), React.createElement("div", Object.assign({
        tabIndex: -1,
        onKeyDown: this.onKeyDown,
        className: "".concat(prefixCls, "-wrap ").concat(props.wrapClassName || ''),
        ref: this.saveRef('wrap'),
        onClick: maskClosable ? this.onMaskClick : null,
        onMouseUp: maskClosable ? this.onMaskMouseUp : null,
        role: "dialog",
        "aria-labelledby": props.title ? this.titleId : null,
        style: style
      }, props.wrapProps), this.getDialogElement()));
    }
  }]);
  return Dialog;
}(React.Component);

exports.default = Dialog;
Dialog.defaultProps = {
  className: '',
  mask: true,
  visible: false,
  keyboard: true,
  closable: true,
  maskClosable: true,
  destroyOnClose: false,
  prefixCls: 'rc-dialog',
  focusTriggerAfterClose: true
};