choerodon-ui/es/trigger/Popup.js

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

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { createPortal } from 'react-dom';
import { observer } from 'mobx-react';
import omit from 'lodash/omit';
import shallowEqual from 'shallowequal';
import noop from 'lodash/noop';
import isElement from 'lodash/isElement';
import { PopupManager } from 'choerodon-ui/shared';
import ViewComponent from '../../pro/es/core/ViewComponent';
import autobind from '../../pro/es/_util/autobind';
import { findFocusableElements as _findFocusableElements } from '../../pro/es/_util/focusable';
import { getDocument } from '../../pro/es/_util/DocumentUtils';
import Align from '../align';
import { getProPrefixCls } from '../configure/utils';
import Animate from '../animate';
import PopupInner from './PopupInner';
var childrenProps = {
  hidden: 'hidden'
};

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

var Popup = /*#__PURE__*/function (_ViewComponent) {
  _inherits(Popup, _ViewComponent);

  var _super = _createSuper(Popup);

  function Popup() {
    var _this;

    _classCallCheck(this, Popup);

    _this = _super.apply(this, arguments);
    _this.contentRendered = false;
    _this.popupKey = PopupManager.getKey();

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

    return _this;
  }

  _createClass(Popup, [{
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(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 !== PopupManager.container && popupContainer.parentNode) {
        popupContainer.parentNode.removeChild(popupContainer);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.findFocusableElements();
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      _get(_getPrototypeOf(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 = _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 : _this$props$getClassN,
          align = _this$props.align;
      var className = this.getMergedClassNames(this.currentAlignClassName || getClassNameFromAlign(align));
      return /*#__PURE__*/React.createElement(PopupInner, _extends({}, omit(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,
          forceRender = _this$props2.forceRender,
          _this$props2$onAnimat = _this$props2.onAnimateAppear,
          onAnimateAppear = _this$props2$onAnimat === void 0 ? noop : _this$props2$onAnimat,
          _this$props2$onAnimat2 = _this$props2.onAnimateEnter,
          onAnimateEnter = _this$props2$onAnimat2 === void 0 ? noop : _this$props2$onAnimat2,
          _this$props2$onAnimat3 = _this$props2.onAnimateLeave,
          onAnimateLeave = _this$props2$onAnimat3 === void 0 ? noop : _this$props2$onAnimat3,
          _this$props2$onAnimat4 = _this$props2.onAnimateEnd,
          onAnimateEnd = _this$props2$onAnimat4 === void 0 ? noop : _this$props2$onAnimat4;

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

      var container = this.getContainer();
      return container && this.contentRendered ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Animate, {
        component: "",
        exclusive: true,
        transitionAppear: true,
        transitionName: transitionName,
        hiddenProp: "hidden",
        onAppear: onAnimateAppear,
        onEnter: onAnimateEnter,
        onLeave: onAnimateLeave,
        onEnd: onAnimateEnd
      }, /*#__PURE__*/React.createElement(Align, {
        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 : _this$props3$getRootD;
      var globalContainer = 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;
          }

          PopupManager.container = popupContainer;
        }

        (mountNode && isElement(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 : _this$props4$getClass,
          _this$props4$getStyle = _this$props4.getStyleFromAlign,
          getStyleFromAlign = _this$props4$getStyle === void 0 ? noop : _this$props4$getStyle,
          _this$props4$onAlign = _this$props4.onAlign,
          onAlign = _this$props4$onAlign === void 0 ? noop : _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 || !shallowEqual(this.currentAlignStyle, currentAlignStyle)) {
        this.currentAlignStyle = currentAlignStyle;

        _extends(source.style, currentAlignStyle);
      }

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

  return Popup;
}(ViewComponent);

Popup.displayName = 'Popup';
Popup.defaultProps = {
  suffixCls: 'popup',
  transitionName: 'zoom'
};

__decorate([autobind], Popup.prototype, "renderInner", null);

__decorate([autobind], Popup.prototype, "onAlign", null);

Popup = __decorate([observer], Popup);
export default Popup;
export function getGlobalPopupContainer() {
  if (PopupManager.container) {
    return PopupManager.container;
  }

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