react-table-edit 0.4.8 → 0.4.9

package/dist/index.js

@@ -1535,9 +1535,9 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const gridRef = (0, import_react12.useRef)();
   const lag = window.localStorage.getItem("i18nextLng");
   const lang = lag ? lag : "vi";
+  let totalCount = dataSource.length;
   const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
   const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
-  let totalCount = dataSource.length;
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
   const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
   (0, import_react12.useEffect)(() => {
@@ -2148,39 +2148,35 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       );
     }) }) });
   };
-  const moveIndexRowToNewPage = () => {
-    changeDataSource(dataSource, true);
-    if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
-      pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
-    }
-    if (tableElement) {
-      setIndexFocus(totalCount);
-      setTimeout(() => {
-        tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
-        if (element) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-            element.scrollIntoView();
-          }
-        }
-      }, 100);
-    }
-  };
-  const focusNewElement = (idElement, onLoad = false) => {
+  const focusNewElement = (col, row, onLoad = false) => {
     setTimeout(() => {
-      const element = document.getElementById(idElement);
+      const element = document.getElementById(`${idTable}-col${col}-row${row}`);
       if (element) {
         if (element.className.includes("react-select") || element.className.includes("form-edit")) {
           element.getElementsByTagName("input")[0]?.focus();
         } else {
           element.focus();
         }
+        if ((tableElement.current?.scrollHeight ?? 0) > 0) {
+          if ((tableElement.current?.scrollTop ?? 0) > (row - 1) * 34) {
+            tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) * 34 });
+          } else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - headerColumns.length * 42 < row * 34 - (tableElement.current?.scrollTop ?? 0)) {
+            tableElement.current?.scrollTo({ behavior: "smooth", top: (tableElement.current?.scrollTop ?? 0) + 34 });
+          }
+        }
       }
     }, onLoad ? 100 : 0);
   };
+  const moveIndexRowToNewPage = () => {
+    changeDataSource(dataSource, true);
+    if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
+      pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
+    }
+    if (tableElement) {
+      setIndexFocus(totalCount);
+      focusNewElement(columnFistEdit, totalCount + 1, true);
+    }
+  };
   const checkKeyDown = (e, row, col, indexRow, indexCol) => {
     if (e.code === "ArrowRight") {
       let newIndexCol = -1;
@@ -2191,7 +2187,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         }
       }
       if (newIndexCol > -1) {
-        focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
+        focusNewElement(newIndexCol, indexRow);
         e.preventDefault();
         return e.code;
       }
@@ -2204,7 +2200,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         }
       }
       if (newIndexCol > -1) {
-        focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
+        focusNewElement(newIndexCol, indexRow);
         e.preventDefault();
         return e.code;
       }
@@ -2216,7 +2212,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
           }
           setIndexFocus(indexRow - 2);
-          focusNewElement(`${idTable}-col${indexCol}-row${indexRow - 1}`, true);
+          focusNewElement(indexCol, indexRow - 1, true);
           e.preventDefault();
           return e.code;
         }
@@ -2229,7 +2225,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
           }
           setIndexFocus(indexRow);
-          focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
+          focusNewElement(indexCol, indexRow + 1, true);
           e.preventDefault();
           return e.code;
         }
@@ -2242,7 +2238,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
         }
         setIndexFocus(indexRow);
-        focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
+        focusNewElement(indexCol, indexRow + 1, true);
       }
       e.preventDefault();
       return e.code;
@@ -2256,7 +2252,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
           }
           setIndexFocus(indexRow);
-          focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
+          focusNewElement(indexCol, indexRow + 1, true);
         }
         e.preventDefault();
         return e.code;
@@ -2296,14 +2292,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     }
   });
   const handleAdd = () => {
+    const lengthData = dataSource.length;
     changeDataSource(dataSource, true);
-    const lengthData = dataSource.length - 1;
     if (pagingSetting?.setCurrentPage) {
       pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
     }
     if (tableElement) {
       setIndexFocus(lengthData);
-      focusNewElement(`${idTable}-col${columnFistEdit}-row${lengthData + 1}`, true);
+      focusNewElement(columnFistEdit, lengthData + 1, true);
     }
   };
   const handleDuplicate = (data, index) => {
@@ -2387,7 +2383,6 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const changeDataSource = (data, haveNew = false) => {
     if (!editDisable && !addDisable && setDataSource) {
       if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
-        console.log("\xE1dads");
         if (searchSetting?.setSearchTerm) {
           searchSetting?.setSearchTerm("");
         } else {

package/dist/index.mjs

@@ -1493,9 +1493,9 @@ var TableEdit = forwardRef2((props, ref) => {
   const gridRef = useRef2();
   const lag = window.localStorage.getItem("i18nextLng");
   const lang = lag ? lag : "vi";
+  let totalCount = dataSource.length;
   const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
   const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
-  let totalCount = dataSource.length;
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
   const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
   useEffect6(() => {
@@ -2106,39 +2106,35 @@ var TableEdit = forwardRef2((props, ref) => {
       );
     }) }) });
   };
-  const moveIndexRowToNewPage = () => {
-    changeDataSource(dataSource, true);
-    if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
-      pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
-    }
-    if (tableElement) {
-      setIndexFocus(totalCount);
-      setTimeout(() => {
-        tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
-        if (element) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-            element.scrollIntoView();
-          }
-        }
-      }, 100);
-    }
-  };
-  const focusNewElement = (idElement, onLoad = false) => {
+  const focusNewElement = (col, row, onLoad = false) => {
     setTimeout(() => {
-      const element = document.getElementById(idElement);
+      const element = document.getElementById(`${idTable}-col${col}-row${row}`);
       if (element) {
         if (element.className.includes("react-select") || element.className.includes("form-edit")) {
           element.getElementsByTagName("input")[0]?.focus();
         } else {
           element.focus();
         }
+        if ((tableElement.current?.scrollHeight ?? 0) > 0) {
+          if ((tableElement.current?.scrollTop ?? 0) > (row - 1) * 34) {
+            tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) * 34 });
+          } else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - headerColumns.length * 42 < row * 34 - (tableElement.current?.scrollTop ?? 0)) {
+            tableElement.current?.scrollTo({ behavior: "smooth", top: (tableElement.current?.scrollTop ?? 0) + 34 });
+          }
+        }
       }
     }, onLoad ? 100 : 0);
   };
+  const moveIndexRowToNewPage = () => {
+    changeDataSource(dataSource, true);
+    if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
+      pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
+    }
+    if (tableElement) {
+      setIndexFocus(totalCount);
+      focusNewElement(columnFistEdit, totalCount + 1, true);
+    }
+  };
   const checkKeyDown = (e, row, col, indexRow, indexCol) => {
     if (e.code === "ArrowRight") {
       let newIndexCol = -1;
@@ -2149,7 +2145,7 @@ var TableEdit = forwardRef2((props, ref) => {
         }
       }
       if (newIndexCol > -1) {
-        focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
+        focusNewElement(newIndexCol, indexRow);
         e.preventDefault();
         return e.code;
       }
@@ -2162,7 +2158,7 @@ var TableEdit = forwardRef2((props, ref) => {
         }
       }
       if (newIndexCol > -1) {
-        focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
+        focusNewElement(newIndexCol, indexRow);
         e.preventDefault();
         return e.code;
       }
@@ -2174,7 +2170,7 @@ var TableEdit = forwardRef2((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
           }
           setIndexFocus(indexRow - 2);
-          focusNewElement(`${idTable}-col${indexCol}-row${indexRow - 1}`, true);
+          focusNewElement(indexCol, indexRow - 1, true);
           e.preventDefault();
           return e.code;
         }
@@ -2187,7 +2183,7 @@ var TableEdit = forwardRef2((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
           }
           setIndexFocus(indexRow);
-          focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
+          focusNewElement(indexCol, indexRow + 1, true);
           e.preventDefault();
           return e.code;
         }
@@ -2200,7 +2196,7 @@ var TableEdit = forwardRef2((props, ref) => {
           pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
         }
         setIndexFocus(indexRow);
-        focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
+        focusNewElement(indexCol, indexRow + 1, true);
       }
       e.preventDefault();
       return e.code;
@@ -2214,7 +2210,7 @@ var TableEdit = forwardRef2((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
           }
           setIndexFocus(indexRow);
-          focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
+          focusNewElement(indexCol, indexRow + 1, true);
         }
         e.preventDefault();
         return e.code;
@@ -2254,14 +2250,14 @@ var TableEdit = forwardRef2((props, ref) => {
     }
   });
   const handleAdd = () => {
+    const lengthData = dataSource.length;
     changeDataSource(dataSource, true);
-    const lengthData = dataSource.length - 1;
     if (pagingSetting?.setCurrentPage) {
       pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
     }
     if (tableElement) {
       setIndexFocus(lengthData);
-      focusNewElement(`${idTable}-col${columnFistEdit}-row${lengthData + 1}`, true);
+      focusNewElement(columnFistEdit, lengthData + 1, true);
     }
   };
   const handleDuplicate = (data, index) => {
@@ -2345,7 +2341,6 @@ var TableEdit = forwardRef2((props, ref) => {
   const changeDataSource = (data, haveNew = false) => {
     if (!editDisable && !addDisable && setDataSource) {
       if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
-        console.log("\xE1dads");
         if (searchSetting?.setSearchTerm) {
           searchSetting?.setSearchTerm("");
         } else {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-table-edit",
   "license": "MIT",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",