@lingxiteam/ebe-utils 0.2.22 → 0.2.24

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useRowEdit.ts

@@ -1,7 +1,7 @@
-import _ from 'lodash';
 import { useState } from 'react';
+import { deleteTempRowProperties, EMPTY_ROW_TEMP_KEY_ATTR, getFormItemFieldName, LATEST_EMPTY_ROW_FLAG_ATTR, UPDATE_DATA_SOURCE_FLAG } from '../utils';
 import { EDIT_COMPONENT_STOP_PROPAGATION_CLS } from '../constant';
-import { deleteTempRowProperties, EMPTY_ROW_TEMP_KEY_ATTR, getFormItemFieldName, LATEST_EMPTY_ROW_FLAG_ATTR } from '../utils';
+import _ from 'lodash';
 
 const useRowEdit = (props: any) => {
   const {
@@ -55,12 +55,15 @@ const useRowEdit = (props: any) => {
     }
 
     const trow: any = innerDataSource.find((i: any) => i[currentRowKey] === nowInlineEditKey);
+    // 存在更新数据源标识时或者是381之前的版本，需要同步到数据源
+    const needUpdateDataSource = !tableUpdateInnerDataSource || trow[UPDATE_DATA_SOURCE_FLAG];
     if (trow) {
       Object.assign(trow, nowEditingData);
+      // 清除新增时增加的临时属性
       deleteTempRowProperties(trow);
     }
 
-    if (!tableUpdateInnerDataSource) {
+    if (needUpdateDataSource) {
       // 单行保存编辑时，需要将修改后的值同步到绑定的数据源
       const syncPropsDataSourceRow = props.dataSource?.find((r: any) => r[currentRowKey] === nowInlineEditKey);
       if (syncPropsDataSourceRow) {
@@ -101,15 +104,13 @@ const useRowEdit = (props: any) => {
     // 取消时重置为原始数据
     if (typeof form?.setFieldsValue === 'function') {
       const originRow: Record<string, any> = {};
-      Object.keys(row).forEach(key => {
+      Object.keys(row).forEach((key) => {
         // 表单项名称
-        const fieldName = getFormItemFieldName({
-          compId,
+        const fieldName = getFormItemFieldName({ compId,
           currentRowKey,
           rowData: row,
           rowId: row[currentRowKey],
-          dataIndex: key,
-        });
+          dataIndex: key });
         originRow[fieldName] = row[key];
       });
       form.setFieldsValue(originRow);
@@ -118,16 +119,13 @@ const useRowEdit = (props: any) => {
     setNowInlineEditKey(null);
     // 取消编辑的时候，如果当前行是刚刚新增的空白行，则过滤当前行
     const isLatestCreationTempRow = row?.[LATEST_EMPTY_ROW_FLAG_ATTR] && row?.[EMPTY_ROW_TEMP_KEY_ATTR];
-    setInnerDataSource(
-      innerDataSource.filter((i: any) => (isLatestCreationTempRow ? row?.[EMPTY_ROW_TEMP_KEY_ATTR] !== i?.[EMPTY_ROW_TEMP_KEY_ATTR] : true))
-    );
+    setInnerDataSource(innerDataSource
+      .filter((i: any) => isLatestCreationTempRow ? row?.[EMPTY_ROW_TEMP_KEY_ATTR] !== i?.[EMPTY_ROW_TEMP_KEY_ATTR] : true));
+
 
     // 同样的，需要移除选中数据中的当前行
     if (isLatestCreationTempRow) {
-      onRowSelected(
-        selectedRows.filter((r: any) => row?.[currentRowKey] !== r?.[currentRowKey]),
-        false
-      );
+      onRowSelected(selectedRows.filter((r: any) => row?.[currentRowKey] !== r?.[currentRowKey]), false);
     }
 
     // 倘若绑定了数据源，需要通过引用的方式，移除对应的临时数据
@@ -167,17 +165,14 @@ const useRowEdit = (props: any) => {
   const onRowAttrValsChange = (row: any, attr: string, newAttrVal: any, otherAttrVals: any) => {
     if (editMode === 'multiple') {
       const editRow = innerDataSource.find((r: any) => r[currentRowKey] === row[currentRowKey]);
-      let syncPropsDataSourceRow: Record<string, any> = {};
-      if (!tableUpdateInnerDataSource) {
-        // 整表编辑时，需要将修改后的值同步到绑定的数据源
-        syncPropsDataSourceRow = outerDataSource?.find((r: any) => r[currentRowKey] === row[currentRowKey]);
-      }
+      // 整表编辑时，需要将修改后的值同步到绑定的数据源
+      const syncPropsDataSourceRow = outerDataSource?.find((r: any) => r[currentRowKey] === row[currentRowKey]) || {};
 
       // 兼容attr(表格的dataIndex)为层级的情况
       _.set(editRow, attr, newAttrVal);
       _.set(syncPropsDataSourceRow, attr, newAttrVal);
 
-      Object.keys(otherAttrVals).forEach(op => {
+      Object.keys(otherAttrVals).forEach((op) => {
         editRow[op] = otherAttrVals[op];
         syncPropsDataSourceRow[op] = otherAttrVals[op];
       });
@@ -186,7 +181,7 @@ const useRowEdit = (props: any) => {
     }
 
     _.set(nowEditingData, attr, newAttrVal);
-    Object.keys(otherAttrVals).forEach(op => {
+    Object.keys(otherAttrVals).forEach((op) => {
       nowEditingData[op] = otherAttrVals[op];
     });
     setNowEditingData({ ...nowEditingData });
@@ -198,12 +193,15 @@ const useRowEdit = (props: any) => {
 
     // 当处于编辑状态时，需要过滤来自编辑控件内部触发的 click
     while (target?.className !== curentTarget?.className) {
-      if (!target) break;
+            if (!target) break;
       // 非当前行内元素，不再遍历
       if (!curentTarget.contains(target)) {
         return false;
       }
-      if (typeof target?.className === 'string' && target.className.includes(EDIT_COMPONENT_STOP_PROPAGATION_CLS)) {
+      if (
+        typeof target?.className === 'string' &&
+        target.className.includes(EDIT_COMPONENT_STOP_PROPAGATION_CLS)
+      ) {
         return true;
       }
       target = target?.parentNode as HTMLBaseElement;
@@ -225,13 +223,16 @@ const useRowEdit = (props: any) => {
       // 当处于编辑状态时，需要过滤来自编辑控件内部触发的 doubleclick
       let stopDoubleClick = false;
       while (target?.className !== curentTarget?.className) {
-        if (!target) break;
+            if (!target) break;
         // 非当前行内元素，不再遍历，不触发点击事件
         if (!curentTarget.contains(target)) {
           stopDoubleClick = true;
           break;
         }
-        if (typeof target?.className === 'string' && target.className.includes(EDIT_COMPONENT_STOP_PROPAGATION_CLS)) {
+        if (
+          typeof target?.className === 'string' &&
+          target.className.includes(EDIT_COMPONENT_STOP_PROPAGATION_CLS)
+        ) {
           stopDoubleClick = true;
           break;
         }
@@ -245,11 +246,11 @@ const useRowEdit = (props: any) => {
   };
 
   /**
-   * 判断表格可编辑时，里面是否可以操作
-   * @param row 某行数据对象
-   * @param index 某行所处当前页行索引
-   * @returns
-   */
+ * 判断表格可编辑时，里面是否可以操作
+ * @param row 某行数据对象
+ * @param index 某行所处当前页行索引
+ * @returns
+ */
   const handleIsRowEditableCanUse = (row: any, index?: number) => {
     // 存量：配置态生成的DSL是包含的完整代码的对象
     if (funcExpExecute && rowEditableRule?.code) {
@@ -263,8 +264,7 @@ const useRowEdit = (props: any) => {
           value: index,
         },
       ]);
-    }
-    if (funcExpExecute && rowEditableRule) {
+    } if (funcExpExecute && rowEditableRule) {
       /**
        * 新版：配置态生成的DSL就是一个$$包含函数的表达式
        * 但会经过预处理移除 $$

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useRowMerge.ts

@@ -1,8 +1,13 @@
-import _ from 'lodash';
 import { useMemo } from 'react';
+import _ from 'lodash';
 
 const useRowMerge = (props: any) => {
-  const { currentPageDataSource, columns, nowInlineEditKey, currentRowKey } = props;
+  const {
+    currentPageDataSource,
+    columns,
+    nowInlineEditKey,
+    currentRowKey,
+  } = props;
 
   // 记录所有设置了行合并的列
   const rowSpanColMap = useMemo(() => {
@@ -35,10 +40,13 @@ const useRowMerge = (props: any) => {
           newD.children = recursiveSet(newD.children);
         }
         // 正在编辑的或者有子节点的不算入合并行计算中
-        if ((nowInlineEditKey && currentRowKey && nowInlineEditKey === d[currentRowKey]) || newD?.children?.length > 0) {
+        if (
+          (nowInlineEditKey && currentRowKey && nowInlineEditKey === d[currentRowKey]) ||
+          newD?.children?.length > 0
+        ) {
           return newD;
         }
-        Object.keys(rowSpanColMap).forEach(rowIndex => {
+        Object.keys(rowSpanColMap).forEach((rowIndex) => {
           __rowSpan[rowIndex] = 1;
           if (!parentSpanRowsMap[rowIndex]) {
             parentSpanRowsMap[rowIndex] = {
@@ -65,7 +73,7 @@ const useRowMerge = (props: any) => {
             parentSpanRowsMap[rowIndex].preIndex = i;
           }
         });
-
+        
         tableRowSpan.set(newD, __rowSpan);
         tableRowClass.set(newD, __rowClass);
 

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useScroll.ts

@@ -1,13 +1,21 @@
 import { useEventListener } from 'ahooks';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { usePersistFn } from '../../utils/ahooks';
 
+const DYNAMIC_PAGE_ROOT_CLASS = 'lcdp-renderer';
 const useScroll = (props: any) => {
-  const { initLoadColWidth, finalcolumns, columnWidth, adjustModel, scroll: tableScroll } = props;
+  const {
+    initLoadColWidth,
+    finalcolumns,
+    columnWidth,
+    adjustModel,
+    scroll: tableScroll,
+  } = props;
 
   const tableWrapRef = useRef<any>();
   const initTableWrapWidthRef = useRef<any>();
-  const initTableWrapPosition = useRef<any>();
-
+  const pageRootRef = useRef<Element>();
+  
   const [tableScrollY, setTableScrollY] = useState<number | 'auto'>(0);
 
   /**
@@ -20,7 +28,7 @@ const useScroll = (props: any) => {
         const colWidths = finalcolumns.reduce(
           // 没有配置宽度的，计算时，默认给一个缺省值100
           (prev: any, next: any) => Number(prev) + Number(next.width || 100),
-          [0]
+          [0],
         );
         const tableScrollX = tableScroll.x || 0;
 
@@ -36,56 +44,114 @@ const useScroll = (props: any) => {
   }, [finalcolumns, tableScroll]);
 
   const getTableWrapWidth = () => {
-    return columnWidth.reduce((acc: number, width: number) => acc + width, 0);
+    return Object.keys(columnWidth).reduce((acc: number, key: string) => acc + columnWidth[key], 0);
+  };
+
+  const getCompOtherHeight = (comp: HTMLElement, propList: string[] = ['margin-bottom']) => {
+    if (!comp) return 0;
+    const computedStyle = window.getComputedStyle(comp);
+    const bottom = propList.reduce((p, n) => {
+      const num = Number(computedStyle.getPropertyValue(n).replace(/\D+/, '')) || 0;
+      return p + num;
+    }, 0);
+    return bottom;
   };
 
-  const getTablePosition = () => {
-    const initPosition = initTableWrapPosition.current;
-    if (!initPosition) {
-      const tableWrapPosition = tableWrapRef?.current?.getBoundingClientRect?.() || {};
-      initTableWrapPosition.current = tableWrapPosition;
+  /**
+   * 获取组件到根节点的底部距离，包括了父级的paddingBottom和marginBottom
+   * @param comp 计算节点
+   * @param root 根节点
+   * @param ifContinue 是否继续遍历
+   */
+  const getCompBottomInPage = (comp: HTMLElement, ifContinue?: (currentNode: HTMLElement | null) => boolean) => {
+    let pageRoot: HTMLElement | null = null;
+    if (comp) {
+      let current: HTMLElement | null = comp;
+      let bottom = 0;
+      // 是否停止
+      let stop = false;
+      // 往上递归找到第一个引擎节点，视为根节点
+      while (current && !current.classList.contains(DYNAMIC_PAGE_ROOT_CLASS) && !stop) {
+        bottom += getCompOtherHeight(current, current === comp ? ['margin-bottom'] : ['margin-bottom', 'padding-bottom']);
+        stop = !ifContinue?.(current);
+        current = current.parentElement;
+      }
+      if (current?.classList.contains(DYNAMIC_PAGE_ROOT_CLASS)) {
+        pageRoot = current;
+      }
+      return {
+        bottom,
+        pageRoot,
+      };
     }
     return {
-      initPosition: initTableWrapPosition.current,
+      bottom: 0,
+      pageRoot: null,
     };
   };
 
-  const getCompOtherHeight = (comp: HTMLElement) => {
-    if (!comp) return 0;
-    const computedStyle = window.getComputedStyle(comp);
-    const bottom = Number(computedStyle.getPropertyValue('margin-bottom').replace(/\D+/, '')) || 0;
-    return bottom;
+  // 判断元素在父级是否最后一个元素
+  const checkIfLast = (comp: HTMLElement | null) => {
+    const parent = comp?.parentElement;
+    if (!parent) return true;
+    return Array.prototype.indexOf.call(parent?.children, comp) === (parent.children?.length - 1);
+  };
+
+  const setTimeoutUpdate = (update: FrameRequestCallback) => {
+    if (typeof requestAnimationFrame === 'function') {
+      window.requestAnimationFrame(update);
+    } else {
+      setTimeout(update);
+    }
   };
 
-  const computedTablePosition = () => {
+  // 高度适配计算逻辑
+  const computedTablePosition = usePersistFn(() => {
+    let newScroll: typeof tableScrollY = 0;
     if (tableWrapRef.current) {
+      // 重置数据
       (tableWrapRef.current as HTMLElement).classList.remove('ued-table-fill-content');
       (tableWrapRef.current as HTMLElement).style.height = '';
     }
     if (tableWrapRef.current && !tableScroll?.y && adjustModel === 'fill') {
       // 当前表格所在位置
-      const { initPosition } = getTablePosition();
+      const initPosition = tableWrapRef?.current?.getBoundingClientRect?.() || {};
       // 表格位置超过屏幕 1/2不自适应
-      if (initPosition.y <= window.innerHeight / 2) {
-        (tableWrapRef.current as HTMLElement).classList.add('ued-table-fill-content');
+      if (initPosition.top <= window.innerHeight / 2) {
         // 表格最后高度，要求表格为最后一个元素
-        const tableHeight = window.innerHeight - initPosition.y;
-        const otherHeight = getCompOtherHeight(tableWrapRef.current);
+        let isLast = true;
+        const { bottom: otherHeight, pageRoot } = getCompBottomInPage(tableWrapRef.current, (comp) => {
+          const parentIsRoot = comp?.parentElement?.classList.contains(DYNAMIC_PAGE_ROOT_CLASS);
+          if (!parentIsRoot && isLast) {
+            // 判断表格是否位于当前页面底部,当父级为dynamicPage根节点或者已经检索到不是最后一个元素时停止
+            isLast = checkIfLast(comp);
+          }
+          return isLast;
+        });
+        if (!isLast || !pageRoot) {
+          // 不是页面最后一个元素，不进行动态计算
+          return;
+        }
+        const { height, top, bottom: rootBottom } = pageRoot.getBoundingClientRect();
+        const tableHeight = height - (initPosition.top - top);
+        (tableWrapRef.current as HTMLElement).classList.add('ued-table-fill-content');
         tableWrapRef.current.style.height = `${tableHeight - otherHeight}px`;
-        window.requestAnimationFrame(() => {
+        setTimeoutUpdate(() => {
           const { bottom } = tableWrapRef?.current?.getBoundingClientRect?.() || {};
-          const bottomHeight = window.innerHeight - bottom;
+          const bottomHeight = height - (bottom - rootBottom);
           // 减去外层边距
           tableWrapRef.current.style.height = `${tableHeight - otherHeight - bottomHeight}px`;
         });
-        setTableScrollY('auto');
+        newScroll = 'auto';
       }
     }
-  };
+    setTableScrollY(newScroll);
+  });
+
 
   useEventListener('resize', () => {
     computedTablePosition();
-  });
+  }, { target: pageRootRef.current });
 
   useEffect(() => {
     if (tableWrapRef.current) {
@@ -95,7 +161,7 @@ const useScroll = (props: any) => {
   }, [tableWrapRef.current]);
 
   const scroll: any = initLoadColWidth ? { ...tableScroll, x: getTableWrapWidth() } : realScroll;
-  if (tableWrapRef.current && !tableScroll?.y && adjustModel === 'fill') {
+  if (tableWrapRef.current && !tableScroll?.y && adjustModel === 'fill' && tableScrollY) {
     scroll.y = tableScrollY;
   }