@gingkoo/pandora-metabase 1.0.0-alpha.3 → 1.0.0-alpha.5

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
 export declare function generateTrigger(PortalComponent: any): {
     new (props: PropsType): {
+        resizeObserver: ResizeObserver | null;
         resetId: number;
         ref: any;
         componentDidMount(): void;
+        componentDidUpdate(prevProps: PropsType): void;
         componentWillUnmount(): void;
+        initResizeObserver: () => void;
         bindEvent: () => void;
         closePopup: () => void;
         attachParent: (popupContainer: HTMLSpanElement) => void;
         getCurrentNodePos: () => {
             x: number;
             y: number;
+            t: number;
             h: any;
         };
         getContainer: () => HTMLSpanElement;
@@ -28,7 +32,6 @@ export declare function generateTrigger(PortalComponent: any): {
         shouldComponentUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
@@ -44,16 +47,20 @@ export declare function generateTrigger(PortalComponent: any): {
 };
 declare const _default: {
     new (props: PropsType): {
+        resizeObserver: ResizeObserver | null;
         resetId: number;
         ref: any;
         componentDidMount(): void;
+        componentDidUpdate(prevProps: PropsType): void;
         componentWillUnmount(): void;
+        initResizeObserver: () => void;
         bindEvent: () => void;
         closePopup: () => void;
         attachParent: (popupContainer: HTMLSpanElement) => void;
         getCurrentNodePos: () => {
             x: number;
             y: number;
+            t: number;
             h: any;
         };
         getContainer: () => HTMLSpanElement;
@@ -71,7 +78,6 @@ declare const _default: {
         shouldComponentUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v1.0.0-alpha.3
+ * @gingkoo/pandora-metabase v1.0.0-alpha.5
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -278,7 +278,6 @@ const summarizeToSql = (arr, record) => {
     condition,
     alias,
     name,
-    fieldAlias,
     realName = ''
   } = record;
   let index = arr.indexOf(record);
@@ -339,7 +338,7 @@ const summarizeToSql = (arr, record) => {
       count++;
     }
   });
-  as = fieldAlias || as + (count ? '_' + (count + 1) : '');
+  as = as + (count ? '_' + (count + 1) : '');
   return {
     sql: sql + ' AS ' + as,
     fieldAlias: as
@@ -1001,6 +1000,8 @@ const useStore = () => {
   }); //弹窗
   const [popupClosable, setClosable] = useState(true); //是否可关闭 如果弹框里面再弹框 则不可关闭
   const [popupClosable2, setClosable2] = useState(true); //是否可关闭 如果弹框里面再弹框 则不可关闭
+  // 外层ref
+  const popupContainer = useRef();
   // const [fetchDatasetFn, setFetchDatasetFn] = useState<(id: string) => Promise<any>>(
   //   async () => {},
   // ); //fn
@@ -1411,7 +1412,8 @@ const useStore = () => {
     _setShowSubquery,
     constantList,
     setConstantList,
-    changeAlias
+    changeAlias,
+    popupContainer
   };
 };
 
@@ -1813,6 +1815,7 @@ const getComputedTranslate = obj => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementTop = elem => {
+  if (!elem) return 0;
   let elemTop = elem.offsetTop;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1826,6 +1829,7 @@ const getElementTop = elem => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementLeft = elem => {
+  if (!elem) return 0;
   let elemLeft = elem.offsetLeft;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1837,8 +1841,23 @@ const getElementLeft = elem => {
   }
   return elemLeft;
 };
-const getScrollTop = () => {
-  return document.documentElement.scrollTop;
+// 获取元素可见范围内高度
+const getContainerVisibleHeight = container => {
+  if (!container) return 0;
+  const rect = container.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  // 元素顶部在视口上方 -> 不可见
+  if (rect.bottom < 0) return 0;
+  // 元素底部在视口下方 -> 不可见
+  if (rect.top > windowHeight) return 0;
+  // 可见区域的 top 和 bottom
+  const visibleTop = Math.max(rect.top, 0);
+  const visibleBottom = Math.min(rect.bottom, windowHeight);
+  // 可见高度
+  return visibleBottom - visibleTop;
+};
+const getScrollTop = elem => {
+  return elem?.scrollTop || document.documentElement.scrollTop;
 };
 // 浏览器可视宽高
 const getWindowSize = () => {
@@ -3409,6 +3428,7 @@ function returnDocument(element) {
 const outSpacing = 10;
 function generateTrigger(PortalComponent) {
   class Trigger extends React.Component {
+    resizeObserver = null; // 显式声明 resizeObserver 属性
     resetId = -1; // 监听窗口改变事件id 用于组件销毁的时候清除事件
     static defaultProps = {
       visible: false,
@@ -3423,11 +3443,39 @@ function generateTrigger(PortalComponent) {
       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();
+    }
+    componentDidUpdate(prevProps) {
+      // 如果 children 发生变化，重新初始化观察器
+      if (prevProps.children !== this.props.children) {
+        this.initResizeObserver();
+      }
     }
     componentWillUnmount() {
       winResetEvent.removeEvent(this.resetId);
       this.props.container && this.props.container.removeEventListener('scroll', this.didUpdate);
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
     }
+    // children高度变化后，从新计算高度
+    initResizeObserver = () => {
+      const targetNode = this.ref.current;
+      if (!targetNode) return;
+      // 如果已经存在 ResizeObserver，先断开连接
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+      // 初始化 ResizeObserver 并开始观察目标节点
+      this.resizeObserver = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          this.didUpdate();
+        });
+      });
+      this.resizeObserver.observe(targetNode);
+    };
     bindEvent = () => {
       let that = this;
       returnDocument().body.addEventListener('click', function (e) {
@@ -3445,7 +3493,7 @@ function generateTrigger(PortalComponent) {
       this.props.visible && this.props.closable && this.props.hideVisible();
     };
     attachParent = popupContainer => {
-      let mountNode = returnDocument().body;
+      let mountNode = this.props.container || returnDocument().body;
       mountNode.appendChild(popupContainer);
     };
     getCurrentNodePos = () => {
@@ -3454,8 +3502,9 @@ function generateTrigger(PortalComponent) {
         container
       } = this.props;
       return {
-        x: getElementLeft(node),
-        y: getElementTop(node) - (container?.scrollTop || 0),
+        x: getElementLeft(node) - getElementLeft(container),
+        y: getElementTop(node) - getElementTop(container),
+        t: getElementTop(container),
         h: node.offsetHeight
       };
     };
@@ -3498,19 +3547,21 @@ function generateTrigger(PortalComponent) {
     didUpdate = () => {
       if (!this.props.node) return false;
       let {
-        innerSpacing = 10
+        innerSpacing = 10,
+        container
       } = this.props;
       let pos = this.getCurrentNodePos();
-      let posY = pos.y - getScrollTop();
+      let posY = pos.y - getScrollTop(container);
       if (!this.ref) return false;
       let realHeight = this.ref?.current?.childNodes?.[0]?.offsetHeight || 0;
       if (!realHeight) return false;
       let {
         height: winH
       } = getWindowSize();
-      let downH = winH - posY - pos.h; // 元素下面可用高度
+      let containerH = getContainerVisibleHeight(container);
+      let downH = (containerH || winH) - posY - pos.h; // 元素下面可用高度
       let maxHeight = 0;
-      let topHeight = getScrollTop();
+      let topHeight = getScrollTop(container);
       if (downH >= posY || realHeight <= downH - innerSpacing - outSpacing) {
         // 下面比上面宽敞 或 下面足够放下所有 放下面
         maxHeight = Math.min(realHeight, downH - innerSpacing - outSpacing);
@@ -5983,10 +6034,11 @@ const JoinData = props => {
     let oldList = cloneDeep(newMeta[index].subquery);
     let _toolbar = subToolbar || toolbar;
     _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
+    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : 0;
     let o = Modal2.openModal({
       title: __('SqlQueryBuilder.subquery'),
       transparentMask: true,
-      zIndex: 200,
+      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(SqlVisionBuilder, {
           ...other,
@@ -7026,10 +7078,11 @@ const CustomColumn = props => {
   const showSubQuery = (e, i) => {
     let newMeta = store.metaList[groupIndex].list.slice();
     const _value = newMeta[index].customColumn[i] || [];
+    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : 0;
     let o = Modal2.openModal({
       title: __('SqlQueryBuilder.customExpression'),
       transparentMask: true,
-      zIndex: 200,
+      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(Provider, {
           value: store,
@@ -7401,10 +7454,11 @@ const Filter = props => {
     let oldList = position ? [] : cloneDeep(newMeta[index].filter[i]?.subquery || []);
     let _toolbar = subToolbar || toolbar;
     _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
+    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : null;
     let o = Modal2.openModal({
       title: 'NOT EXISTS',
       transparentMask: true,
-      zIndex: 200,
+      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(SqlVisionBuilder, {
           ...other,
@@ -7740,7 +7794,7 @@ const GroupBy = props => {
           newMeta[index].by.splice(i, 1, data);
           // @ts-ignore
           newMeta[index].by = newMeta[index].by.map(v => {
-            const fieldAlias = v.fieldAlias || `${v.alias}__${v.name}`;
+            const fieldAlias = `${v.alias}__${v.name}`;
             return {
               ...v,
               sql: `${v.alias}.${v.realName || v.name} AS ${fieldAlias}`,
@@ -7792,7 +7846,7 @@ const GroupBy = props => {
           newMeta[index].by.push(data);
           // @ts-ignore
           newMeta[index].by = newMeta[index].by.map(v => {
-            const fieldAlias = v.fieldAlias || `${v.alias}__${v.name}`;
+            const fieldAlias = `${v.alias}__${v.name}`;
             return {
               ...v,
               sql: `${v.alias}.${v.realName || v.name} AS ${fieldAlias}`,
@@ -8607,7 +8661,8 @@ const Metabase = props => {
   } = props;
   const store = useStore$1();
   const [saveLoading, setSaveLoading] = useState(false);
-  const popupContainer = useRef();
+  // const popupContainer = useRef();
+  // store.setPopupContainer(popupContainer);
   const popupContent = useMemo(() => {
     let {
       visible,
@@ -8638,11 +8693,11 @@ const Metabase = props => {
     await onOk?.(_metaList);
     setSaveLoading(false);
   };
-  let zIndex = popupContainer.current ? getMaxZIndexInParents(popupContainer.current) : null;
+  let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : null;
   return (
     // @ts-ignore
     jsx(VisualBox, {
-      ref: popupContainer,
+      ref: store.popupContainer,
       children: jsxs("div", {
         className: 'Sqb',
         children: [store.metaList.map((v, index) => {
@@ -8679,8 +8734,8 @@ const Metabase = props => {
           disabled: saveLoading,
           onClick: onSave,
           children: btnText || __('SqlQueryBuilder.visualize')
-        }) : null, popupContainer.current && jsx(Popup, {
-          container: popupContainer.current,
+        }) : null, store.popupContainer.current && jsx(Popup, {
+          container: store.popupContainer.current,
           visible: store.popupData.visible,
           node: store.popupData.node,
           closable: store.popupClosable,
@@ -8691,8 +8746,8 @@ const Metabase = props => {
             });
           },
           children: popupContent
-        }), popupContainer.current && jsx(Popup, {
-          container: popupContainer.current,
+        }), store.popupContainer.current && jsx(Popup, {
+          container: store.popupContainer.current,
           visible: store.popupData2.visible,
           node: store.popupData2.node,
           closable: store.popupClosable2,