es-grid-template 1.9.63 → 1.9.65

package/es/table-component/TableContainerEdit.js

@@ -297,6 +297,20 @@ const TableContainerEdit = props => {
       });
     }
   }, [onCellPaste, originData, triggerChangeData]);
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    // trigger,
+    getValues,
+    reset,
+    formState: {
+      errors
+    }
+  } = useForm({
+    mode: 'onChange',
+    resolver: validate ? yupResolver(validate) : undefined
+  });
 
   // Copy
 
@@ -333,16 +347,144 @@ const TableContainerEdit = props => {
 
     copy(tsv).then(() => {}).catch(() => {});
   }, [startCell, endCell, table]);
+  const onSubmit = formData => {
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+
+      // const newData = [...dataSource]
+      const newData = [...originData];
+
+      // @ts-ignore
+      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = updateArrayByKey(newData, row, rowKey);
+      if (index > -1) {
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+  const handleCellChange = args => {
+    const {
+      record,
+      type: changeType,
+      newState,
+      prevState,
+      option,
+      field,
+      indexCol,
+      indexRow,
+      key
+    } = args;
+    if (changeType === 'blur') {
+      const handleChangeCallback = callbackData => {
+        const callbackRecord = callbackData;
+        Object.entries(callbackRecord).forEach(([name, value]) => {
+          setValue(name, value);
+        });
+        onSubmit(callbackRecord);
+      };
+      if (onCellChange) {
+        if (onCellChange.length > 1) {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            value: newState,
+            option,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            // rowsData: [...dataSource],
+            rowsData: [...originData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            // rowsData: [...dataSource],
+            rowsData: [...originData],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit(record);
+        }
+      }
+    }
+    if (prevState && newState && prevState !== newState && changeType === 'enter') {
+      onSubmit(record);
+    }
+  };
   React.useEffect(() => {
     const handleKeyDown = e => {
       if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
         e.preventDefault();
         copySelectionToClipboard();
       }
+      if (e.ctrlKey && e.key === 'x' && startCell && endCell && !editingKey) {
+        e.preventDefault();
+        if (startCell && endCell) {
+          const tmpData = flattenArray(originData);
+          const rs = tmpData.map((row, index) => {
+            if (!rangeState?.rowRange.includes(row.rowId)) {
+              return row;
+            }
+            const updatedRow = {
+              ...row
+            };
+            for (const colId of rangeState.colRange) {
+              const column = table.getVisibleFlatColumns().find(it => it.id === colId)?.columnDef.meta;
+              const columnIndex = table.getVisibleFlatColumns().findIndex(it => it.id === colId);
+              if (isEditable(column, row)) {
+                let newValue = '';
+                if (column.type === 'number') {
+                  newValue = 0;
+                }
+                if (column.type === 'boolean' || column.type === 'checkbox') {
+                  newValue = false;
+                }
+                const cellEditType = getEditType(column, row);
+                if (column.type === 'date' || column.type === 'datetime' || column.type === 'time' || column.type === 'month' || column.type === 'week' || column.type === 'year' || column.type === 'quarter' || cellEditType === 'asyncSelect' || cellEditType === 'select' || cellEditType === 'treeSelect' || cellEditType === 'selectTable') {
+                  newValue = undefined;
+                }
+                updatedRow[colId] = newValue;
+                handleCellChange({
+                  key: row[rowKey],
+                  field: column.field ?? column.dataIndex,
+                  record: updatedRow,
+                  prevState: row[column.field],
+                  newState: newValue,
+                  option: '',
+                  indexCol: columnIndex,
+                  indexRow: index,
+                  type: 'blur'
+                });
+              }
+            }
+            return updatedRow;
+          });
+          const newData = unFlattenData(rs);
+          triggerChangeData?.(newData, {
+            type: 'DELETE_CONTENT'
+          });
+        }
+        copySelectionToClipboard();
+      }
     };
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
+  }, [startCell, endCell, table, copySelectionToClipboard, editingKey, rangeState]);
 
   // Paste
 
@@ -752,20 +894,6 @@ const TableContainerEdit = props => {
       observer.disconnect();
     };
   }, []);
-  const {
-    control,
-    handleSubmit,
-    setValue,
-    // trigger,
-    getValues,
-    reset,
-    formState: {
-      errors
-    }
-  } = useForm({
-    mode: 'onChange',
-    resolver: validate ? yupResolver(validate) : undefined
-  });
   const handleAddMulti = React.useCallback((item, n, newId) => {
     if (item.onClick) {
       item.onClick({
@@ -790,28 +918,6 @@ const TableContainerEdit = props => {
       triggerChangeData?.(newData);
     }
   }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
-  const onSubmit = formData => {
-    try {
-      // const record = (await form.validateFields()) as RecordType;
-      const row = {
-        ...formData
-      };
-
-      // const newData = [...dataSource]
-      const newData = [...originData];
-
-      // @ts-ignore
-      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
-      const rs = updateArrayByKey(newData, row, rowKey);
-      if (index > -1) {
-        triggerChangeData?.(rs, {
-          type: 'CellChange'
-        });
-      }
-    } catch (errInfo) {
-      console.log('Validate Failed:', errInfo);
-    }
-  };
   const onSubmit2 = (formData, newOriginData) => {
     try {
       // const record = (await form.validateFields()) as RecordType;
@@ -834,63 +940,6 @@ const TableContainerEdit = props => {
       console.log('Validate Failed:', errInfo);
     }
   };
-  const handleCellChange = args => {
-    const {
-      record,
-      type: changeType,
-      newState,
-      prevState,
-      option,
-      field,
-      indexCol,
-      indexRow,
-      key
-    } = args;
-    if (changeType === 'blur') {
-      const handleChangeCallback = callbackData => {
-        const callbackRecord = callbackData;
-        Object.entries(callbackRecord).forEach(([name, value]) => {
-          setValue(name, value);
-        });
-        onSubmit(callbackRecord);
-      };
-      if (onCellChange) {
-        if (onCellChange.length > 1) {
-          onCellChange({
-            field,
-            indexCol,
-            type: 'onChange',
-            value: newState,
-            option,
-            indexRow,
-            rowData: record,
-            rowId: key,
-            // rowsData: [...dataSource],
-            rowsData: [...originData],
-            sumValue: []
-          }, handleChangeCallback);
-        } else {
-          onCellChange({
-            field,
-            indexCol,
-            type: 'onChange',
-            option,
-            value: newState,
-            indexRow,
-            rowData: record,
-            rowId: key,
-            // rowsData: [...dataSource],
-            rowsData: [...originData],
-            sumValue: []
-          }, handleChangeCallback);
-          onSubmit(record);
-        }
-      }
-    }
-    if (prevState && newState && prevState !== newState && changeType === 'enter') {
-      onSubmit(record);
-    }
-  };
   const handleCellChangeAndAddRow = args => {
     const {
       record,
@@ -1000,7 +1049,7 @@ const TableContainerEdit = props => {
     // không tính tree
 
     // Cập nhật data mới
-    const newData = flattenArray([...dataSource]);
+    const newData = flattenArray(originData);
 
     // const duplicatedItems = rowsFocus.map(index => ({ ...newData[index], rowId: newGuid(), id: undefined, isDuplicate: true }))
 
@@ -1025,13 +1074,14 @@ const TableContainerEdit = props => {
     const rsFilter = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
 
     // const rs  = updateOrInsertInOrder(originData, rsFilter)
-    const rs = updateOrInsert(originData, rsFilter);
+    const rs = updateOrInsert(newData, rsFilter);
     // const rs2  = mergeWithFilter(originData, rsFilter)
 
-    triggerChangeData?.(rs, {
+    const newDaa = unFlattenData(rs);
+    triggerChangeData?.(newDaa, {
       type: 'DUPLICATE'
     });
-  }, [dataSource, focusedCell, originData, rowKey, table, triggerChangeData]);
+  }, [focusedCell, originData, rowKey, table, triggerChangeData]);
 
   // thêm n dòng bên trên
   const handleInsertBefore = React.useCallback((item, n) => {

package/es/table-component/body/EditableCell.js

@@ -469,7 +469,9 @@ const EditableCell = props => {
             align: colSelect.textAlign
           };
         });
-        let valueSelectTable = formValues[dataIndex];
+
+        // let valueSelectTable = formValues[dataIndex]
+        let valueSelectTable = formValues[dataIndex] !== null ? formValues[dataIndex] : undefined;
         if (fieldValue) {
           // @ts-ignore
           valueSelectTable = record[fieldValue] ?? formValues[dataIndex];
@@ -618,14 +620,15 @@ const EditableCell = props => {
           "data-tooltip-id": `${id}-tooltip-error`
         });
       case 'select':
-        let valueSelect = formValues[dataIndex];
+        // let valueSelect = formValues[dataIndex]
+        let valueSelect = formValues[dataIndex] !== null ? formValues[dataIndex] : undefined;
         if (fieldValue) {
           // @ts-ignore
           valueSelect = record[fieldValue] ?? formValues[dataIndex];
         }
         return /*#__PURE__*/React.createElement(Select, {
           options: options,
-          value: valueSelect ?? '',
+          value: valueSelect,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -761,7 +764,8 @@ const EditableCell = props => {
           "data-tooltip-id": `${id}-tooltip-error`
         });
       case 'asyncSelect':
-        let valueAsyncSelect = formValues[dataIndex];
+        // let valueAsyncSelect = formValues[dataIndex]
+        let valueAsyncSelect = formValues[dataIndex] !== null ? formValues[dataIndex] : undefined;
         if (fieldValue) {
           // @ts-ignore
           valueAsyncSelect = record[fieldValue] ?? formValues[dataIndex];
@@ -769,7 +773,7 @@ const EditableCell = props => {
         return /*#__PURE__*/React.createElement(AsyncSelect, {
           options: options,
           defaultOptions: options,
-          value: valueAsyncSelect ?? undefined,
+          value: valueAsyncSelect,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();

package/es/table-component/body/TableBodyCellEdit.js

@@ -1,6 +1,8 @@
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getDragRightData, getEditType, getFormat, getNextEditableColumn, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getDragRightData, getEditType, getFormat,
+// getKeys,
+getNextEditableColumn, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
@@ -251,6 +253,10 @@ const TableBodyCellEdit = props => {
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+
+  // const rowIds  = getKeys(allRows, 'id' as any)
+  // const colIds  = table.getVisibleLeafColumns().map(c => c.id);
+
   const selectRowIds = React.useMemo(() => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
@@ -258,19 +264,19 @@ const TableBodyCellEdit = props => {
     if (!startCell || !endCell) return false;
 
     // const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
-    const colIds = getColIdsBetween(table, startCell.colId, endCell.colId);
-    return selectRowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
+    const colIdss = getColIdsBetween(table, startCell.colId, endCell.colId);
+    return selectRowIds.includes(cell.row.id) && colIdss.includes(cell.column.id);
   }, [cell.column.id, cell.row.id, endCell, selectRowIds, startCell, table]);
   const editType = typeof columnMeta.editType === 'function' ? columnMeta.editType(record) : columnMeta.editType;
   const {
     rowRange,
     colRange,
-    rowIds,
-    colIds,
     startColIndex,
     startRowIndex,
     endColIndex,
-    endRowIndex
+    endRowIndex,
+    rowIds,
+    colIds
   } = rangeState ?? {};
   const pasteRangeState = getSelectedCellMatrix(table, startPasteCell, endPasteCell);
   const isInRange = colRange && rowRange && rowRange.includes(cell.row.id) && colRange.includes(cell.column.id);
@@ -280,8 +286,8 @@ const TableBodyCellEdit = props => {
 
   const rowIdx = rowIds ? rowIds.indexOf(cell.row.id) : -1;
   const colIdx = colIds ? colIds.indexOf(cell.column.id) : -1;
-  const rowIdxPaste = pasteRangeState.rowIds.indexOf(cell.row.id);
-  const colIdxPaste = pasteRangeState.colIds.indexOf(cell.column.id);
+  const rowIdxPaste = pasteRangeState?.rowIds ? pasteRangeState?.rowIds.indexOf(cell.row.id) : undefined;
+  const colIdxPaste = pasteRangeState?.colIds ? pasteRangeState?.colIds.indexOf(cell.column.id) : undefined;
   const isTop = rowIdx === startRowIndex;
   const isBottom = rowIdx === endRowIndex;
   const isLeft = colIdx === startColIndex;

package/es/table-component/header/TableHeadCell2.js

@@ -125,9 +125,9 @@ const TableHeadCell2 = props => {
   const doFilter = type => {
     if (type) {
       if (fieldOriginal) {
-        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
       } else {
-        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
       }
 
       // column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)

package/es/table-component/hook/useColumns.js

@@ -255,7 +255,7 @@ export const toggleRowSelection = props => {
       // đã chọn
 
       // xóa row ra list selected 
-      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      const newRowsSelected = prevSelected.filter(it => it.rowId !== row.id);
       setIsSelectionChange({
         isChange: true,
         type: 'rowSelected',

package/es/table-component/hook/utils.d.ts

@@ -42,7 +42,7 @@ export declare function getDateValueType(value: unknown): DateValueType;
 export declare const convertToDate: (value?: string | Date | null, format?: string) => string;
 export declare const getTypeFilter: (col: any) => TypeFilter;
 export declare const addRowIdArray: (inputArray: any[]) => any[];
-export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
+export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any[];
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const flatColumnsWithoutParent: (columns: any[]) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;

package/es/table-component/hook/utils.js

@@ -1472,15 +1472,13 @@ export const getSelectedCellMatrix2 = (flatData, visibleLeafColumns, startCell,
     endRowIndex,
     startColIndex,
     endColIndex,
-    rowIds,
-    colIds,
+    // rowIds,
+    // colIds,
     type
   };
 };
 export const getSelectedCellMatrix1 = (flatData, visibleLeafColumns, startCell, endCell, type) => {
   if (!startCell || !endCell) return {
-    rowIds: [],
-    colIds: [],
     startRowIndex: undefined,
     endRowIndex: undefined,
     startColIndex: undefined,
@@ -1526,8 +1524,6 @@ export const getSelectedCellMatrix1 = (flatData, visibleLeafColumns, startCell,
     endRowIndex: normalizedEndRowIndex,
     startColIndex: normalizedStartColIndex,
     endColIndex: normalizedEndColIndex,
-    rowIds,
-    colIds,
     type
   };
 };

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

@@ -14,7 +14,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import React, { Fragment } from 'react';
 import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
-import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual, revertConvertFilters } from "../hook/utils";
+import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, flattenArray, getAllRowKey, revertConvertFilters } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
 import classNames from 'classnames';
 import { GridStyle } from "../style";
@@ -169,6 +169,25 @@ const Grid = props => {
 
     // debugTable: true
   });
+  React.useEffect(() => {
+    if (!isSelectionChange.isChange) {
+      if (mergedSelectedKeys.length === 0) {
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: []
+        }));
+      } else {
+        const abc = flattenArray(dataSource);
+        const selectedKeySet = new Set(mergedSelectedKeys);
+        const result = abc.filter(row => selectedKeySet.has(row.id));
+        setRowSelection(convertToObjTrue(mergedSelectedKeys));
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: result
+        }));
+      }
+    }
+  }, [mergedSelectedKeys, dataSource]);
   React.useEffect(() => {
     if (defaultFilter) {
       const a = revertConvertFilters(defaultFilter);
@@ -198,20 +217,6 @@ const Grid = props => {
       }
     }
   }, [columnHidden, columnSizingInfo]);
-  React.useEffect(() => {
-    const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection);
-    if (!isEqual) {
-      setRowSelection(convertToObjTrue(mergedSelectedKeys));
-      // table.setRowSelection(convertToObjTrue(mergedSelectedKeys))
-
-      if (mergedSelectedKeys.length === 0) {
-        setIsSelectionChange(prev => ({
-          ...prev,
-          rowsData: []
-        }));
-      }
-    }
-  }, [mergedSelectedKeys]);
   React.useEffect(() => {
     if (isSelectionChange.isChange) {
       const aa = table.getState().rowSelection;
@@ -220,11 +225,12 @@ const Grid = props => {
       // const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
       const ssss = filterByIds(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
 
-      const rs = ssss.map(it => it.original);
+      // const rs = ssss.map(it => it.original)
+
       rowSelected?.({
         type: isSelectionChange.type,
         rowData: isSelectionChange.rowData,
-        selected: rs
+        selected: ssss
       });
     }
   }, [isSelectionChange, rowSelection, table.getState().rowSelection]);

package/es/table-component/useContext.d.ts

@@ -105,6 +105,6 @@ export type ContextCellChange = {
     indexCol: number;
     newState?: any;
     prevState?: any;
-    type: 'enter' | 'blur' | 'outClick';
+    type: 'enter' | 'blur' | 'outClick' | string;
     addNewRow?: boolean;
 };

package/lib/ali-table/Grid.js

@@ -22,6 +22,7 @@ var _useContext = require("./useContext");
 var _styles2 = require("./base-table/styles");
 var _ColumnsConfig = require("../table-component/ColumnsConfig");
 var _utils = require("../table-component/hook/utils");
+var _utility = require("./utils/utility");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import type { TableProps } from "../table-component"
@@ -65,7 +66,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     originColumns,
     // columns,
     groupColumns,
-    // setVisibleKeys,
+    setVisibleKeys,
     footerDataSource,
     loading,
     useVirtual,
@@ -167,12 +168,14 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     };
   }, []);
   const triggerChangeColumns = (cols, keys, type) => {
+    const abc = (0, _utility.getVisibleColumnFields)(cols);
+    setVisibleKeys(abc);
     if (type === 'cellClick') {
 
       //  setColumns(cols)
     } else {
       //  setColumns(cols)
-      pipeline.columns(cols);
+      // pipeline.columns(cols)
 
       // const aa = flatColumns2(columns).map((it) => it.field)