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

package/lib/es/components/modules/{group.d.ts → union.d.ts}

@@ -2,7 +2,7 @@ import { UnionEnum } from '../../store/enum';
 interface PropsType {
     store?: any;
     meta: any;
-    operator: UnionEnum;
+    union: UnionEnum;
     groupIndex: number;
 }
 declare const RowLimit: (props: PropsType) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,6 +11,7 @@ export declare function generateTrigger(PortalComponent: any): {
         getCurrentNodePos: () => {
             x: number;
             y: number;
+            t: number;
             h: any;
         };
         getContainer: () => HTMLSpanElement;
@@ -54,6 +55,7 @@ declare const _default: {
         getCurrentNodePos: () => {
             x: number;
             y: number;
+            t: number;
             h: any;
         };
         getContainer: () => HTMLSpanElement;

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v1.0.0-alpha.2
+ * @gingkoo/pandora-metabase v1.0.0-alpha.4
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -89,7 +89,7 @@ var TypeEnum;
   TypeEnum["summarize"] = "summarize";
   TypeEnum["sort"] = "sort";
   TypeEnum["rowLimit"] = "rowLimit";
-  TypeEnum["group"] = "group";
+  TypeEnum["union"] = "union";
 })(TypeEnum || (TypeEnum = {}));
 var JoinEnum;
 (function (JoinEnum) {
@@ -869,6 +869,86 @@ const changeFieldAlias = (list, curObj) => {
   });
   return newList;
 };
+function splitByUnion(data) {
+  const original = cloneDeep(data);
+  const result = [];
+  let i = 0;
+  while (i < original.length) {
+    const item = original[i];
+    if (item.type === 'group') {
+      // group.list 中每一项原样推入结果
+      for (const subItem of item.list) {
+        result.push(subItem);
+      }
+      i++;
+    } else if (item.type === 'union') {
+      const {
+        list,
+        ...otehr
+      } = item;
+      // 查找下一个 group，并将其 list 转成 subquery
+      const nextItem = original[i + 1];
+      if (nextItem && nextItem.type === 'group') {
+        result.push({
+          ...otehr,
+          subquery: nextItem.list.map(subItem => subItem)
+        });
+        i += 2;
+      } else {
+        result.push({
+          ...otehr,
+          subquery: []
+        });
+        i++;
+      }
+    }
+  }
+  return result;
+}
+function reassembleByUnion(target) {
+  const result = [];
+  let i = 0;
+  const len = target.length;
+  // 如果没有任何 union，直接放入一个 group.list
+  const hasUnion = target.some(item => item.type === 'union');
+  if (!hasUnion) {
+    return [{
+      type: 'group',
+      name: 'default',
+      list: [...target]
+    }];
+  }
+  // 否则正常处理
+  while (i < len) {
+    const item = target[i];
+    if (item.type !== 'union') {
+      // 收集连续非 union 的 item，统一放入一个 group.list
+      const groupList = [];
+      while (i < len && target[i].type !== 'union') {
+        groupList.push(target[i]);
+        i++;
+      }
+      result.push({
+        type: 'group',
+        name: 'default',
+        list: groupList
+      });
+    } else {
+      // 处理 union
+      result.push({
+        type: 'union',
+        name: 'union',
+        union: item.union ?? 'UNION',
+        list: []
+      });
+      const subquery = item.subquery || [];
+      const convertedSubquery = reassembleByUnion(subquery);
+      result.push(...convertedSubquery);
+      i++; // 跳过当前 union
+    }
+  }
+  return result;
+}
 
 let metaKey = 1;
 const SummarizeAlias = 'source';
@@ -893,9 +973,9 @@ const useStore = () => {
     list: defaultMetaList
   }];
   const defaultOperator = {
-    type: 'group',
-    name: 'group',
-    operator: UnionEnum.union,
+    type: 'union',
+    name: 'union',
+    union: UnionEnum.union,
     list: []
   };
   const [showFields, setShowFields] = useState(true); //显示字段
@@ -1053,7 +1133,8 @@ const useStore = () => {
         return {
           name: item.name || 'default',
           list: newList.length < 1 ? defaultMetaList : newList,
-          type: item.type || 'group'
+          type: item.type || 'group',
+          union: item.union
         };
       });
       const validMetaKeys = _metaList.flatMap(group => group.list).map(v => Number(v.metaKey)).filter(num => !isNaN(num));
@@ -1161,7 +1242,7 @@ const useStore = () => {
         }
       };
     }
-    if (type === TypeEnum.group) {
+    if (type === TypeEnum.union) {
       // 添加分组
       let newMetaList = metaList.slice();
       newMetaList.splice(groupIndex + 1, 0, defaultOperator, ...defaultMeta);
@@ -1732,6 +1813,7 @@ const getComputedTranslate = obj => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementTop = elem => {
+  if (!elem) return 0;
   let elemTop = elem.offsetTop;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1745,6 +1827,7 @@ const getElementTop = elem => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementLeft = elem => {
+  if (!elem) return 0;
   let elemLeft = elem.offsetLeft;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1756,8 +1839,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 = () => {
@@ -2236,7 +2334,7 @@ const List = [{
 const RowLimit$1 = props => {
   const {
     meta,
-    operator,
+    union,
     groupIndex
   } = props;
   const store = useStore$1();
@@ -2246,10 +2344,10 @@ const RowLimit$1 = props => {
       node: e.currentTarget,
       content: jsx(SelectList, {
         list: List,
-        value: operator,
+        value: union,
         onChange: type => {
           let newMeta = store.metaList.slice();
-          newMeta[groupIndex].operator = type;
+          newMeta[groupIndex].union = type;
           store._setMeta(newMeta);
           store.setPopup({
             visible: false
@@ -2272,7 +2370,7 @@ const RowLimit$1 = props => {
           children: jsx("div", {
             className: `Sqb-TableName`,
             onClick: e => selectOperator(e),
-            children: operator
+            children: union
           })
         })
       })]
@@ -3364,7 +3462,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 = () => {
@@ -3373,8 +3471,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
       };
     };
@@ -3417,19 +3516,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);
@@ -5015,17 +5116,17 @@ const IconTypeMap = new Map([[TypeEnum.filter, {
   name: __('SqlQueryBuilder.rowLimit'),
   icon: jsx(RowLimitIcon, {}),
   className: 'rowLimit'
-}], [TypeEnum.group, {
+}], [TypeEnum.union, {
   name: __('SqlQueryBuilder.union'),
   icon: jsx(GroupIcon, {}),
   className: 'union'
 }]]);
 // 前端展示的icon顺序 随便改不影响逻辑
-const DisplayOrder = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.group];
+const DisplayOrder = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.union];
 // js逻辑顺序 正常顺序
-const OrderType = [TypeEnum.data, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.group];
+const OrderType = [TypeEnum.data, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.union];
 // js逻辑顺序 聚合下面的顺序是这个样子
-const OrderNewType = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.group];
+const OrderNewType = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.union];
 const metaIcon = (size, handleClick) => {
   return ({
     type
@@ -5130,7 +5231,7 @@ const findNextIcon = (store, props) => {
       if (meta.table2.name) {
         available = OrderType.slice(curLocation + 1);
       } else {
-        available = [TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.group];
+        available = [TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.union];
       }
     } else {
       if (isLast) {
@@ -5152,7 +5253,7 @@ const findNextIcon = (store, props) => {
       if (meta.customColumn.length || ~joinIndex && prevList[joinIndex].table2.name) {
         available = OrderType.slice(curLocation + 1);
       } else {
-        available = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.group];
+        available = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.union];
       }
     } else {
       if (isLast) {
@@ -5185,7 +5286,7 @@ const findNextIcon = (store, props) => {
     if (isLast) {
       if (!ExistAboveGroupBy) {
         if (meta.group.length && !meta.by.length) ; else if (!meta.group.length && !meta.by.length) {
-          available = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.group];
+          available = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.union];
         } else {
           available = OrderNewType;
         }
@@ -8545,21 +8646,16 @@ const Metabase = props => {
   }, [store.popupData2]);
   const onSave = async () => {
     let intercept = false; // 是否返回
+    const _metaList = splitByUnion(store.metaList);
     store.metaList.map(v => {
-      if (v.type !== 'group' && !(v.list?.[0]).table.name) {
+      if (v.type !== 'union' && !(v.list?.[0]).table.name) {
         intercept = true;
         return Toast.warning(__('data.pleaseSelectDataTable'));
       }
     });
     if (saveLoading || intercept) return null;
     setSaveLoading(true);
-    if (store.toolbar.includes('group')) {
-      // 分组
-      await onOk?.(store.metaList);
-    } else {
-      // 非分组
-      await onOk?.(store.metaList[0].list);
-    }
+    await onOk?.(_metaList);
     setSaveLoading(false);
   };
   let zIndex = popupContainer.current ? getMaxZIndexInParents(popupContainer.current) : null;
@@ -8570,15 +8666,15 @@ const Metabase = props => {
       children: jsxs("div", {
         className: 'Sqb',
         children: [store.metaList.map((v, index) => {
-          if (v.type === 'group' && v.operator) {
+          if (v.type === 'union' && v.union) {
             return jsx("div", {
               className: cx(`Sqb-list`),
               children: jsx(RowLimit$1, {
-                operator: v.operator,
+                union: v.union,
                 meta: v,
                 groupIndex: index
               })
-            }, 'group' + index);
+            }, 'union' + index);
           }
           return jsx("div", {
             className: cx(`Sqb-list`),
@@ -8665,15 +8761,9 @@ const SqlVisionBuilder = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     store.setProps(props);
   }, [props]);
   useEffect(() => {
-    if (toolbar.includes('group')) {
-      store.setPreData(value);
-    } else {
-      store.setPreData([{
-        name: 'default',
-        list: value
-      }]);
-    }
-  }, [value, toolbar]);
+    const _value = reassembleByUnion(value);
+    store.setPreData(_value);
+  }, [value]);
   useEffect(() => {
     store.setSourceList(sourceList);
   }, [sourceList]);