es-grid-template 1.8.48 → 1.8.51

package/es/table-component/TableContainerEdit.js

@@ -483,12 +483,12 @@ const TableContainerEdit = props => {
                   [columnKey]: null
                 };
               }
-              if (isFormattedNumber(cellValue.trim())) {
+              if (isFormattedNumber(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
                 const colFormat = typeof columnOri.format === 'function' ? columnOri.format(record) : columnOri.format;
                 const valuePasteFormat = detectSeparators(cellValue.trim());
                 const cellFormat = getFormat(colFormat, format);
-                const thousandSeparator = valuePasteFormat?.thousandSeparator ?? cellFormat?.thousandSeparator;
-                const decimalSeparator = valuePasteFormat?.decimalSeparator ?? cellFormat?.decimalSeparator;
+                const thousandSeparator = valuePasteFormat?.thousandSeparator;
+                const decimalSeparator = valuePasteFormat?.decimalSeparator;
                 const dec = cellFormat?.decimalScale;
                 const numericFormatProps = {
                   thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),

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

@@ -477,6 +477,10 @@ const TableBodyCell = props => {
           isSelectionChange,
           selectionSettings
         });
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: cell.row.id
+        });
       }
     }
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -697,6 +697,78 @@ const TableBodyCellEdit = props => {
       }
       return;
     }
+    if (e.key === 'ArrowDown') {
+      // e.preventDefault()
+      // e.stopPropagation()
+
+      const nextRow = table.getRowModel().rows[rowNumber + 1];
+      if (nextRow) {
+        const nextRowId = nextRow.id;
+        setFocusedCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setStartCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setEndCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId: nextRowId,
+          colId
+        }, {
+          rowId: nextRowId,
+          colId
+        }));
+
+        // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
+        // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
+
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      // e.preventDefault()
+      // e.stopPropagation()
+
+      const nextRow = table.getRowModel().rows[rowNumber - 1];
+      if (nextRow) {
+        const nextRowId = nextRow.id;
+        setFocusedCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setStartCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setEndCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId: nextRowId,
+          colId
+        }, {
+          rowId: nextRowId,
+          colId
+        }));
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      return;
+    }
     if (e.key === 'Delete') {
       handleDeleteContent?.();
       return;

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

@@ -677,7 +677,7 @@ export const isFormattedNumber = str => {
   const regexEU = /^\d{1,3}(\.\d{3})*(,\d+)?$/; // 100.000,111
 
   // Không có dấu hàng nghìn, chỉ dấu thập phân: 100000.1 hoặc 100000,01
-  const regexDecimalOnly = /^\d+([.,]\d{1,})$/;
+  const regexDecimalOnly = /^-?\d+([.,]\d{1,})$/;
   return regexUS.test(str) || regexEU.test(str) || regexDecimalOnly.test(str);
 };
 export const detectSeparators = str => {
@@ -704,9 +704,9 @@ export const detectSeparators = str => {
     if (parts.length === 2) {
       return parts[1].length === 3 ? {
         thousandSeparator: ',',
-        decimalSeparator: null
+        decimalSeparator: undefined
       } : {
-        thousandSeparator: null,
+        thousandSeparator: undefined,
         decimalSeparator: ','
       };
     }
@@ -718,9 +718,9 @@ export const detectSeparators = str => {
     if (parts.length === 2) {
       return parts[1].length === 3 ? {
         thousandSeparator: '.',
-        decimalSeparator: null
+        decimalSeparator: undefined
       } : {
-        thousandSeparator: null,
+        thousandSeparator: undefined,
         decimalSeparator: '.'
       };
     }

package/lib/table-component/TableContainerEdit.js

@@ -490,12 +490,12 @@ const TableContainerEdit = props => {
                   [columnKey]: null
                 };
               }
-              if ((0, _utils.isFormattedNumber)(cellValue.trim())) {
+              if ((0, _utils.isFormattedNumber)(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
                 const colFormat = typeof columnOri.format === 'function' ? columnOri.format(record) : columnOri.format;
                 const valuePasteFormat = (0, _utils.detectSeparators)(cellValue.trim());
                 const cellFormat = (0, _utils.getFormat)(colFormat, format);
-                const thousandSeparator = valuePasteFormat?.thousandSeparator ?? cellFormat?.thousandSeparator;
-                const decimalSeparator = valuePasteFormat?.decimalSeparator ?? cellFormat?.decimalSeparator;
+                const thousandSeparator = valuePasteFormat?.thousandSeparator;
+                const decimalSeparator = valuePasteFormat?.decimalSeparator;
                 const dec = cellFormat?.decimalScale;
                 const numericFormatProps = {
                   thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),

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

@@ -484,6 +484,10 @@ const TableBodyCell = props => {
           isSelectionChange,
           selectionSettings
         });
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: cell.row.id
+        });
       }
     }
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -703,6 +703,78 @@ const TableBodyCellEdit = props => {
       }
       return;
     }
+    if (e.key === 'ArrowDown') {
+      // e.preventDefault()
+      // e.stopPropagation()
+
+      const nextRow = table.getRowModel().rows[rowNumber + 1];
+      if (nextRow) {
+        const nextRowId = nextRow.id;
+        setFocusedCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setStartCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setEndCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
+          rowId: nextRowId,
+          colId
+        }, {
+          rowId: nextRowId,
+          colId
+        }));
+
+        // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
+        // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
+
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      // e.preventDefault()
+      // e.stopPropagation()
+
+      const nextRow = table.getRowModel().rows[rowNumber - 1];
+      if (nextRow) {
+        const nextRowId = nextRow.id;
+        setFocusedCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setStartCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setEndCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
+          rowId: nextRowId,
+          colId
+        }, {
+          rowId: nextRowId,
+          colId
+        }));
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      return;
+    }
     if (e.key === 'Delete') {
       handleDeleteContent?.();
       return;

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

@@ -769,7 +769,7 @@ const isFormattedNumber = str => {
   const regexEU = /^\d{1,3}(\.\d{3})*(,\d+)?$/; // 100.000,111
 
   // Không có dấu hàng nghìn, chỉ dấu thập phân: 100000.1 hoặc 100000,01
-  const regexDecimalOnly = /^\d+([.,]\d{1,})$/;
+  const regexDecimalOnly = /^-?\d+([.,]\d{1,})$/;
   return regexUS.test(str) || regexEU.test(str) || regexDecimalOnly.test(str);
 };
 exports.isFormattedNumber = isFormattedNumber;
@@ -797,9 +797,9 @@ const detectSeparators = str => {
     if (parts.length === 2) {
       return parts[1].length === 3 ? {
         thousandSeparator: ',',
-        decimalSeparator: null
+        decimalSeparator: undefined
       } : {
-        thousandSeparator: null,
+        thousandSeparator: undefined,
         decimalSeparator: ','
       };
     }
@@ -811,9 +811,9 @@ const detectSeparators = str => {
     if (parts.length === 2) {
       return parts[1].length === 3 ? {
         thousandSeparator: '.',
-        decimalSeparator: null
+        decimalSeparator: undefined
       } : {
-        thousandSeparator: null,
+        thousandSeparator: undefined,
         decimalSeparator: '.'
       };
     }

package/package.json

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