@txdfe/at/lib/overlay/overlay.js

一个设计体系组件库

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

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

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

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

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

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

var _util = require("../util");

var _manager = _interopRequireDefault(require("./manager"));

var _gateway = _interopRequireDefault(require("./gateway"));

var _position = _interopRequireDefault(require("./position"));

var _findNode = _interopRequireDefault(require("./utils/find-node"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

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

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); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); 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); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

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

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

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

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; }

var saveLastFocusNode = _util.focus.saveLastFocusNode,
    getFocusNodeList = _util.focus.getFocusNodeList,
    backLastFocusNode = _util.focus.backLastFocusNode;
var makeChain = _util.func.makeChain,
    noop = _util.func.noop;

var isScrollDisplay = function isScrollDisplay(element) {
  try {
    var scrollbarStyle = window.getComputedStyle(element, '::-webkit-scrollbar');
    return !scrollbarStyle || scrollbarStyle.getPropertyValue('display') !== 'none';
  } catch (e) {// ignore error for firefox
  }

  return true;
};

var hasScroll = function hasScroll() {
  var doc = document.documentElement;
  return doc.scrollHeight > doc.clientHeight && _util.dom.scrollbar().width > 0 && isScrollDisplay(document.documentElement) && isScrollDisplay(document.body);
};

var prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];

var getStyleProperty = function getStyleProperty(node, name) {
  var style = window.getComputedStyle(node);
  var ret = '';

  for (var i = 0; i < prefixes.length; i++) {
    ret = style.getPropertyValue(prefixes[i] + name);

    if (ret) {
      break;
    }
  }

  return ret;
};

var modals = [];
var bodyOverflowY;
var bodyPaddingRight;
/**
 * Overlay
 * */

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

  var _super = _createSuper(Overlay);

  function Overlay(_props) {
    var _this;

    _classCallCheck(this, Overlay);

    _this = _super.call(this, _props);

    _defineProperty(_assertThisInitialized(_this), "getAnimation", function (props) {
      if (props.animation === false) {
        return false;
      }

      if (props.animation) {
        return props.animation;
      }

      return _this.getAnimationByAlign(props.align);
    });

    _defineProperty(_assertThisInitialized(_this), "getAnimationByAlign", function (align) {
      switch (align[0]) {
        case 't':
          return {
            "in": 'fadeInDown',
            out: 'fadeOutUp'
          };

        case 'b':
          return {
            "in": 'fadeInUp',
            out: 'fadeOutDown'
          };

        default:
          return {
            "in": 'fadeInDown',
            out: 'fadeOutUp'
          };
      }
    });

    _defineProperty(_assertThisInitialized(_this), "addAnimationEvents", function () {
      setTimeout(function () {
        var node = _this.getContentNode();

        if (node) {
          var id = (0, _util.guid)();
          _this._animation = _util.events.on(node, _util.support.animation.end, _this.handleAnimateEnd.bind(_assertThisInitialized(_this), id));
          var animationDelay = parseFloat(getStyleProperty(node, 'animation-delay')) || 0;
          var animationDuration = parseFloat(getStyleProperty(node, 'animation-duration')) || 0;
          var time = animationDelay + animationDuration;

          if (time) {
            _this.timeoutMap[id] = setTimeout(function () {
              _this.handleAnimateEnd(id);
            }, time * 1000 + 200);
          }
        }
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handlePosition", function (config) {
      var align = config.align.join(' ');

      if (!('animation' in _this.props) && _this.props.needAdjust && _this.lastAlign !== align) {
        _this.setState({
          animation: _this.getAnimationByAlign(align)
        });
      }

      _this.lastAlign = align;

      _this.props.onPosition(config);
    });

    _defineProperty(_assertThisInitialized(_this), "handleAnimateEnd", function (id) {
      if (_this.timeoutMap[id]) {
        clearTimeout(_this.timeoutMap[id]);
      }

      delete _this.timeoutMap[id];

      if (_this._animation) {
        _this._animation.off();

        _this._animation = null;
      }

      if (!_this._isMounted) {
        return;
      }

      if (_this.state.status === 'leaving') {
        _this.setState({
          visible: false,
          status: 'none'
        });

        _this.onLeaved();
      } else if (_this.state.status === 'entering') {
        _this.setState({
          status: 'none'
        });

        _this.onEntered();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "enter", function () {
      _this.setState({
        visible: true,
        status: 'entering'
      }, function () {
        // NOTE: setState callback (second argument) now fires immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.
        setTimeout(function () {
          if (!_this._isDestroyed) {
            _this.onEntering();
          }
        });
      });
    });

    _defineProperty(_assertThisInitialized(_this), "leave", function () {
      _this.setState({
        status: 'leaving'
      });

      _this.onLeaving();
    });

    _defineProperty(_assertThisInitialized(_this), "onEntering", function () {
      var wrapperNode = _this.getWrapperNode();

      _util.dom.addClass(wrapperNode, 'opened');

      _this.props.onOpen();
    });

    _defineProperty(_assertThisInitialized(_this), "onLeaving", function () {
      var wrapperNode = _this.getWrapperNode();

      _util.dom.removeClass(wrapperNode, 'opened');

      _this.props.onClose();
    });

    _defineProperty(_assertThisInitialized(_this), "onEntered", function () {
      _manager["default"].addOverlay(_assertThisInitialized(_this));

      _this.setFocusNode();

      _this.props.afterOpen();
    });

    _defineProperty(_assertThisInitialized(_this), "onLeaved", function () {
      _manager["default"].removeOverlay(_assertThisInitialized(_this));

      _this.setFocusNode();

      _this.props.afterClose();
    });

    _defineProperty(_assertThisInitialized(_this), "beforeOpen", function () {
      if (_this.props.disableScroll) {
        if (modals.length === 0) {
          var style = {
            overflowY: 'hidden'
          };
          var _document = document,
              body = _document.body;
          bodyOverflowY = body.style.overflowY;

          if (hasScroll()) {
            bodyPaddingRight = body.style.paddingRight;
            style.paddingRight = "".concat(_util.dom.getStyle(body, 'paddingRight') + _util.dom.scrollbar().width, "px");
          }

          _util.dom.setStyle(body, style);
        }

        modals.push(_assertThisInitialized(_this));
      }
    });

    _defineProperty(_assertThisInitialized(_this), "beforeClose", function () {
      if (_this.props.disableScroll) {
        var index = modals.indexOf(_assertThisInitialized(_this));

        if (index > -1) {
          if (modals.length === 1) {
            var style = {
              overflowY: bodyOverflowY
            };

            if (hasScroll()) {
              style.paddingRight = bodyPaddingRight;
            }

            _util.dom.setStyle(document.body, style);

            bodyOverflowY = undefined;
            bodyPaddingRight = undefined;
          }

          modals.splice(index, 1);
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "setFocusNode", function () {
      if (!_this.props.autoFocus) {
        return;
      }

      if (_this.state.visible && !_this._hasFocused) {
        saveLastFocusNode(); // 这个时候很可能上一个弹层的关闭事件还未触发，导致焦点已经回到触发的元素
        // 这里延时处理一下，延时的时间为 document.click 捕获触发的延时时间

        _this.focusTimeout = setTimeout(function () {
          var node = _this.getContentNode();

          if (node) {
            var focusNodeList = getFocusNodeList(node);

            if (focusNodeList.length) {
              focusNodeList[0].focus();
            }

            _this._hasFocused = true;
          }
        }, 100);
      } else if (!_this.state.visible && _this._hasFocused) {
        backLastFocusNode();
        _this._hasFocused = false;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "getContent", function () {
      return _this.contentRef;
    });

    _defineProperty(_assertThisInitialized(_this), "getContentNode", function () {
      return (0, _reactDom.findDOMNode)(_this.contentRef);
    });

    _defineProperty(_assertThisInitialized(_this), "getWrapperNode", function () {
      return _this.gatewayRef ? _this.gatewayRef.getChildNode() : null;
    });

    _defineProperty(_assertThisInitialized(_this), "addDocumentEvents", function () {
      if (_this.props.canCloseByEsc) {
        _this._keydownEvents = _util.events.on(document, 'keydown', _this.handleDocumentKeyDown);
      }

      if (_this.props.canCloseByOutSideClick) {
        _this._clickEvents = _util.events.on(document, 'click', _this.handleDocumentClick);
        _this._touchEvents = _util.events.on(document, 'touchend', _this.handleDocumentClick);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "removeDocumentEvents", function () {
      if (_this._keydownEvents) {
        _this._keydownEvents.off();

        _this._keydownEvents = null;
      }

      if (_this._clickEvents) {
        _this._clickEvents.off();

        _this._clickEvents = null;
      }

      if (_this._touchEvents) {
        _this._touchEvents.off();

        _this._touchEvents = null;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleDocumentKeyDown", function (e) {
      if (_this.state.visible && e.keyCode === _util.KEYCODE.ESC && _manager["default"].isCurrentOverlay(_assertThisInitialized(_this))) {
        _this.props.onRequestClose('keyboard', e);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleDocumentClick", function (e) {
      if (_this.state.visible) {
        var safeNode = _this.props.safeNode;
        var safeNodes = Array.isArray(safeNode) ? _toConsumableArray(safeNode) : [safeNode];
        safeNodes.unshift(function () {
          return _this.getWrapperNode();
        });

        for (var i = 0; i < safeNodes.length; i++) {
          var node = (0, _findNode["default"])(safeNodes[i], _this.props); // HACK: 如果触发点击的节点是弹层内部的节点，并且在被点击后立即销毁，那么此时无法使用 node.contains(e.target)
          // 来判断此时点击的节点是否是弹层内部的节点，额外判断

          if (node && (node === e.target || node.contains && node.contains(e.target) || e.target !== document && !document.documentElement.contains(e.target))) {
            return;
          }
        }

        _this.props.onRequestClose('docClick', e);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleMaskClick", function (e) {
      if (_this.props.canCloseByMask) {
        _this.props.onRequestClose('maskClick', e);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "saveContentRef", function (ref) {
      _this.contentRef = ref;
    });

    _defineProperty(_assertThisInitialized(_this), "saveGatewayRef", function (ref) {
      _this.gatewayRef = ref;
    });

    _defineProperty(_assertThisInitialized(_this), "getInstance", function () {
      return _assertThisInitialized(_this);
    });

    _this.state = {
      visible: _props.visible,
      status: 'none',
      animation: _this.getAnimation(_props)
    };
    _this.lastAlign = _props.align;
    _this.timeoutMap = {};
    return _this;
  }

  _createClass(Overlay, [{
    key: "UNSAFE_componentWillMount",
    value: function UNSAFE_componentWillMount() {
      if (this.props.visible) {
        this.beforeOpen();
        this.props.beforeOpen();

        if (this.state.animation && _util.support.animation) {
          this.enter();
        }
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.componentDidUpdate({
        visible: false
      });
      this.addDocumentEvents();

      _manager["default"].addOverlay(this);

      if (this.state.visible) {
        this._isMounted = true;
      }
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (!this._isMounted && nextProps.visible) {
        this._isMounted = true;
      }

      var willOpen = !this.props.visible && nextProps.visible;
      var willClose = this.props.visible && !nextProps.visible;

      if (willOpen) {
        this.beforeOpen();
        nextProps.beforeOpen();
      } else if (willClose) {
        this.beforeClose();
        nextProps.beforeClose();
      }

      if (nextProps.animation || nextProps.animation === false) {
        this.setState({
          animation: nextProps.animation
        });
      }

      if (nextProps.animation !== false && _util.support.animation) {
        if (willOpen) {
          this.enter();
        } else if (willClose) {
          this.leave();
        }
      } else {
        this.setState({
          visible: nextProps.visible
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this2 = this;

      var open = !prevProps.visible && this.props.visible;
      var close = prevProps.visible && !this.props.visible;

      if (this.state.animation && _util.support.animation) {
        if (open || close) {
          this.addAnimationEvents();
        }
      } else {
        var wrapperNode = this.getWrapperNode();

        if (open) {
          setTimeout(function () {
            _this2.props.onOpen();

            _this2.props.afterOpen();

            _util.dom.addClass(wrapperNode, 'opened');

            _manager["default"].addOverlay(_this2);
          });
        } else if (close) {
          this.props.onClose();
          this.props.afterClose();

          _util.dom.removeClass(wrapperNode, 'opened');

          _manager["default"].removeOverlay(this);
        }

        this.setFocusNode();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this._isDestroyed = true;
      this._isMounted = false;

      _manager["default"].removeOverlay(this);

      this.removeDocumentEvents();

      if (this.focusTimeout) {
        clearTimeout(this.focusTimeout);
      }

      if (this._animation) {
        this._animation.off();

        this._animation = null;
      }

      this.beforeClose();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          role = _this$props.role,
          prefix = _this$props.prefix,
          className = _this$props.className,
          style = _this$props.style,
          propChildren = _this$props.children,
          needListenResize = _this$props.needListenResize,
          needListenScroll = _this$props.needListenScroll,
          target = _this$props.target,
          align = _this$props.align,
          offset = _this$props.offset,
          container = _this$props.container,
          hasMask = _this$props.hasMask,
          maskStyle = _this$props.maskStyle,
          needAdjust = _this$props.needAdjust,
          beforePosition = _this$props.beforePosition,
          wrapperStyle = _this$props.wrapperStyle,
          rtl = _this$props.rtl,
          propShouldUpdatePosition = _this$props.shouldUpdatePosition,
          cache = _this$props.cache,
          wrapperClassName = _this$props.wrapperClassName,
          onMaskMouseEnter = _this$props.onMaskMouseEnter,
          onMaskMouseLeave = _this$props.onMaskMouseLeave;
      var _this$state = this.state,
          stateVisible = _this$state.visible,
          status = _this$state.status,
          animation = _this$state.animation;
      var children = stateVisible || cache ? propChildren : null;

      if (children) {
        var _classnames;

        var child = _react.Children.only(children); // if chlild is a functional component wrap in a component to allow a ref to be set


        if (typeof child.type === 'function' && !(child.type.prototype instanceof _react.Component)) {
          child = /*#__PURE__*/_react["default"].createElement("div", {
            role: "none"
          }, child);
        }

        var childClazz = (0, _classnames2["default"])((_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "overlay-inner"), true), _defineProperty(_classnames, animation["in"], status === 'entering'), _defineProperty(_classnames, animation.out, status === 'leaving'), _defineProperty(_classnames, child.props.className, !!child.props.className), _defineProperty(_classnames, className, !!className), _classnames));

        if (typeof child.ref === 'string') {
          throw new Error('Can not set ref by string in Overlay, use function instead.');
        }

        children = /*#__PURE__*/_react["default"].cloneElement(child, {
          className: childClazz,
          style: _objectSpread(_objectSpread({}, child.props.style), style),
          ref: makeChain(this.saveContentRef, child.ref),
          'aria-hidden': !stateVisible && cache && this._isMounted,
          onClick: this.props.onClick
        });

        if (align) {
          var shouldUpdatePosition = status === 'leaving' ? false : propShouldUpdatePosition; // role用于区分是否是tooltip，对于tooltip定位机制有特殊处理

          children = /*#__PURE__*/_react["default"].createElement(_position["default"], {
            role: role,
            container: container,
            visible: stateVisible,
            children: children,
            target: target,
            align: align,
            offset: offset,
            needListenResize: needListenResize,
            needListenScroll: needListenScroll,
            needAdjust: needAdjust,
            beforePosition: beforePosition,
            onPosition: this.handlePosition,
            shouldUpdatePosition: shouldUpdatePosition,
            rtl: rtl
          });
        }

        var wrapperClazz = (0, _classnames2["default"])(["".concat(prefix, "overlay-wrapper"), wrapperClassName]);

        var newWrapperStyle = _extends({}, {
          display: stateVisible ? '' : 'none'
        }, wrapperStyle);

        children = /*#__PURE__*/_react["default"].createElement("div", {
          className: wrapperClazz,
          style: newWrapperStyle,
          dir: rtl ? 'rtl' : undefined
        }, hasMask ? /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefix, "overlay-backdrop"),
          onClick: this.handleMaskClick,
          onMouseEnter: onMaskMouseEnter,
          onMouseLeave: onMaskMouseLeave,
          dir: rtl ? 'rtl' : undefined,
          style: maskStyle
        }) : null, children);
      }

      return /*#__PURE__*/_react["default"].createElement(_gateway["default"], {
        container: container,
        target: target,
        children: children,
        ref: this.saveGatewayRef
      });
    }
  }]);

  return Overlay;
}(_react.Component);

exports["default"] = Overlay;

_defineProperty(Overlay, "propTypes", {
  role: _propTypes["default"].string,
  prefix: _propTypes["default"].string,
  pure: _propTypes["default"].bool,
  rtl: _propTypes["default"].bool,
  className: _propTypes["default"].string,
  style: _propTypes["default"].object,

  /**
   * 弹层内容
   */
  children: _propTypes["default"].any,

  /**
   * 是否显示弹层
   */
  visible: _propTypes["default"].bool,

  /**
   * 弹层请求关闭时触发事件的回调函数
   * @param {String} type 弹层关闭的来源
   * @param {Object} e DOM 事件
   */
  onRequestClose: _propTypes["default"].func,

  /**
   * 是否监听resize事件
   */
  needListenResize: _propTypes["default"].bool,

  /**
   * 是否监听scroll事件
   */
  needListenScroll: _propTypes["default"].bool,

  /**
   * 弹层定位的参照元素
   */
  target: _propTypes["default"].any,

  /**
   * 弹层相对于参照元素的定位, 详见开发指南的[定位部分](#定位)
   */
  align: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]),

  /**
   * 弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量
   * e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px
   */
  offset: _propTypes["default"].array,

  /**
   * 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点
   */
  container: _propTypes["default"].any,

  /**
   * 是否显示遮罩
   */
  hasMask: _propTypes["default"].bool,

  /**
   * 遮罩样式
   */
  maskStyle: _propTypes["default"].object,

  /**
   * 是否支持 esc 按键关闭弹层
   */
  canCloseByEsc: _propTypes["default"].bool,

  /**
   * 点击弹层外的区域是否关闭弹层，不显示遮罩时生效
   */
  canCloseByOutSideClick: _propTypes["default"].bool,

  /**
   * 点击遮罩区域是否关闭弹层，显示遮罩时生效
   */
  canCloseByMask: _propTypes["default"].bool,

  /**
   * 弹层打开前触发事件的回调函数
   */
  beforeOpen: _propTypes["default"].func,

  /**
   * 弹层打开时触发事件的回调函数
   */
  onOpen: _propTypes["default"].func,

  /**
   * 弹层打开后触发事件的回调函数, 如果有动画，则在动画结束后触发
   */
  afterOpen: _propTypes["default"].func,

  /**
   * 弹层关闭前触发事件的回调函数
   */
  beforeClose: _propTypes["default"].func,

  /**
   * 弹层关闭时触发事件的回调函数
   */
  onClose: _propTypes["default"].func,

  /**
   * 弹层关闭后触发事件的回调函数, 如果有动画，则在动画结束后触发
   */
  afterClose: _propTypes["default"].func,

  /**
   * 弹层定位完成前触发的事件
   */
  beforePosition: _propTypes["default"].func,

  /**
   * 弹层定位完成时触发的事件
   * @param {Object} config 定位的参数
   * @param {Array} config.align 对齐方式，如 ['cc', 'cc']（如果开启 needAdjust，可能和预先设置的 align 不同）
   * @param {Number} config.top 距离视口顶部距离
   * @param {Number} config.left 距离视口左侧距离
   * @param {Object} node 定位参照的容器节点
   */
  onPosition: _propTypes["default"].func,

  /**
   * 是否在每次弹层重新渲染后强制更新定位信息，一般用于弹层内容区域大小发生变化时，仍需保持原来的定位方式
   */
  shouldUpdatePosition: _propTypes["default"].bool,

  /**
   * 弹层打开时是否让其中的元素自动获取焦点
   */
  autoFocus: _propTypes["default"].bool,

  /**
   * 当弹层由于页面滚动等情况不在可视区域时，是否自动调整定位以出现在可视区域
   */
  needAdjust: _propTypes["default"].bool,

  /**
   * 是否禁用页面滚动
   */
  disableScroll: _propTypes["default"].bool,

  /**
   * 隐藏时是否保留子节点
   */
  cache: _propTypes["default"].bool,

  /**
   * 安全节点，当点击 document 的时候，如果包含该节点则不会关闭弹层，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组
   */
  safeNode: _propTypes["default"].any,

  /**
   * 弹层的根节点的样式类
   */
  wrapperClassName: _propTypes["default"].string,

  /**
   * 弹层的根节点的内联样式
   */
  wrapperStyle: _propTypes["default"].object,

  /**
   * 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名
   * @default { in: 'expandInDown', out: 'expandOutUp' }
   */
  animation: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].bool]),
  onMaskMouseEnter: _propTypes["default"].func,
  onMaskMouseLeave: _propTypes["default"].func,
  onClick: _propTypes["default"].func
});

_defineProperty(Overlay, "defaultProps", {
  prefix: 'next-',
  pure: false,
  visible: false,
  needListenResize: true,
  needListenScroll: true,
  onRequestClose: noop,
  target: _position["default"].VIEWPORT,
  align: 'tl bl',
  offset: [0, 4],
  hasMask: false,
  canCloseByEsc: true,
  canCloseByOutSideClick: true,
  canCloseByMask: true,
  beforeOpen: noop,
  onOpen: noop,
  afterOpen: noop,
  beforeClose: noop,
  onClose: noop,
  afterClose: noop,
  beforePosition: noop,
  onPosition: noop,
  onMaskMouseEnter: noop,
  onMaskMouseLeave: noop,
  shouldUpdatePosition: false,
  autoFocus: false,
  needAdjust: true,
  disableScroll: false,
  cache: false,
  onClick: function onClick(e) {
    return e.stopPropagation();
  }
});