react-table-edit 0.5.8 → 0.6.0

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 +3 -1
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +64 -61
  4. package/dist/index.mjs +68 -66
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -28,9 +28,10 @@ type Props = {
28
28
  invalid?: any;
29
29
  loadOptions?: any;
30
30
  menuWidth?: number;
31
- rowData: any;
31
+ rowData?: any;
32
32
  value: any;
33
33
  onKeyDown?: any;
34
+ formatOptionLabel?: any;
34
35
  handleAdd?: any;
35
36
  options: any[];
36
37
  isMulti?: boolean;
@@ -39,6 +40,7 @@ type Props = {
39
40
  decimalSeparator?: string;
40
41
  thousandSeparator?: string;
41
42
  isClearable?: boolean;
43
+ isDisabled?: boolean;
42
44
  };
43
45
  declare const SelectTable: react.ForwardRefExoticComponent<Props & react.RefAttributes<unknown>>;
44
46
 
package/dist/index.d.ts CHANGED
@@ -28,9 +28,10 @@ type Props = {
28
28
  invalid?: any;
29
29
  loadOptions?: any;
30
30
  menuWidth?: number;
31
- rowData: any;
31
+ rowData?: any;
32
32
  value: any;
33
33
  onKeyDown?: any;
34
+ formatOptionLabel?: any;
34
35
  handleAdd?: any;
35
36
  options: any[];
36
37
  isMulti?: boolean;
@@ -39,6 +40,7 @@ type Props = {
39
40
  decimalSeparator?: string;
40
41
  thousandSeparator?: string;
41
42
  isClearable?: boolean;
43
+ isDisabled?: boolean;
42
44
  };
43
45
  declare const SelectTable: react.ForwardRefExoticComponent<Props & react.RefAttributes<unknown>>;
44
46
 
package/dist/index.js CHANGED
@@ -1600,6 +1600,8 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1600
1600
  handleAdd,
1601
1601
  isClearable,
1602
1602
  component,
1603
+ isDisabled,
1604
+ formatOptionLabel,
1603
1605
  isMulti
1604
1606
  } = props;
1605
1607
  const selectTableRef = (0, import_react13.useRef)();
@@ -1678,7 +1680,9 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1678
1680
  if (dropdownOpen) {
1679
1681
  closeMenu();
1680
1682
  } else {
1681
- setDropdownOpen(true);
1683
+ if (!isDisabled) {
1684
+ setDropdownOpen(true);
1685
+ }
1682
1686
  }
1683
1687
  };
1684
1688
  const listKeyUse = ["Escape", "Space", "Enter", "Tab", "NumpadEnter", "ArrowDown", "ArrowUp", "F9"];
@@ -1836,13 +1840,10 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1836
1840
  setOptionsLoad(void 0);
1837
1841
  }
1838
1842
  }, [searchTerm]);
1839
- const checkOverflow = (element) => {
1840
- return element && element.scrollWidth > element.clientWidth;
1841
- };
1842
1843
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1843
1844
  "div",
1844
1845
  {
1845
- className: "react-select-table",
1846
+ className: (0, import_classnames11.default)("react-select-table", { "is-invalid": invalid }),
1846
1847
  ref,
1847
1848
  id,
1848
1849
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -1866,12 +1867,15 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1866
1867
  children: [
1867
1868
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "select-table-container", children: [
1868
1869
  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) => {
1869
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
1870
- index === 0 ? "" : ", ",
1871
- ele[fieldLabel ?? "label"]
1872
- ] }, index);
1870
+ const element = options.find((e) => e[fieldValue ?? "value"] === ele);
1871
+ if (element) {
1872
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
1873
+ index === 0 ? "" : ", ",
1874
+ element[fieldLabel ?? "label"]
1875
+ ] }, index);
1876
+ }
1873
1877
  }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("select-value", { "d-none": searchTerm }), children: [
1874
- value ? value[fieldLabel ?? "label"] : "",
1878
+ value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1875
1879
  " "
1876
1880
  ] }) }),
1877
1881
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("select-placeholder", { "d-none": (isMulti ? value?.length > 0 : value) || searchTerm }), children: placeholder }),
@@ -1926,7 +1930,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1926
1930
  e.preventDefault();
1927
1931
  },
1928
1932
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-select-grid", children: [
1929
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { style: { width: "100%" }, 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: [
1930
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: [
1931
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)(
1932
1936
  "div",
@@ -1936,7 +1940,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1936
1940
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1937
1941
  import_reactstrap8.Input,
1938
1942
  {
1939
- checked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1943
+ defaultChecked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1940
1944
  type: "checkbox",
1941
1945
  className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
1942
1946
  style: { textAlign: "center", marginTop: 6 },
@@ -1961,8 +1965,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1961
1965
  ] }) }),
1962
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) => {
1963
1967
  if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1964
- const refRow = (0, import_react13.useRef)(null);
1965
- const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1968
+ const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1966
1969
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1967
1970
  "tr",
1968
1971
  {
@@ -1976,16 +1979,18 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1976
1979
  style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1977
1980
  onClick: (e) => {
1978
1981
  if (isMulti) {
1979
- const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1982
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1980
1983
  if (index > -1) {
1981
1984
  value?.splice(index, 1);
1982
- onChange(value);
1985
+ const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1986
+ onChange(valueArr);
1983
1987
  } else {
1984
1988
  if (value) {
1985
- value?.push(row);
1986
- onChange(value);
1989
+ value?.push(row[fieldValue ?? "value"]);
1990
+ const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1991
+ onChange(valueArr);
1987
1992
  } else {
1988
- onChange([row]);
1993
+ onChange([row[fieldValue ?? "value"]]);
1989
1994
  }
1990
1995
  }
1991
1996
  e.stopPropagation();
@@ -2013,52 +2018,50 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
2013
2018
  } else if (col.type === "datetime") {
2014
2019
  valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
2015
2020
  }
2016
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react13.Fragment, { children: [
2017
- col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
2018
- "td",
2019
- {
2020
- id: `content-select-${indexRow}-${indexCol}`,
2021
- ref: refRow,
2022
- className: (0, import_classnames11.default)(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
2023
- style: {
2024
- minWidth: col.minWidth,
2025
- width: col.width,
2026
- maxWidth: col.maxWidth,
2027
- textAlign: col.textAlign ? col.textAlign : "left"
2028
- },
2029
- onClick: (e) => {
2030
- if (isMulti) {
2031
- const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
2032
- if (index > -1) {
2033
- value?.splice(index, 1);
2034
- onChange(value);
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);
2035
2044
  } else {
2036
- if (value) {
2037
- value?.push(row);
2038
- onChange(value);
2039
- } else {
2040
- onChange([row]);
2041
- }
2045
+ onChange([row[fieldValue ?? "value"]]);
2042
2046
  }
2043
- } else {
2044
- onChange(row);
2045
- closeMenu();
2046
2047
  }
2047
- e.preventDefault();
2048
- e.stopPropagation();
2049
- },
2050
- onMouseMove: (e) => {
2051
- if (indexRow !== indexFocus) {
2052
- setIndexFocus(indexRow);
2053
- }
2054
- e.stopPropagation();
2055
- },
2056
- children: col.template ? col.template(row, indexRow) : valueDisplay
2048
+ } else {
2049
+ onChange(row);
2050
+ closeMenu();
2051
+ }
2052
+ e.preventDefault();
2053
+ e.stopPropagation();
2057
2054
  },
2058
- `col-${indexRow}-${indexCol}`
2059
- ),
2060
- checkOverflow(refRow.current) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-select-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
2061
- ] }, indexCol);
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);
2062
2065
  })
2063
2066
  ]
2064
2067
  },
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  // test-app/src/component/table/index.tsx
2
2
  import { Fragment as Fragment15, forwardRef as forwardRef3, useEffect as useEffect8, useImperativeHandle, useRef as useRef3, useState as useState7 } from "react";
3
- import { Button as Button4, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, Input as Input7, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
3
+ import { Button as Button4, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, Input as Input7, UncontrolledDropdown, UncontrolledTooltip } from "reactstrap";
4
4
  import classnames7 from "classnames";
5
5
  import { useTranslation as useTranslation10 } from "react-i18next";
6
6
  import Select3 from "react-select";
@@ -1535,7 +1535,6 @@ import {
1535
1535
  DropdownToggle as DropdownToggle2,
1536
1536
  Dropdown as Dropdown2,
1537
1537
  Button as Button3,
1538
- UncontrolledTooltip,
1539
1538
  Input as Input6
1540
1539
  } from "reactstrap";
1541
1540
  import { useTranslation as useTranslation9 } from "react-i18next";
@@ -1565,6 +1564,8 @@ var SelectTable = forwardRef2((props, ref) => {
1565
1564
  handleAdd,
1566
1565
  isClearable,
1567
1566
  component,
1567
+ isDisabled,
1568
+ formatOptionLabel,
1568
1569
  isMulti
1569
1570
  } = props;
1570
1571
  const selectTableRef = useRef2();
@@ -1643,7 +1644,9 @@ var SelectTable = forwardRef2((props, ref) => {
1643
1644
  if (dropdownOpen) {
1644
1645
  closeMenu();
1645
1646
  } else {
1646
- setDropdownOpen(true);
1647
+ if (!isDisabled) {
1648
+ setDropdownOpen(true);
1649
+ }
1647
1650
  }
1648
1651
  };
1649
1652
  const listKeyUse = ["Escape", "Space", "Enter", "Tab", "NumpadEnter", "ArrowDown", "ArrowUp", "F9"];
@@ -1801,13 +1804,10 @@ var SelectTable = forwardRef2((props, ref) => {
1801
1804
  setOptionsLoad(void 0);
1802
1805
  }
1803
1806
  }, [searchTerm]);
1804
- const checkOverflow = (element) => {
1805
- return element && element.scrollWidth > element.clientWidth;
1806
- };
1807
1807
  return /* @__PURE__ */ jsx13(
1808
1808
  "div",
1809
1809
  {
1810
- className: "react-select-table",
1810
+ className: classnames6("react-select-table", { "is-invalid": invalid }),
1811
1811
  ref,
1812
1812
  id,
1813
1813
  children: /* @__PURE__ */ jsx13("div", { ref: selectTableRef, children: /* @__PURE__ */ jsxs12(
@@ -1831,12 +1831,15 @@ var SelectTable = forwardRef2((props, ref) => {
1831
1831
  children: [
1832
1832
  /* @__PURE__ */ jsxs12("div", { className: "select-table-container", children: [
1833
1833
  isMulti ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("div", { className: classnames6("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
1834
- return /* @__PURE__ */ jsxs12("span", { children: [
1835
- index === 0 ? "" : ", ",
1836
- ele[fieldLabel ?? "label"]
1837
- ] }, index);
1834
+ const element = options.find((e) => e[fieldValue ?? "value"] === ele);
1835
+ if (element) {
1836
+ return /* @__PURE__ */ jsxs12("span", { children: [
1837
+ index === 0 ? "" : ", ",
1838
+ element[fieldLabel ?? "label"]
1839
+ ] }, index);
1840
+ }
1838
1841
  }) }) }) : /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsxs12("div", { className: classnames6("select-value", { "d-none": searchTerm }), children: [
1839
- value ? value[fieldLabel ?? "label"] : "",
1842
+ value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1840
1843
  " "
1841
1844
  ] }) }),
1842
1845
  /* @__PURE__ */ jsx13("div", { className: classnames6("select-placeholder", { "d-none": (isMulti ? value?.length > 0 : value) || searchTerm }), children: placeholder }),
@@ -1891,7 +1894,7 @@ var SelectTable = forwardRef2((props, ref) => {
1891
1894
  e.preventDefault();
1892
1895
  },
1893
1896
  children: /* @__PURE__ */ jsxs12("div", { className: "r-select-grid", children: [
1894
- /* @__PURE__ */ jsx13("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsxs12("table", { style: { width: "100%" }, 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: [
1895
1898
  /* @__PURE__ */ jsx13("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs12("tr", { className: "r-select-row", role: "row", children: [
1896
1899
  isMulti && /* @__PURE__ */ jsx13("th", { className: classnames6(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx13(
1897
1900
  "div",
@@ -1901,7 +1904,7 @@ var SelectTable = forwardRef2((props, ref) => {
1901
1904
  children: /* @__PURE__ */ jsx13(
1902
1905
  Input6,
1903
1906
  {
1904
- checked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1907
+ defaultChecked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
1905
1908
  type: "checkbox",
1906
1909
  className: classnames6("cursor-pointer", { "d-none": !isMulti }),
1907
1910
  style: { textAlign: "center", marginTop: 6 },
@@ -1926,8 +1929,7 @@ var SelectTable = forwardRef2((props, ref) => {
1926
1929
  ] }) }),
1927
1930
  (optionsLoad ? optionsLoad : options).length > 0 ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1928
1931
  if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1929
- const refRow = useRef2(null);
1930
- const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1932
+ const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
1931
1933
  return /* @__PURE__ */ jsxs12(
1932
1934
  "tr",
1933
1935
  {
@@ -1941,16 +1943,18 @@ var SelectTable = forwardRef2((props, ref) => {
1941
1943
  style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
1942
1944
  onClick: (e) => {
1943
1945
  if (isMulti) {
1944
- const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1946
+ const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
1945
1947
  if (index > -1) {
1946
1948
  value?.splice(index, 1);
1947
- onChange(value);
1949
+ const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1950
+ onChange(valueArr);
1948
1951
  } else {
1949
1952
  if (value) {
1950
- value?.push(row);
1951
- onChange(value);
1953
+ value?.push(row[fieldValue ?? "value"]);
1954
+ const valueArr = options.filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
1955
+ onChange(valueArr);
1952
1956
  } else {
1953
- onChange([row]);
1957
+ onChange([row[fieldValue ?? "value"]]);
1954
1958
  }
1955
1959
  }
1956
1960
  e.stopPropagation();
@@ -1978,52 +1982,50 @@ var SelectTable = forwardRef2((props, ref) => {
1978
1982
  } else if (col.type === "datetime") {
1979
1983
  valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
1980
1984
  }
1981
- return /* @__PURE__ */ jsxs12(Fragment13, { children: [
1982
- col.visible !== false && /* @__PURE__ */ jsx13(
1983
- "td",
1984
- {
1985
- id: `content-select-${indexRow}-${indexCol}`,
1986
- ref: refRow,
1987
- className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1988
- style: {
1989
- minWidth: col.minWidth,
1990
- width: col.width,
1991
- maxWidth: col.maxWidth,
1992
- textAlign: col.textAlign ? col.textAlign : "left"
1993
- },
1994
- onClick: (e) => {
1995
- if (isMulti) {
1996
- const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1997
- if (index > -1) {
1998
- value?.splice(index, 1);
1999
- onChange(value);
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);
2000
2008
  } else {
2001
- if (value) {
2002
- value?.push(row);
2003
- onChange(value);
2004
- } else {
2005
- onChange([row]);
2006
- }
2009
+ onChange([row[fieldValue ?? "value"]]);
2007
2010
  }
2008
- } else {
2009
- onChange(row);
2010
- closeMenu();
2011
2011
  }
2012
- e.preventDefault();
2013
- e.stopPropagation();
2014
- },
2015
- onMouseMove: (e) => {
2016
- if (indexRow !== indexFocus) {
2017
- setIndexFocus(indexRow);
2018
- }
2019
- e.stopPropagation();
2020
- },
2021
- children: col.template ? col.template(row, indexRow) : valueDisplay
2012
+ } else {
2013
+ onChange(row);
2014
+ closeMenu();
2015
+ }
2016
+ e.preventDefault();
2017
+ e.stopPropagation();
2022
2018
  },
2023
- `col-${indexRow}-${indexCol}`
2024
- ),
2025
- checkOverflow(refRow.current) && /* @__PURE__ */ jsx13(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-select-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
2026
- ] }, indexCol);
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);
2027
2029
  })
2028
2030
  ]
2029
2031
  },
@@ -2758,7 +2760,7 @@ var TableEdit = forwardRef3((props, ref) => {
2758
2760
  },
2759
2761
  children: [
2760
2762
  item.icon && /* @__PURE__ */ jsx14(icon_default, { iconName: item.icon, size: 16 }),
2761
- /* @__PURE__ */ jsx14(UncontrolledTooltip2, { className: "r-tooltip", target: `command-item-${i}`, place: "top", children: t(item.tooltip ?? "") })
2763
+ /* @__PURE__ */ jsx14(UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${i}`, place: "top", children: t(item.tooltip ?? "") })
2762
2764
  ]
2763
2765
  },
2764
2766
  `command-${index}`
@@ -3257,9 +3259,9 @@ var TableEdit = forwardRef3((props, ref) => {
3257
3259
  children: [
3258
3260
  typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx14("div", { id: `content-${idTable}-${indexRow}-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
3259
3261
  /* @__PURE__ */ jsx14("span", { id: `error-${indexRow}-${indexCol}`, className: classnames7("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx14(AlertCircle, { fontSize: 15.5 }) }),
3260
- !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx14(UncontrolledTooltip2, { className: "r-tooltip", autohide: false, target: `content-${idTable}-${indexRow}-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
3262
+ !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx14(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-${indexRow}-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
3261
3263
  /* @__PURE__ */ jsx14(
3262
- UncontrolledTooltip2,
3264
+ UncontrolledTooltip,
3263
3265
  {
3264
3266
  target: `error-${indexRow}-${indexCol}`,
3265
3267
  className: "r-tooltip tooltip-error",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.5.8",
4
+ "version": "0.6.0",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",