react-table-edit 0.7.5 → 0.7.7

package/dist/index.js

@@ -28,11 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // index.ts
-var Table_Edit_exports = {};
-__export(Table_Edit_exports, {
+var Table_edit_exports = {};
+__export(Table_edit_exports, {
   SelectTable: () => SelectTable,
   TabsMenuComponent: () => TabsMenuComponent,
-  default: () => Table_Edit_default,
+  default: () => Table_edit_default,
   formartNumberic: () => formartNumberic,
   generateUUID: () => generateUUID,
   isNullOrUndefined: () => isNullOrUndefined,
@@ -49,7 +49,7 @@ __export(Table_Edit_exports, {
   roundNumber: () => roundNumber,
   useOnClickOutside: () => useOnClickOutside
 });
-module.exports = __toCommonJS(Table_Edit_exports);
+module.exports = __toCommonJS(Table_edit_exports);
 
 // test-app/src/component/table/index.tsx
 var import_react16 = require("react");
@@ -1642,22 +1642,16 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
     setDropdownOpen(false);
   };
   (0, import_react12.useEffect)(() => {
-    if (dropdownOpen) {
-      if (value) {
-        if (selectMenuTableRef) {
-          const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
-          if (elementFocus) {
-            const rect = elementFocus.getBoundingClientRect();
-            const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
-            if (rect.top < parentRect.top || rect.bottom > parentRect.bottom) {
-              selectMenuTableRef.current.scrollTo({
-                top: elementFocus.offsetTop,
-                behavior: "smooth"
-              });
-            }
-          }
+    if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
+      setTimeout(() => {
+        const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
+        if (elementFocus) {
+          const parentRect = selectMenuTableRef.current.getBoundingClientRect();
+          const childRect = elementFocus.getBoundingClientRect();
+          const offset = childRect.top - parentRect.top + selectMenuTableRef.current.scrollTop - parentRect.height / 2 + childRect.height / 2;
+          selectMenuTableRef.current.scrollTo({ top: offset, behavior: "smooth" });
         }
-      }
+      }, 100);
     }
   }, [dropdownOpen]);
   (0, import_react12.useEffect)(() => {
@@ -1730,10 +1724,10 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
           }
           if (newIndex < (optionsLoad ? optionsLoad : options).length) {
             setIndexFocus(newIndex);
-            checkIfElementIsOutOfScroll(0);
+            checkIfElementIsOutOfScroll(0, newIndex);
           } else {
             setIndexFocus(0);
-            checkIfElementIsOutOfScroll(1);
+            checkIfElementIsOutOfScroll(1, 0);
           }
           flag = true;
         } else {
@@ -1750,10 +1744,10 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
           }
           if (newIndex >= 0) {
             setIndexFocus(newIndex);
-            checkIfElementIsOutOfScroll(2);
+            checkIfElementIsOutOfScroll(2, newIndex);
           } else {
             setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
-            checkIfElementIsOutOfScroll(3);
+            checkIfElementIsOutOfScroll(3, (optionsLoad ? optionsLoad : options).length - 1);
           }
           flag = true;
         }
@@ -1764,9 +1758,10 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
       e.preventDefault();
     }
   };
-  const checkIfElementIsOutOfScroll = (flag) => {
+  const checkIfElementIsOutOfScroll = (flag, index) => {
     if (selectMenuTableRef) {
-      const elementFocus = document.getElementById(`row-select-table-${indexFocus}`);
+      const elementFocus = document.getElementById(`row-select-table-${index}`);
+      console.log(elementFocus);
       if (elementFocus) {
         const rect = elementFocus.getBoundingClientRect();
         const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
@@ -1787,7 +1782,8 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
     clearTimeout(timeOutElement);
     timeOutElement = setTimeout(() => {
       elemment.scrollTo({
-        top
+        top,
+        behavior: "smooth"
       });
     }, 100);
   };
@@ -2113,7 +2109,7 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
                   position: "fixed",
                   zIndex: 9999
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.DropdownItem, { className: (0, import_classnames11.default)("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.DropdownItem, { className: (0, import_classnames11.default)("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "div",
                   {
                     onMouseDown: (e) => {
@@ -3109,6 +3105,9 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     const clipboard = (e.clipboardData || window.Clipboard).getData("text");
     const rowsClipboard = clipboard.trimEnd().split("\n");
     setIndexFocus(void 0);
+    if (rowsClipboard.length > 200) {
+      messageBoxError(t, "You can only paste up to 200 rows.");
+    }
     if (rowsClipboard.length > 0) {
       const columnsDataChange = [];
       for (let index = 0; index < rowsClipboard[0].trimEnd().split("	").length; index++) {
@@ -3795,7 +3794,7 @@ var TabsMenuComponent = ({
 };
 
 // index.ts
-var Table_Edit_default = table_default;
+var Table_edit_default = table_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SelectTable,

package/dist/index.mjs

@@ -1608,22 +1608,16 @@ var SelectTable = forwardRef2((props, ref) => {
     setDropdownOpen(false);
   };
   useEffect7(() => {
-    if (dropdownOpen) {
-      if (value) {
-        if (selectMenuTableRef) {
-          const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
-          if (elementFocus) {
-            const rect = elementFocus.getBoundingClientRect();
-            const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
-            if (rect.top < parentRect.top || rect.bottom > parentRect.bottom) {
-              selectMenuTableRef.current.scrollTo({
-                top: elementFocus.offsetTop,
-                behavior: "smooth"
-              });
-            }
-          }
+    if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
+      setTimeout(() => {
+        const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
+        if (elementFocus) {
+          const parentRect = selectMenuTableRef.current.getBoundingClientRect();
+          const childRect = elementFocus.getBoundingClientRect();
+          const offset = childRect.top - parentRect.top + selectMenuTableRef.current.scrollTop - parentRect.height / 2 + childRect.height / 2;
+          selectMenuTableRef.current.scrollTo({ top: offset, behavior: "smooth" });
         }
-      }
+      }, 100);
     }
   }, [dropdownOpen]);
   useEffect7(() => {
@@ -1696,10 +1690,10 @@ var SelectTable = forwardRef2((props, ref) => {
           }
           if (newIndex < (optionsLoad ? optionsLoad : options).length) {
             setIndexFocus(newIndex);
-            checkIfElementIsOutOfScroll(0);
+            checkIfElementIsOutOfScroll(0, newIndex);
           } else {
             setIndexFocus(0);
-            checkIfElementIsOutOfScroll(1);
+            checkIfElementIsOutOfScroll(1, 0);
           }
           flag = true;
         } else {
@@ -1716,10 +1710,10 @@ var SelectTable = forwardRef2((props, ref) => {
           }
           if (newIndex >= 0) {
             setIndexFocus(newIndex);
-            checkIfElementIsOutOfScroll(2);
+            checkIfElementIsOutOfScroll(2, newIndex);
           } else {
             setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
-            checkIfElementIsOutOfScroll(3);
+            checkIfElementIsOutOfScroll(3, (optionsLoad ? optionsLoad : options).length - 1);
           }
           flag = true;
         }
@@ -1730,9 +1724,10 @@ var SelectTable = forwardRef2((props, ref) => {
       e.preventDefault();
     }
   };
-  const checkIfElementIsOutOfScroll = (flag) => {
+  const checkIfElementIsOutOfScroll = (flag, index) => {
     if (selectMenuTableRef) {
-      const elementFocus = document.getElementById(`row-select-table-${indexFocus}`);
+      const elementFocus = document.getElementById(`row-select-table-${index}`);
+      console.log(elementFocus);
       if (elementFocus) {
         const rect = elementFocus.getBoundingClientRect();
         const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
@@ -1753,7 +1748,8 @@ var SelectTable = forwardRef2((props, ref) => {
     clearTimeout(timeOutElement);
     timeOutElement = setTimeout(() => {
       elemment.scrollTo({
-        top
+        top,
+        behavior: "smooth"
       });
     }, 100);
   };
@@ -2079,7 +2075,7 @@ var SelectTable = forwardRef2((props, ref) => {
                   position: "fixed",
                   zIndex: 9999
                 },
-                children: /* @__PURE__ */ jsx12(DropdownItem2, { className: classnames6("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ jsx12(
+                children: /* @__PURE__ */ jsx12(DropdownItem2, { className: classnames6("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ jsx12(
                   "div",
                   {
                     onMouseDown: (e) => {
@@ -3075,6 +3071,9 @@ var TableEdit = forwardRef3((props, ref) => {
     const clipboard = (e.clipboardData || window.Clipboard).getData("text");
     const rowsClipboard = clipboard.trimEnd().split("\n");
     setIndexFocus(void 0);
+    if (rowsClipboard.length > 200) {
+      messageBoxError(t, "You can only paste up to 200 rows.");
+    }
     if (rowsClipboard.length > 0) {
       const columnsDataChange = [];
       for (let index = 0; index < rowsClipboard[0].trimEnd().split("	").length; index++) {
@@ -3761,11 +3760,11 @@ var TabsMenuComponent = ({
 };
 
 // index.ts
-var Table_Edit_default = table_default;
+var Table_edit_default = table_default;
 export {
   SelectTable,
   TabsMenuComponent,
-  Table_Edit_default as default,
+  Table_edit_default as default,
   formartNumberic,
   generateUUID,
   isNullOrUndefined,

package/package.json

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