es-grid-template 1.9.73 → 1.9.75

package/lib/ali-table/pipeline/features/columnCustom.js

@@ -20,7 +20,7 @@ var _EditCell = _interopRequireDefault(require("../../base-table/cell/EditCell")
 var _HeaderEditCell = _interopRequireDefault(require("../../base-table/cell/HeaderEditCell"));
 var _constants = require("../../utils/constants");
 var _utils3 = require("../../base-table/utils");
-var _utility = require("../../utils/utility");
+// import { unFlattenData } from '../../utils/utility';
 // import { getMaxDepth } from '../../utils/utility';
 
 function clamp(min, x, max) {
@@ -47,6 +47,7 @@ function columnCustom(opts) {
     wrapSettings,
     // ignoreAccents,
     dataSource,
+    dataFlatten,
     isDataTree,
     defaultSorter,
     defaultFilter,
@@ -437,7 +438,7 @@ function columnCustom(opts) {
       }
 
       // Cập nhật data mới
-      const newData = allRows;
+      const newData = dataFlatten;
       const pastedRows = [];
       if (pasteState.type === 'down' || pasteState.type === 'up') {
         newRange.addedRows.forEach((rowValues, rowIndex1) => {
@@ -505,8 +506,8 @@ function columnCustom(opts) {
       }
 
       // const rsFilterData = updateOrInsert(dataSource, newData)
-      const rsFilterData = (0, _utility.updateOrInsert)(allRows, newData);
-      const rs = (0, _utility.unFlattenData)(rsFilterData);
+      const rsFilterData = (0, _utils2.updateOrInsert)(dataFlatten, newData);
+      const rs = (0, _utils2.unFlattenData)(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
       pipeline.setStateAtKey(_constants.stateKeyEndCell, endPasteCell);
       pipeline.setStateAtKey(_constants.stateKeyEndPasteCell, undefined);
@@ -532,7 +533,7 @@ function columnCustom(opts) {
       const newRange = ctrlKey ? (0, _utils2.addRowsDownWithCtrl)(dataSelected, rowsPasteId.length) : (0, _utils2.addRowsDown)(dataSelected, rowsPasteId.length);
 
       // Cập nhật data mới
-      const newData = allRows;
+      const newData = dataFlatten;
       const pastedRows = [];
       newRange.addedRows.forEach((rowValues, rowIndex1) => {
         const targetRow = pasteState?.startRowIndex + rowIndex1;
@@ -554,8 +555,8 @@ function columnCustom(opts) {
       });
 
       // const rsFilterData = updateOrInsert(dataSource, newData)
-      const rsFilterData = (0, _utility.updateOrInsert)(dataSource, newData);
-      const rs = (0, _utility.unFlattenData)(rsFilterData);
+      const rsFilterData = (0, _utils2.updateOrInsert)(dataFlatten, newData);
+      const rs = (0, _utils2.unFlattenData)(rsFilterData);
       triggerPaste?.(pastedRows, colsPastedId, rs, copyRows);
     };
     const handleMouseDown = (rowId, colId) => {
@@ -867,7 +868,7 @@ function columnCustom(opts) {
             }
             return updatedRow;
           });
-          const newData = (0, _utility.unFlattenData)(rs);
+          const newData = (0, _utils2.unFlattenData)(rs);
           triggerChangeData?.([...newData], {
             type: 'DELETE_CONTENT'
           });
@@ -1058,6 +1059,73 @@ function columnCustom(opts) {
       pipeline.setStateAtKey(_constants.stateKeyEndCell, cellEnd);
       triggerPointPaste(selectPasteState, cellStart, cellEnd, e.ctrlKey);
     };
+
+    // cell Số thứ tự
+
+    const handleMouseDownIndex = rowId => {
+      // setIsSelecting?.(true);
+      pipeline.setStateAtKey(_constants.stateKeyIsSelecting, true);
+      const allColumns = allCols.filter(it => !_hooks.nonActionColumn.includes(it.field));
+
+      // const firstCOlSpin = findFirst(allColumns)
+
+      const startCol = allColumns[0].field;
+      const endCol = allColumns[allColumns.length - 1].field;
+
+      // setStartCell?.({ rowId, colId: startCol });
+      // setEndCell?.({ rowId, colId: endCol });
+
+      pipeline.setStateAtKey(_constants.stateKeyStartCell, {
+        rowId,
+        colId: startCol
+      });
+      pipeline.setStateAtKey(_constants.stateKeyEndCell, {
+        rowId,
+        colId: endCol
+      });
+
+      // if (firstCOlSpin) {
+      //   setFocusedCell?.({ rowId: cell.row.id, colId: firstCOlSpin.id })
+      // } else {
+      //   const firstCOlVisible = allColumns[0]
+      //   setFocusedCell?.({ rowId: cell.row.id, colId: firstCOlVisible.id })
+      // }
+      pipeline.setStateAtKey(_constants.stateKeyFocusedCell, {
+        rowId,
+        colId: startCol
+      });
+
+      // setRangeState?.(getSelectedCellMatrix(table, { rowId, colId: startCol }, { rowId, colId: endCol }))
+    };
+    const handleMouseEnterIndex = rowId => {
+      if (isSelecting) {
+        const allColumns = allCols.filter(it => !_hooks.nonActionColumn.includes(it.field));
+
+        // const firstCOl = findFirst(allColumns)
+
+        // const startCol = allColumns[0].id
+        const endCol = allColumns[allColumns.length - 1].field;
+
+        //  // setStartCell?.({ rowId, colId: startCol });
+        // setEndCell?.({ rowId, colId: endCol });
+        pipeline.setStateAtKey(_constants.stateKeyEndCell, {
+          rowId,
+          colId: endCol
+        });
+      }
+    };
+    const handleMouseUpIndex = () => {
+      // setIsSelecting?.(false);
+
+      pipeline.setStateAtKey(_constants.stateKeyIsSelecting, false);
+
+      // const selectState = getSelectedCellMatrix(table, startCell, endCell)
+
+      // if (!isObjEqual(rangeState, selectState)) {
+
+      //   setRangeState?.(selectState)
+      // }
+    };
     pipeline.mapColumns((0, _utils.makeRecursiveMapper)((col, params) => {
       const {
         startIndex,
@@ -1210,6 +1278,7 @@ function columnCustom(opts) {
       // cell Index
       if (col.field === '#') {
         const prevContent = col.template;
+        const prevGetCellProps = col?.getCellProps;
         return {
           ...col,
           lock: !!col.fixed,
@@ -1244,7 +1313,73 @@ function columnCustom(opts) {
               overflow: 'visible',
               position: 'relative'
             }
-          })
+          }),
+          getCellProps(value, record, rowIndex) {
+            const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
+
+            // const isCellSelected = (!startCell || !endCell) ? false : selectRowIds.includes(record.rowId) && cols.includes(col.field);
+
+            return (0, _utils.mergeCellProps)(prevCellProps, {
+              // @ts-ignore
+              'data-col-key': col.field,
+              ref: el => {
+                if (focusedCell?.rowId === record.rowId && focusedCell?.colId === col.field && !isEditing.editing) {
+                  el?.focus({
+                    preventScroll: true
+                  });
+                }
+              },
+              style: {
+                ...prevCellProps?.style,
+                userSelect: 'none'
+                // padding: cellEditing ? 0 : undefined
+                // ...cellStyles,
+              },
+              className: (0, _classnames.default)(prevCellProps?.className, `${prefix}-grid-cell`, {
+                [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+                [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+                [`${prefix}-grid-cell-text-center`]: col?.textAlign === 'center',
+                [`${prefix}-grid-cell-text-right`]: col?.textAlign === 'right' || col.type === 'number',
+                [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(record.rowId),
+                'no-hover': editAble
+
+                // isValid: !isEditing && rowError && rowError[col.field]?.field === col.field,
+                // [`${prefix}-grid-cell-selected`]: isCellSelected,
+              }),
+              onMouseDown: e => {
+                prevCellProps?.onMouseDown?.(e);
+                if (editAble) {
+                  // if (record[rowKey] === editingKey) {
+                  if (isEditing.editing) {
+                    // setFocusedCell?.({ rowId: cell.row.id, colId: cell.column.id })
+                  } else {
+                    handleMouseDownIndex(record.rowId);
+                    if (isEditing.editing) {
+                      setTimeout(() => {
+                        // setEditingKey?.('')
+                        pipeline.setStateAtKey(_constants.stateKeyIsEditing, defaultCellEditing);
+                        reset?.();
+                      });
+                    }
+                  }
+                }
+              },
+              onMouseEnter: e => {
+                prevCellProps?.onMouseEnter?.(e);
+                // Edit
+
+                if (editAble) {
+                  handleMouseEnterIndex(record.rowId);
+                }
+              },
+              onMouseUp: e => {
+                prevCellProps?.onMouseUp?.(e);
+                if (editAble) {
+                  handleMouseUpIndex();
+                }
+              }
+            });
+          }
         };
       }
 
@@ -1511,9 +1646,6 @@ function columnCustom(opts) {
         }),
         getCellProps(value, record, rowIndex) {
           const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
-
-          // console.log('record', record)
-
           const fomatedValue = ['color', 'checkbox', 'field'].includes(col.type ?? '') ? '' : (0, _useColumns.renderValueCell)(col, value, record, rowIndex, 0, format, false);
           const tooltipContent = isOpenTooltip === false ? '' : col?.tooltipDescription ? typeof col.tooltipDescription === 'function' ? col.tooltipDescription({
             value,

package/lib/ali-table/utils/utility.d.ts

@@ -25,4 +25,15 @@ export declare function filterVisibleColumns<T extends ColumnTable>(columns: T[]
 export declare const sortByType: (arr: ColumnTable[], rowDnd?: RowDnd) => ColumnTable[];
 export declare function getVisibleColumnFields<T extends ColumnTable>(columns: T[]): string[];
 export declare const getOnlyInA: (a: string[], b: string[]) => string[];
+export declare const buildParentMap: <T extends {
+    id: string;
+    rowId: string;
+    children?: T[];
+}>(tree: T[]) => Map<string, T>;
+export declare const flattenTree: <T extends {
+    children?: T[];
+}>(tree: T[]) => T[];
+export declare const flattenTree2: <T extends {
+    children?: T[];
+}>(tree: T[]) => Omit<T, 'children'>[];
 export {};

package/lib/ali-table/utils/utility.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.addRowIdArray = void 0;
+exports.buildParentMap = exports.addRowIdArray = void 0;
 exports.filterDataByColumns1 = filterDataByColumns1;
 exports.filterVisibleColumns = filterVisibleColumns;
-exports.getOnlyInA = exports.getMaxDepth = exports.flattenArray = void 0;
+exports.getOnlyInA = exports.getMaxDepth = exports.flattenTree2 = exports.flattenTree = exports.flattenArray = void 0;
 exports.getVisibleColumnFields = getVisibleColumnFields;
 exports.sortByType = exports.shouldIncludeOptimized = void 0;
 exports.sortData = sortData;
@@ -723,4 +723,56 @@ const getOnlyInA = (a, b) => {
   const setB = new Set(b);
   return a.filter(item => !setB.has(item));
 };
-exports.getOnlyInA = getOnlyInA;
+exports.getOnlyInA = getOnlyInA;
+const buildParentMap = tree => {
+  const parentMap = new Map();
+  const stack = [...tree];
+  while (stack.length) {
+    const node = stack.pop();
+    const children = node.children;
+    if (!children?.length) continue;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      parentMap.set(child.rowId, node);
+      stack.push(child);
+    }
+  }
+  return parentMap;
+};
+exports.buildParentMap = buildParentMap;
+const flattenTree = tree => {
+  const result = [];
+  const stack = [...tree];
+  while (stack.length) {
+    const node = stack.pop();
+    result.push(node);
+    const children = node.children;
+    if (children?.length) {
+      // Push ngược để giữ nguyên thứ tự tree
+      for (let i = children.length - 1; i >= 0; i--) {
+        stack.push(children[i]);
+      }
+    }
+  }
+  return result;
+};
+exports.flattenTree = flattenTree;
+const flattenTree2 = tree => {
+  const result = [];
+  const stack = [...tree];
+  while (stack.length) {
+    const node = stack.pop();
+    const {
+      children,
+      ...item
+    } = node;
+    result.push(item);
+    if (children?.length) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        stack.push(children[i]);
+      }
+    }
+  }
+  return result;
+};
+exports.flattenTree2 = flattenTree2;

package/lib/table-component/table/Grid.js

@@ -175,12 +175,17 @@ const Grid = props => {
     // debugTable: true
   });
   _react.default.useEffect(() => {
+    setIsSelectionChange(prev => ({
+      ...prev,
+      isChange: false
+    }));
     if (!isSelectionChange.isChange) {
       if (mergedSelectedKeys.length === 0) {
         setIsSelectionChange(prev => ({
           ...prev,
           rowsData: []
         }));
+        setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
       } else {
         const abc = (0, _utils.flattenArray)(dataSource);
         const selectedKeySet = new Set(mergedSelectedKeys);
@@ -191,8 +196,14 @@ const Grid = props => {
           rowsData: result
         }));
       }
+    } else {
+      if (mergedSelectedKeys.length === 0) {
+        setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+      }
     }
-  }, [mergedSelectedKeys, dataSource]);
+  }, [mergedSelectedKeys, dataSource, isSelectionChange.isChange]);
+  // }, [mergedSelectedKeys, dataSource])
+
   _react.default.useEffect(() => {
     if (defaultFilter) {
       const a = (0, _utils.revertConvertFilters)(defaultFilter);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.73",
+  "version": "1.9.75",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -66,7 +66,7 @@
     "rc-checkbox": "3.5.0",
     "rc-dropdown": "4.2.1",
     "rc-field-form": "2.6.0",
-    "rc-master-ui": "1.1.63",
+    "rc-master-ui": "1.1.64",
     "rc-select": "14.16.3",
     "rc-tooltip": "6.3.0",
     "rc-tree": "5.10.1",