react-table-edit 0.5.8 → 0.5.9

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 +45 -49
  4. package/dist/index.mjs +49 -54
  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)(
@@ -1871,7 +1872,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1871
1872
  ele[fieldLabel ?? "label"]
1872
1873
  ] }, index);
1873
1874
  }) }) }) : /* @__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"] : "",
1875
+ value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1875
1876
  " "
1876
1877
  ] }) }),
1877
1878
  /* @__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 +1927,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1926
1927
  e.preventDefault();
1927
1928
  },
1928
1929
  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: [
1930
+ /* @__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
1931
  /* @__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
1932
  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
1933
  "div",
@@ -1961,7 +1962,6 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
1961
1962
  ] }) }),
1962
1963
  (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
1964
  if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1964
- const refRow = (0, import_react13.useRef)(null);
1965
1965
  const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1966
1966
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1967
1967
  "tr",
@@ -2013,52 +2013,48 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
2013
2013
  } else if (col.type === "datetime") {
2014
2014
  valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
2015
2015
  }
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);
2016
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
2017
+ "td",
2018
+ {
2019
+ id: `content-select-${indexRow}-${indexCol}`,
2020
+ className: (0, import_classnames11.default)(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
2021
+ style: {
2022
+ minWidth: col.minWidth,
2023
+ width: col.width,
2024
+ maxWidth: col.maxWidth,
2025
+ textAlign: col.textAlign ? col.textAlign : "left"
2026
+ },
2027
+ onClick: (e) => {
2028
+ if (isMulti) {
2029
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
2030
+ if (index > -1) {
2031
+ value?.splice(index, 1);
2032
+ onChange(value);
2033
+ } else {
2034
+ if (value) {
2035
+ value?.push(row);
2034
2036
  onChange(value);
2035
2037
  } else {
2036
- if (value) {
2037
- value?.push(row);
2038
- onChange(value);
2039
- } else {
2040
- onChange([row]);
2041
- }
2038
+ onChange([row]);
2042
2039
  }
2043
- } else {
2044
- onChange(row);
2045
- closeMenu();
2046
2040
  }
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
2041
+ } else {
2042
+ onChange(row);
2043
+ closeMenu();
2044
+ }
2045
+ e.preventDefault();
2046
+ e.stopPropagation();
2057
2047
  },
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);
2048
+ onMouseMove: (e) => {
2049
+ if (indexRow !== indexFocus) {
2050
+ setIndexFocus(indexRow);
2051
+ }
2052
+ e.stopPropagation();
2053
+ },
2054
+ children: col.template ? col.template(row, indexRow) : valueDisplay
2055
+ },
2056
+ `col-${indexRow}-${indexCol}`
2057
+ ) }, indexCol);
2062
2058
  })
2063
2059
  ]
2064
2060
  },
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(
@@ -1836,7 +1836,7 @@ var SelectTable = forwardRef2((props, ref) => {
1836
1836
  ele[fieldLabel ?? "label"]
1837
1837
  ] }, index);
1838
1838
  }) }) }) : /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsxs12("div", { className: classnames6("select-value", { "d-none": searchTerm }), children: [
1839
- value ? value[fieldLabel ?? "label"] : "",
1839
+ value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
1840
1840
  " "
1841
1841
  ] }) }),
1842
1842
  /* @__PURE__ */ jsx13("div", { className: classnames6("select-placeholder", { "d-none": (isMulti ? value?.length > 0 : value) || searchTerm }), children: placeholder }),
@@ -1891,7 +1891,7 @@ var SelectTable = forwardRef2((props, ref) => {
1891
1891
  e.preventDefault();
1892
1892
  },
1893
1893
  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: [
1894
+ /* @__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
1895
  /* @__PURE__ */ jsx13("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs12("tr", { className: "r-select-row", role: "row", children: [
1896
1896
  isMulti && /* @__PURE__ */ jsx13("th", { className: classnames6(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx13(
1897
1897
  "div",
@@ -1926,7 +1926,6 @@ var SelectTable = forwardRef2((props, ref) => {
1926
1926
  ] }) }),
1927
1927
  (optionsLoad ? optionsLoad : options).length > 0 ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
1928
1928
  if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
1929
- const refRow = useRef2(null);
1930
1929
  const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1931
1930
  return /* @__PURE__ */ jsxs12(
1932
1931
  "tr",
@@ -1978,52 +1977,48 @@ var SelectTable = forwardRef2((props, ref) => {
1978
1977
  } else if (col.type === "datetime") {
1979
1978
  valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
1980
1979
  }
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);
1980
+ return /* @__PURE__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
1981
+ "td",
1982
+ {
1983
+ id: `content-select-${indexRow}-${indexCol}`,
1984
+ className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
1985
+ style: {
1986
+ minWidth: col.minWidth,
1987
+ width: col.width,
1988
+ maxWidth: col.maxWidth,
1989
+ textAlign: col.textAlign ? col.textAlign : "left"
1990
+ },
1991
+ onClick: (e) => {
1992
+ if (isMulti) {
1993
+ const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
1994
+ if (index > -1) {
1995
+ value?.splice(index, 1);
1996
+ onChange(value);
1997
+ } else {
1998
+ if (value) {
1999
+ value?.push(row);
1999
2000
  onChange(value);
2000
2001
  } else {
2001
- if (value) {
2002
- value?.push(row);
2003
- onChange(value);
2004
- } else {
2005
- onChange([row]);
2006
- }
2002
+ onChange([row]);
2007
2003
  }
2008
- } else {
2009
- onChange(row);
2010
- closeMenu();
2011
2004
  }
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
2005
+ } else {
2006
+ onChange(row);
2007
+ closeMenu();
2008
+ }
2009
+ e.preventDefault();
2010
+ e.stopPropagation();
2022
2011
  },
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);
2012
+ onMouseMove: (e) => {
2013
+ if (indexRow !== indexFocus) {
2014
+ setIndexFocus(indexRow);
2015
+ }
2016
+ e.stopPropagation();
2017
+ },
2018
+ children: col.template ? col.template(row, indexRow) : valueDisplay
2019
+ },
2020
+ `col-${indexRow}-${indexCol}`
2021
+ ) }, indexCol);
2027
2022
  })
2028
2023
  ]
2029
2024
  },
@@ -2758,7 +2753,7 @@ var TableEdit = forwardRef3((props, ref) => {
2758
2753
  },
2759
2754
  children: [
2760
2755
  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 ?? "") })
2756
+ /* @__PURE__ */ jsx14(UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${i}`, place: "top", children: t(item.tooltip ?? "") })
2762
2757
  ]
2763
2758
  },
2764
2759
  `command-${index}`
@@ -3257,9 +3252,9 @@ var TableEdit = forwardRef3((props, ref) => {
3257
3252
  children: [
3258
3253
  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
3254
  /* @__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 }),
3255
+ !(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
3256
  /* @__PURE__ */ jsx14(
3262
- UncontrolledTooltip2,
3257
+ UncontrolledTooltip,
3263
3258
  {
3264
3259
  target: `error-${indexRow}-${indexCol}`,
3265
3260
  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.5.9",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",