@gingkoo/pandora-metabase 1.0.62 → 1.0.64

package/lib/es/components/popup.js

@@ -8,210 +8,239 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { getWindowSize, getScrollTop, getElementLeft, getElementTop, getContainerVisibleHeight } from '../utils/helper-dom';
+import { getWindowSize } from '../utils/helper-dom';
 import { winResetEvent } from '../utils/event';
 import Portal from '../common/Portal';
-function returnDocument(element) {
-  if (element) {
-    return element.ownerDocument;
-  }
-  return window.document;
-}
 var outSpacing = 10;
-export function generateTrigger(PortalComponent) {
-  var Trigger = /*#__PURE__*/function (_React$Component) {
-    function Trigger(props) {
-      var _this;
-      _classCallCheck(this, Trigger);
-      _this = _callSuper(this, Trigger, [props]);
-      _defineProperty(_this, "resizeObserver", null);
-      // 显式声明 resizeObserver 属性
-      _defineProperty(_this, "resetId", -1);
-      _defineProperty(_this, "ref", React.createRef());
-      // 刷新弹窗内容
-      _defineProperty(_this, "refreshPopup", function () {
-        _this.setState(function (prev) {
-          return {
-            popupRefreshKey: prev.popupRefreshKey + 1
-          };
-        });
-      });
-      // children高度变化后，从新计算高度
-      _defineProperty(_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;
+    _classCallCheck(this, TriggerInternal);
+    _this = _callSuper(this, TriggerInternal, [props]);
+    _defineProperty(_this, "resizeObserver", null);
+    _defineProperty(_this, "resetId", -1);
+    _defineProperty(_this, "popupContainer", null);
+    _defineProperty(_this, "contentResizeObserver", null);
+    _defineProperty(_this, "scrollHeightCheckTimer", null);
+    _defineProperty(_this, "lastScrollHeight", 0);
+    _defineProperty(_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();
+    });
+    _defineProperty(_this, "ref", React.createRef());
+    _defineProperty(_this, "mountPopup", function () {
+      _this.createPopupContainer();
+      _this.resetId = 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);
-      });
-      _defineProperty(_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);
-      });
-      _defineProperty(_this, "closePopup", function () {
-        _this.props.visible && _this.props.closable && _this.props.hideVisible();
-      });
-      _defineProperty(_this, "attachParent", function (popupContainer) {
-        var mountNode = _this.props.container || returnDocument().body;
-        mountNode.appendChild(popupContainer);
-      });
-      _defineProperty(_this, "getCurrentNodePos", function () {
-        var _this$props = _this.props,
-          node = _this$props.node,
-          container = _this$props.container;
+      }, 0);
+      setTimeout(function () {
+        _this.didUpdate();
+      }, 100);
+    });
+    _defineProperty(_this, "unmountPopup", function () {
+      if (_this.popupContainer) {
+        _this.popupContainer.style.opacity = '0';
+      }
+      _this.cleanup();
+    });
+    _defineProperty(_this, "cleanup", function () {
+      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;
+      }
+    });
+    _defineProperty(_this, "refreshPopup", function () {
+      _this.setState(function (prev) {
         return {
-          x: getElementLeft(node) - getElementLeft(container),
-          y: getElementTop(node) - getElementTop(container),
-          t: getElementTop(container),
-          h: node.offsetHeight
+          popupRefreshKey: prev.popupRefreshKey + 1
         };
       });
-      _defineProperty(_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;
+    });
+    _defineProperty(_this, "initContentResizeObserver", function () {
+      var targetNode = _this.ref.current;
+      if (!targetNode) return;
+      if (_this.contentResizeObserver) {
+        _this.contentResizeObserver.disconnect();
+      }
+      _this.contentResizeObserver = new ResizeObserver(function () {
+        _this.didUpdate();
       });
-      _defineProperty(_this, "getComponent", function () {
-        return _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);
+        }
       });
-      _defineProperty(_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 - 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 = getWindowSize(),
-          winH = _getWindowSize.height;
-        var containerH = getContainerVisibleHeight(container);
-        var downH = (containerH || winH) - posY - pos.h; // 元素下面可用高度
-        var maxHeight = 0;
-        var topHeight = 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;
+    });
+    _defineProperty(_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);
+    });
+    _defineProperty(_this, "closePopup", function () {
+      if (_this.props.visible && _this.props.closable) {
+        _this.props.hideVisible();
+      }
+    });
+    _defineProperty(_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;
+    });
+    _defineProperty(_this, "getContainer", function () {
+      if (!_this.popupContainer) {
+        _this.createPopupContainer();
+      }
+      return _this.popupContainer;
+    });
+    _defineProperty(_this, "getComponent", function () {
+      return _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;
+    });
+    _defineProperty(_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 = 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;
+  }
+  _inherits(TriggerInternal, _React$Component);
+  return _createClass(TriggerInternal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.visible) {
+        this.mountPopup();
+      }
     }
-    _inherits(Trigger, _React$Component);
-    return _createClass(Trigger, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        this.resetId = 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() {
-        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 = _jsx(PortalComponent, {
-            getContainer: this.getContainer,
-            didUpdate: this.didUpdate,
-            children: this.getComponent()
-          });
-        }
-        return portal;
-      }
-    }]);
-  }(React.Component);
-  // 监听窗口改变事件id 用于组件销毁的时候清除事件
-  _defineProperty(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 _jsx(Portal, {
+        getContainer: this.getContainer,
+        didUpdate: this.didUpdate,
+        children: this.getComponent()
+      });
+    }
+  }]);
+}(React.Component);
+_defineProperty(TriggerInternal, "defaultProps", {
+  visible: false,
+  closable: true,
+  innerSpacing: 10
+});
+export function generateTrigger(PortalComponent) {
+  return TriggerInternal;
 }
 export default generateTrigger(Portal);

package/lib/es/hooks/use-state.js

@@ -138,16 +138,20 @@ var useStore = function useStore() {
     setFieldEnableAlias = _useState42[1]; // 字段名是否开启别名
   var _useState43 = useState(true),
     _useState44 = _slicedToArray(_useState43, 2),
-    isSelectFields = _useState44[0],
-    setIsSelectFields = _useState44[1]; // 是否默认勾选字段
-  var _useState45 = useState(false),
+    groupByEnableAlias = _useState44[0],
+    setGroupByEnableAlias = _useState44[1]; // 聚合是否开启别名
+  var _useState45 = useState(true),
     _useState46 = _slicedToArray(_useState45, 2),
-    tableFlat = _useState46[0],
-    setTableFlat = _useState46[1]; // 是否平铺数据表
-  var _useState47 = useState([]),
+    isSelectFields = _useState46[0],
+    setIsSelectFields = _useState46[1]; // 是否默认勾选字段
+  var _useState47 = useState(false),
     _useState48 = _slicedToArray(_useState47, 2),
-    sourceTable = _useState48[0],
-    setSourceTable = _useState48[1];
+    tableFlat = _useState48[0],
+    setTableFlat = _useState48[1]; // 是否平铺数据表
+  var _useState49 = useState([]),
+    _useState50 = _slicedToArray(_useState49, 2),
+    sourceTable = _useState50[0],
+    setSourceTable = _useState50[1];
   // 外层ref
   var popupContainer = useRef();
   // const [fetchDatasetFn, setFetchDatasetFn] = useState<(id: string) => Promise<any>>(
@@ -726,6 +730,8 @@ var useStore = function useStore() {
     setTableEnableAlias: setTableEnableAlias,
     fieldEnableAlias: fieldEnableAlias,
     setFieldEnableAlias: setFieldEnableAlias,
+    groupByEnableAlias: groupByEnableAlias,
+    setGroupByEnableAlias: setGroupByEnableAlias,
     isSelectFields: isSelectFields,
     setIsSelectFields: setIsSelectFields,
     tableFlat: tableFlat,

package/lib/es/index.js

@@ -52,6 +52,8 @@ var SqlVisionBuilder = React.forwardRef(function (props, ref) {
     tableEnableAlias = _props$tableEnableAli === void 0 ? true : _props$tableEnableAli,
     _props$fieldEnableAli = props.fieldEnableAlias,
     fieldEnableAlias = _props$fieldEnableAli === void 0 ? true : _props$fieldEnableAli,
+    _props$groupByEnableA = props.groupByEnableAlias,
+    groupByEnableAlias = _props$groupByEnableA === void 0 ? true : _props$groupByEnableA,
     _props$isSelectFields = props.isSelectFields,
     isSelectFields = _props$isSelectFields === void 0 ? true : _props$isSelectFields,
     _props$tableFlat = props.tableFlat,
@@ -86,9 +88,10 @@ var SqlVisionBuilder = React.forwardRef(function (props, ref) {
     store.setIsExit(isExit);
     store.setTableEnableAlias(tableEnableAlias);
     store.setFieldEnableAlias(fieldEnableAlias);
+    store.setGroupByEnableAlias(groupByEnableAlias);
     store.setIsSelectFields(isSelectFields);
     store.setTableFlat(tableFlat);
-  }, [showFields, fieldNameTpl, tableNameTpl, toolbar, showSubquery, subShowSubquery, constantList, formulaTemplates, ignoreGroupByType, filterCustomType, isExit, tableEnableAlias, fieldEnableAlias, isSelectFields, tableFlat]);
+  }, [showFields, fieldNameTpl, tableNameTpl, toolbar, showSubquery, subShowSubquery, constantList, formulaTemplates, ignoreGroupByType, filterCustomType, isExit, tableEnableAlias, fieldEnableAlias, groupByEnableAlias, isSelectFields, tableFlat]);
   React.useImperativeHandle(ref, function () {
     return {
       // setDatasource: (list) => {

package/lib/es/types.d.ts

@@ -40,6 +40,7 @@ export interface MetabaseProps {
     isExit?: boolean;
     tableEnableAlias?: boolean;
     fieldEnableAlias?: boolean;
+    groupByEnableAlias?: boolean;
     isSelectFields?: boolean;
     tableFlat?: boolean;
     onChange?: (newData: MetaListType[], curData: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gingkoo/pandora-metabase",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "description": "",
   "main": "lib/es/index.js",
   "module": "lib/es/index.js",