react-table-edit 0.6.1 → 0.6.2

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 +192 -166
  2. package/dist/index.mjs +192 -165
  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_react14 = require("react");
@@ -1611,18 +1611,13 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1611
1611
  const [dropdownOpen, setDropdownOpen] = (0, import_react13.useState)(false);
1612
1612
  const [indexFocus, setIndexFocus] = (0, import_react13.useState)(-1);
1613
1613
  const [isFocus, setIsFocus] = (0, import_react13.useState)(false);
1614
+ const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
1614
1615
  const [searchTerm, setSearchTerm] = (0, import_react13.useState)("");
1615
1616
  const [optionsLoad, setOptionsLoad] = (0, import_react13.useState)();
1616
- const [optionsCurr, setOptionsCurr] = (0, import_react13.useState)([]);
1617
- const [isSelectedAll, setIsSelectdAll] = (0, import_react13.useState)(isMulti === true && optionsCurr.length > 0 && value?.length >= optionsCurr.length);
1618
1617
  const { t } = (0, import_react_i18next9.useTranslation)();
1619
- (0, import_react13.useEffect)(() => {
1620
- if (optionsLoad) {
1621
- setOptionsCurr(optionsLoad);
1622
- } else {
1623
- setOptionsCurr(options);
1624
- }
1625
- }, [optionsLoad, options]);
1618
+ const isSelectedAll = (0, import_react13.useMemo)(() => {
1619
+ return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
1620
+ }, [optionsLoad, options, value]);
1626
1621
  const defaultColumns = [
1627
1622
  {
1628
1623
  field: "key",
@@ -1646,7 +1641,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1646
1641
  if (dropdownOpen) {
1647
1642
  if (value) {
1648
1643
  if (selectMenuTableRef) {
1649
- const elementFocus = document.getElementById(`row-select-table-${optionsCurr?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1644
+ const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1650
1645
  if (elementFocus) {
1651
1646
  const rect = elementFocus.getBoundingClientRect();
1652
1647
  const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
@@ -1666,9 +1661,9 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1666
1661
  if (inputRef) {
1667
1662
  inputRef.current.addEventListener("blur", function() {
1668
1663
  timeOutBlur = setTimeout(() => {
1669
- console.log(document.activeElement);
1670
1664
  if (!selectTableRef.current?.contains(document.activeElement)) {
1671
1665
  setDropdownOpen(false);
1666
+ setSearchTerm("");
1672
1667
  setIsFocus(false);
1673
1668
  }
1674
1669
  }, 100);
@@ -1712,7 +1707,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1712
1707
  flag = true;
1713
1708
  } else if (e.code === "Escape" || e.code === "Space") {
1714
1709
  if (dropdownOpen) {
1715
- onChange(optionsCurr[indexFocus]);
1710
+ onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1716
1711
  }
1717
1712
  if (!searchTerm) {
1718
1713
  handleOpenClose();
@@ -1720,7 +1715,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1720
1715
  }
1721
1716
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
1722
1717
  if (dropdownOpen) {
1723
- onChange(optionsCurr[indexFocus]);
1718
+ onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1724
1719
  handleOpenClose();
1725
1720
  flag = true;
1726
1721
  }
@@ -1730,9 +1725,9 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1730
1725
  if (indexFocus >= 0) {
1731
1726
  newIndex = indexFocus + 1;
1732
1727
  } else if (value) {
1733
- newIndex = optionsCurr?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
1728
+ newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
1734
1729
  }
1735
- if (newIndex < optionsCurr.length) {
1730
+ if (newIndex < (optionsLoad ? optionsLoad : options).length) {
1736
1731
  setIndexFocus(newIndex);
1737
1732
  checkIfElementIsOutOfScroll(0);
1738
1733
  } else {
@@ -1750,13 +1745,13 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1750
1745
  if (indexFocus >= 0) {
1751
1746
  newIndex = indexFocus - 1;
1752
1747
  } else if (value) {
1753
- newIndex = optionsCurr?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
1748
+ newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
1754
1749
  }
1755
1750
  if (newIndex >= 0) {
1756
1751
  setIndexFocus(newIndex);
1757
1752
  checkIfElementIsOutOfScroll(2);
1758
1753
  } else {
1759
- setIndexFocus(optionsCurr.length - 1);
1754
+ setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
1760
1755
  checkIfElementIsOutOfScroll(3);
1761
1756
  }
1762
1757
  flag = true;
@@ -1844,6 +1839,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1844
1839
  return false;
1845
1840
  };
1846
1841
  const callbackLoadOption = (rs) => {
1842
+ setIsLoading(false);
1847
1843
  setOptionsLoad(rs);
1848
1844
  };
1849
1845
  (0, import_react13.useEffect)(() => {
@@ -1851,10 +1847,174 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1851
1847
  setOptionsLoad(void 0);
1852
1848
  }
1853
1849
  }, [searchTerm]);
1850
+ const RenderElement = (props2) => {
1851
+ const { indexRow, row, isSelected, level = 0 } = props2;
1852
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1853
+ "tr",
1854
+ {
1855
+ id: `row-select-table-${indexRow}`,
1856
+ style: { paddingLeft: 10 * level },
1857
+ className: (0, import_classnames11.default)("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
1858
+ children: [
1859
+ isMulti && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1860
+ "td",
1861
+ {
1862
+ className: (0, import_classnames11.default)(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1863
+ style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1864
+ onClick: (e) => {
1865
+ if (isMulti) {
1866
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1867
+ if (index > -1) {
1868
+ value?.splice(index, 1);
1869
+ const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1870
+ onChange(valueArr);
1871
+ } else {
1872
+ if (value) {
1873
+ value?.push(row[fieldValue ?? "value"]);
1874
+ const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1875
+ onChange(valueArr);
1876
+ } else {
1877
+ onChange([row[fieldValue ?? "value"]]);
1878
+ }
1879
+ }
1880
+ e.stopPropagation();
1881
+ }
1882
+ },
1883
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1884
+ import_reactstrap8.Input,
1885
+ {
1886
+ checked: isSelected,
1887
+ type: "checkbox",
1888
+ className: "cursor-pointer",
1889
+ onChange: () => {
1890
+ },
1891
+ style: { textAlign: "center", marginTop: 6 }
1892
+ }
1893
+ )
1894
+ }
1895
+ ),
1896
+ (columns ? columns : defaultColumns).map((col, indexCol) => {
1897
+ let valueDisplay = row[col.field];
1898
+ if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
1899
+ valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
1900
+ } else if (col.type === "date") {
1901
+ valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy") : "";
1902
+ } else if (col.type === "datetime") {
1903
+ valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
1904
+ }
1905
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1906
+ "td",
1907
+ {
1908
+ id: `content-select-${indexRow}-${indexCol}`,
1909
+ className: (0, import_classnames11.default)(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1910
+ style: {
1911
+ minWidth: col.minWidth,
1912
+ width: col.width,
1913
+ maxWidth: col.maxWidth,
1914
+ textAlign: col.textAlign ? col.textAlign : "left"
1915
+ },
1916
+ onClick: (e) => {
1917
+ if (isMulti) {
1918
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1919
+ if (index > -1) {
1920
+ value?.splice(index, 1);
1921
+ const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1922
+ onChange(valueArr);
1923
+ } else {
1924
+ if (value) {
1925
+ value?.push(row[fieldValue ?? "value"]);
1926
+ const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1927
+ onChange(valueArr);
1928
+ } else {
1929
+ onChange([row[fieldValue ?? "value"]]);
1930
+ }
1931
+ }
1932
+ } else {
1933
+ onChange(row);
1934
+ setSearchTerm("");
1935
+ closeMenu();
1936
+ }
1937
+ e.preventDefault();
1938
+ e.stopPropagation();
1939
+ },
1940
+ onMouseMove: (e) => {
1941
+ if (indexRow !== indexFocus) {
1942
+ setIndexFocus(indexRow);
1943
+ }
1944
+ e.stopPropagation();
1945
+ },
1946
+ children: col.template ? col.template(row, indexRow) : valueDisplay
1947
+ },
1948
+ `col-${indexRow}-${indexCol}`
1949
+ ) }, indexCol);
1950
+ })
1951
+ ]
1952
+ },
1953
+ `row-${indexRow}`
1954
+ );
1955
+ };
1956
+ const RenderTable = (props2) => {
1957
+ const {} = props2;
1958
+ let countDisplay = 0;
1959
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
1960
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { style: { width: "100%" }, children: [
1961
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { className: "r-select-row", role: "row", children: [
1962
+ isMulti && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: (0, import_classnames11.default)(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1963
+ "div",
1964
+ {
1965
+ style: { justifyContent: "center" },
1966
+ className: (0, import_classnames11.default)("r-select-headercell-div"),
1967
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1968
+ import_reactstrap8.Input,
1969
+ {
1970
+ checked: isSelectedAll,
1971
+ type: "checkbox",
1972
+ onClick: (e) => {
1973
+ if (isMulti) {
1974
+ if (isSelectedAll) {
1975
+ onChange([]);
1976
+ } else {
1977
+ onChange([...optionsLoad ? optionsLoad : options]);
1978
+ }
1979
+ e.stopPropagation();
1980
+ }
1981
+ },
1982
+ readOnly: true,
1983
+ className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
1984
+ style: { textAlign: "center", marginTop: 6 }
1985
+ }
1986
+ )
1987
+ }
1988
+ ) }),
1989
+ (columns ? columns : defaultColumns).map((col, index) => {
1990
+ return renderHeaderCol(col, index);
1991
+ })
1992
+ ] }) }),
1993
+ (optionsLoad ? optionsLoad : options).length > 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1994
+ if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1995
+ const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1996
+ countDisplay++;
1997
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
1998
+ }
1999
+ }) }) })
2000
+ ] }),
2001
+ countDisplay === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-no-data", children: [
2002
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { transform: "translate(0 1)", fill: "none", "fill-rule": "evenodd", children: [
2003
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
2004
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { "fill-rule": "nonzero", stroke: "#d9d9d9", children: [
2005
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }),
2006
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })
2007
+ ] })
2008
+ ] }) }),
2009
+ t("No data available.")
2010
+ ] }),
2011
+ isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-no-data", children: t("Loading...") })
2012
+ ] });
2013
+ };
1854
2014
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1855
2015
  "div",
1856
2016
  {
1857
- className: (0, import_classnames11.default)("react-select-table", { "is-invalid": invalid }),
2017
+ className: (0, import_classnames11.default)("react-select-table"),
1858
2018
  ref,
1859
2019
  id,
1860
2020
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -1876,11 +2036,11 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1876
2036
  },
1877
2037
  tabIndex: 0,
1878
2038
  tag: "div",
1879
- className: (0, import_classnames11.default)("select-table-control", { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
2039
+ className: (0, import_classnames11.default)("select-table-control", { "r-select-is-open": dropdownOpen }, { "is-invalid": invalid }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
1880
2040
  children: [
1881
2041
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "select-table-container", children: [
1882
2042
  isMulti ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
1883
- const element = optionsCurr.find((e) => e[fieldValue ?? "value"] === ele);
2043
+ const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
1884
2044
  if (element) {
1885
2045
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
1886
2046
  index === 0 ? "" : ", ",
@@ -1901,6 +2061,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1901
2061
  value: searchTerm,
1902
2062
  onChange: (val) => {
1903
2063
  if (!isMulti && loadOptions && val.target.value) {
2064
+ setIsLoading(true);
1904
2065
  loadOptions(val.target.value, callbackLoadOption);
1905
2066
  }
1906
2067
  setSearchTerm(val.target.value);
@@ -1909,6 +2070,11 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1909
2070
  }
1910
2071
  ) })
1911
2072
  ] }),
2073
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("select-table-indicator d-flex align-items-center", { "d-none": !isLoading }), children: [
2074
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
2075
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
2076
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
2077
+ ] }),
1912
2078
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1913
2079
  "div",
1914
2080
  {
@@ -1943,147 +2109,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1943
2109
  e.preventDefault();
1944
2110
  },
1945
2111
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-select-grid", children: [
1946
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { style: { width: "100%" }, children: [
1947
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { className: "r-select-row", role: "row", children: [
1948
- isMulti && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: (0, import_classnames11.default)(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1949
- "div",
1950
- {
1951
- style: { justifyContent: "center" },
1952
- className: (0, import_classnames11.default)("r-select-headercell-div"),
1953
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1954
- import_reactstrap8.Input,
1955
- {
1956
- checked: isSelectedAll,
1957
- type: "checkbox",
1958
- onClick: (e) => {
1959
- if (isMulti) {
1960
- if (isSelectedAll) {
1961
- onChange([]);
1962
- } else {
1963
- onChange([...optionsCurr]);
1964
- }
1965
- setIsSelectdAll(!isSelectedAll);
1966
- e.stopPropagation();
1967
- }
1968
- },
1969
- readOnly: true,
1970
- className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
1971
- style: { textAlign: "center", marginTop: 6 }
1972
- }
1973
- )
1974
- }
1975
- ) }),
1976
- (columns ? columns : defaultColumns).map((col, index) => {
1977
- return renderHeaderCol(col, index);
1978
- })
1979
- ] }) }),
1980
- optionsCurr.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { className: "r-select-gridcontent", children: optionsCurr?.map((row, indexRow) => {
1981
- if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1982
- const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1983
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1984
- "tr",
1985
- {
1986
- id: `row-select-table-${indexRow}`,
1987
- className: (0, import_classnames11.default)("r-select-row", { "last-row": indexRow === optionsCurr.length - 1 }, { "fisrt-row": indexRow === 0 }),
1988
- children: [
1989
- isMulti && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1990
- "td",
1991
- {
1992
- className: (0, import_classnames11.default)(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1993
- style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1994
- onClick: (e) => {
1995
- if (isMulti) {
1996
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1997
- if (index > -1) {
1998
- value?.splice(index, 1);
1999
- const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2000
- onChange(valueArr);
2001
- } else {
2002
- if (value) {
2003
- value?.push(row[fieldValue ?? "value"]);
2004
- const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2005
- onChange(valueArr);
2006
- } else {
2007
- onChange([row[fieldValue ?? "value"]]);
2008
- }
2009
- }
2010
- e.stopPropagation();
2011
- }
2012
- },
2013
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
2014
- import_reactstrap8.Input,
2015
- {
2016
- checked: isSelected,
2017
- type: "checkbox",
2018
- className: "cursor-pointer",
2019
- onChange: () => {
2020
- },
2021
- style: { textAlign: "center", marginTop: 6 }
2022
- }
2023
- )
2024
- }
2025
- ),
2026
- (columns ? columns : defaultColumns).map((col, indexCol) => {
2027
- let valueDisplay = row[col.field];
2028
- if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
2029
- valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
2030
- } else if (col.type === "date") {
2031
- valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy") : "";
2032
- } else if (col.type === "datetime") {
2033
- valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
2034
- }
2035
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
2036
- "td",
2037
- {
2038
- id: `content-select-${indexRow}-${indexCol}`,
2039
- className: (0, import_classnames11.default)(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
2040
- style: {
2041
- minWidth: col.minWidth,
2042
- width: col.width,
2043
- maxWidth: col.maxWidth,
2044
- textAlign: col.textAlign ? col.textAlign : "left"
2045
- },
2046
- onClick: (e) => {
2047
- if (isMulti) {
2048
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
2049
- if (index > -1) {
2050
- value?.splice(index, 1);
2051
- const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2052
- onChange(valueArr);
2053
- } else {
2054
- if (value) {
2055
- value?.push(row[fieldValue ?? "value"]);
2056
- const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2057
- onChange(valueArr);
2058
- } else {
2059
- onChange([row[fieldValue ?? "value"]]);
2060
- }
2061
- }
2062
- } else {
2063
- onChange(row);
2064
- closeMenu();
2065
- }
2066
- e.preventDefault();
2067
- e.stopPropagation();
2068
- },
2069
- onMouseMove: (e) => {
2070
- if (indexRow !== indexFocus) {
2071
- setIndexFocus(indexRow);
2072
- }
2073
- e.stopPropagation();
2074
- },
2075
- children: col.template ? col.template(row, indexRow) : valueDisplay
2076
- },
2077
- `col-${indexRow}-${indexCol}`
2078
- ) }, indexCol);
2079
- })
2080
- ]
2081
- },
2082
- `row-${indexRow}`
2083
- );
2084
- }
2085
- }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-no-data", children: t("No data available.") })
2086
- ] }) }),
2112
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RenderTable, {}) }),
2087
2113
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap8.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames11.default)("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
2088
2114
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.Plus, { className: "me-50", fontSize: 16 }),
2089
2115
  t("AddNew"),
@@ -3746,7 +3772,7 @@ var TabsMenuComponent = ({
3746
3772
  };
3747
3773
 
3748
3774
  // index.ts
3749
- var Table_edit_default = table_default;
3775
+ var Table_Edit_default = table_default;
3750
3776
  // Annotate the CommonJS export names for ESM import in node:
3751
3777
  0 && (module.exports = {
3752
3778
  SelectTable,
package/dist/index.mjs CHANGED
@@ -1528,14 +1528,15 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
1528
1528
  };
1529
1529
 
1530
1530
  // test-app/src/component/select-table/index.tsx
1531
- import { forwardRef as forwardRef2, Fragment as Fragment13, useEffect as useEffect7, useRef as useRef2, useState as useState6 } from "react";
1531
+ import { forwardRef as forwardRef2, Fragment as Fragment13, useEffect as useEffect7, useMemo, useRef as useRef2, useState as useState6 } from "react";
1532
1532
  import {
1533
1533
  DropdownItem as DropdownItem2,
1534
1534
  DropdownMenu as DropdownMenu2,
1535
1535
  DropdownToggle as DropdownToggle2,
1536
1536
  Dropdown as Dropdown2,
1537
1537
  Button as Button3,
1538
- Input as Input6
1538
+ Input as Input6,
1539
+ Spinner
1539
1540
  } from "reactstrap";
1540
1541
  import { useTranslation as useTranslation9 } from "react-i18next";
1541
1542
  import classnames6 from "classnames";
@@ -1575,18 +1576,13 @@ var SelectTable = forwardRef2((props, ref) => {
1575
1576
  const [dropdownOpen, setDropdownOpen] = useState6(false);
1576
1577
  const [indexFocus, setIndexFocus] = useState6(-1);
1577
1578
  const [isFocus, setIsFocus] = useState6(false);
1579
+ const [isLoading, setIsLoading] = useState6(false);
1578
1580
  const [searchTerm, setSearchTerm] = useState6("");
1579
1581
  const [optionsLoad, setOptionsLoad] = useState6();
1580
- const [optionsCurr, setOptionsCurr] = useState6([]);
1581
- const [isSelectedAll, setIsSelectdAll] = useState6(isMulti === true && optionsCurr.length > 0 && value?.length >= optionsCurr.length);
1582
1582
  const { t } = useTranslation9();
1583
- useEffect7(() => {
1584
- if (optionsLoad) {
1585
- setOptionsCurr(optionsLoad);
1586
- } else {
1587
- setOptionsCurr(options);
1588
- }
1589
- }, [optionsLoad, options]);
1583
+ const isSelectedAll = useMemo(() => {
1584
+ return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
1585
+ }, [optionsLoad, options, value]);
1590
1586
  const defaultColumns = [
1591
1587
  {
1592
1588
  field: "key",
@@ -1610,7 +1606,7 @@ var SelectTable = forwardRef2((props, ref) => {
1610
1606
  if (dropdownOpen) {
1611
1607
  if (value) {
1612
1608
  if (selectMenuTableRef) {
1613
- const elementFocus = document.getElementById(`row-select-table-${optionsCurr?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1609
+ const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
1614
1610
  if (elementFocus) {
1615
1611
  const rect = elementFocus.getBoundingClientRect();
1616
1612
  const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
@@ -1630,9 +1626,9 @@ var SelectTable = forwardRef2((props, ref) => {
1630
1626
  if (inputRef) {
1631
1627
  inputRef.current.addEventListener("blur", function() {
1632
1628
  timeOutBlur = setTimeout(() => {
1633
- console.log(document.activeElement);
1634
1629
  if (!selectTableRef.current?.contains(document.activeElement)) {
1635
1630
  setDropdownOpen(false);
1631
+ setSearchTerm("");
1636
1632
  setIsFocus(false);
1637
1633
  }
1638
1634
  }, 100);
@@ -1676,7 +1672,7 @@ var SelectTable = forwardRef2((props, ref) => {
1676
1672
  flag = true;
1677
1673
  } else if (e.code === "Escape" || e.code === "Space") {
1678
1674
  if (dropdownOpen) {
1679
- onChange(optionsCurr[indexFocus]);
1675
+ onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1680
1676
  }
1681
1677
  if (!searchTerm) {
1682
1678
  handleOpenClose();
@@ -1684,7 +1680,7 @@ var SelectTable = forwardRef2((props, ref) => {
1684
1680
  }
1685
1681
  } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
1686
1682
  if (dropdownOpen) {
1687
- onChange(optionsCurr[indexFocus]);
1683
+ onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
1688
1684
  handleOpenClose();
1689
1685
  flag = true;
1690
1686
  }
@@ -1694,9 +1690,9 @@ var SelectTable = forwardRef2((props, ref) => {
1694
1690
  if (indexFocus >= 0) {
1695
1691
  newIndex = indexFocus + 1;
1696
1692
  } else if (value) {
1697
- newIndex = optionsCurr?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
1693
+ newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
1698
1694
  }
1699
- if (newIndex < optionsCurr.length) {
1695
+ if (newIndex < (optionsLoad ? optionsLoad : options).length) {
1700
1696
  setIndexFocus(newIndex);
1701
1697
  checkIfElementIsOutOfScroll(0);
1702
1698
  } else {
@@ -1714,13 +1710,13 @@ var SelectTable = forwardRef2((props, ref) => {
1714
1710
  if (indexFocus >= 0) {
1715
1711
  newIndex = indexFocus - 1;
1716
1712
  } else if (value) {
1717
- newIndex = optionsCurr?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
1713
+ newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
1718
1714
  }
1719
1715
  if (newIndex >= 0) {
1720
1716
  setIndexFocus(newIndex);
1721
1717
  checkIfElementIsOutOfScroll(2);
1722
1718
  } else {
1723
- setIndexFocus(optionsCurr.length - 1);
1719
+ setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
1724
1720
  checkIfElementIsOutOfScroll(3);
1725
1721
  }
1726
1722
  flag = true;
@@ -1808,6 +1804,7 @@ var SelectTable = forwardRef2((props, ref) => {
1808
1804
  return false;
1809
1805
  };
1810
1806
  const callbackLoadOption = (rs) => {
1807
+ setIsLoading(false);
1811
1808
  setOptionsLoad(rs);
1812
1809
  };
1813
1810
  useEffect7(() => {
@@ -1815,10 +1812,174 @@ var SelectTable = forwardRef2((props, ref) => {
1815
1812
  setOptionsLoad(void 0);
1816
1813
  }
1817
1814
  }, [searchTerm]);
1815
+ const RenderElement = (props2) => {
1816
+ const { indexRow, row, isSelected, level = 0 } = props2;
1817
+ return /* @__PURE__ */ jsxs12(
1818
+ "tr",
1819
+ {
1820
+ id: `row-select-table-${indexRow}`,
1821
+ style: { paddingLeft: 10 * level },
1822
+ className: classnames6("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
1823
+ children: [
1824
+ isMulti && /* @__PURE__ */ jsx13(
1825
+ "td",
1826
+ {
1827
+ className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1828
+ style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1829
+ onClick: (e) => {
1830
+ if (isMulti) {
1831
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1832
+ if (index > -1) {
1833
+ value?.splice(index, 1);
1834
+ const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1835
+ onChange(valueArr);
1836
+ } else {
1837
+ if (value) {
1838
+ value?.push(row[fieldValue ?? "value"]);
1839
+ const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1840
+ onChange(valueArr);
1841
+ } else {
1842
+ onChange([row[fieldValue ?? "value"]]);
1843
+ }
1844
+ }
1845
+ e.stopPropagation();
1846
+ }
1847
+ },
1848
+ children: /* @__PURE__ */ jsx13(
1849
+ Input6,
1850
+ {
1851
+ checked: isSelected,
1852
+ type: "checkbox",
1853
+ className: "cursor-pointer",
1854
+ onChange: () => {
1855
+ },
1856
+ style: { textAlign: "center", marginTop: 6 }
1857
+ }
1858
+ )
1859
+ }
1860
+ ),
1861
+ (columns ? columns : defaultColumns).map((col, indexCol) => {
1862
+ let valueDisplay = row[col.field];
1863
+ if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
1864
+ valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
1865
+ } else if (col.type === "date") {
1866
+ valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy") : "";
1867
+ } else if (col.type === "datetime") {
1868
+ valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
1869
+ }
1870
+ return /* @__PURE__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
1871
+ "td",
1872
+ {
1873
+ id: `content-select-${indexRow}-${indexCol}`,
1874
+ className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1875
+ style: {
1876
+ minWidth: col.minWidth,
1877
+ width: col.width,
1878
+ maxWidth: col.maxWidth,
1879
+ textAlign: col.textAlign ? col.textAlign : "left"
1880
+ },
1881
+ onClick: (e) => {
1882
+ if (isMulti) {
1883
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1884
+ if (index > -1) {
1885
+ value?.splice(index, 1);
1886
+ const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1887
+ onChange(valueArr);
1888
+ } else {
1889
+ if (value) {
1890
+ value?.push(row[fieldValue ?? "value"]);
1891
+ const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1892
+ onChange(valueArr);
1893
+ } else {
1894
+ onChange([row[fieldValue ?? "value"]]);
1895
+ }
1896
+ }
1897
+ } else {
1898
+ onChange(row);
1899
+ setSearchTerm("");
1900
+ closeMenu();
1901
+ }
1902
+ e.preventDefault();
1903
+ e.stopPropagation();
1904
+ },
1905
+ onMouseMove: (e) => {
1906
+ if (indexRow !== indexFocus) {
1907
+ setIndexFocus(indexRow);
1908
+ }
1909
+ e.stopPropagation();
1910
+ },
1911
+ children: col.template ? col.template(row, indexRow) : valueDisplay
1912
+ },
1913
+ `col-${indexRow}-${indexCol}`
1914
+ ) }, indexCol);
1915
+ })
1916
+ ]
1917
+ },
1918
+ `row-${indexRow}`
1919
+ );
1920
+ };
1921
+ const RenderTable = (props2) => {
1922
+ const {} = props2;
1923
+ let countDisplay = 0;
1924
+ return /* @__PURE__ */ jsxs12(Fragment14, { children: [
1925
+ /* @__PURE__ */ jsxs12("table", { style: { width: "100%" }, children: [
1926
+ /* @__PURE__ */ jsx13("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs12("tr", { className: "r-select-row", role: "row", children: [
1927
+ isMulti && /* @__PURE__ */ jsx13("th", { className: classnames6(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx13(
1928
+ "div",
1929
+ {
1930
+ style: { justifyContent: "center" },
1931
+ className: classnames6("r-select-headercell-div"),
1932
+ children: /* @__PURE__ */ jsx13(
1933
+ Input6,
1934
+ {
1935
+ checked: isSelectedAll,
1936
+ type: "checkbox",
1937
+ onClick: (e) => {
1938
+ if (isMulti) {
1939
+ if (isSelectedAll) {
1940
+ onChange([]);
1941
+ } else {
1942
+ onChange([...optionsLoad ? optionsLoad : options]);
1943
+ }
1944
+ e.stopPropagation();
1945
+ }
1946
+ },
1947
+ readOnly: true,
1948
+ className: classnames6("cursor-pointer", { "d-none": !isMulti }),
1949
+ style: { textAlign: "center", marginTop: 6 }
1950
+ }
1951
+ )
1952
+ }
1953
+ ) }),
1954
+ (columns ? columns : defaultColumns).map((col, index) => {
1955
+ return renderHeaderCol(col, index);
1956
+ })
1957
+ ] }) }),
1958
+ (optionsLoad ? optionsLoad : options).length > 0 && !isLoading && /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1959
+ if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1960
+ const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1961
+ countDisplay++;
1962
+ return /* @__PURE__ */ jsx13(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
1963
+ }
1964
+ }) }) })
1965
+ ] }),
1966
+ countDisplay === 0 && !isLoading && /* @__PURE__ */ jsxs12("div", { className: "r-no-data", children: [
1967
+ /* @__PURE__ */ jsx13("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs12("g", { transform: "translate(0 1)", fill: "none", "fill-rule": "evenodd", children: [
1968
+ /* @__PURE__ */ jsx13("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
1969
+ /* @__PURE__ */ jsxs12("g", { "fill-rule": "nonzero", stroke: "#d9d9d9", children: [
1970
+ /* @__PURE__ */ jsx13("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }),
1971
+ /* @__PURE__ */ jsx13("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })
1972
+ ] })
1973
+ ] }) }),
1974
+ t("No data available.")
1975
+ ] }),
1976
+ isLoading && /* @__PURE__ */ jsx13("div", { className: "r-no-data", children: t("Loading...") })
1977
+ ] });
1978
+ };
1818
1979
  return /* @__PURE__ */ jsx13(
1819
1980
  "div",
1820
1981
  {
1821
- className: classnames6("react-select-table", { "is-invalid": invalid }),
1982
+ className: classnames6("react-select-table"),
1822
1983
  ref,
1823
1984
  id,
1824
1985
  children: /* @__PURE__ */ jsx13("div", { ref: selectTableRef, children: /* @__PURE__ */ jsxs12(
@@ -1840,11 +2001,11 @@ var SelectTable = forwardRef2((props, ref) => {
1840
2001
  },
1841
2002
  tabIndex: 0,
1842
2003
  tag: "div",
1843
- className: classnames6("select-table-control", { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
2004
+ className: classnames6("select-table-control", { "r-select-is-open": dropdownOpen }, { "is-invalid": invalid }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
1844
2005
  children: [
1845
2006
  /* @__PURE__ */ jsxs12("div", { className: "select-table-container", children: [
1846
2007
  isMulti ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("div", { className: classnames6("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
1847
- const element = optionsCurr.find((e) => e[fieldValue ?? "value"] === ele);
2008
+ const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
1848
2009
  if (element) {
1849
2010
  return /* @__PURE__ */ jsxs12("span", { children: [
1850
2011
  index === 0 ? "" : ", ",
@@ -1865,6 +2026,7 @@ var SelectTable = forwardRef2((props, ref) => {
1865
2026
  value: searchTerm,
1866
2027
  onChange: (val) => {
1867
2028
  if (!isMulti && loadOptions && val.target.value) {
2029
+ setIsLoading(true);
1868
2030
  loadOptions(val.target.value, callbackLoadOption);
1869
2031
  }
1870
2032
  setSearchTerm(val.target.value);
@@ -1873,6 +2035,11 @@ var SelectTable = forwardRef2((props, ref) => {
1873
2035
  }
1874
2036
  ) })
1875
2037
  ] }),
2038
+ /* @__PURE__ */ jsxs12("div", { className: classnames6("select-table-indicator d-flex align-items-center", { "d-none": !isLoading }), children: [
2039
+ /* @__PURE__ */ jsx13(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
2040
+ /* @__PURE__ */ jsx13(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
2041
+ /* @__PURE__ */ jsx13(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
2042
+ ] }),
1876
2043
  /* @__PURE__ */ jsx13(
1877
2044
  "div",
1878
2045
  {
@@ -1907,147 +2074,7 @@ var SelectTable = forwardRef2((props, ref) => {
1907
2074
  e.preventDefault();
1908
2075
  },
1909
2076
  children: /* @__PURE__ */ jsxs12("div", { className: "r-select-grid", children: [
1910
- /* @__PURE__ */ jsx13("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsxs12("table", { style: { width: "100%" }, children: [
1911
- /* @__PURE__ */ jsx13("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs12("tr", { className: "r-select-row", role: "row", children: [
1912
- isMulti && /* @__PURE__ */ jsx13("th", { className: classnames6(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx13(
1913
- "div",
1914
- {
1915
- style: { justifyContent: "center" },
1916
- className: classnames6("r-select-headercell-div"),
1917
- children: /* @__PURE__ */ jsx13(
1918
- Input6,
1919
- {
1920
- checked: isSelectedAll,
1921
- type: "checkbox",
1922
- onClick: (e) => {
1923
- if (isMulti) {
1924
- if (isSelectedAll) {
1925
- onChange([]);
1926
- } else {
1927
- onChange([...optionsCurr]);
1928
- }
1929
- setIsSelectdAll(!isSelectedAll);
1930
- e.stopPropagation();
1931
- }
1932
- },
1933
- readOnly: true,
1934
- className: classnames6("cursor-pointer", { "d-none": !isMulti }),
1935
- style: { textAlign: "center", marginTop: 6 }
1936
- }
1937
- )
1938
- }
1939
- ) }),
1940
- (columns ? columns : defaultColumns).map((col, index) => {
1941
- return renderHeaderCol(col, index);
1942
- })
1943
- ] }) }),
1944
- optionsCurr.length > 0 ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: optionsCurr?.map((row, indexRow) => {
1945
- if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1946
- const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1947
- return /* @__PURE__ */ jsxs12(
1948
- "tr",
1949
- {
1950
- id: `row-select-table-${indexRow}`,
1951
- className: classnames6("r-select-row", { "last-row": indexRow === optionsCurr.length - 1 }, { "fisrt-row": indexRow === 0 }),
1952
- children: [
1953
- isMulti && /* @__PURE__ */ jsx13(
1954
- "td",
1955
- {
1956
- className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1957
- style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1958
- onClick: (e) => {
1959
- if (isMulti) {
1960
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1961
- if (index > -1) {
1962
- value?.splice(index, 1);
1963
- const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1964
- onChange(valueArr);
1965
- } else {
1966
- if (value) {
1967
- value?.push(row[fieldValue ?? "value"]);
1968
- const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1969
- onChange(valueArr);
1970
- } else {
1971
- onChange([row[fieldValue ?? "value"]]);
1972
- }
1973
- }
1974
- e.stopPropagation();
1975
- }
1976
- },
1977
- children: /* @__PURE__ */ jsx13(
1978
- Input6,
1979
- {
1980
- checked: isSelected,
1981
- type: "checkbox",
1982
- className: "cursor-pointer",
1983
- onChange: () => {
1984
- },
1985
- style: { textAlign: "center", marginTop: 6 }
1986
- }
1987
- )
1988
- }
1989
- ),
1990
- (columns ? columns : defaultColumns).map((col, indexCol) => {
1991
- let valueDisplay = row[col.field];
1992
- if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
1993
- valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
1994
- } else if (col.type === "date") {
1995
- valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy") : "";
1996
- } else if (col.type === "datetime") {
1997
- valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
1998
- }
1999
- return /* @__PURE__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
2000
- "td",
2001
- {
2002
- id: `content-select-${indexRow}-${indexCol}`,
2003
- className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
2004
- style: {
2005
- minWidth: col.minWidth,
2006
- width: col.width,
2007
- maxWidth: col.maxWidth,
2008
- textAlign: col.textAlign ? col.textAlign : "left"
2009
- },
2010
- onClick: (e) => {
2011
- if (isMulti) {
2012
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
2013
- if (index > -1) {
2014
- value?.splice(index, 1);
2015
- const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2016
- onChange(valueArr);
2017
- } else {
2018
- if (value) {
2019
- value?.push(row[fieldValue ?? "value"]);
2020
- const valueArr = optionsCurr.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2021
- onChange(valueArr);
2022
- } else {
2023
- onChange([row[fieldValue ?? "value"]]);
2024
- }
2025
- }
2026
- } else {
2027
- onChange(row);
2028
- closeMenu();
2029
- }
2030
- e.preventDefault();
2031
- e.stopPropagation();
2032
- },
2033
- onMouseMove: (e) => {
2034
- if (indexRow !== indexFocus) {
2035
- setIndexFocus(indexRow);
2036
- }
2037
- e.stopPropagation();
2038
- },
2039
- children: col.template ? col.template(row, indexRow) : valueDisplay
2040
- },
2041
- `col-${indexRow}-${indexCol}`
2042
- ) }, indexCol);
2043
- })
2044
- ]
2045
- },
2046
- `row-${indexRow}`
2047
- );
2048
- }
2049
- }) }) }) : /* @__PURE__ */ jsx13("div", { className: "r-no-data", children: t("No data available.") })
2050
- ] }) }),
2077
+ /* @__PURE__ */ jsx13("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsx13(RenderTable, {}) }),
2051
2078
  /* @__PURE__ */ jsx13("div", { className: classnames6("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ jsxs12(Button3, { outline: true, color: "primary", onClick: handleAdd, className: classnames6("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
2052
2079
  /* @__PURE__ */ jsx13(Plus2, { className: "me-50", fontSize: 16 }),
2053
2080
  t("AddNew"),
@@ -3710,11 +3737,11 @@ var TabsMenuComponent = ({
3710
3737
  };
3711
3738
 
3712
3739
  // index.ts
3713
- var Table_edit_default = table_default;
3740
+ var Table_Edit_default = table_default;
3714
3741
  export {
3715
3742
  SelectTable,
3716
3743
  TabsMenuComponent,
3717
- Table_edit_default as default,
3744
+ Table_Edit_default as default,
3718
3745
  formartNumberic,
3719
3746
  generateUUID,
3720
3747
  isNullOrUndefined,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.6.1",
4
+ "version": "0.6.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",