es-grid-template 1.4.8 → 1.5.0

package/es/grid-component/InternalTable.js

@@ -705,7 +705,7 @@ const InternalTable = props => {
               }
               if (commandClick) {
                 commandClick({
-                  id,
+                  id: idCommand,
                   rowId: rowData.rowId,
                   rowData,
                   index,
@@ -717,7 +717,7 @@ const InternalTable = props => {
               // server ~~ không làm gì
               if (commandClick) {
                 commandClick({
-                  id,
+                  id: idCommand,
                   rowId: rowData.rowId,
                   rowData,
                   index,

package/es/grid-component/TableGrid.js

@@ -36,7 +36,9 @@ const convertFilters = filters => {
     filteredKeys,
     operator
   }) => {
-    if (!filteredKeys || filteredKeys.length === 0) return;
+    if (!filteredKeys || filteredKeys.length === 0) {
+      return;
+    }
     if (column?.typeFilter === "DateRange" && filteredKeys.length === 2) {
       result.push({
         key,
@@ -399,7 +401,7 @@ const TableGrid = props => {
       // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       selectedRowKeys: mergedSelectedKeys,
       // defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
-      defaultSelectedRowKeys: defaultSelectedRowKeys,
+      defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
       hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }

package/es/grid-component/hooks/utils.js

@@ -506,10 +506,12 @@ export const getRowsPasteIndex = pasteRows => {
   return [...new Set(result)];
 };
 export function addRows8(arr, n) {
-  if (!Array.isArray(arr) || arr.length === 0) return {
-    combined: arr,
-    addedRows: []
-  };
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
   const m = arr.length;
   const numCols = arr[0].length;
   const addedRows = [];
@@ -643,10 +645,12 @@ export function addRows8(arr, n) {
 }
 export function addRowsUp(array, n) {
   const arr = array.reverse();
-  if (!Array.isArray(arr) || arr.length === 0) return {
-    combined: arr,
-    addedRows: []
-  };
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
   const m = arr.length;
   const numCols = arr[0].length;
   const addedRows = [];
@@ -1368,12 +1372,16 @@ export const buildConnectedRegions = cells => {
   ];
   const regions = [];
   for (const cell of cells) {
-    if (visited.has(cell.key)) continue;
+    if (visited.has(cell.key)) {
+      continue;
+    }
     const stack = [cell];
     const region = [];
     while (stack.length) {
       const current = stack.pop();
-      if (visited.has(current.key)) continue;
+      if (visited.has(current.key)) {
+        continue;
+      }
       visited.add(current.key);
       region.push(current);
       for (const [dr, dc] of directions) {
@@ -1421,9 +1429,13 @@ export function isRightMostInRegion(rowIndex, colIndex, listSelectCell) {
   return false;
 }
 export function isEqualSet(setA, setB) {
-  if (setA.size !== setB.size) return false;
+  if (setA.size !== setB.size) {
+    return false;
+  }
   for (const item of setA) {
-    if (!setB.has(item)) return false;
+    if (!setB.has(item)) {
+      return false;
+    }
   }
   return true;
 }
@@ -1489,7 +1501,9 @@ export function getCellsByPosition(cellSet, position = "bottom") {
         // return cells.filter(c => c.row === minRow).map(c => c.key);
 
         const minRow = Math.min(...cells.map(c => c.row));
-        if (minRow === 0) return []; // Bỏ qua nếu rowIndex = 0
+        if (minRow === 0) {
+          return [];
+        } // Bỏ qua nếu rowIndex = 0
 
         return cells.filter(c => c.row === minRow).map(c => `${c.row}-${c.col}`);
       }
@@ -1509,7 +1523,9 @@ export function getCellsByPosition(cellSet, position = "bottom") {
         // return cells.filter(c => c.col === minCol).map(c => c.key);
 
         const minCol = Math.min(...cells.map(c => c.col));
-        if (minCol === 0) return []; // Bỏ qua nếu colIndex = 0
+        if (minCol === 0) {
+          return [];
+        } // Bỏ qua nếu colIndex = 0
 
         // Trả về các ô cùng row, nhưng ở cột bên trái
         return cells.filter(c => c.col === minCol).map(c => `${c.row}-${c.col}`);
@@ -1544,7 +1560,9 @@ export function getCellsByPosition2(cellSet, position = "bottom") {
         // return cells.filter(c => c.row === minRow).map(c => c.key);
 
         const minRow = Math.min(...cells.map(c => c.row));
-        if (minRow === 0) return []; // Bỏ qua nếu rowIndex = 0
+        if (minRow === 0) {
+          return [];
+        } // Bỏ qua nếu rowIndex = 0
 
         return cells.filter(c => c.row === minRow).map(c => `${c.row - 1}-${c.col}`);
       }
@@ -1564,7 +1582,9 @@ export function getCellsByPosition2(cellSet, position = "bottom") {
         // return cells.filter(c => c.col === minCol).map(c => c.key);
 
         const minCol = Math.min(...cells.map(c => c.col));
-        if (minCol === 0) return []; // Bỏ qua nếu colIndex = 0
+        if (minCol === 0) {
+          return [];
+        } // Bỏ qua nếu colIndex = 0
 
         // Trả về các ô cùng row, nhưng ở cột bên trái
         return cells.filter(c => c.col === minCol).map(c => `${c.row}-${c.col - 1}`);

package/es/grid-component/styles.scss

@@ -518,12 +518,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
             pointer-events: none; /* không ảnh hưởng đến tương tác */
             z-index: 1;
           }
-          &.ui-rc-table-cell-fix-left {
+          &.ui-rc-table-cell-fix-left.ui-rc-table-cell-fix-left-last {
             &::after {
               left: -100%;
             }
           }
-          &.ui-rc-table-cell-fix-right {
+          &.ui-rc-table-cell-fix-right.ui-rc-table-cell-fix-right-first {
             &::after {
               left: 100%;
             }

package/es/grid-component/table/GridEdit.js

@@ -976,7 +976,10 @@ const GridEdit = props => {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
 
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
-        setEditingKey('');
+        // setEditingKey('')
+        setTimeout(() => {
+          setEditingKey('');
+        });
         isSelecting.current = false;
         startCell.current = null;
         // setSelectedCells(new Set())
@@ -990,9 +993,12 @@ const GridEdit = props => {
         setRangeCells(new Set());
       }
     };
+
+    // document.addEventListener('click', handleClickOutside)
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
     return () => {
+      // document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
     };
@@ -1437,7 +1443,7 @@ const GridEdit = props => {
       if (target.closest('.dragging-point')) {
         e.stopPropagation();
         e.preventDefault();
-        return; // Không xử lý gì cả
+        // Không xử lý gì cả
       } else {
         // setStartSelectedCell({row, col})
 
@@ -1686,7 +1692,9 @@ const GridEdit = props => {
       startCell.current = null;
       e.stopPropagation();
     }
-    if (!isSelectingRow.current || !rowStart.current) return;
+    if (!isSelectingRow.current || !rowStart.current) {
+      return;
+    }
     // const { row: startRow, col: startCol } = rowStart.current;
     const {
       row: startRow,
@@ -2227,7 +2235,7 @@ const GridEdit = props => {
             disable: !isEditable(column, record)
           }),
           record,
-          column: column,
+          column,
           editType: getEditType(column, record),
           dataIndex: column.dataIndex,
           indexRow: rowNumber,
@@ -2441,7 +2449,6 @@ const GridEdit = props => {
     }
     if (args.item.key === 'DELETE_CONTENT') {
       handleDeleteContent();
-      return;
     }
   };
   const hideModalAddRow = () => {

package/lib/grid-component/InternalTable.js

@@ -716,7 +716,7 @@ const InternalTable = props => {
               }
               if (commandClick) {
                 commandClick({
-                  id,
+                  id: idCommand,
                   rowId: rowData.rowId,
                   rowData,
                   index,
@@ -728,7 +728,7 @@ const InternalTable = props => {
               // server ~~ không làm gì
               if (commandClick) {
                 commandClick({
-                  id,
+                  id: idCommand,
                   rowId: rowData.rowId,
                   rowData,
                   index,

package/lib/grid-component/TableGrid.js

@@ -36,7 +36,9 @@ const convertFilters = filters => {
     filteredKeys,
     operator
   }) => {
-    if (!filteredKeys || filteredKeys.length === 0) return;
+    if (!filteredKeys || filteredKeys.length === 0) {
+      return;
+    }
     if (column?.typeFilter === "DateRange" && filteredKeys.length === 2) {
       result.push({
         key,
@@ -399,7 +401,7 @@ const TableGrid = props => {
       // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       selectedRowKeys: mergedSelectedKeys,
       // defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
-      defaultSelectedRowKeys: defaultSelectedRowKeys,
+      defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
       hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }

package/lib/grid-component/hooks/utils.js

@@ -580,10 +580,12 @@ const getRowsPasteIndex = pasteRows => {
 };
 exports.getRowsPasteIndex = getRowsPasteIndex;
 function addRows8(arr, n) {
-  if (!Array.isArray(arr) || arr.length === 0) return {
-    combined: arr,
-    addedRows: []
-  };
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
   const m = arr.length;
   const numCols = arr[0].length;
   const addedRows = [];
@@ -717,10 +719,12 @@ function addRows8(arr, n) {
 }
 function addRowsUp(array, n) {
   const arr = array.reverse();
-  if (!Array.isArray(arr) || arr.length === 0) return {
-    combined: arr,
-    addedRows: []
-  };
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
   const m = arr.length;
   const numCols = arr[0].length;
   const addedRows = [];
@@ -1459,12 +1463,16 @@ const buildConnectedRegions = cells => {
   ];
   const regions = [];
   for (const cell of cells) {
-    if (visited.has(cell.key)) continue;
+    if (visited.has(cell.key)) {
+      continue;
+    }
     const stack = [cell];
     const region = [];
     while (stack.length) {
       const current = stack.pop();
-      if (visited.has(current.key)) continue;
+      if (visited.has(current.key)) {
+        continue;
+      }
       visited.add(current.key);
       region.push(current);
       for (const [dr, dc] of directions) {
@@ -1515,9 +1523,13 @@ function isRightMostInRegion(rowIndex, colIndex, listSelectCell) {
   return false;
 }
 function isEqualSet(setA, setB) {
-  if (setA.size !== setB.size) return false;
+  if (setA.size !== setB.size) {
+    return false;
+  }
   for (const item of setA) {
-    if (!setB.has(item)) return false;
+    if (!setB.has(item)) {
+      return false;
+    }
   }
   return true;
 }
@@ -1586,7 +1598,9 @@ function getCellsByPosition(cellSet, position = "bottom") {
         // return cells.filter(c => c.row === minRow).map(c => c.key);
 
         const minRow = Math.min(...cells.map(c => c.row));
-        if (minRow === 0) return []; // Bỏ qua nếu rowIndex = 0
+        if (minRow === 0) {
+          return [];
+        } // Bỏ qua nếu rowIndex = 0
 
         return cells.filter(c => c.row === minRow).map(c => `${c.row}-${c.col}`);
       }
@@ -1606,7 +1620,9 @@ function getCellsByPosition(cellSet, position = "bottom") {
         // return cells.filter(c => c.col === minCol).map(c => c.key);
 
         const minCol = Math.min(...cells.map(c => c.col));
-        if (minCol === 0) return []; // Bỏ qua nếu colIndex = 0
+        if (minCol === 0) {
+          return [];
+        } // Bỏ qua nếu colIndex = 0
 
         // Trả về các ô cùng row, nhưng ở cột bên trái
         return cells.filter(c => c.col === minCol).map(c => `${c.row}-${c.col}`);
@@ -1641,7 +1657,9 @@ function getCellsByPosition2(cellSet, position = "bottom") {
         // return cells.filter(c => c.row === minRow).map(c => c.key);
 
         const minRow = Math.min(...cells.map(c => c.row));
-        if (minRow === 0) return []; // Bỏ qua nếu rowIndex = 0
+        if (minRow === 0) {
+          return [];
+        } // Bỏ qua nếu rowIndex = 0
 
         return cells.filter(c => c.row === minRow).map(c => `${c.row - 1}-${c.col}`);
       }
@@ -1661,7 +1679,9 @@ function getCellsByPosition2(cellSet, position = "bottom") {
         // return cells.filter(c => c.col === minCol).map(c => c.key);
 
         const minCol = Math.min(...cells.map(c => c.col));
-        if (minCol === 0) return []; // Bỏ qua nếu colIndex = 0
+        if (minCol === 0) {
+          return [];
+        } // Bỏ qua nếu colIndex = 0
 
         // Trả về các ô cùng row, nhưng ở cột bên trái
         return cells.filter(c => c.col === minCol).map(c => `${c.row}-${c.col - 1}`);

package/lib/grid-component/styles.scss

@@ -518,12 +518,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
             pointer-events: none; /* không ảnh hưởng đến tương tác */
             z-index: 1;
           }
-          &.ui-rc-table-cell-fix-left {
+          &.ui-rc-table-cell-fix-left.ui-rc-table-cell-fix-left-last {
             &::after {
               left: -100%;
             }
           }
-          &.ui-rc-table-cell-fix-right {
+          &.ui-rc-table-cell-fix-right.ui-rc-table-cell-fix-right-first {
             &::after {
               left: 100%;
             }

package/lib/grid-component/table/GridEdit.js

@@ -980,7 +980,10 @@ const GridEdit = props => {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
 
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
-        setEditingKey('');
+        // setEditingKey('')
+        setTimeout(() => {
+          setEditingKey('');
+        });
         isSelecting.current = false;
         startCell.current = null;
         // setSelectedCells(new Set())
@@ -994,9 +997,12 @@ const GridEdit = props => {
         setRangeCells(new Set());
       }
     };
+
+    // document.addEventListener('click', handleClickOutside)
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
     return () => {
+      // document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
     };
@@ -1441,7 +1447,7 @@ const GridEdit = props => {
       if (target.closest('.dragging-point')) {
         e.stopPropagation();
         e.preventDefault();
-        return; // Không xử lý gì cả
+        // Không xử lý gì cả
       } else {
         // setStartSelectedCell({row, col})
 
@@ -1690,7 +1696,9 @@ const GridEdit = props => {
       startCell.current = null;
       e.stopPropagation();
     }
-    if (!isSelectingRow.current || !rowStart.current) return;
+    if (!isSelectingRow.current || !rowStart.current) {
+      return;
+    }
     // const { row: startRow, col: startCol } = rowStart.current;
     const {
       row: startRow,
@@ -2231,7 +2239,7 @@ const GridEdit = props => {
             disable: !(0, _hooks.isEditable)(column, record)
           }),
           record,
-          column: column,
+          column,
           editType: (0, _hooks.getEditType)(column, record),
           dataIndex: column.dataIndex,
           indexRow: rowNumber,
@@ -2445,7 +2453,6 @@ const GridEdit = props => {
     }
     if (args.item.key === 'DELETE_CONTENT') {
       handleDeleteContent();
-      return;
     }
   };
   const hideModalAddRow = () => {

package/package.json

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