react-table-edit 0.7.6 → 0.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +32 -28
  2. package/dist/index.mjs +29 -25
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -28,11 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
 
30
30
  // index.ts
31
- var Table_Edit_exports = {};
32
- __export(Table_Edit_exports, {
31
+ var Table_edit_exports = {};
32
+ __export(Table_edit_exports, {
33
33
  SelectTable: () => SelectTable,
34
34
  TabsMenuComponent: () => TabsMenuComponent,
35
- default: () => Table_Edit_default,
35
+ default: () => Table_edit_default,
36
36
  formartNumberic: () => formartNumberic,
37
37
  generateUUID: () => generateUUID,
38
38
  isNullOrUndefined: () => isNullOrUndefined,
@@ -49,7 +49,7 @@ __export(Table_Edit_exports, {
49
49
  roundNumber: () => roundNumber,
50
50
  useOnClickOutside: () => useOnClickOutside
51
51
  });
52
- module.exports = __toCommonJS(Table_Edit_exports);
52
+ module.exports = __toCommonJS(Table_edit_exports);
53
53
 
54
54
  // test-app/src/component/table/index.tsx
55
55
  var import_react16 = require("react");
@@ -1642,22 +1642,16 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
1642
1642
  setDropdownOpen(false);
1643
1643
  };
1644
1644
  (0, import_react12.useEffect)(() => {
1645
- if (dropdownOpen) {
1646
- if (value) {
1647
- if (selectMenuTableRef) {
1648
- const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1649
- if (elementFocus) {
1650
- const rect = elementFocus.getBoundingClientRect();
1651
- const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
1652
- if (rect.top < parentRect.top || rect.bottom > parentRect.bottom) {
1653
- selectMenuTableRef.current.scrollTo({
1654
- top: elementFocus.offsetTop,
1655
- behavior: "smooth"
1656
- });
1657
- }
1658
- }
1645
+ if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
1646
+ setTimeout(() => {
1647
+ const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1648
+ if (elementFocus) {
1649
+ const parentRect = selectMenuTableRef.current.getBoundingClientRect();
1650
+ const childRect = elementFocus.getBoundingClientRect();
1651
+ const offset = childRect.top - parentRect.top + selectMenuTableRef.current.scrollTop - parentRect.height / 2 + childRect.height / 2;
1652
+ selectMenuTableRef.current.scrollTo({ top: offset, behavior: "smooth" });
1659
1653
  }
1660
- }
1654
+ }, 100);
1661
1655
  }
1662
1656
  }, [dropdownOpen]);
1663
1657
  (0, import_react12.useEffect)(() => {
@@ -1730,10 +1724,10 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
1730
1724
  }
1731
1725
  if (newIndex < (optionsLoad ? optionsLoad : options).length) {
1732
1726
  setIndexFocus(newIndex);
1733
- checkIfElementIsOutOfScroll(0);
1727
+ checkIfElementIsOutOfScroll(0, newIndex);
1734
1728
  } else {
1735
1729
  setIndexFocus(0);
1736
- checkIfElementIsOutOfScroll(1);
1730
+ checkIfElementIsOutOfScroll(1, 0);
1737
1731
  }
1738
1732
  flag = true;
1739
1733
  } else {
@@ -1750,10 +1744,10 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
1750
1744
  }
1751
1745
  if (newIndex >= 0) {
1752
1746
  setIndexFocus(newIndex);
1753
- checkIfElementIsOutOfScroll(2);
1747
+ checkIfElementIsOutOfScroll(2, newIndex);
1754
1748
  } else {
1755
1749
  setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
1756
- checkIfElementIsOutOfScroll(3);
1750
+ checkIfElementIsOutOfScroll(3, (optionsLoad ? optionsLoad : options).length - 1);
1757
1751
  }
1758
1752
  flag = true;
1759
1753
  }
@@ -1764,9 +1758,10 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
1764
1758
  e.preventDefault();
1765
1759
  }
1766
1760
  };
1767
- const checkIfElementIsOutOfScroll = (flag) => {
1761
+ const checkIfElementIsOutOfScroll = (flag, index) => {
1768
1762
  if (selectMenuTableRef) {
1769
- const elementFocus = document.getElementById(`row-select-table-${indexFocus}`);
1763
+ const elementFocus = document.getElementById(`row-select-table-${index}`);
1764
+ console.log(elementFocus);
1770
1765
  if (elementFocus) {
1771
1766
  const rect = elementFocus.getBoundingClientRect();
1772
1767
  const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
@@ -1787,7 +1782,8 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
1787
1782
  clearTimeout(timeOutElement);
1788
1783
  timeOutElement = setTimeout(() => {
1789
1784
  elemment.scrollTo({
1790
- top
1785
+ top,
1786
+ behavior: "smooth"
1791
1787
  });
1792
1788
  }, 100);
1793
1789
  };
@@ -2113,7 +2109,7 @@ var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
2113
2109
  position: "fixed",
2114
2110
  zIndex: 9999
2115
2111
  },
2116
- 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)(
2112
+ 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)(
2117
2113
  "div",
2118
2114
  {
2119
2115
  onMouseDown: (e) => {
@@ -2895,6 +2891,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
2895
2891
  } else {
2896
2892
  element.focus();
2897
2893
  }
2894
+ if (!onLoad) {
2895
+ if (tableElement.current) {
2896
+ const parentRect = tableElement.current.getBoundingClientRect();
2897
+ const childRect = element.getBoundingClientRect();
2898
+ const offset = childRect.left - parentRect.left + tableElement.current.scrollLeft - parentRect.width / 2 + childRect.width / 2;
2899
+ tableElement.current.scrollTo({ left: offset, behavior: "smooth" });
2900
+ }
2901
+ }
2898
2902
  if ((tableElement.current?.scrollHeight ?? 0) > 0) {
2899
2903
  if ((tableElement.current?.scrollTop ?? 0) > (row - 1) * 34) {
2900
2904
  tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) * 34 });
@@ -3798,7 +3802,7 @@ var TabsMenuComponent = ({
3798
3802
  };
3799
3803
 
3800
3804
  // index.ts
3801
- var Table_Edit_default = table_default;
3805
+ var Table_edit_default = table_default;
3802
3806
  // Annotate the CommonJS export names for ESM import in node:
3803
3807
  0 && (module.exports = {
3804
3808
  SelectTable,
package/dist/index.mjs CHANGED
@@ -1608,22 +1608,16 @@ var SelectTable = forwardRef2((props, ref) => {
1608
1608
  setDropdownOpen(false);
1609
1609
  };
1610
1610
  useEffect7(() => {
1611
- if (dropdownOpen) {
1612
- if (value) {
1613
- if (selectMenuTableRef) {
1614
- const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1615
- if (elementFocus) {
1616
- const rect = elementFocus.getBoundingClientRect();
1617
- const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
1618
- if (rect.top < parentRect.top || rect.bottom > parentRect.bottom) {
1619
- selectMenuTableRef.current.scrollTo({
1620
- top: elementFocus.offsetTop,
1621
- behavior: "smooth"
1622
- });
1623
- }
1624
- }
1611
+ if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
1612
+ setTimeout(() => {
1613
+ const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1614
+ if (elementFocus) {
1615
+ const parentRect = selectMenuTableRef.current.getBoundingClientRect();
1616
+ const childRect = elementFocus.getBoundingClientRect();
1617
+ const offset = childRect.top - parentRect.top + selectMenuTableRef.current.scrollTop - parentRect.height / 2 + childRect.height / 2;
1618
+ selectMenuTableRef.current.scrollTo({ top: offset, behavior: "smooth" });
1625
1619
  }
1626
- }
1620
+ }, 100);
1627
1621
  }
1628
1622
  }, [dropdownOpen]);
1629
1623
  useEffect7(() => {
@@ -1696,10 +1690,10 @@ var SelectTable = forwardRef2((props, ref) => {
1696
1690
  }
1697
1691
  if (newIndex < (optionsLoad ? optionsLoad : options).length) {
1698
1692
  setIndexFocus(newIndex);
1699
- checkIfElementIsOutOfScroll(0);
1693
+ checkIfElementIsOutOfScroll(0, newIndex);
1700
1694
  } else {
1701
1695
  setIndexFocus(0);
1702
- checkIfElementIsOutOfScroll(1);
1696
+ checkIfElementIsOutOfScroll(1, 0);
1703
1697
  }
1704
1698
  flag = true;
1705
1699
  } else {
@@ -1716,10 +1710,10 @@ var SelectTable = forwardRef2((props, ref) => {
1716
1710
  }
1717
1711
  if (newIndex >= 0) {
1718
1712
  setIndexFocus(newIndex);
1719
- checkIfElementIsOutOfScroll(2);
1713
+ checkIfElementIsOutOfScroll(2, newIndex);
1720
1714
  } else {
1721
1715
  setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
1722
- checkIfElementIsOutOfScroll(3);
1716
+ checkIfElementIsOutOfScroll(3, (optionsLoad ? optionsLoad : options).length - 1);
1723
1717
  }
1724
1718
  flag = true;
1725
1719
  }
@@ -1730,9 +1724,10 @@ var SelectTable = forwardRef2((props, ref) => {
1730
1724
  e.preventDefault();
1731
1725
  }
1732
1726
  };
1733
- const checkIfElementIsOutOfScroll = (flag) => {
1727
+ const checkIfElementIsOutOfScroll = (flag, index) => {
1734
1728
  if (selectMenuTableRef) {
1735
- const elementFocus = document.getElementById(`row-select-table-${indexFocus}`);
1729
+ const elementFocus = document.getElementById(`row-select-table-${index}`);
1730
+ console.log(elementFocus);
1736
1731
  if (elementFocus) {
1737
1732
  const rect = elementFocus.getBoundingClientRect();
1738
1733
  const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
@@ -1753,7 +1748,8 @@ var SelectTable = forwardRef2((props, ref) => {
1753
1748
  clearTimeout(timeOutElement);
1754
1749
  timeOutElement = setTimeout(() => {
1755
1750
  elemment.scrollTo({
1756
- top
1751
+ top,
1752
+ behavior: "smooth"
1757
1753
  });
1758
1754
  }, 100);
1759
1755
  };
@@ -2079,7 +2075,7 @@ var SelectTable = forwardRef2((props, ref) => {
2079
2075
  position: "fixed",
2080
2076
  zIndex: 9999
2081
2077
  },
2082
- children: /* @__PURE__ */ jsx12(DropdownItem2, { className: classnames6("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ jsx12(
2078
+ children: /* @__PURE__ */ jsx12(DropdownItem2, { className: classnames6("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ jsx12(
2083
2079
  "div",
2084
2080
  {
2085
2081
  onMouseDown: (e) => {
@@ -2861,6 +2857,14 @@ var TableEdit = forwardRef3((props, ref) => {
2861
2857
  } else {
2862
2858
  element.focus();
2863
2859
  }
2860
+ if (!onLoad) {
2861
+ if (tableElement.current) {
2862
+ const parentRect = tableElement.current.getBoundingClientRect();
2863
+ const childRect = element.getBoundingClientRect();
2864
+ const offset = childRect.left - parentRect.left + tableElement.current.scrollLeft - parentRect.width / 2 + childRect.width / 2;
2865
+ tableElement.current.scrollTo({ left: offset, behavior: "smooth" });
2866
+ }
2867
+ }
2864
2868
  if ((tableElement.current?.scrollHeight ?? 0) > 0) {
2865
2869
  if ((tableElement.current?.scrollTop ?? 0) > (row - 1) * 34) {
2866
2870
  tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) * 34 });
@@ -3764,11 +3768,11 @@ var TabsMenuComponent = ({
3764
3768
  };
3765
3769
 
3766
3770
  // index.ts
3767
- var Table_Edit_default = table_default;
3771
+ var Table_edit_default = table_default;
3768
3772
  export {
3769
3773
  SelectTable,
3770
3774
  TabsMenuComponent,
3771
- Table_Edit_default as default,
3775
+ Table_edit_default as default,
3772
3776
  formartNumberic,
3773
3777
  generateUUID,
3774
3778
  isNullOrUndefined,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.7.6",
4
+ "version": "0.7.8",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",