choerodon-ui/lib/trigger/Popup.js

An enterprise-class UI design language and React-based implementation

"use strict";

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

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

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

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

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

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

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

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

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _tslib = require("tslib");

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

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

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

var _mobxReact = require("mobx-react");

var _omit = _interopRequireDefault(require("lodash/omit"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _isElement = _interopRequireDefault(require("lodash/isElement"));

var _ViewComponent2 = _interopRequireDefault(require("../../pro/lib/core/ViewComponent"));

var _autobind = _interopRequireDefault(require("../../pro/lib/_util/autobind"));

var _focusable = require("../../pro/lib/_util/focusable");

var _DocumentUtils = require("../../pro/lib/_util/DocumentUtils");

var _align = _interopRequireDefault(require("../align"));

var _configure = require("../configure");

var _animate = _interopRequireDefault(require("../animate"));

var _PopupInner = _interopRequireDefault(require("./PopupInner"));

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var Popup_1;

/**
 * 记录ID生成器
 */
var PopupKeyGen =
/*#__PURE__*/
_regenerator["default"].mark(function _callee(start) {
  return _regenerator["default"].wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          if (!true) {
            _context.next = 5;
            break;
          }

          _context.next = 3;
          return "popup-key-".concat(start++);

        case 3:
          _context.next = 0;
          break;

        case 5:
        case "end":
          return _context.stop();
      }
    }
  }, _callee);
})(1);

var childrenProps = {
  hidden: 'hidden'
};

function newPopupContainer() {
  var doc = (0, _DocumentUtils.getDocument)(window);
  var popupContainer = doc.createElement('div');
  popupContainer.className = (0, _configure.getProPrefixCls)('popup-container');
  return popupContainer;
}

var Popup = Popup_1 =
/*#__PURE__*/
function (_ViewComponent) {
  (0, _inherits2["default"])(Popup, _ViewComponent);

  var _super = _createSuper(Popup);

  function Popup() {
    var _this;

    (0, _classCallCheck2["default"])(this, Popup);
    _this = _super.apply(this, arguments);
    _this.contentRendered = false;
    _this.popupKey = PopupKeyGen.next().value;

    _this.saveRef = function (align) {
      return _this.align = align;
    };

    return _this;
  }

  (0, _createClass2["default"])(Popup, [{
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Popup.prototype), "getOmitPropsKeys", this).call(this).concat(['align', 'transitionName', 'getRootDomNode', 'getPopupContainer', 'getClassNameFromAlign', 'getStyleFromAlign', 'onAlign', 'onAnimateAppear', 'onAnimateEnter', 'onAnimateLeave', 'onAnimateEnd', 'getFocusableElements']);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var popupContainer = this.popupContainer;

      if (popupContainer && popupContainer !== Popup_1.popupContainer && popupContainer.parentNode) {
        popupContainer.parentNode.removeChild(popupContainer);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.findFocusableElements();
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Popup.prototype), "componentDidMount", this).call(this);
      this.findFocusableElements();
    }
  }, {
    key: "findFocusableElements",
    value: function findFocusableElements() {
      var element = this.element;
      var getFocusableElements = this.props.getFocusableElements;

      if (element && getFocusableElements) {
        var elements = (0, _focusable.findFocusableElements)(element);
        getFocusableElements(elements && elements.filter(function (item) {
          return item.tabIndex !== -1;
        }).sort(function (e1, e2) {
          return e1.tabIndex - e2.tabIndex;
        }));
      }
    }
  }, {
    key: "renderInner",
    value: function renderInner(innerRef) {
      var _this$props = this.props,
          children = _this$props.children,
          _this$props$getClassN = _this$props.getClassNameFromAlign,
          getClassNameFromAlign = _this$props$getClassN === void 0 ? _noop["default"] : _this$props$getClassN,
          align = _this$props.align;
      var className = this.getMergedClassNames(this.currentAlignClassName || getClassNameFromAlign(align));
      return _react["default"].createElement(_PopupInner["default"], (0, _extends2["default"])({}, (0, _omit["default"])(this.getMergedProps(), ['ref', 'className']), {
        className: className,
        innerRef: innerRef
      }), children);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          hidden = _this$props2.hidden,
          align = _this$props2.align,
          transitionName = _this$props2.transitionName,
          getRootDomNode = _this$props2.getRootDomNode,
          _this$props2$onAnimat = _this$props2.onAnimateAppear,
          onAnimateAppear = _this$props2$onAnimat === void 0 ? _noop["default"] : _this$props2$onAnimat,
          _this$props2$onAnimat2 = _this$props2.onAnimateEnter,
          onAnimateEnter = _this$props2$onAnimat2 === void 0 ? _noop["default"] : _this$props2$onAnimat2,
          _this$props2$onAnimat3 = _this$props2.onAnimateLeave,
          onAnimateLeave = _this$props2$onAnimat3 === void 0 ? _noop["default"] : _this$props2$onAnimat3,
          _this$props2$onAnimat4 = _this$props2.onAnimateEnd,
          onAnimateEnd = _this$props2$onAnimat4 === void 0 ? _noop["default"] : _this$props2$onAnimat4;

      if (!hidden) {
        this.contentRendered = true;
      }

      var container = this.getContainer();
      return container && this.contentRendered ? (0, _reactDom.createPortal)(_react["default"].createElement(_animate["default"], {
        component: "",
        exclusive: true,
        transitionAppear: true,
        transitionName: transitionName,
        hiddenProp: "hidden",
        onAppear: onAnimateAppear,
        onEnter: onAnimateEnter,
        onLeave: onAnimateLeave,
        onEnd: onAnimateEnd
      }, _react["default"].createElement(_align["default"], {
        ref: this.saveRef,
        childrenRef: this.elementReference,
        key: "align",
        childrenProps: childrenProps,
        align: align,
        onAlign: this.onAlign,
        target: getRootDomNode,
        hidden: hidden,
        monitorWindowResize: true
      }, this.renderInner)), container, this.popupKey) : null;
    }
  }, {
    key: "getContainer",
    value: function getContainer() {
      if (typeof window === 'undefined') {
        return undefined;
      }

      var _this$props3 = this.props,
          getPopupContainer = _this$props3.getPopupContainer,
          _this$props3$getRootD = _this$props3.getRootDomNode,
          getRootDomNode = _this$props3$getRootD === void 0 ? _noop["default"] : _this$props3$getRootD;
      var globalContainer = Popup_1.popupContainer;

      if (getPopupContainer) {
        var container = this.popupContainer;

        if (container) {
          return container;
        }
      } else if (globalContainer) {
        return globalContainer;
      }

      if (getPopupContainer) {
        var mountNode = getPopupContainer(getRootDomNode());
        var popupContainer = newPopupContainer();
        var root = window.document.body;

        if (mountNode === root) {
          if (globalContainer) {
            this.popupContainer = globalContainer;
            return globalContainer;
          }

          Popup_1.popupContainer = popupContainer;
        }

        ((0, _isElement["default"])(mountNode) ? mountNode : root).appendChild(popupContainer);
        this.popupContainer = popupContainer;
        return popupContainer;
      } // eslint-disable-next-line no-use-before-define


      return getGlobalPopupContainer();
    }
  }, {
    key: "onAlign",
    value: function onAlign(source, align, target, translate) {
      var _this$props4 = this.props,
          _this$props4$getClass = _this$props4.getClassNameFromAlign,
          getClassNameFromAlign = _this$props4$getClass === void 0 ? _noop["default"] : _this$props4$getClass,
          _this$props4$getStyle = _this$props4.getStyleFromAlign,
          getStyleFromAlign = _this$props4$getStyle === void 0 ? _noop["default"] : _this$props4$getStyle,
          _this$props4$onAlign = _this$props4.onAlign,
          onAlign = _this$props4$onAlign === void 0 ? _noop["default"] : _this$props4$onAlign;
      var currentAlignClassName = getClassNameFromAlign(align);
      var differentTarget = target !== this.target;

      if (differentTarget || this.currentAlignClassName !== currentAlignClassName) {
        this.currentAlignClassName = currentAlignClassName;
        source.className = this.getMergedClassNames(currentAlignClassName);
      }

      var currentAlignStyle = getStyleFromAlign(target, align);

      if (differentTarget || !(0, _isEqual["default"])(this.currentAlignStyle, currentAlignStyle)) {
        this.currentAlignStyle = currentAlignStyle;
        (0, _extends2["default"])(source.style, currentAlignStyle);
      }

      onAlign(source, align, target, translate);
      this.target = source;
    }
  }, {
    key: "forceAlign",
    value: function forceAlign() {
      if (this.align) {
        this.align.forceAlign();
      }
    }
  }]);
  return Popup;
}(_ViewComponent2["default"]);

Popup.displayName = 'Popup';
Popup.propTypes = (0, _objectSpread2["default"])({
  align: _propTypes["default"].object,
  onAlign: _propTypes["default"].func,
  getRootDomNode: _propTypes["default"].func,
  getPopupContainer: _propTypes["default"].func,
  transitionName: _propTypes["default"].string,
  onAnimateAppear: _propTypes["default"].func,
  onAnimateEnter: _propTypes["default"].func,
  onAnimateLeave: _propTypes["default"].func,
  onAnimateEnd: _propTypes["default"].func,
  getStyleFromAlign: _propTypes["default"].func,
  getClassNameFromAlign: _propTypes["default"].func
}, _ViewComponent2["default"].propTypes);
Popup.defaultProps = {
  suffixCls: 'popup',
  transitionName: 'zoom'
};
(0, _tslib.__decorate)([_autobind["default"]], Popup.prototype, "renderInner", null);
(0, _tslib.__decorate)([_autobind["default"]], Popup.prototype, "onAlign", null);
Popup = Popup_1 = (0, _tslib.__decorate)([_mobxReact.observer], Popup);
var _default = Popup;
exports["default"] = _default;

function getGlobalPopupContainer() {
  if (Popup.popupContainer) {
    return Popup.popupContainer;
  }

  var popupContainer = newPopupContainer();
  var root = (0, _DocumentUtils.getDocument)(window).body;
  root.appendChild(popupContainer);
  Popup.popupContainer = popupContainer;
  return popupContainer;
}
//# sourceMappingURL=Popup.js.map