@lingxiteam/ebe-utils 0.5.5 → 0.5.7

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

@@ -0,0 +1,302 @@
+import { useState } from 'react';
+import { EDIT_COMPONENT_STOP_PROPAGATION_CLS } from '../constant';
+import {
+  deleteTempRowProperties,
+  EMPTY_ROW_TEMP_KEY_ATTR,
+  LATEST_EMPTY_ROW_FLAG_ATTR,
+} from '../utils';
+
+const useRowEdit = (props: any) => {
+  const {
+    funcExpExecute,
+    outerDataSource,
+    innerDataSource,
+    setInnerDataSource,
+    currentRowKey,
+    selectedRows,
+    onRowSelected,
+
+    dataSourceFromDataSourceConfig,
+    editMode,
+    rowEditableRule,
+
+    onRowEdit,
+    onRowDetail,
+    onRowDelete,
+    onRowClick,
+    onRowDoubleClick,
+    onBeforeInlineEdit,
+    onBeforeInlineSave,
+  } = props;
+
+  const [nowInlineEditKey, setNowInlineEditKey] = useState<string | null>();
+  const [nowEditingData, setNowEditingData] = useState<any | null>();
+
+  const onRowSaveClick = (row: any, index: number | null, isForce: any) => {
+    // 保存行内编辑行方法
+    // 这个同时处理用于自带的行内编辑保存按钮，和指令的强制保存的情况
+    // isForce:来源于事件动作的“saveInlineRow”指令的保存，这种保存不需要触发beforeSaveInlineRow回调
+    if (!nowInlineEditKey) {
+      return;
+    }
+
+    // 如果存在保存前回调，那么认为用户希望手动控制保存
+    // 这个时候只有isForce强制保存可以保存【也不会触发该回调】
+    if (!isForce && onBeforeInlineSave) {
+      // nowEditingData:当前保存行数据
+      // rowId:当前行Id
+      // index:当前行索引
+      // 添加传参，使方法配置更灵活
+      onBeforeInlineSave(nowEditingData, row[currentRowKey], index);
+      return;
+    }
+
+    const trow: any = innerDataSource.find(
+      (i: any) => i[currentRowKey] === nowInlineEditKey,
+    );
+    Object.assign(trow, nowEditingData);
+    deleteTempRowProperties(trow);
+
+    // 单行保存编辑时，需要将修改后的值同步到绑定的数据源
+    const syncPropsDataSourceRow = props.dataSource?.find(
+      (r: any) => r[currentRowKey] === nowInlineEditKey,
+    );
+    Object.assign(syncPropsDataSourceRow, nowEditingData);
+    deleteTempRowProperties(syncPropsDataSourceRow);
+
+    setInnerDataSource([...innerDataSource]);
+
+    setNowInlineEditKey(null);
+    setNowEditingData(null);
+
+    editInlineRow(null);
+  };
+
+  const editInlineRow = (
+    editkey: React.SetStateAction<string | null | undefined>,
+  ) => {
+    // 开始行内编辑行方法
+    if (editkey === undefined) {
+      return;
+    }
+
+    const trow: any = innerDataSource.find(
+      (i: any) => i[currentRowKey] === editkey,
+    );
+    if (onBeforeInlineEdit) {
+      // 如果有这个回调，先触发这个回调
+      // 预留坑：如果要判断该行不允许编辑之类的，可以在这里做准备
+      onBeforeInlineEdit(trow);
+    }
+
+    if (trow) {
+      setNowEditingData({ ...trow });
+    }
+
+    setNowInlineEditKey(editkey);
+  };
+
+  const onRowCancelClick = (row: any) => {
+    setNowEditingData(null);
+    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,
+      ),
+    );
+
+    // 同样的，需要移除选中数据中的当前行
+    if (isLatestCreationTempRow) {
+      onRowSelected(
+        selectedRows.filter(
+          (r: any) => row?.[currentRowKey] !== r?.[currentRowKey],
+        ),
+        false,
+      );
+    }
+
+    // 倘若绑定了数据源，需要通过引用的方式，移除对应的临时数据
+    if (isLatestCreationTempRow && dataSourceFromDataSourceConfig) {
+      const targetIndex = innerDataSource.findIndex(
+        (i: any) =>
+          row?.[EMPTY_ROW_TEMP_KEY_ATTR] === i?.[EMPTY_ROW_TEMP_KEY_ATTR],
+      );
+      (outerDataSource as any)?.splice(targetIndex, 1);
+    }
+  };
+
+  const onRowDeleteClick = (row: any, index: number | null) => {
+    if (typeof onRowDelete === 'function') {
+      if (row?._createrow) {
+        let ds = [...innerDataSource];
+        ds = ds.filter((i, idx) => idx !== index);
+        setInnerDataSource(ds);
+      }
+      onRowDelete(currentRowKey ? row[currentRowKey] : row, row, index);
+    }
+  };
+
+  const onRowEditClick = (row: any, index: number | null) => {
+    if (typeof onRowEdit === 'function') {
+      if (nowInlineEditKey) {
+        // 未保存上一行，编辑其他行时，看作取消编辑上一行，并过滤空白行
+        setInnerDataSource(innerDataSource.filter((i: any) => !i._emptyrow));
+      }
+      onRowEdit(currentRowKey ? row[currentRowKey] : row, row, index);
+    }
+  };
+
+  const onRowDetailClick = (row: any, index: number | null) => {
+    if (typeof onRowDetail === 'function') {
+      onRowDetail(currentRowKey ? row[currentRowKey] : row, row, index);
+    }
+  };
+
+  const onRowAttrValsChange = (
+    row: any,
+    attr: string,
+    newAttrVal: any,
+    otherAttrVals: any,
+  ) => {
+    if (editMode === 'multiple') {
+      const editRow = innerDataSource.find(
+        (r: any) => r[currentRowKey] === row[currentRowKey],
+      );
+      // 整表编辑时，需要将修改后的值同步到绑定的数据源
+      const syncPropsDataSourceRow = outerDataSource?.find(
+        (r: any) => r[currentRowKey] === row[currentRowKey],
+      );
+
+      editRow[attr] = newAttrVal;
+      syncPropsDataSourceRow[attr] = newAttrVal;
+
+      Object.keys(otherAttrVals).forEach((op) => {
+        editRow[op] = otherAttrVals[op];
+        syncPropsDataSourceRow[op] = otherAttrVals[op];
+      });
+      setInnerDataSource([...innerDataSource]);
+      return;
+    }
+
+    nowEditingData[attr] = newAttrVal;
+    Object.keys(otherAttrVals).forEach((op) => {
+      nowEditingData[op] = otherAttrVals[op];
+    });
+    setNowEditingData({ ...nowEditingData });
+  };
+
+  const onRowClickHandle = (event: any, record: any, index?: number) => {
+    let target = event.target as HTMLBaseElement;
+    const curentTarget = event.currentTarget as HTMLTableRowElement;
+
+    // 当处于编辑状态时，需要过滤来自编辑控件内部触发的 click
+    while (target?.className !== curentTarget?.className) {
+      if (
+        typeof target?.className === 'string' &&
+        target.className.includes(EDIT_COMPONENT_STOP_PROPAGATION_CLS)
+      ) {
+        return true;
+      }
+      target = target.parentNode as HTMLBaseElement;
+    }
+
+    if (onRowClick) {
+      onRowClick(currentRowKey ? record[currentRowKey] : record, record, index);
+      return true;
+    }
+
+    return false;
+  };
+
+  const onRowDoubleClickHandle = (event: any, record: any, index?: number) => {
+    if (onRowDoubleClick) {
+      let target = event.target as HTMLBaseElement;
+      const curentTarget = event.currentTarget as HTMLTableRowElement;
+
+      // 当处于编辑状态时，需要过滤来自编辑控件内部触发的 doubleclick
+      let stopDoubleClick = false;
+      while (target?.className !== curentTarget?.className) {
+        if (
+          typeof target?.className === 'string' &&
+          target.className.includes(EDIT_COMPONENT_STOP_PROPAGATION_CLS)
+        ) {
+          stopDoubleClick = true;
+          break;
+        }
+        target = target.parentNode as HTMLBaseElement;
+      }
+
+      if (!stopDoubleClick) {
+        onRowDoubleClick(
+          currentRowKey ? record[currentRowKey] : record,
+          record,
+          index,
+        );
+      }
+    }
+  };
+
+  /**
+   * 判断表格可编辑时，里面是否可以操作
+   * @param row 某行数据对象
+   * @param index 某行所处当前页行索引
+   * @returns
+   */
+  const handleIsRowEditableCanUse = (row: any, index?: number) => {
+    // 存量：配置态生成的DSL是包含的完整代码的对象
+    if (funcExpExecute && rowEditableRule?.code) {
+      return funcExpExecute(rowEditableRule.code, [
+        {
+          key: 'row',
+          value: row,
+        },
+        {
+          key: 'index',
+          value: index,
+        },
+      ]);
+    }
+    if (funcExpExecute && rowEditableRule) {
+      /**
+       * 新版：配置态生成的DSL就是一个$$包含函数的表达式
+       * 但会经过预处理移除 $$
+       */
+      return funcExpExecute(rowEditableRule, [
+        {
+          key: 'row',
+          value: row,
+        },
+        {
+          key: 'index',
+          value: index,
+        },
+      ]);
+    }
+
+    return true;
+  };
+
+  return {
+    nowInlineEditKey,
+    nowEditingData,
+    editInlineRow,
+    setNowEditingData,
+    setNowInlineEditKey,
+    onRowAttrValsChange,
+    onRowSaveClick,
+    onRowCancelClick,
+    onRowDeleteClick,
+    onRowEditClick,
+    onRowDetailClick,
+    onRowClick: onRowClickHandle,
+    onRowDoubleClick: onRowDoubleClickHandle,
+    handleIsRowEditableCanUse,
+  };
+};
+
+export default useRowEdit;

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

@@ -0,0 +1,93 @@
+import { useMemo } from 'react';
+
+const useRowMerge = (props: any) => {
+  const { sortDataSource, columns, nowInlineEditKey, currentRowKey } = props;
+
+  // 记录所有设置了行合并的列
+  const rowSpanColMap = useMemo(() => {
+    const map: any = {};
+    columns.forEach((c: any) => {
+      if (c.isRowSpan) {
+        map[c.dataIndex] = true;
+      }
+    });
+    return map;
+  }, [columns]);
+
+  /**
+   * 表格数据、行合并信息以及行合并后最后一个td格子的样式
+   * 表格原数据不设置多余变量，请求外系统服务时多余参数可能会导致报错
+   */
+  const [rowSpanMap, rowClassMap] = useMemo(() => {
+    const tableRowSpan = new WeakMap();
+    const tableRowClass = new WeakMap();
+    // 记录负责合并行的主行
+    const recursiveSet = (arr: any[]) => {
+      const parentSpanRowsMap: any = {};
+      const newData = (arr || []).map((d, i) => {
+        const newD = d;
+
+        const __rowSpan: any = {};
+        const __rowClass: any = {};
+
+        if (newD?.children?.length > 0) {
+          newD.children = recursiveSet(newD.children);
+        }
+        // 正在编辑的或者有子节点的不算入合并行计算中
+        if (
+          (nowInlineEditKey &&
+            currentRowKey &&
+            nowInlineEditKey === d[currentRowKey]) ||
+          newD?.children?.length > 0
+        ) {
+          return newD;
+        }
+        Object.keys(rowSpanColMap).forEach((rowIndex) => {
+          __rowSpan[rowIndex] = 1;
+          if (!parentSpanRowsMap[rowIndex]) {
+            parentSpanRowsMap[rowIndex] = {
+              preIndex: i,
+              row: newD,
+            };
+          } else {
+            const { preIndex, row } = parentSpanRowsMap[rowIndex];
+            // 当且仅当相邻行内容相同时才进行合并，否则把之前的主行换成当前行
+            if (preIndex === i - 1 && row[rowIndex] === newD[rowIndex]) {
+              const curRowSpan = tableRowSpan.get(row);
+              curRowSpan[rowIndex] += 1;
+              // 合并当前行
+              __rowSpan[rowIndex] = 0;
+              if (i === arr.length - 1) {
+                // 只设置最后一个td格的样式，防止边框表格时出现重复的边线
+                __rowClass[rowIndex] = 'last-td';
+              }
+            } else {
+              parentSpanRowsMap[rowIndex].row = newD;
+            }
+            parentSpanRowsMap[rowIndex].preIndex = i;
+          }
+        });
+
+        tableRowSpan.set(newD, __rowSpan);
+        tableRowClass.set(newD, __rowClass);
+
+        return newD;
+      });
+      return newData;
+    };
+    recursiveSet(sortDataSource);
+    // // loading没有数据的时候模拟3个数据
+    // if(loading && d?.length === 0) {
+    //   d = [{}, {}, {}];
+    // }
+    return [tableRowSpan, tableRowClass];
+  }, [sortDataSource, rowSpanColMap, nowInlineEditKey, currentRowKey]);
+
+  return {
+    rowSpanColMap,
+    rowSpanMap,
+    rowClassMap,
+  };
+};
+
+export default useRowMerge;

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

@@ -0,0 +1,120 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+const useScroll = (props: any) => {
+  const {
+    initLoadColWidth,
+    finalcolumns,
+    columnWidth,
+    adjustModel,
+    scroll: tableScroll,
+  } = props;
+
+  const tableWrapRef = useRef<any>();
+  const initTableWrapWidthRef = useRef<any>();
+  const preTablePosition = useRef<any>(); // 缓存上次计算位置的表格位置
+  const [tableScrollY, setTableScrollY] = useState(0);
+
+  /**
+   * 适配 scroll，主要是 scroll.x
+   * antd 4.x 在设置横向滚动时，表格宽度最好大于列宽度（如果有设置的话）总和，否则会出现列被挤压的情况
+   */
+  const realScroll = useMemo(() => {
+    if (
+      tableScroll &&
+      typeof tableScroll === 'object' &&
+      !Array.isArray(tableScroll)
+    ) {
+      if (finalcolumns && finalcolumns.length) {
+        const colWidths = finalcolumns.reduce(
+          // 没有配置宽度的，计算时，默认给一个缺省值100
+          (prev: any, next: any) => Number(prev) + Number(next.width || 100),
+          [0],
+        );
+        const tableScrollX = tableScroll.x || 0;
+
+        return {
+          ...tableScroll,
+          x: colWidths > tableScrollX ? colWidths : tableScrollX,
+        };
+      }
+
+      return tableScroll;
+    }
+    return {};
+  }, [finalcolumns, tableScroll]);
+
+  const getTableWrapWidth = () => {
+    return columnWidth.reduce((acc: number, width: number) => acc + width, 0);
+  };
+
+  const computedTablePosition = () => {
+    if (tableWrapRef.current && !tableScroll?.y && adjustModel === 'fill') {
+      // 当前表格所在位置
+      const tableWrapPosition =
+        tableWrapRef?.current?.getClientRects?.()?.[0] || {};
+      // 表格位置超过屏幕 1/2不自适应
+      if (tableWrapPosition.y <= window.innerHeight / 2) {
+        const tableHeight = window.innerHeight - tableWrapPosition.y;
+        // 分页高度
+        let paginationHeight = 0;
+        let tableHeaderHeight = 0;
+        const paginationRef = tableWrapRef?.current?.querySelector?.(
+          '.pcfactory-pagination',
+        );
+        const theadRef = tableWrapRef?.current?.querySelector?.('thead');
+        if (paginationRef && paginationRef.offsetHeight) {
+          paginationHeight = paginationRef.offsetHeight;
+        }
+        if (theadRef && theadRef.offsetHeight) {
+          tableHeaderHeight = theadRef.offsetHeight;
+        }
+        // 表格内容区域高度
+        const tableContainerHeight = tableHeight - paginationHeight - 50;
+        const tableScrollHeight = tableContainerHeight - tableHeaderHeight;
+        // 表格区域设置固定高度 填充剩余页面
+        tableWrapRef.current.querySelector(
+          '.pcfactory-table',
+        ).style.height = `${tableContainerHeight}px`;
+        setTableScrollY(tableScrollHeight);
+        // 保存当前表格位置
+        preTablePosition.current = tableWrapPosition.y;
+      }
+    }
+  };
+
+  useEffect(() => {
+    const top = (tableWrapRef?.current?.getClientRects?.()?.[0] || {}).y;
+    // 位置变化了
+    if (preTablePosition.current && preTablePosition.current !== top) {
+      computedTablePosition();
+    }
+  });
+
+  useEffect(() => {
+    if (tableWrapRef.current) {
+      initTableWrapWidthRef.current = tableWrapRef.current.offsetWidth;
+      computedTablePosition();
+    }
+  }, [tableWrapRef.current]);
+
+  const scroll: any = initLoadColWidth
+    ? { ...tableScroll, x: getTableWrapWidth() }
+    : realScroll;
+  if (
+    tableWrapRef.current &&
+    !tableScroll?.y &&
+    adjustModel === 'fill' &&
+    tableScrollY > 0
+  ) {
+    scroll.y = tableScrollY;
+  }
+
+  return {
+    scroll,
+    tableWrapRef,
+    initTableWrapWidthRef,
+    getTableWrapWidth,
+  };
+};
+
+export default useScroll;