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

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

@@ -1,10 +1,13 @@
 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;
@@ -29,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;
@@ -45,10 +47,13 @@ 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;
@@ -73,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.4
+ * @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
   };
 };
 
@@ -3426,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,
@@ -3440,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) {
@@ -6003,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,
@@ -7046,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,
@@ -7421,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,
@@ -7760,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}`,
@@ -7812,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}`,
@@ -8627,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,
@@ -8658,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) => {
@@ -8699,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,
@@ -8711,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,