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")["default"];

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

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

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

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

var _tslib = require("tslib");

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

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

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

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

var _shallowequal = _interopRequireDefault(require("shallowequal"));

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

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

var _shared = require("choerodon-ui/shared");

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 _utils = require("../configure/utils");

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

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

var childrenProps = {
  hidden: 'hidden'
};

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

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

  var _super = (0, _createSuper2["default"])(Popup);

  function Popup() {
    var _this;

    (0, _classCallCheck2["default"])(this, Popup);
    _this = _super.apply(this, arguments);
    _this.contentRendered = false;
    _this.popupKey = _shared.PopupManager.getKey();

    _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', 'forceRender']);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var popupContainer = this.popupContainer;

      if (popupContainer && popupContainer !== _shared.PopupManager.container && 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 /*#__PURE__*/_react["default"].createElement(_PopupInner["default"], (0, _extends2["default"])({}, (0, _omit["default"])(this.getMergedProps(), ['ref', 'className']), {
        className: className,
        innerRef: innerRef,
        onResize: this.handlePopupResize
      }), 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,
          forceRender = _this$props2.forceRender,
          _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 || forceRender) {
        this.contentRendered = true;
      }

      var container = this.getContainer();
      return container && this.contentRendered ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(_animate["default"], {
        component: "",
        exclusive: true,
        transitionAppear: true,
        transitionName: transitionName,
        hiddenProp: "hidden",
        onAppear: onAnimateAppear,
        onEnter: onAnimateEnter,
        onLeave: onAnimateLeave,
        onEnd: onAnimateEnd
      }, /*#__PURE__*/_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 = _shared.PopupManager.container;

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

          _shared.PopupManager.container = popupContainer;
        }

        (mountNode && (0, _isElement["default"])(mountNode) ? mountNode : root).appendChild(popupContainer);
        this.popupContainer = popupContainer;
        return popupContainer;
      } // eslint-disable-next-line @typescript-eslint/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, _shallowequal["default"])(this.currentAlignStyle, currentAlignStyle)) {
        this.currentAlignStyle = currentAlignStyle;
        (0, _extends2["default"])(source.style, currentAlignStyle);
      }

      onAlign(source, align, target, translate);
      this.target = source;
    }
  }, {
    key: "handlePopupResize",
    value: function handlePopupResize(width, height) {
      if (width !== 0 && height !== 0) {
        var _ref = this.size || {},
            oldWidth = _ref.width,
            oldHeight = _ref.height;

        if (width !== oldWidth || height !== oldHeight) {
          this.size = {
            width: width,
            height: height
          };
          this.forceAlign();
        }
      }
    }
  }, {
    key: "forceAlign",
    value: function forceAlign() {
      if (this.align) {
        this.align.forceAlign();
      }
    }
  }]);
  return Popup;
}(_ViewComponent2["default"]);

Popup.displayName = 'Popup';
Popup.defaultProps = {
  suffixCls: 'popup',
  transitionName: 'zoom'
};
(0, _tslib.__decorate)([_autobind["default"]], Popup.prototype, "renderInner", null);
(0, _tslib.__decorate)([_autobind["default"]], Popup.prototype, "onAlign", null);
(0, _tslib.__decorate)([_autobind["default"]], Popup.prototype, "handlePopupResize", null);
Popup = (0, _tslib.__decorate)([_mobxReact.observer], Popup);
var _default = Popup;
exports["default"] = _default;

function getGlobalPopupContainer() {
  if (_shared.PopupManager.container) {
    return _shared.PopupManager.container;
  }

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