react-table-edit 0.6.0 → 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 (5) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +196 -157
  4. package/dist/index.mjs +196 -156
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -19,7 +19,6 @@ type IFColumnSelectTable = {
19
19
  type Props = {
20
20
  id?: string;
21
21
  component?: any;
22
- field?: string;
23
22
  fieldValue?: string;
24
23
  fieldLabel?: string;
25
24
  onChange: any;
@@ -41,6 +40,7 @@ type Props = {
41
40
  thousandSeparator?: string;
42
41
  isClearable?: boolean;
43
42
  isDisabled?: boolean;
43
+ showFooter?: boolean;
44
44
  };
45
45
  declare const SelectTable: react.ForwardRefExoticComponent<Props & react.RefAttributes<unknown>>;
46
46
 
package/dist/index.d.ts CHANGED
@@ -19,7 +19,6 @@ type IFColumnSelectTable = {
19
19
  type Props = {
20
20
  id?: string;
21
21
  component?: any;
22
- field?: string;
23
22
  fieldValue?: string;
24
23
  fieldLabel?: string;
25
24
  onChange: any;
@@ -41,6 +40,7 @@ type Props = {
41
40
  thousandSeparator?: string;
42
41
  isClearable?: boolean;
43
42
  isDisabled?: boolean;
43
+ showFooter?: boolean;
44
44
  };
45
45
  declare const SelectTable: react.ForwardRefExoticComponent<Props & react.RefAttributes<unknown>>;
46
46
 
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");
@@ -1602,7 +1602,8 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1602
1602
  component,
1603
1603
  isDisabled,
1604
1604
  formatOptionLabel,
1605
- isMulti
1605
+ isMulti,
1606
+ showFooter
1606
1607
  } = props;
1607
1608
  const selectTableRef = (0, import_react13.useRef)();
1608
1609
  const selectMenuTableRef = (0, import_react13.useRef)();
@@ -1610,9 +1611,13 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1610
1611
  const [dropdownOpen, setDropdownOpen] = (0, import_react13.useState)(false);
1611
1612
  const [indexFocus, setIndexFocus] = (0, import_react13.useState)(-1);
1612
1613
  const [isFocus, setIsFocus] = (0, import_react13.useState)(false);
1614
+ const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
1613
1615
  const [searchTerm, setSearchTerm] = (0, import_react13.useState)("");
1614
1616
  const [optionsLoad, setOptionsLoad] = (0, import_react13.useState)();
1615
1617
  const { t } = (0, import_react_i18next9.useTranslation)();
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]);
1616
1621
  const defaultColumns = [
1617
1622
  {
1618
1623
  field: "key",
@@ -1656,8 +1661,9 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1656
1661
  if (inputRef) {
1657
1662
  inputRef.current.addEventListener("blur", function() {
1658
1663
  timeOutBlur = setTimeout(() => {
1659
- if (document.activeElement?.className !== "select-input" && !selectTableRef.current?.contains(document.activeElement)) {
1664
+ if (!selectTableRef.current?.contains(document.activeElement)) {
1660
1665
  setDropdownOpen(false);
1666
+ setSearchTerm("");
1661
1667
  setIsFocus(false);
1662
1668
  }
1663
1669
  }, 100);
@@ -1833,6 +1839,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1833
1839
  return false;
1834
1840
  };
1835
1841
  const callbackLoadOption = (rs) => {
1842
+ setIsLoading(false);
1836
1843
  setOptionsLoad(rs);
1837
1844
  };
1838
1845
  (0, import_react13.useEffect)(() => {
@@ -1840,10 +1847,174 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1840
1847
  setOptionsLoad(void 0);
1841
1848
  }
1842
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
+ };
1843
2014
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1844
2015
  "div",
1845
2016
  {
1846
- className: (0, import_classnames11.default)("react-select-table", { "is-invalid": invalid }),
2017
+ className: (0, import_classnames11.default)("react-select-table"),
1847
2018
  ref,
1848
2019
  id,
1849
2020
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -1858,16 +2029,18 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1858
2029
  {
1859
2030
  onClick: () => {
1860
2031
  inputRef?.current.focus();
1861
- clearTimeout(timeOutBlur);
2032
+ if (dropdownOpen) {
2033
+ clearTimeout(timeOutBlur);
2034
+ }
1862
2035
  handleOpenClose();
1863
2036
  },
1864
2037
  tabIndex: 0,
1865
2038
  tag: "div",
1866
- className: (0, import_classnames11.default)("select-table-control", { "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 }),
1867
2040
  children: [
1868
2041
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "select-table-container", children: [
1869
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) => {
1870
- const element = options.find((e) => e[fieldValue ?? "value"] === ele);
2043
+ const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
1871
2044
  if (element) {
1872
2045
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
1873
2046
  index === 0 ? "" : ", ",
@@ -1887,7 +2060,8 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1887
2060
  className: (0, import_classnames11.default)("select-input"),
1888
2061
  value: searchTerm,
1889
2062
  onChange: (val) => {
1890
- if (loadOptions && val.target.value) {
2063
+ if (!isMulti && loadOptions && val.target.value) {
2064
+ setIsLoading(true);
1891
2065
  loadOptions(val.target.value, callbackLoadOption);
1892
2066
  }
1893
2067
  setSearchTerm(val.target.value);
@@ -1896,18 +2070,23 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1896
2070
  }
1897
2071
  ) })
1898
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
+ ] }),
1899
2078
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1900
2079
  "div",
1901
2080
  {
1902
- className: (0, import_classnames11.default)("select-table-indicator cursor-pointer", { "d-none": !isClearable || !value }),
2081
+ className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isClearable || !value }),
1903
2082
  onClick: (e) => {
1904
2083
  onChange(isMulti ? [] : void 0);
1905
2084
  e.stopPropagation();
1906
2085
  },
1907
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", style: { color: "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
2086
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", fill: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
1908
2087
  }
1909
2088
  ),
1910
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "select-table-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", style: { color: dropdownOpen ? "#000000af" : "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
2089
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "select-table-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
1911
2090
  ]
1912
2091
  }
1913
2092
  ),
@@ -1930,147 +2109,8 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1930
2109
  e.preventDefault();
1931
2110
  },
1932
2111
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-select-grid", children: [
1933
- /* @__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: [
1934
- /* @__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: [
1935
- 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)(
1936
- "div",
1937
- {
1938
- style: { justifyContent: "center" },
1939
- className: (0, import_classnames11.default)("r-select-headercell-div"),
1940
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1941
- import_reactstrap8.Input,
1942
- {
1943
- defaultChecked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1944
- type: "checkbox",
1945
- className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
1946
- style: { textAlign: "center", marginTop: 6 },
1947
- onChange: (e) => {
1948
- if (isMulti) {
1949
- if (e.target.checked) {
1950
- onChange((optionsLoad ? optionsLoad : options).map((item) => {
1951
- return item;
1952
- }));
1953
- } else {
1954
- onChange([]);
1955
- }
1956
- }
1957
- }
1958
- }
1959
- )
1960
- }
1961
- ) }),
1962
- (columns ? columns : defaultColumns).map((col, index) => {
1963
- return renderHeaderCol(col, index);
1964
- })
1965
- ] }) }),
1966
- (optionsLoad ? optionsLoad : options).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: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1967
- if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1968
- const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1969
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1970
- "tr",
1971
- {
1972
- id: `row-select-table-${indexRow}`,
1973
- className: (0, import_classnames11.default)("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
1974
- children: [
1975
- isMulti && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1976
- "td",
1977
- {
1978
- className: (0, import_classnames11.default)(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1979
- style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1980
- onClick: (e) => {
1981
- if (isMulti) {
1982
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1983
- if (index > -1) {
1984
- value?.splice(index, 1);
1985
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1986
- onChange(valueArr);
1987
- } else {
1988
- if (value) {
1989
- value?.push(row[fieldValue ?? "value"]);
1990
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1991
- onChange(valueArr);
1992
- } else {
1993
- onChange([row[fieldValue ?? "value"]]);
1994
- }
1995
- }
1996
- e.stopPropagation();
1997
- }
1998
- },
1999
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
2000
- import_reactstrap8.Input,
2001
- {
2002
- checked: isSelected,
2003
- type: "checkbox",
2004
- className: "cursor-pointer",
2005
- onChange: () => {
2006
- },
2007
- style: { textAlign: "center", marginTop: 6 }
2008
- }
2009
- )
2010
- }
2011
- ),
2012
- (columns ? columns : defaultColumns).map((col, indexCol) => {
2013
- let valueDisplay = row[col.field];
2014
- if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
2015
- valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
2016
- } else if (col.type === "date") {
2017
- valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy") : "";
2018
- } else if (col.type === "datetime") {
2019
- valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
2020
- }
2021
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
2022
- "td",
2023
- {
2024
- id: `content-select-${indexRow}-${indexCol}`,
2025
- className: (0, import_classnames11.default)(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
2026
- style: {
2027
- minWidth: col.minWidth,
2028
- width: col.width,
2029
- maxWidth: col.maxWidth,
2030
- textAlign: col.textAlign ? col.textAlign : "left"
2031
- },
2032
- onClick: (e) => {
2033
- if (isMulti) {
2034
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
2035
- if (index > -1) {
2036
- value?.splice(index, 1);
2037
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2038
- onChange(valueArr);
2039
- } else {
2040
- if (value) {
2041
- value?.push(row[fieldValue ?? "value"]);
2042
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2043
- onChange(valueArr);
2044
- } else {
2045
- onChange([row[fieldValue ?? "value"]]);
2046
- }
2047
- }
2048
- } else {
2049
- onChange(row);
2050
- closeMenu();
2051
- }
2052
- e.preventDefault();
2053
- e.stopPropagation();
2054
- },
2055
- onMouseMove: (e) => {
2056
- if (indexRow !== indexFocus) {
2057
- setIndexFocus(indexRow);
2058
- }
2059
- e.stopPropagation();
2060
- },
2061
- children: col.template ? col.template(row, indexRow) : valueDisplay
2062
- },
2063
- `col-${indexRow}-${indexCol}`
2064
- ) }, indexCol);
2065
- })
2066
- ]
2067
- },
2068
- `row-${indexRow}`
2069
- );
2070
- }
2071
- }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-no-data", children: t("No data available.") })
2072
- ] }) }),
2073
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-select-footer", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap8.Button, { outline: true, color: "primary", className: "r-btn-add d-flex align-items-center", onClick: handleAdd, children: [
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, {}) }),
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: [
2074
2114
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.Plus, { className: "me-50", fontSize: 16 }),
2075
2115
  t("AddNew"),
2076
2116
  " (F9)"
@@ -2500,7 +2540,6 @@ var TableEdit = (0, import_react14.forwardRef)((props, ref) => {
2500
2540
  thousandSeparator,
2501
2541
  placeholder: t("Select"),
2502
2542
  loadOptions: col.selectSettings?.loadOptions,
2503
- field: col.field,
2504
2543
  handleAdd: col.selectSettings?.handAddNew,
2505
2544
  isMulti: col.selectSettings?.isMulti,
2506
2545
  invalid: col.validate && col.validate(row[col.field], row),
@@ -3733,7 +3772,7 @@ var TabsMenuComponent = ({
3733
3772
  };
3734
3773
 
3735
3774
  // index.ts
3736
- var Table_edit_default = table_default;
3775
+ var Table_Edit_default = table_default;
3737
3776
  // Annotate the CommonJS export names for ESM import in node:
3738
3777
  0 && (module.exports = {
3739
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";
@@ -1566,7 +1567,8 @@ var SelectTable = forwardRef2((props, ref) => {
1566
1567
  component,
1567
1568
  isDisabled,
1568
1569
  formatOptionLabel,
1569
- isMulti
1570
+ isMulti,
1571
+ showFooter
1570
1572
  } = props;
1571
1573
  const selectTableRef = useRef2();
1572
1574
  const selectMenuTableRef = useRef2();
@@ -1574,9 +1576,13 @@ var SelectTable = forwardRef2((props, ref) => {
1574
1576
  const [dropdownOpen, setDropdownOpen] = useState6(false);
1575
1577
  const [indexFocus, setIndexFocus] = useState6(-1);
1576
1578
  const [isFocus, setIsFocus] = useState6(false);
1579
+ const [isLoading, setIsLoading] = useState6(false);
1577
1580
  const [searchTerm, setSearchTerm] = useState6("");
1578
1581
  const [optionsLoad, setOptionsLoad] = useState6();
1579
1582
  const { t } = useTranslation9();
1583
+ const isSelectedAll = useMemo(() => {
1584
+ return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
1585
+ }, [optionsLoad, options, value]);
1580
1586
  const defaultColumns = [
1581
1587
  {
1582
1588
  field: "key",
@@ -1620,8 +1626,9 @@ var SelectTable = forwardRef2((props, ref) => {
1620
1626
  if (inputRef) {
1621
1627
  inputRef.current.addEventListener("blur", function() {
1622
1628
  timeOutBlur = setTimeout(() => {
1623
- if (document.activeElement?.className !== "select-input" && !selectTableRef.current?.contains(document.activeElement)) {
1629
+ if (!selectTableRef.current?.contains(document.activeElement)) {
1624
1630
  setDropdownOpen(false);
1631
+ setSearchTerm("");
1625
1632
  setIsFocus(false);
1626
1633
  }
1627
1634
  }, 100);
@@ -1797,6 +1804,7 @@ var SelectTable = forwardRef2((props, ref) => {
1797
1804
  return false;
1798
1805
  };
1799
1806
  const callbackLoadOption = (rs) => {
1807
+ setIsLoading(false);
1800
1808
  setOptionsLoad(rs);
1801
1809
  };
1802
1810
  useEffect7(() => {
@@ -1804,10 +1812,174 @@ var SelectTable = forwardRef2((props, ref) => {
1804
1812
  setOptionsLoad(void 0);
1805
1813
  }
1806
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
+ };
1807
1979
  return /* @__PURE__ */ jsx13(
1808
1980
  "div",
1809
1981
  {
1810
- className: classnames6("react-select-table", { "is-invalid": invalid }),
1982
+ className: classnames6("react-select-table"),
1811
1983
  ref,
1812
1984
  id,
1813
1985
  children: /* @__PURE__ */ jsx13("div", { ref: selectTableRef, children: /* @__PURE__ */ jsxs12(
@@ -1822,16 +1994,18 @@ var SelectTable = forwardRef2((props, ref) => {
1822
1994
  {
1823
1995
  onClick: () => {
1824
1996
  inputRef?.current.focus();
1825
- clearTimeout(timeOutBlur);
1997
+ if (dropdownOpen) {
1998
+ clearTimeout(timeOutBlur);
1999
+ }
1826
2000
  handleOpenClose();
1827
2001
  },
1828
2002
  tabIndex: 0,
1829
2003
  tag: "div",
1830
- className: classnames6("select-table-control", { "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 }),
1831
2005
  children: [
1832
2006
  /* @__PURE__ */ jsxs12("div", { className: "select-table-container", children: [
1833
2007
  isMulti ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("div", { className: classnames6("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
1834
- const element = options.find((e) => e[fieldValue ?? "value"] === ele);
2008
+ const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
1835
2009
  if (element) {
1836
2010
  return /* @__PURE__ */ jsxs12("span", { children: [
1837
2011
  index === 0 ? "" : ", ",
@@ -1851,7 +2025,8 @@ var SelectTable = forwardRef2((props, ref) => {
1851
2025
  className: classnames6("select-input"),
1852
2026
  value: searchTerm,
1853
2027
  onChange: (val) => {
1854
- if (loadOptions && val.target.value) {
2028
+ if (!isMulti && loadOptions && val.target.value) {
2029
+ setIsLoading(true);
1855
2030
  loadOptions(val.target.value, callbackLoadOption);
1856
2031
  }
1857
2032
  setSearchTerm(val.target.value);
@@ -1860,18 +2035,23 @@ var SelectTable = forwardRef2((props, ref) => {
1860
2035
  }
1861
2036
  ) })
1862
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
+ ] }),
1863
2043
  /* @__PURE__ */ jsx13(
1864
2044
  "div",
1865
2045
  {
1866
- className: classnames6("select-table-indicator cursor-pointer", { "d-none": !isClearable || !value }),
2046
+ className: classnames6("cursor-pointer", { "d-none": !isClearable || !value }),
1867
2047
  onClick: (e) => {
1868
2048
  onChange(isMulti ? [] : void 0);
1869
2049
  e.stopPropagation();
1870
2050
  },
1871
- children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", style: { color: "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx13("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
2051
+ children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", fill: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx13("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
1872
2052
  }
1873
2053
  ),
1874
- /* @__PURE__ */ jsx13("div", { className: "select-table-indicator", children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", style: { color: dropdownOpen ? "#000000af" : "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx13("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
2054
+ /* @__PURE__ */ jsx13("div", { className: "select-table-indicator", children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx13("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
1875
2055
  ]
1876
2056
  }
1877
2057
  ),
@@ -1894,147 +2074,8 @@ var SelectTable = forwardRef2((props, ref) => {
1894
2074
  e.preventDefault();
1895
2075
  },
1896
2076
  children: /* @__PURE__ */ jsxs12("div", { className: "r-select-grid", children: [
1897
- /* @__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: [
1898
- /* @__PURE__ */ jsx13("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs12("tr", { className: "r-select-row", role: "row", children: [
1899
- isMulti && /* @__PURE__ */ jsx13("th", { className: classnames6(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx13(
1900
- "div",
1901
- {
1902
- style: { justifyContent: "center" },
1903
- className: classnames6("r-select-headercell-div"),
1904
- children: /* @__PURE__ */ jsx13(
1905
- Input6,
1906
- {
1907
- defaultChecked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1908
- type: "checkbox",
1909
- className: classnames6("cursor-pointer", { "d-none": !isMulti }),
1910
- style: { textAlign: "center", marginTop: 6 },
1911
- onChange: (e) => {
1912
- if (isMulti) {
1913
- if (e.target.checked) {
1914
- onChange((optionsLoad ? optionsLoad : options).map((item) => {
1915
- return item;
1916
- }));
1917
- } else {
1918
- onChange([]);
1919
- }
1920
- }
1921
- }
1922
- }
1923
- )
1924
- }
1925
- ) }),
1926
- (columns ? columns : defaultColumns).map((col, index) => {
1927
- return renderHeaderCol(col, index);
1928
- })
1929
- ] }) }),
1930
- (optionsLoad ? optionsLoad : options).length > 0 ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1931
- if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1932
- const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1933
- return /* @__PURE__ */ jsxs12(
1934
- "tr",
1935
- {
1936
- id: `row-select-table-${indexRow}`,
1937
- className: classnames6("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
1938
- children: [
1939
- isMulti && /* @__PURE__ */ jsx13(
1940
- "td",
1941
- {
1942
- className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1943
- style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1944
- onClick: (e) => {
1945
- if (isMulti) {
1946
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1947
- if (index > -1) {
1948
- value?.splice(index, 1);
1949
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1950
- onChange(valueArr);
1951
- } else {
1952
- if (value) {
1953
- value?.push(row[fieldValue ?? "value"]);
1954
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1955
- onChange(valueArr);
1956
- } else {
1957
- onChange([row[fieldValue ?? "value"]]);
1958
- }
1959
- }
1960
- e.stopPropagation();
1961
- }
1962
- },
1963
- children: /* @__PURE__ */ jsx13(
1964
- Input6,
1965
- {
1966
- checked: isSelected,
1967
- type: "checkbox",
1968
- className: "cursor-pointer",
1969
- onChange: () => {
1970
- },
1971
- style: { textAlign: "center", marginTop: 6 }
1972
- }
1973
- )
1974
- }
1975
- ),
1976
- (columns ? columns : defaultColumns).map((col, indexCol) => {
1977
- let valueDisplay = row[col.field];
1978
- if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
1979
- valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
1980
- } else if (col.type === "date") {
1981
- valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy") : "";
1982
- } else if (col.type === "datetime") {
1983
- valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
1984
- }
1985
- return /* @__PURE__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
1986
- "td",
1987
- {
1988
- id: `content-select-${indexRow}-${indexCol}`,
1989
- className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1990
- style: {
1991
- minWidth: col.minWidth,
1992
- width: col.width,
1993
- maxWidth: col.maxWidth,
1994
- textAlign: col.textAlign ? col.textAlign : "left"
1995
- },
1996
- onClick: (e) => {
1997
- if (isMulti) {
1998
- const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1999
- if (index > -1) {
2000
- value?.splice(index, 1);
2001
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2002
- onChange(valueArr);
2003
- } else {
2004
- if (value) {
2005
- value?.push(row[fieldValue ?? "value"]);
2006
- const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
2007
- onChange(valueArr);
2008
- } else {
2009
- onChange([row[fieldValue ?? "value"]]);
2010
- }
2011
- }
2012
- } else {
2013
- onChange(row);
2014
- closeMenu();
2015
- }
2016
- e.preventDefault();
2017
- e.stopPropagation();
2018
- },
2019
- onMouseMove: (e) => {
2020
- if (indexRow !== indexFocus) {
2021
- setIndexFocus(indexRow);
2022
- }
2023
- e.stopPropagation();
2024
- },
2025
- children: col.template ? col.template(row, indexRow) : valueDisplay
2026
- },
2027
- `col-${indexRow}-${indexCol}`
2028
- ) }, indexCol);
2029
- })
2030
- ]
2031
- },
2032
- `row-${indexRow}`
2033
- );
2034
- }
2035
- }) }) }) : /* @__PURE__ */ jsx13("div", { className: "r-no-data", children: t("No data available.") })
2036
- ] }) }),
2037
- /* @__PURE__ */ jsx13("div", { className: "r-select-footer", children: /* @__PURE__ */ jsxs12(Button3, { outline: true, color: "primary", className: "r-btn-add d-flex align-items-center", onClick: handleAdd, children: [
2077
+ /* @__PURE__ */ jsx13("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsx13(RenderTable, {}) }),
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: [
2038
2079
  /* @__PURE__ */ jsx13(Plus2, { className: "me-50", fontSize: 16 }),
2039
2080
  t("AddNew"),
2040
2081
  " (F9)"
@@ -2464,7 +2505,6 @@ var TableEdit = forwardRef3((props, ref) => {
2464
2505
  thousandSeparator,
2465
2506
  placeholder: t("Select"),
2466
2507
  loadOptions: col.selectSettings?.loadOptions,
2467
- field: col.field,
2468
2508
  handleAdd: col.selectSettings?.handAddNew,
2469
2509
  isMulti: col.selectSettings?.isMulti,
2470
2510
  invalid: col.validate && col.validate(row[col.field], row),
@@ -3697,11 +3737,11 @@ var TabsMenuComponent = ({
3697
3737
  };
3698
3738
 
3699
3739
  // index.ts
3700
- var Table_edit_default = table_default;
3740
+ var Table_Edit_default = table_default;
3701
3741
  export {
3702
3742
  SelectTable,
3703
3743
  TabsMenuComponent,
3704
- Table_edit_default as default,
3744
+ Table_Edit_default as default,
3705
3745
  formartNumberic,
3706
3746
  generateUUID,
3707
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.0",
4
+ "version": "0.6.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",