react-table-edit 0.6.5 → 0.6.6
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.
- package/dist/index.js +49 -42
- package/dist/index.mjs +55 -47
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1847,6 +1847,10 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
|
|
|
1847
1847
|
setOptionsLoad(void 0);
|
|
1848
1848
|
}
|
|
1849
1849
|
}, [searchTerm]);
|
|
1850
|
+
const checkOverflow = (indexRow, indexCol) => {
|
|
1851
|
+
const element = document.getElementById(`content-select-${id}-row${indexRow}-col${indexCol}`);
|
|
1852
|
+
return element && element.scrollWidth > element.clientWidth;
|
|
1853
|
+
};
|
|
1850
1854
|
const RenderElement = (props2) => {
|
|
1851
1855
|
const { indexRow, row, isSelected, level = 0 } = props2;
|
|
1852
1856
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
@@ -1902,51 +1906,54 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
|
|
|
1902
1906
|
} else if (col.type === "datetime") {
|
|
1903
1907
|
valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
|
|
1904
1908
|
}
|
|
1905
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
onChange(valueArr);
|
|
1923
|
-
} else {
|
|
1924
|
-
if (value) {
|
|
1925
|
-
value?.push(row[fieldValue ?? "value"]);
|
|
1909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react13.Fragment, { children: [
|
|
1910
|
+
col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1911
|
+
"td",
|
|
1912
|
+
{
|
|
1913
|
+
id: `content-select-${id}-row${indexRow}-col${indexCol}`,
|
|
1914
|
+
className: (0, import_classnames11.default)(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
|
|
1915
|
+
style: {
|
|
1916
|
+
minWidth: col.minWidth,
|
|
1917
|
+
width: col.width,
|
|
1918
|
+
maxWidth: col.maxWidth,
|
|
1919
|
+
textAlign: col.textAlign ? col.textAlign : "left"
|
|
1920
|
+
},
|
|
1921
|
+
onClick: (e) => {
|
|
1922
|
+
if (isMulti) {
|
|
1923
|
+
const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
|
|
1924
|
+
if (index > -1) {
|
|
1925
|
+
value?.splice(index, 1);
|
|
1926
1926
|
const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
|
|
1927
1927
|
onChange(valueArr);
|
|
1928
1928
|
} else {
|
|
1929
|
-
|
|
1929
|
+
if (value) {
|
|
1930
|
+
value?.push(row[fieldValue ?? "value"]);
|
|
1931
|
+
const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
|
|
1932
|
+
onChange(valueArr);
|
|
1933
|
+
} else {
|
|
1934
|
+
onChange([row[fieldValue ?? "value"]]);
|
|
1935
|
+
}
|
|
1930
1936
|
}
|
|
1937
|
+
} else {
|
|
1938
|
+
onChange(row);
|
|
1939
|
+
setSearchTerm("");
|
|
1940
|
+
closeMenu();
|
|
1931
1941
|
}
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
setIndexFocus(indexRow);
|
|
1943
|
-
}
|
|
1944
|
-
e.stopPropagation();
|
|
1942
|
+
e.preventDefault();
|
|
1943
|
+
e.stopPropagation();
|
|
1944
|
+
},
|
|
1945
|
+
onMouseMove: (e) => {
|
|
1946
|
+
if (indexRow !== indexFocus) {
|
|
1947
|
+
setIndexFocus(indexRow);
|
|
1948
|
+
}
|
|
1949
|
+
e.stopPropagation();
|
|
1950
|
+
},
|
|
1951
|
+
children: col.template ? col.template(row, indexRow) : valueDisplay
|
|
1945
1952
|
},
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
`
|
|
1949
|
-
|
|
1953
|
+
`col-${indexRow}-${indexCol}`
|
|
1954
|
+
),
|
|
1955
|
+
checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-select-${id}-row${indexRow}-col${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
|
|
1956
|
+
] }, indexCol);
|
|
1950
1957
|
})
|
|
1951
1958
|
]
|
|
1952
1959
|
},
|
|
@@ -2089,7 +2096,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
|
|
|
2089
2096
|
onChange(isMulti ? [] : void 0);
|
|
2090
2097
|
e.stopPropagation();
|
|
2091
2098
|
},
|
|
2092
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20",
|
|
2099
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", 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" }) })
|
|
2093
2100
|
}
|
|
2094
2101
|
),
|
|
2095
2102
|
!isDisabled && /* @__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" }) }) })
|
|
@@ -3340,7 +3347,7 @@ var TableEdit = (0, import_react14.forwardRef)((props, ref) => {
|
|
|
3340
3347
|
color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
|
|
3341
3348
|
},
|
|
3342
3349
|
children: [
|
|
3343
|
-
typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id: `content-${idTable}
|
|
3350
|
+
typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
|
|
3344
3351
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames12.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_becoxy_icons6.AlertCircle, { fontSize: 15.5 }) }),
|
|
3345
3352
|
!(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_reactstrap9.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-${indexRow}-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
|
|
3346
3353
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
@@ -3362,7 +3369,7 @@ var TableEdit = (0, import_react14.forwardRef)((props, ref) => {
|
|
|
3362
3369
|
}
|
|
3363
3370
|
};
|
|
3364
3371
|
const checkOverflow = (indexRow, indexCol) => {
|
|
3365
|
-
const element = document.getElementById(`content-${idTable}
|
|
3372
|
+
const element = document.getElementById(`content-${idTable}-row${indexRow}col-${indexCol}`);
|
|
3366
3373
|
return element && element.scrollWidth > element.clientWidth;
|
|
3367
3374
|
};
|
|
3368
3375
|
const renderHeaderCol = (col, indexCol, indexParent) => {
|
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 } from "reactstrap";
|
|
3
|
+
import { Button as Button4, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, Input as Input7, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
|
|
4
4
|
import classnames7 from "classnames";
|
|
5
5
|
import { useTranslation as useTranslation10 } from "react-i18next";
|
|
6
6
|
import Select3 from "react-select";
|
|
@@ -1536,7 +1536,8 @@ import {
|
|
|
1536
1536
|
Dropdown as Dropdown2,
|
|
1537
1537
|
Button as Button3,
|
|
1538
1538
|
Input as Input6,
|
|
1539
|
-
Spinner
|
|
1539
|
+
Spinner,
|
|
1540
|
+
UncontrolledTooltip
|
|
1540
1541
|
} from "reactstrap";
|
|
1541
1542
|
import { useTranslation as useTranslation9 } from "react-i18next";
|
|
1542
1543
|
import classnames6 from "classnames";
|
|
@@ -1812,6 +1813,10 @@ var SelectTable = forwardRef2((props, ref) => {
|
|
|
1812
1813
|
setOptionsLoad(void 0);
|
|
1813
1814
|
}
|
|
1814
1815
|
}, [searchTerm]);
|
|
1816
|
+
const checkOverflow = (indexRow, indexCol) => {
|
|
1817
|
+
const element = document.getElementById(`content-select-${id}-row${indexRow}-col${indexCol}`);
|
|
1818
|
+
return element && element.scrollWidth > element.clientWidth;
|
|
1819
|
+
};
|
|
1815
1820
|
const RenderElement = (props2) => {
|
|
1816
1821
|
const { indexRow, row, isSelected, level = 0 } = props2;
|
|
1817
1822
|
return /* @__PURE__ */ jsxs12(
|
|
@@ -1867,51 +1872,54 @@ var SelectTable = forwardRef2((props, ref) => {
|
|
|
1867
1872
|
} else if (col.type === "datetime") {
|
|
1868
1873
|
valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
|
|
1869
1874
|
}
|
|
1870
|
-
return /* @__PURE__ */
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
onChange(valueArr);
|
|
1888
|
-
} else {
|
|
1889
|
-
if (value) {
|
|
1890
|
-
value?.push(row[fieldValue ?? "value"]);
|
|
1875
|
+
return /* @__PURE__ */ jsxs12(Fragment13, { children: [
|
|
1876
|
+
col.visible !== false && /* @__PURE__ */ jsx13(
|
|
1877
|
+
"td",
|
|
1878
|
+
{
|
|
1879
|
+
id: `content-select-${id}-row${indexRow}-col${indexCol}`,
|
|
1880
|
+
className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
|
|
1881
|
+
style: {
|
|
1882
|
+
minWidth: col.minWidth,
|
|
1883
|
+
width: col.width,
|
|
1884
|
+
maxWidth: col.maxWidth,
|
|
1885
|
+
textAlign: col.textAlign ? col.textAlign : "left"
|
|
1886
|
+
},
|
|
1887
|
+
onClick: (e) => {
|
|
1888
|
+
if (isMulti) {
|
|
1889
|
+
const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
|
|
1890
|
+
if (index > -1) {
|
|
1891
|
+
value?.splice(index, 1);
|
|
1891
1892
|
const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
|
|
1892
1893
|
onChange(valueArr);
|
|
1893
1894
|
} else {
|
|
1894
|
-
|
|
1895
|
+
if (value) {
|
|
1896
|
+
value?.push(row[fieldValue ?? "value"]);
|
|
1897
|
+
const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
|
|
1898
|
+
onChange(valueArr);
|
|
1899
|
+
} else {
|
|
1900
|
+
onChange([row[fieldValue ?? "value"]]);
|
|
1901
|
+
}
|
|
1895
1902
|
}
|
|
1903
|
+
} else {
|
|
1904
|
+
onChange(row);
|
|
1905
|
+
setSearchTerm("");
|
|
1906
|
+
closeMenu();
|
|
1896
1907
|
}
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
setIndexFocus(indexRow);
|
|
1908
|
-
}
|
|
1909
|
-
e.stopPropagation();
|
|
1908
|
+
e.preventDefault();
|
|
1909
|
+
e.stopPropagation();
|
|
1910
|
+
},
|
|
1911
|
+
onMouseMove: (e) => {
|
|
1912
|
+
if (indexRow !== indexFocus) {
|
|
1913
|
+
setIndexFocus(indexRow);
|
|
1914
|
+
}
|
|
1915
|
+
e.stopPropagation();
|
|
1916
|
+
},
|
|
1917
|
+
children: col.template ? col.template(row, indexRow) : valueDisplay
|
|
1910
1918
|
},
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
`
|
|
1914
|
-
|
|
1919
|
+
`col-${indexRow}-${indexCol}`
|
|
1920
|
+
),
|
|
1921
|
+
checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx13(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-select-${id}-row${indexRow}-col${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
|
|
1922
|
+
] }, indexCol);
|
|
1915
1923
|
})
|
|
1916
1924
|
]
|
|
1917
1925
|
},
|
|
@@ -2054,7 +2062,7 @@ var SelectTable = forwardRef2((props, ref) => {
|
|
|
2054
2062
|
onChange(isMulti ? [] : void 0);
|
|
2055
2063
|
e.stopPropagation();
|
|
2056
2064
|
},
|
|
2057
|
-
children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20",
|
|
2065
|
+
children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", 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" }) })
|
|
2058
2066
|
}
|
|
2059
2067
|
),
|
|
2060
2068
|
!isDisabled && /* @__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" }) }) })
|
|
@@ -2808,7 +2816,7 @@ var TableEdit = forwardRef3((props, ref) => {
|
|
|
2808
2816
|
},
|
|
2809
2817
|
children: [
|
|
2810
2818
|
item.icon && /* @__PURE__ */ jsx14(icon_default, { iconName: item.icon, size: 16 }),
|
|
2811
|
-
/* @__PURE__ */ jsx14(
|
|
2819
|
+
/* @__PURE__ */ jsx14(UncontrolledTooltip2, { className: "r-tooltip", target: `command-item-${i}`, place: "top", children: t(item.tooltip ?? "") })
|
|
2812
2820
|
]
|
|
2813
2821
|
},
|
|
2814
2822
|
`command-${index}`
|
|
@@ -3305,11 +3313,11 @@ var TableEdit = forwardRef3((props, ref) => {
|
|
|
3305
3313
|
color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
|
|
3306
3314
|
},
|
|
3307
3315
|
children: [
|
|
3308
|
-
typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx14("div", { id: `content-${idTable}
|
|
3316
|
+
typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx14("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
|
|
3309
3317
|
/* @__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 }) }),
|
|
3310
|
-
!(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx14(
|
|
3318
|
+
!(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 }),
|
|
3311
3319
|
/* @__PURE__ */ jsx14(
|
|
3312
|
-
|
|
3320
|
+
UncontrolledTooltip2,
|
|
3313
3321
|
{
|
|
3314
3322
|
target: `error-${indexRow}-${indexCol}`,
|
|
3315
3323
|
className: "r-tooltip tooltip-error",
|
|
@@ -3327,7 +3335,7 @@ var TableEdit = forwardRef3((props, ref) => {
|
|
|
3327
3335
|
}
|
|
3328
3336
|
};
|
|
3329
3337
|
const checkOverflow = (indexRow, indexCol) => {
|
|
3330
|
-
const element = document.getElementById(`content-${idTable}
|
|
3338
|
+
const element = document.getElementById(`content-${idTable}-row${indexRow}col-${indexCol}`);
|
|
3331
3339
|
return element && element.scrollWidth > element.clientWidth;
|
|
3332
3340
|
};
|
|
3333
3341
|
const renderHeaderCol = (col, indexCol, indexParent) => {
|