@gingkoo/pandora-metabase 1.0.62 → 1.0.64

package/lib/cjs/components/metabase/index.js

@@ -157,8 +157,10 @@ var Metabase = function Metabase(props) {
           disabled: saveLoading,
           onClick: onCheck,
           children: btnText || (0, _locale.__)('SqlQueryBuilder.visualize')
-        }) : null, store.popupContainer.current && (0, _jsxRuntime.jsx)(_popup["default"], {
-          container: store.popupData.container || store.popupContainer.current,
+        }) : null, store.popupContainer.current && (0, _jsxRuntime.jsx)(_popup["default"]
+        // container={store.popupData.container || store.popupContainer.current}
+        , {
+          // container={store.popupData.container || store.popupContainer.current}
           visible: store.popupData.visible,
           node: store.popupData.node,
           closable: store.popupClosable,
@@ -168,8 +170,10 @@ var Metabase = function Metabase(props) {
             });
           },
           children: popupContent
-        }), store.popupContainer.current && (0, _jsxRuntime.jsx)(_popup["default"], {
-          container: store.popupData2.container || store.popupContainer.current,
+        }), store.popupContainer.current && (0, _jsxRuntime.jsx)(_popup["default"]
+        // container={store.popupData2.container || store.popupContainer.current}
+        , {
+          // container={store.popupData2.container || store.popupContainer.current}
           visible: store.popupData2.visible,
           node: store.popupData2.node,
           closable: store.popupClosable2,

package/lib/cjs/components/modules/summarize/group-by.js

@@ -342,7 +342,7 @@ var GroupBy = function GroupBy(props) {
             return handleUpdate(e, i);
           },
           children: [v.quotes && (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: store.fieldEnableAlias && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+            children: store.groupByEnableAlias && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
               title: !(0, _utils.isValidSQLAlias)(v === null || v === void 0 ? void 0 : v.fieldAlias) ? (0, _locale.__)('SqlQueryBuilder.aliasForRules') : (0, _locale.__)('SqlQueryBuilder.alias'),
               children: (0, _jsxRuntime.jsx)(_pandora.Button, {
                 className: (0, _classnames["default"])(':Sqb-TableName-as :Sqb-TableName green-name', (0, _defineProperty2["default"])({}, 'isError', !(0, _utils.isValidSQLAlias)(v === null || v === void 0 ? void 0 : v.fieldAlias))),

package/lib/cjs/components/modules/summarize/select-index.js

@@ -340,7 +340,7 @@ var SelectIndex = function SelectIndex(props) {
             return handleUpdate(e, i);
           },
           children: [v.quotes && (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: store.fieldEnableAlias && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+            children: store.groupByEnableAlias && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
               title: !(0, _utils.isValidSQLAlias)(v === null || v === void 0 ? void 0 : v.fieldAlias) ? (0, _locale.__)('SqlQueryBuilder.aliasForRules') : (0, _locale.__)('SqlQueryBuilder.alias'),
               children: (0, _jsxRuntime.jsx)(_pandora.Button, {
                 className: (0, _classnames["default"])(':Sqb-TableName-as :Sqb-TableName green-name', (0, _defineProperty2["default"])({}, 'isError', !(0, _utils.isValidSQLAlias)(v === null || v === void 0 ? void 0 : v.fieldAlias))),

package/lib/cjs/components/popup.d.ts

@@ -1,109 +1,47 @@
 import * as React from 'react';
+interface PropsType {
+    visible: boolean;
+    children: React.ReactNode;
+    hideVisible: () => void;
+    node: HTMLElement;
+    innerSpacing?: number;
+    zIndex?: string | number;
+    closable?: boolean;
+}
 interface StateType {
     popupRefreshKey: number;
 }
-export declare function generateTrigger(PortalComponent: any): {
-    new (props: PropsType): {
-        resizeObserver: ResizeObserver | null;
-        resetId: number;
-        ref: any;
-        componentDidMount(): void;
-        componentDidUpdate(prevProps: PropsType): void;
-        componentWillUnmount(): void;
-        refreshPopup: () => void;
-        initResizeObserver: () => void;
-        bindEvent: () => void;
-        closePopup: () => void;
-        attachParent: (popupContainer: HTMLSpanElement) => void;
-        getCurrentNodePos: () => {
-            x: number;
-            y: number;
-            t: number;
-            h: any;
-        };
-        getContainer: () => HTMLSpanElement;
-        getComponent: () => import("react/jsx-runtime").JSX.Element;
-        didUpdate: () => void | false;
-        render(): import("react/jsx-runtime").JSX.Element | null;
-        context: unknown;
-        setState<K extends "popupRefreshKey">(state: StateType | ((prevState: Readonly<StateType>, props: Readonly<PropsType>) => StateType | Pick<StateType, K> | null) | Pick<StateType, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<PropsType>;
-        state: Readonly<StateType>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<StateType>): any;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
-    };
-    defaultProps: {
+declare class TriggerInternal extends React.Component<PropsType, StateType> {
+    private resizeObserver;
+    private resetId;
+    private popupContainer;
+    private contentResizeObserver;
+    private scrollHeightCheckTimer;
+    private lastScrollHeight;
+    private handleClickOutside;
+    static defaultProps: {
         visible: boolean;
-        children: null;
+        closable: boolean;
+        innerSpacing: number;
     };
-    contextType?: React.Context<any> | undefined;
-};
-declare const _default: {
-    new (props: PropsType): {
-        resizeObserver: ResizeObserver | null;
-        resetId: number;
-        ref: any;
-        componentDidMount(): void;
-        componentDidUpdate(prevProps: PropsType): void;
-        componentWillUnmount(): void;
-        refreshPopup: () => void;
-        initResizeObserver: () => void;
-        bindEvent: () => void;
-        closePopup: () => void;
-        attachParent: (popupContainer: HTMLSpanElement) => void;
-        getCurrentNodePos: () => {
-            x: number;
-            y: number;
-            t: number;
-            h: any;
-        };
-        getContainer: () => HTMLSpanElement;
-        getComponent: () => import("react/jsx-runtime").JSX.Element;
-        didUpdate: () => void | false;
-        render(): import("react/jsx-runtime").JSX.Element | null;
-        context: unknown;
-        setState<K extends "popupRefreshKey">(state: StateType | ((prevState: Readonly<StateType>, props: Readonly<PropsType>) => StateType | Pick<StateType, K> | null) | Pick<StateType, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<PropsType>;
-        state: Readonly<StateType>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<StateType>): any;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
-    };
-    defaultProps: {
-        visible: boolean;
-        children: null;
-    };
-    contextType?: React.Context<any> | undefined;
-};
-export default _default;
-interface PropsType {
-    visible: boolean;
-    children: any;
-    hideVisible: Function;
-    node: any;
-    innerSpacing?: number;
-    container?: HTMLDivElement;
-    zIndex?: string | null;
-    closable?: boolean;
+    ref: React.RefObject<HTMLDivElement>;
+    constructor(props: PropsType);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PropsType): void;
+    componentWillUnmount(): void;
+    private mountPopup;
+    private unmountPopup;
+    private cleanup;
+    private refreshPopup;
+    private initContentResizeObserver;
+    private startScrollHeightCheck;
+    private closePopup;
+    private createPopupContainer;
+    private getContainer;
+    private getComponent;
+    private didUpdate;
+    render(): import("react/jsx-runtime").JSX.Element | null;
 }
+export declare function generateTrigger(PortalComponent: any): typeof TriggerInternal;
+declare const _default: typeof TriggerInternal;
+export default _default;

package/lib/cjs/components/popup.js

@@ -21,207 +21,236 @@ var _event = require("../utils/event");
 var _Portal = _interopRequireDefault(require("../common/Portal"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function returnDocument(element) {
-  if (element) {
-    return element.ownerDocument;
-  }
-  return window.document;
-}
 var outSpacing = 10;
-function generateTrigger(PortalComponent) {
-  var Trigger = /*#__PURE__*/function (_React$Component) {
-    function Trigger(props) {
-      var _this;
-      (0, _classCallCheck2["default"])(this, Trigger);
-      _this = _callSuper(this, Trigger, [props]);
-      (0, _defineProperty2["default"])(_this, "resizeObserver", null);
-      // 显式声明 resizeObserver 属性
-      (0, _defineProperty2["default"])(_this, "resetId", -1);
-      (0, _defineProperty2["default"])(_this, "ref", React.createRef());
-      // 刷新弹窗内容
-      (0, _defineProperty2["default"])(_this, "refreshPopup", function () {
-        _this.setState(function (prev) {
-          return {
-            popupRefreshKey: prev.popupRefreshKey + 1
-          };
-        });
-      });
-      // children高度变化后，从新计算高度
-      (0, _defineProperty2["default"])(_this, "initResizeObserver", function () {
-        var targetNode = _this.ref.current;
-        if (!targetNode) return;
-        // 如果已经存在 ResizeObserver，先断开连接
-        if (_this.resizeObserver) {
-          _this.resizeObserver.disconnect();
+var TriggerInternal = /*#__PURE__*/function (_React$Component) {
+  function TriggerInternal(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, TriggerInternal);
+    _this = _callSuper(this, TriggerInternal, [props]);
+    (0, _defineProperty2["default"])(_this, "resizeObserver", null);
+    (0, _defineProperty2["default"])(_this, "resetId", -1);
+    (0, _defineProperty2["default"])(_this, "popupContainer", null);
+    (0, _defineProperty2["default"])(_this, "contentResizeObserver", null);
+    (0, _defineProperty2["default"])(_this, "scrollHeightCheckTimer", null);
+    (0, _defineProperty2["default"])(_this, "lastScrollHeight", 0);
+    (0, _defineProperty2["default"])(_this, "handleClickOutside", function (e) {
+      var ele = e.target;
+      while (ele) {
+        if (ele === _this.props.node) return;
+        if (_this.popupContainer && ele === _this.popupContainer) return;
+        ele = ele.parentNode;
+      }
+      _this.closePopup();
+    });
+    (0, _defineProperty2["default"])(_this, "ref", React.createRef());
+    (0, _defineProperty2["default"])(_this, "mountPopup", function () {
+      _this.createPopupContainer();
+      _this.resetId = _event.winResetEvent.addEvent(_this.didUpdate, _this, 300);
+      window.addEventListener('scroll', _this.didUpdate, true);
+      document.body.addEventListener('click', _this.handleClickOutside, false);
+      _this.initContentResizeObserver();
+      _this.startScrollHeightCheck();
+      setTimeout(function () {
+        _this.didUpdate();
+        if (_this.popupContainer) {
+          _this.popupContainer.style.opacity = '1';
+          _this.popupContainer.style.willChange = 'transform';
         }
-        // 初始化 ResizeObserver 并开始观察目标节点
-        _this.resizeObserver = new ResizeObserver(function (entries) {
-          entries.forEach(function (entry) {
-            _this.didUpdate();
-          });
-        });
-        _this.resizeObserver.observe(targetNode);
-      });
-      (0, _defineProperty2["default"])(_this, "bindEvent", function () {
-        var that = _this;
-        returnDocument().body.addEventListener('click', function (e) {
-          var ele = e.target;
-          while (ele != null) {
-            if (ele === that.props.node) {
-              return false;
-            }
-            ele = ele.parentNode;
-          }
-          that.closePopup();
-        }, false);
-      });
-      (0, _defineProperty2["default"])(_this, "closePopup", function () {
-        _this.props.visible && _this.props.closable && _this.props.hideVisible();
-      });
-      (0, _defineProperty2["default"])(_this, "attachParent", function (popupContainer) {
-        var mountNode = _this.props.container || returnDocument().body;
-        mountNode.appendChild(popupContainer);
-      });
-      (0, _defineProperty2["default"])(_this, "getCurrentNodePos", function () {
-        var _this$props = _this.props,
-          node = _this$props.node,
-          container = _this$props.container;
+      }, 0);
+      setTimeout(function () {
+        _this.didUpdate();
+      }, 100);
+    });
+    (0, _defineProperty2["default"])(_this, "unmountPopup", function () {
+      if (_this.popupContainer) {
+        _this.popupContainer.style.opacity = '0';
+      }
+      _this.cleanup();
+    });
+    (0, _defineProperty2["default"])(_this, "cleanup", function () {
+      _event.winResetEvent.removeEvent(_this.resetId);
+      window.removeEventListener('scroll', _this.didUpdate, true);
+      document.body.removeEventListener('click', _this.handleClickOutside, false);
+      if (_this.resizeObserver) {
+        _this.resizeObserver.disconnect();
+        _this.resizeObserver = null;
+      }
+      if (_this.contentResizeObserver) {
+        _this.contentResizeObserver.disconnect();
+        _this.contentResizeObserver = null;
+      }
+      if (_this.scrollHeightCheckTimer) {
+        clearInterval(_this.scrollHeightCheckTimer);
+        _this.scrollHeightCheckTimer = null;
+      }
+      if (_this.popupContainer && document.body.contains(_this.popupContainer)) {
+        document.body.removeChild(_this.popupContainer);
+        _this.popupContainer = null;
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "refreshPopup", function () {
+      _this.setState(function (prev) {
         return {
-          x: (0, _helperDom.getElementLeft)(node) - (0, _helperDom.getElementLeft)(container),
-          y: (0, _helperDom.getElementTop)(node) - (0, _helperDom.getElementTop)(container),
-          t: (0, _helperDom.getElementTop)(container),
-          h: node.offsetHeight
+          popupRefreshKey: prev.popupRefreshKey + 1
         };
       });
-      (0, _defineProperty2["default"])(_this, "getContainer", function () {
-        var pos = _this.getCurrentNodePos();
-        var _this$props2 = _this.props,
-          _this$props2$innerSpa = _this$props2.innerSpacing,
-          innerSpacing = _this$props2$innerSpa === void 0 ? 10 : _this$props2$innerSpa,
-          zIndex = _this$props2.zIndex;
-        var popupContainer = returnDocument().createElement('span');
-        popupContainer.style.position = 'absolute';
-        popupContainer.style.top = '0px';
-        popupContainer.style.left = '0px';
-        popupContainer.style.transform = "translateX(".concat(pos.x, "px) translateY(").concat(pos.y + pos.h + innerSpacing, "px) translateZ(0px)");
-        popupContainer.style.pointerEvents = 'none';
-        popupContainer.style.zIndex = zIndex || '999';
-        _this.attachParent(popupContainer);
-        return popupContainer;
+    });
+    (0, _defineProperty2["default"])(_this, "initContentResizeObserver", function () {
+      var targetNode = _this.ref.current;
+      if (!targetNode) return;
+      if (_this.contentResizeObserver) {
+        _this.contentResizeObserver.disconnect();
+      }
+      _this.contentResizeObserver = new ResizeObserver(function () {
+        _this.didUpdate();
       });
-      (0, _defineProperty2["default"])(_this, "getComponent", function () {
-        return (0, _jsxRuntime.jsx)("div", {
-          ref: _this.ref,
-          style: {
-            overflowX: 'hidden',
-            overflowY: 'auto',
-            backgroundColor: '#fff',
-            pointerEvents: 'auto',
-            transition: 'all 0.3s',
-            boxShadow: '0 4px 10px rgba(0,0,0,0.13)',
-            borderRadius: 6
-          },
-          onClick: function onClick(e) {
-            return _this.props.closable && e.stopPropagation();
-          },
-          onMouseDown: function onMouseDown(e) {
-            return e.stopPropagation();
-          },
-          children: React.cloneElement(_this.props.children, {
-            key: _this.state.popupRefreshKey,
-            didUpdate: _this.didUpdate
-          })
-        });
+      _this.contentResizeObserver.observe(targetNode);
+      // 额外监听图片加载
+      var images = targetNode.querySelectorAll('img');
+      images.forEach(function (img) {
+        if (!img.complete) {
+          img.addEventListener('load', _this.didUpdate);
+          img.addEventListener('error', _this.didUpdate);
+        }
       });
-      (0, _defineProperty2["default"])(_this, "didUpdate", function () {
-        var _this$ref;
-        if (!_this.props.node) return false;
-        var _this$props3 = _this.props,
-          _this$props3$innerSpa = _this$props3.innerSpacing,
-          innerSpacing = _this$props3$innerSpa === void 0 ? 10 : _this$props3$innerSpa,
-          container = _this$props3.container;
-        var pos = _this.getCurrentNodePos();
-        var posY = pos.y - (0, _helperDom.getScrollTop)(container);
-        if (!_this.ref) return false;
-        var realHeight = ((_this$ref = _this.ref) === null || _this$ref === void 0 || (_this$ref = _this$ref.current) === null || _this$ref === void 0 || (_this$ref = _this$ref.childNodes) === null || _this$ref === void 0 || (_this$ref = _this$ref[0]) === null || _this$ref === void 0 ? void 0 : _this$ref.offsetHeight) || 0;
-        if (!realHeight) return false;
-        var _getWindowSize = (0, _helperDom.getWindowSize)(),
-          winH = _getWindowSize.height;
-        var containerH = (0, _helperDom.getContainerVisibleHeight)(container);
-        var downH = (containerH || winH) - posY - pos.h; // 元素下面可用高度
-        var maxHeight = 0;
-        var topHeight = (0, _helperDom.getScrollTop)(container);
-        if (downH >= posY || realHeight <= downH - innerSpacing - outSpacing) {
-          // 下面比上面宽敞 或 下面足够放下所有 放下面
-          maxHeight = Math.min(realHeight, downH - innerSpacing - outSpacing);
-          topHeight += posY + pos.h + innerSpacing;
-        } else {
-          // 放上面
-          maxHeight = Math.min(realHeight, posY - innerSpacing - outSpacing);
-          topHeight += posY - innerSpacing - maxHeight;
+    });
+    (0, _defineProperty2["default"])(_this, "startScrollHeightCheck", function () {
+      if (_this.scrollHeightCheckTimer) {
+        clearInterval(_this.scrollHeightCheckTimer);
+      }
+      _this.scrollHeightCheckTimer = window.setInterval(function () {
+        if (_this.ref.current) {
+          var currentScrollHeight = _this.ref.current.scrollHeight;
+          if (currentScrollHeight !== _this.lastScrollHeight) {
+            _this.lastScrollHeight = currentScrollHeight;
+            _this.didUpdate();
+          }
         }
-        _this.ref.current.offsetParent.style.transform = "translateX(".concat(pos.x, "px) translateY(").concat(topHeight, "px) translateZ(0px)");
-        _this.ref.current.offsetParent.style.transition = 'all 0.3s';
-        _this.ref.current.style.cssText += "max-height: ".concat(maxHeight, "px");
-        _this.ref.current.style.cssText += "position: relative";
+      }, 100);
+    });
+    (0, _defineProperty2["default"])(_this, "closePopup", function () {
+      if (_this.props.visible && _this.props.closable) {
+        _this.props.hideVisible();
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "createPopupContainer", function () {
+      var _this$props$zIndex;
+      if (_this.popupContainer) return;
+      var container = document.createElement('span');
+      container.style.cssText = "\n      position: absolute;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n      z-index: ".concat((_this$props$zIndex = _this.props.zIndex) !== null && _this$props$zIndex !== void 0 ? _this$props$zIndex : 999, ";\n      opacity: 0;\n      transition: opacity 0.2s ease;\n      will-change: transform;\n    ");
+      document.body.appendChild(container);
+      _this.popupContainer = container;
+    });
+    (0, _defineProperty2["default"])(_this, "getContainer", function () {
+      if (!_this.popupContainer) {
+        _this.createPopupContainer();
+      }
+      return _this.popupContainer;
+    });
+    (0, _defineProperty2["default"])(_this, "getComponent", function () {
+      return (0, _jsxRuntime.jsx)("div", {
+        ref: _this.ref,
+        style: {
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          backgroundColor: '#fff',
+          pointerEvents: 'auto',
+          transition: 'max-height 0.3s ease',
+          boxShadow: '0 4px 10px rgba(0,0,0,0.13)',
+          borderRadius: 6,
+          position: 'relative'
+        },
+        onClick: function onClick(e) {
+          return _this.props.closable && e.stopPropagation();
+        },
+        onMouseDown: function onMouseDown(e) {
+          return e.stopPropagation();
+        },
+        children: React.cloneElement(_this.props.children, {
+          key: _this.state.popupRefreshKey
+        })
       });
-      _this.state = {
-        popupRefreshKey: 1
-      };
-      return _this;
+    });
+    (0, _defineProperty2["default"])(_this, "didUpdate", function () {
+      if (!_this.props.visible || !_this.props.node || !_this.ref.current || !_this.popupContainer) return;
+      var _this$props = _this.props,
+        node = _this$props.node,
+        _this$props$innerSpac = _this$props.innerSpacing,
+        innerSpacing = _this$props$innerSpac === void 0 ? 10 : _this$props$innerSpac;
+      var rect = node.getBoundingClientRect();
+      var triggerTop = rect.top + window.scrollY;
+      var triggerLeft = rect.left + window.scrollX;
+      var triggerHeight = rect.height;
+      var popupContent = _this.ref.current;
+      var realHeight = popupContent.scrollHeight;
+      var _getWindowSize = (0, _helperDom.getWindowSize)(),
+        viewportHeight = _getWindowSize.height;
+      var spaceBelow = viewportHeight - rect.bottom;
+      var spaceAbove = rect.top;
+      var topPosition;
+      var maxHeight;
+      if (spaceBelow >= realHeight + innerSpacing + outSpacing || spaceBelow >= spaceAbove) {
+        topPosition = triggerTop + triggerHeight + innerSpacing;
+        maxHeight = Math.min(realHeight, spaceBelow - innerSpacing - outSpacing);
+      } else {
+        maxHeight = Math.min(realHeight, spaceAbove - innerSpacing - outSpacing);
+        topPosition = triggerTop - innerSpacing - maxHeight;
+      }
+      _this.popupContainer.style.transform = "translate(".concat(triggerLeft, "px, ").concat(topPosition, "px)");
+      popupContent.style.maxHeight = "".concat(maxHeight, "px");
+    });
+    _this.state = {
+      popupRefreshKey: 1
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(TriggerInternal, _React$Component);
+  return (0, _createClass2["default"])(TriggerInternal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.visible) {
+        this.mountPopup();
+      }
     }
-    (0, _inherits2["default"])(Trigger, _React$Component);
-    return (0, _createClass2["default"])(Trigger, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        this.resetId = _event.winResetEvent.addEvent(this.didUpdate, this, 300);
-        this.props.container && this.props.container.addEventListener('scroll', this.didUpdate);
-        this.bindEvent();
-        // 延迟绑定 ResizeObserver 到 ensure the element is ready
-        this.initResizeObserver();
-      }
-    }, {
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps) {
-        // 如果 children 发生变化，重新初始化观察器
-        if (prevProps.children !== this.props.children) {
-          this.initResizeObserver();
-        }
-        if (prevProps.node !== this.props.node) {
-          this.refreshPopup(); //点击元素不同，刷新一下
-        }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (!prevProps.visible && this.props.visible) {
+        this.mountPopup();
       }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        _event.winResetEvent.removeEvent(this.resetId);
-        this.props.container && this.props.container.removeEventListener('scroll', this.didUpdate);
-        if (this.resizeObserver) {
-          this.resizeObserver.disconnect();
-          this.resizeObserver = null;
-        }
+      if (prevProps.visible && !this.props.visible) {
+        this.unmountPopup();
       }
-    }, {
-      key: "render",
-      value: function render() {
-        var portal = null;
-        if (this.props.visible) {
-          portal = (0, _jsxRuntime.jsx)(PortalComponent, {
-            getContainer: this.getContainer,
-            didUpdate: this.didUpdate,
-            children: this.getComponent()
-          });
-        }
-        return portal;
-      }
-    }]);
-  }(React.Component);
-  // 监听窗口改变事件id 用于组件销毁的时候清除事件
-  (0, _defineProperty2["default"])(Trigger, "defaultProps", {
-    visible: false,
-    // 是否显示
-    children: null
-  });
-  return Trigger;
+      if (prevProps.children !== this.props.children) {
+        this.initContentResizeObserver();
+      }
+      if (prevProps.node !== this.props.node) {
+        this.refreshPopup();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cleanup();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.props.visible || !this.popupContainer) return null;
+      return (0, _jsxRuntime.jsx)(_Portal["default"], {
+        getContainer: this.getContainer,
+        didUpdate: this.didUpdate,
+        children: this.getComponent()
+      });
+    }
+  }]);
+}(React.Component);
+(0, _defineProperty2["default"])(TriggerInternal, "defaultProps", {
+  visible: false,
+  closable: true,
+  innerSpacing: 10
+});
+function generateTrigger(PortalComponent) {
+  return TriggerInternal;
 }
 var _default = exports["default"] = generateTrigger(_Portal["default"]);