es-grid-template 1.9.63 → 1.9.65

package/lib/table-component/TableContainerEdit.js

@@ -296,6 +296,20 @@ const TableContainerEdit = props => {
       });
     }
   }, [onCellPaste, originData, triggerChangeData]);
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    // trigger,
+    getValues,
+    reset,
+    formState: {
+      errors
+    }
+  } = (0, _reactHookForm.useForm)({
+    mode: 'onChange',
+    resolver: validate ? (0, _yup.yupResolver)(validate) : undefined
+  });
 
   // Copy
 
@@ -332,16 +346,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 = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = (0, _utils.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.default.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 = (0, _utils.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 ((0, _utils.isEditable)(column, row)) {
+                let newValue = '';
+                if (column.type === 'number') {
+                  newValue = 0;
+                }
+                if (column.type === 'boolean' || column.type === 'checkbox') {
+                  newValue = false;
+                }
+                const cellEditType = (0, _utils.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 = (0, _utils.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
 
@@ -751,20 +893,6 @@ const TableContainerEdit = props => {
       observer.disconnect();
     };
   }, []);
-  const {
-    control,
-    handleSubmit,
-    setValue,
-    // trigger,
-    getValues,
-    reset,
-    formState: {
-      errors
-    }
-  } = (0, _reactHookForm.useForm)({
-    mode: 'onChange',
-    resolver: validate ? (0, _yup.yupResolver)(validate) : undefined
-  });
   const handleAddMulti = _react.default.useCallback((item, n, newId) => {
     if (item.onClick) {
       item.onClick({
@@ -789,28 +917,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 = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
-      const rs = (0, _utils.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;
@@ -833,63 +939,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,
@@ -999,7 +1048,7 @@ const TableContainerEdit = props => {
     // không tính tree
 
     // Cập nhật data mới
-    const newData = (0, _utils.flattenArray)([...dataSource]);
+    const newData = (0, _utils.flattenArray)(originData);
 
     // const duplicatedItems = rowsFocus.map(index => ({ ...newData[index], rowId: newGuid(), id: undefined, isDuplicate: true }))
 
@@ -1024,13 +1073,14 @@ const TableContainerEdit = props => {
     const rsFilter = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
 
     // const rs  = updateOrInsertInOrder(originData, rsFilter)
-    const rs = (0, _utils.updateOrInsert)(originData, rsFilter);
+    const rs = (0, _utils.updateOrInsert)(newData, rsFilter);
     // const rs2  = mergeWithFilter(originData, rsFilter)
 
-    triggerChangeData?.(rs, {
+    const newDaa = (0, _utils.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.default.useCallback((item, n) => {

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

@@ -476,7 +476,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];
@@ -625,14 +627,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.default.createElement(_rcMasterUi.Select, {
           options: options,
-          value: valueSelect ?? '',
+          value: valueSelect,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -768,7 +771,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];
@@ -776,7 +780,7 @@ const EditableCell = props => {
         return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
           options: options,
           defaultOptions: options,
-          value: valueAsyncSelect ?? undefined,
+          value: valueAsyncSelect,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();

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

@@ -258,6 +258,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.default.useMemo(() => {
     return startCell && endCell ? (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
@@ -265,19 +269,19 @@ const TableBodyCellEdit = props => {
     if (!startCell || !endCell) return false;
 
     // const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
-    const colIds = (0, _utils.getColIdsBetween)(table, startCell.colId, endCell.colId);
-    return selectRowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
+    const colIdss = (0, _utils.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 = (0, _utils.getSelectedCellMatrix)(table, startPasteCell, endPasteCell);
   const isInRange = colRange && rowRange && rowRange.includes(cell.row.id) && colRange.includes(cell.column.id);
@@ -287,8 +291,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/lib/table-component/header/TableHeadCell2.js

@@ -133,9 +133,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/lib/table-component/hook/useColumns.js

@@ -267,7 +267,7 @@ 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/lib/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/lib/table-component/hook/utils.js

@@ -1607,16 +1607,14 @@ const getSelectedCellMatrix2 = (flatData, visibleLeafColumns, startCell, endCell
     endRowIndex,
     startColIndex,
     endColIndex,
-    rowIds,
-    colIds,
+    // rowIds,
+    // colIds,
     type
   };
 };
 exports.getSelectedCellMatrix2 = getSelectedCellMatrix2;
 const getSelectedCellMatrix1 = (flatData, visibleLeafColumns, startCell, endCell, type) => {
   if (!startCell || !endCell) return {
-    rowIds: [],
-    colIds: [],
     startRowIndex: undefined,
     endRowIndex: undefined,
     startColIndex: undefined,
@@ -1662,8 +1660,6 @@ const getSelectedCellMatrix1 = (flatData, visibleLeafColumns, startCell, endCell
     endRowIndex: normalizedEndRowIndex,
     startColIndex: normalizedStartColIndex,
     endColIndex: normalizedEndColIndex,
-    rowIds,
-    colIds,
     type
   };
 };

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

@@ -174,6 +174,25 @@ const Grid = props => {
 
     // debugTable: true
   });
+  _react.default.useEffect(() => {
+    if (!isSelectionChange.isChange) {
+      if (mergedSelectedKeys.length === 0) {
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: []
+        }));
+      } else {
+        const abc = (0, _utils.flattenArray)(dataSource);
+        const selectedKeySet = new Set(mergedSelectedKeys);
+        const result = abc.filter(row => selectedKeySet.has(row.id));
+        setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: result
+        }));
+      }
+    }
+  }, [mergedSelectedKeys, dataSource]);
   _react.default.useEffect(() => {
     if (defaultFilter) {
       const a = (0, _utils.revertConvertFilters)(defaultFilter);
@@ -203,20 +222,6 @@ const Grid = props => {
       }
     }
   }, [columnHidden, columnSizingInfo]);
-  _react.default.useEffect(() => {
-    const isEqual = (0, _utils.isObjEqual)((0, _utils.convertToObjTrue)(mergedSelectedKeys), rowSelection);
-    if (!isEqual) {
-      setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
-      // table.setRowSelection(convertToObjTrue(mergedSelectedKeys))
-
-      if (mergedSelectedKeys.length === 0) {
-        setIsSelectionChange(prev => ({
-          ...prev,
-          rowsData: []
-        }));
-      }
-    }
-  }, [mergedSelectedKeys]);
   _react.default.useEffect(() => {
     if (isSelectionChange.isChange) {
       const aa = table.getState().rowSelection;
@@ -225,11 +230,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 = (0, _utils.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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.63",
+  "version": "1.9.65",
   "description": "es-grid-template",
   "keywords": [
     "react",