react-table-edit 0.5.1 → 0.5.3
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.d.mts +1 -5
- package/dist/index.d.ts +1 -5
- package/dist/index.js +245 -204
- package/dist/index.mjs +220 -179
- package/package.json +1 -3
package/dist/index.js
CHANGED
|
@@ -51,14 +51,13 @@ __export(Table_edit_exports, {
|
|
|
51
51
|
module.exports = __toCommonJS(Table_edit_exports);
|
|
52
52
|
|
|
53
53
|
// test-app/src/component/table/index.tsx
|
|
54
|
-
var
|
|
54
|
+
var import_react13 = require("react");
|
|
55
55
|
var import_reactstrap8 = require("reactstrap");
|
|
56
|
-
var
|
|
57
|
-
var
|
|
58
|
-
var
|
|
59
|
-
var import_ej2_react_grids = require("@syncfusion/ej2-react-grids");
|
|
56
|
+
var import_classnames11 = __toESM(require("classnames"));
|
|
57
|
+
var import_react_i18next9 = require("react-i18next");
|
|
58
|
+
var import_react_select3 = __toESM(require("react-select"));
|
|
60
59
|
var import_async = __toESM(require("react-select/async"));
|
|
61
|
-
var
|
|
60
|
+
var import_becoxy_icons5 = require("becoxy-icons");
|
|
62
61
|
|
|
63
62
|
// test-app/src/component/react-input/index.tsx
|
|
64
63
|
var import_becoxy_icons = require("becoxy-icons");
|
|
@@ -347,7 +346,6 @@ var icon_default = IconCustom;
|
|
|
347
346
|
|
|
348
347
|
// test-app/src/component/table/index.tsx
|
|
349
348
|
var import_moment = __toESM(require("moment"));
|
|
350
|
-
var import_ej2_react_dropdowns = require("@syncfusion/ej2-react-dropdowns");
|
|
351
349
|
|
|
352
350
|
// test-app/src/component/edit-form/index.tsx
|
|
353
351
|
var import_react9 = require("react");
|
|
@@ -1483,10 +1481,70 @@ var SidebarSetColumn = (props) => {
|
|
|
1483
1481
|
var sidebar_setting_column_default = SidebarSetColumn;
|
|
1484
1482
|
|
|
1485
1483
|
// test-app/src/component/table/index.tsx
|
|
1486
|
-
var
|
|
1484
|
+
var import_ej2_react_dropdowns = require("@syncfusion/ej2-react-dropdowns");
|
|
1485
|
+
|
|
1486
|
+
// test-app/src/component/paging/index.tsx
|
|
1487
|
+
var import_becoxy_icons4 = require("becoxy-icons");
|
|
1488
|
+
var import_classnames10 = __toESM(require("classnames"));
|
|
1489
|
+
var import_react12 = require("react");
|
|
1490
|
+
var import_react_i18next8 = require("react-i18next");
|
|
1491
|
+
var import_react_select2 = __toESM(require("react-select"));
|
|
1487
1492
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1488
|
-
var
|
|
1493
|
+
var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
|
|
1489
1494
|
const { t } = (0, import_react_i18next8.useTranslation)();
|
|
1495
|
+
const [countPage, setCountPage] = (0, import_react12.useState)(0);
|
|
1496
|
+
(0, import_react12.useEffect)(() => {
|
|
1497
|
+
const count = Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1);
|
|
1498
|
+
setCountPage(count);
|
|
1499
|
+
}, [totalItem, pageSize]);
|
|
1500
|
+
const renderPageNumber = () => {
|
|
1501
|
+
const arr = [];
|
|
1502
|
+
for (let index = 1; index <= Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1); index++) {
|
|
1503
|
+
arr.push(
|
|
1504
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1505
|
+
"div",
|
|
1506
|
+
{
|
|
1507
|
+
className: (0, import_classnames10.default)("r-number", { "r-active": index === currentPage }),
|
|
1508
|
+
onClick: () => {
|
|
1509
|
+
onChangePage({ totalItem, pageSize, currentPage: index, old: currentPage });
|
|
1510
|
+
},
|
|
1511
|
+
children: index
|
|
1512
|
+
}
|
|
1513
|
+
)
|
|
1514
|
+
);
|
|
1515
|
+
}
|
|
1516
|
+
return arr;
|
|
1517
|
+
};
|
|
1518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-pager", children: [
|
|
1519
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-pagercontainer", children: [
|
|
1520
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "r-button", type: "button", disabled: countPage === 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.ChevronsLeft, { fontSize: 16 }) }),
|
|
1521
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "r-button", type: "button", disabled: countPage === 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.ChevronLeft, { fontSize: 16 }) }),
|
|
1522
|
+
renderPageNumber(),
|
|
1523
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "r-button", type: "button", disabled: countPage === 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage + 1, old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.ChevronRight, { fontSize: 16 }) }),
|
|
1524
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "r-button", type: "button", disabled: countPage === 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1), old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.ChevronsRight, { fontSize: 16 }) }),
|
|
1525
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-pagesize", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1526
|
+
import_react_select2.default,
|
|
1527
|
+
{
|
|
1528
|
+
value: { value: pageSize, label: pageSize },
|
|
1529
|
+
options: pageOptions.map((item) => ({ value: item, label: item })),
|
|
1530
|
+
onChange: (val) => {
|
|
1531
|
+
onChangePageSize({ totalItem, pageSize: val?.value });
|
|
1532
|
+
},
|
|
1533
|
+
menuPosition: "fixed",
|
|
1534
|
+
placeholder: t("Select"),
|
|
1535
|
+
classNamePrefix: "select-pagesize"
|
|
1536
|
+
}
|
|
1537
|
+
) }),
|
|
1538
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
|
|
1539
|
+
] }),
|
|
1540
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
|
|
1541
|
+
] }) });
|
|
1542
|
+
};
|
|
1543
|
+
|
|
1544
|
+
// test-app/src/component/table/index.tsx
|
|
1545
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1546
|
+
var TableEdit = (0, import_react13.forwardRef)((props, ref) => {
|
|
1547
|
+
const { t } = (0, import_react_i18next9.useTranslation)();
|
|
1490
1548
|
const {
|
|
1491
1549
|
idTable,
|
|
1492
1550
|
dataSource,
|
|
@@ -1514,38 +1572,36 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1514
1572
|
handleSelect,
|
|
1515
1573
|
isMulti
|
|
1516
1574
|
} = props;
|
|
1517
|
-
(0,
|
|
1575
|
+
(0, import_react13.useImperativeHandle)(ref, () => {
|
|
1518
1576
|
return {
|
|
1519
1577
|
refeshFocusRow: handleRefeshRow
|
|
1520
1578
|
};
|
|
1521
1579
|
});
|
|
1522
|
-
const [refreshRow, setRefreshRow] = (0,
|
|
1523
|
-
const [indexFocus, setIndexFocus] = (0,
|
|
1524
|
-
const [selectedRows, setSelectedRows] = (0,
|
|
1525
|
-
const [headerColumns, setHeaderColumns] = (0,
|
|
1526
|
-
const [contentColumns, setContentColumns] = (0,
|
|
1527
|
-
const [levelCol, setLevelCol] = (0,
|
|
1528
|
-
const [columnFistEdit, setColumnFistEdit] = (0,
|
|
1529
|
-
const [columnLastEdit, setColumnlastEdit] = (0,
|
|
1530
|
-
const [objWidthFix, setObjWidthFix] = (0,
|
|
1531
|
-
const [openPopupTree, setOpenPopupTree] = (0,
|
|
1532
|
-
const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0,
|
|
1533
|
-
const [searchTerm, setSearchTerm] = (0,
|
|
1534
|
-
const tableElement = (0,
|
|
1535
|
-
const gridRef = (0,
|
|
1536
|
-
const lag = window.localStorage.getItem("i18nextLng");
|
|
1537
|
-
const lang = lag ? lag : "vi";
|
|
1580
|
+
const [refreshRow, setRefreshRow] = (0, import_react13.useState)(false);
|
|
1581
|
+
const [indexFocus, setIndexFocus] = (0, import_react13.useState)();
|
|
1582
|
+
const [selectedRows, setSelectedRows] = (0, import_react13.useState)([]);
|
|
1583
|
+
const [headerColumns, setHeaderColumns] = (0, import_react13.useState)([[]]);
|
|
1584
|
+
const [contentColumns, setContentColumns] = (0, import_react13.useState)([]);
|
|
1585
|
+
const [levelCol, setLevelCol] = (0, import_react13.useState)(0);
|
|
1586
|
+
const [columnFistEdit, setColumnFistEdit] = (0, import_react13.useState)(0);
|
|
1587
|
+
const [columnLastEdit, setColumnlastEdit] = (0, import_react13.useState)(0);
|
|
1588
|
+
const [objWidthFix, setObjWidthFix] = (0, import_react13.useState)({});
|
|
1589
|
+
const [openPopupTree, setOpenPopupTree] = (0, import_react13.useState)(false);
|
|
1590
|
+
const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react13.useState)(false);
|
|
1591
|
+
const [searchTerm, setSearchTerm] = (0, import_react13.useState)("");
|
|
1592
|
+
const tableElement = (0, import_react13.useRef)(null);
|
|
1593
|
+
const gridRef = (0, import_react13.useRef)();
|
|
1538
1594
|
let totalCount = dataSource.length;
|
|
1539
1595
|
const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
|
|
1540
1596
|
const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
|
|
1541
1597
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
|
|
1542
1598
|
const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
|
|
1543
|
-
(0,
|
|
1599
|
+
(0, import_react13.useEffect)(() => {
|
|
1544
1600
|
if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
|
|
1545
1601
|
pagingSetting.setCurrentPage(1);
|
|
1546
1602
|
}
|
|
1547
1603
|
}, [dataSource]);
|
|
1548
|
-
(0,
|
|
1604
|
+
(0, import_react13.useEffect)(() => {
|
|
1549
1605
|
let indexFirst = -1;
|
|
1550
1606
|
let indexlast = -1;
|
|
1551
1607
|
let letfWidthFix = 0;
|
|
@@ -1578,7 +1634,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1578
1634
|
setColumnFistEdit(indexFirst + 1);
|
|
1579
1635
|
setColumnlastEdit(indexlast + 1);
|
|
1580
1636
|
}, [contentColumns]);
|
|
1581
|
-
(0,
|
|
1637
|
+
(0, import_react13.useEffect)(() => {
|
|
1582
1638
|
const arrHeaderColumns = [];
|
|
1583
1639
|
const arrContentColumns = [];
|
|
1584
1640
|
let headerLevelRow = 0;
|
|
@@ -1595,7 +1651,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1595
1651
|
setHeaderColumns(arrHeaderColumns);
|
|
1596
1652
|
setContentColumns(arrContentColumns);
|
|
1597
1653
|
}, [columns]);
|
|
1598
|
-
(0,
|
|
1654
|
+
(0, import_react13.useEffect)(() => {
|
|
1599
1655
|
const arrHeaderColumns = [];
|
|
1600
1656
|
const arrContentColumns = [];
|
|
1601
1657
|
let headerLevelRow = 0;
|
|
@@ -1706,7 +1762,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1706
1762
|
}
|
|
1707
1763
|
};
|
|
1708
1764
|
const searchTemplate = () => {
|
|
1709
|
-
return /* @__PURE__ */ (0,
|
|
1765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "me-50 r-search", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1710
1766
|
react_input_default,
|
|
1711
1767
|
{
|
|
1712
1768
|
style: { width: "230px" },
|
|
@@ -1727,7 +1783,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1727
1783
|
const renderEdit = (row, col, indexRow, indexCol) => {
|
|
1728
1784
|
switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
|
|
1729
1785
|
case "date":
|
|
1730
|
-
return /* @__PURE__ */ (0,
|
|
1786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1731
1787
|
import_reactstrap8.Input,
|
|
1732
1788
|
{
|
|
1733
1789
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
@@ -1740,7 +1796,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1740
1796
|
}
|
|
1741
1797
|
handleDataChange(row, col, indexRow);
|
|
1742
1798
|
},
|
|
1743
|
-
className: (0,
|
|
1799
|
+
className: (0, import_classnames11.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
|
|
1744
1800
|
type: "date",
|
|
1745
1801
|
max: "9999-12-31",
|
|
1746
1802
|
onKeyDown: (e) => {
|
|
@@ -1750,7 +1806,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1750
1806
|
}
|
|
1751
1807
|
);
|
|
1752
1808
|
case "datetime":
|
|
1753
|
-
return /* @__PURE__ */ (0,
|
|
1809
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1754
1810
|
import_reactstrap8.Input,
|
|
1755
1811
|
{
|
|
1756
1812
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
@@ -1763,7 +1819,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1763
1819
|
}
|
|
1764
1820
|
handleDataChange(row, col, indexRow);
|
|
1765
1821
|
},
|
|
1766
|
-
className: (0,
|
|
1822
|
+
className: (0, import_classnames11.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
|
|
1767
1823
|
type: "datetime-local",
|
|
1768
1824
|
max: "9999-12-31T23:59",
|
|
1769
1825
|
onKeyDown: (e) => {
|
|
@@ -1783,8 +1839,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1783
1839
|
if (!valueAsyncSelect && col.selectSettings?.defaultValue) {
|
|
1784
1840
|
valueAsyncSelect = col.selectSettings?.defaultValue(row);
|
|
1785
1841
|
}
|
|
1786
|
-
return /* @__PURE__ */ (0,
|
|
1787
|
-
/* @__PURE__ */ (0,
|
|
1842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
|
|
1843
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1788
1844
|
import_async.default,
|
|
1789
1845
|
{
|
|
1790
1846
|
menuPosition: "fixed",
|
|
@@ -1803,14 +1859,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1803
1859
|
placeholder: t("Select"),
|
|
1804
1860
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
1805
1861
|
loadOptions: col.selectSettings?.loadOptions,
|
|
1806
|
-
className: (0,
|
|
1862
|
+
className: (0, import_classnames11.default)("react-select"),
|
|
1807
1863
|
onKeyDown: (e) => {
|
|
1808
1864
|
if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
|
|
1809
1865
|
}
|
|
1810
1866
|
}
|
|
1811
1867
|
}
|
|
1812
1868
|
),
|
|
1813
|
-
/* @__PURE__ */ (0,
|
|
1869
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1814
1870
|
"span",
|
|
1815
1871
|
{
|
|
1816
1872
|
onClick: () => {
|
|
@@ -1818,8 +1874,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1818
1874
|
col.selectSettings?.handIconGroupClick("right");
|
|
1819
1875
|
}
|
|
1820
1876
|
},
|
|
1821
|
-
className: (0,
|
|
1822
|
-
children: /* @__PURE__ */ (0,
|
|
1877
|
+
className: (0, import_classnames11.default)("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
|
|
1878
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
|
|
1823
1879
|
}
|
|
1824
1880
|
)
|
|
1825
1881
|
] });
|
|
@@ -1836,8 +1892,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1836
1892
|
} else {
|
|
1837
1893
|
valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? options?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
|
|
1838
1894
|
}
|
|
1839
|
-
return /* @__PURE__ */ (0,
|
|
1840
|
-
|
|
1895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1896
|
+
import_react_select3.default,
|
|
1841
1897
|
{
|
|
1842
1898
|
menuPosition: "fixed",
|
|
1843
1899
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
@@ -1855,7 +1911,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1855
1911
|
isClearable: col.selectSettings?.isClearable ?? false,
|
|
1856
1912
|
classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
|
|
1857
1913
|
placeholder: t("Select"),
|
|
1858
|
-
className: (0,
|
|
1914
|
+
className: (0, import_classnames11.default)("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
|
|
1859
1915
|
onKeyDown: (e) => {
|
|
1860
1916
|
if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
|
|
1861
1917
|
}
|
|
@@ -1877,14 +1933,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1877
1933
|
}
|
|
1878
1934
|
}
|
|
1879
1935
|
};
|
|
1880
|
-
return /* @__PURE__ */ (0,
|
|
1936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1881
1937
|
"div",
|
|
1882
1938
|
{
|
|
1883
1939
|
onKeyDown: (e) => {
|
|
1884
1940
|
if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
|
|
1885
1941
|
}
|
|
1886
1942
|
},
|
|
1887
|
-
children: /* @__PURE__ */ (0,
|
|
1943
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1888
1944
|
import_ej2_react_dropdowns.DropDownTreeComponent,
|
|
1889
1945
|
{
|
|
1890
1946
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
@@ -1895,7 +1951,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1895
1951
|
parentValue: "parentId",
|
|
1896
1952
|
child: "children"
|
|
1897
1953
|
},
|
|
1898
|
-
className: (0,
|
|
1954
|
+
className: (0, import_classnames11.default)("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
|
|
1899
1955
|
allowFiltering: false,
|
|
1900
1956
|
value: valueSelectTree,
|
|
1901
1957
|
popupHeight: 250,
|
|
@@ -1923,7 +1979,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1923
1979
|
}
|
|
1924
1980
|
);
|
|
1925
1981
|
case "checkbox":
|
|
1926
|
-
return /* @__PURE__ */ (0,
|
|
1982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1927
1983
|
import_reactstrap8.Input,
|
|
1928
1984
|
{
|
|
1929
1985
|
checked: row[col.field],
|
|
@@ -1946,13 +2002,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
1946
2002
|
);
|
|
1947
2003
|
case "numeric":
|
|
1948
2004
|
let valueCurrency = row[col.field];
|
|
1949
|
-
return /* @__PURE__ */ (0,
|
|
2005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1950
2006
|
import_reactstrap8.Input,
|
|
1951
2007
|
{
|
|
1952
2008
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
1953
2009
|
style: { textAlign: col.textAlign, height: 29 },
|
|
1954
2010
|
defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
|
|
1955
|
-
className: (0,
|
|
2011
|
+
className: (0, import_classnames11.default)("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
|
|
1956
2012
|
onChange: (val) => {
|
|
1957
2013
|
let newVal = "";
|
|
1958
2014
|
const flag = val.target?.value.startsWith("-");
|
|
@@ -2036,7 +2092,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2036
2092
|
}
|
|
2037
2093
|
);
|
|
2038
2094
|
case "color":
|
|
2039
|
-
return /* @__PURE__ */ (0,
|
|
2095
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2040
2096
|
import_reactstrap8.Input,
|
|
2041
2097
|
{
|
|
2042
2098
|
type: "color",
|
|
@@ -2059,7 +2115,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2059
2115
|
`col-${indexRow}-${indexCol}`
|
|
2060
2116
|
) });
|
|
2061
2117
|
case "form":
|
|
2062
|
-
return /* @__PURE__ */ (0,
|
|
2118
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2063
2119
|
edit_form_default,
|
|
2064
2120
|
{
|
|
2065
2121
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
@@ -2081,13 +2137,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2081
2137
|
}
|
|
2082
2138
|
);
|
|
2083
2139
|
default:
|
|
2084
|
-
return /* @__PURE__ */ (0,
|
|
2140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2085
2141
|
import_reactstrap8.Input,
|
|
2086
2142
|
{
|
|
2087
2143
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
2088
2144
|
style: { textAlign: col.textAlign, height: 29 },
|
|
2089
2145
|
defaultValue: isNullOrUndefined(row[col.field]) ? "" : row[col.field],
|
|
2090
|
-
className: (0,
|
|
2146
|
+
className: (0, import_classnames11.default)("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
|
|
2091
2147
|
onBlur: (val) => {
|
|
2092
2148
|
if (row[col.field] != val.target?.value) {
|
|
2093
2149
|
row[col.field] = val.target?.value;
|
|
@@ -2125,13 +2181,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2125
2181
|
}
|
|
2126
2182
|
};
|
|
2127
2183
|
const renderCommand = (commandItems, rowData, i) => {
|
|
2128
|
-
return /* @__PURE__ */ (0,
|
|
2129
|
-
return /* @__PURE__ */ (0,
|
|
2184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
|
|
2185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2130
2186
|
import_reactstrap8.Button,
|
|
2131
2187
|
{
|
|
2188
|
+
id: `command-item-${i}`,
|
|
2132
2189
|
tabIndex: -1,
|
|
2133
2190
|
style: { padding: "5px", minWidth: 45, height: "100%" },
|
|
2134
|
-
className: (0,
|
|
2191
|
+
className: (0, import_classnames11.default)("command-item", {
|
|
2135
2192
|
"btn-icon": item.tooltip === ""
|
|
2136
2193
|
}),
|
|
2137
2194
|
color: item.color ? item.color : "#000",
|
|
@@ -2142,7 +2199,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2142
2199
|
}
|
|
2143
2200
|
e.preventDefault();
|
|
2144
2201
|
},
|
|
2145
|
-
children:
|
|
2202
|
+
children: [
|
|
2203
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(icon_default, { iconName: item.icon, size: 16 }),
|
|
2204
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.UncontrolledTooltip, { target: `command-item-${i}`, place: "top", children: t(item.tooltip ?? "") })
|
|
2205
|
+
]
|
|
2146
2206
|
},
|
|
2147
2207
|
`command-${index}`
|
|
2148
2208
|
);
|
|
@@ -2266,13 +2326,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2266
2326
|
};
|
|
2267
2327
|
const onChangePage = (args) => {
|
|
2268
2328
|
if (pagingSetting?.setCurrentPage) {
|
|
2269
|
-
if (args.
|
|
2329
|
+
if (args.currentPage === args.oldPage) {
|
|
2270
2330
|
return;
|
|
2271
2331
|
}
|
|
2272
2332
|
pagingSetting.setCurrentPage(args.currentPage);
|
|
2273
2333
|
}
|
|
2274
2334
|
};
|
|
2275
2335
|
const onChangePageSize = (args) => {
|
|
2336
|
+
console.log(args.pageSize);
|
|
2276
2337
|
if (pagingSetting?.allowPaging) {
|
|
2277
2338
|
if (pagingSetting?.pageSize !== args.pageSize) {
|
|
2278
2339
|
if (pagingSetting?.setPageSize) {
|
|
@@ -2397,7 +2458,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2397
2458
|
}
|
|
2398
2459
|
}
|
|
2399
2460
|
};
|
|
2400
|
-
(0,
|
|
2461
|
+
(0, import_react13.useEffect)(() => {
|
|
2401
2462
|
setIndexFocus(-1);
|
|
2402
2463
|
if (setSelectedItem) {
|
|
2403
2464
|
if (isMulti) {
|
|
@@ -2424,7 +2485,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2424
2485
|
}
|
|
2425
2486
|
}
|
|
2426
2487
|
}, [selectedRows]);
|
|
2427
|
-
(0,
|
|
2488
|
+
(0, import_react13.useEffect)(() => {
|
|
2428
2489
|
if (!isMulti) {
|
|
2429
2490
|
if (dataSource && selectedItem && selectedItem[fieldKey]) {
|
|
2430
2491
|
if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
|
|
@@ -2441,10 +2502,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2441
2502
|
}, [selectedItem]);
|
|
2442
2503
|
const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
|
|
2443
2504
|
if (col.field === "command") {
|
|
2444
|
-
return col.visible !== false && /* @__PURE__ */ (0,
|
|
2505
|
+
return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2445
2506
|
"td",
|
|
2446
2507
|
{
|
|
2447
|
-
className: (0,
|
|
2508
|
+
className: (0, import_classnames11.default)(
|
|
2448
2509
|
`r-rowcell p-0 fix-${col.fixedType}`,
|
|
2449
2510
|
{ "cell-fixed": col.fixedType },
|
|
2450
2511
|
{ "r-active": isSelected && editDisable || indexFocus === indexRow }
|
|
@@ -2454,15 +2515,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2454
2515
|
right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
|
|
2455
2516
|
textAlign: col.textAlign ? col.textAlign : "left"
|
|
2456
2517
|
},
|
|
2457
|
-
children: /* @__PURE__ */ (0,
|
|
2518
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
|
|
2458
2519
|
},
|
|
2459
2520
|
`col-${indexRow}-${indexCol}`
|
|
2460
2521
|
);
|
|
2461
2522
|
} else if (col.field === "#") {
|
|
2462
|
-
return col.visible !== false && /* @__PURE__ */ (0,
|
|
2523
|
+
return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2463
2524
|
"td",
|
|
2464
2525
|
{
|
|
2465
|
-
className: (0,
|
|
2526
|
+
className: (0, import_classnames11.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
|
|
2466
2527
|
tabIndex: Number(`${indexRow}${indexCol}`),
|
|
2467
2528
|
style: {
|
|
2468
2529
|
left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
|
|
@@ -2506,15 +2567,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2506
2567
|
e.stopPropagation();
|
|
2507
2568
|
}
|
|
2508
2569
|
},
|
|
2509
|
-
children: /* @__PURE__ */ (0,
|
|
2570
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
|
|
2510
2571
|
},
|
|
2511
2572
|
`col-${indexRow}-${indexCol}`
|
|
2512
2573
|
);
|
|
2513
2574
|
} else if (col.field === "checkbox") {
|
|
2514
|
-
return /* @__PURE__ */ (0,
|
|
2575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2515
2576
|
"td",
|
|
2516
2577
|
{
|
|
2517
|
-
className: (0,
|
|
2578
|
+
className: (0, import_classnames11.default)(
|
|
2518
2579
|
`r-rowcell p-0 fix-${col.fixedType}`,
|
|
2519
2580
|
{ "cell-fixed": col.fixedType },
|
|
2520
2581
|
{ "r-active": isSelected && editDisable || indexFocus === indexRow }
|
|
@@ -2524,7 +2585,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2524
2585
|
right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
|
|
2525
2586
|
textAlign: col.textAlign ? col.textAlign : "center"
|
|
2526
2587
|
},
|
|
2527
|
-
children: /* @__PURE__ */ (0,
|
|
2588
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2528
2589
|
"div",
|
|
2529
2590
|
{
|
|
2530
2591
|
className: "r-rowcell-div cursor-pointer",
|
|
@@ -2548,7 +2609,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2548
2609
|
e.stopPropagation();
|
|
2549
2610
|
}
|
|
2550
2611
|
},
|
|
2551
|
-
children: /* @__PURE__ */ (0,
|
|
2612
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2552
2613
|
import_reactstrap8.Input,
|
|
2553
2614
|
{
|
|
2554
2615
|
checked: isSelected,
|
|
@@ -2575,10 +2636,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2575
2636
|
}
|
|
2576
2637
|
const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
|
|
2577
2638
|
const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
|
|
2578
|
-
return /* @__PURE__ */ (0,
|
|
2639
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2579
2640
|
"td",
|
|
2580
2641
|
{
|
|
2581
|
-
className: (0,
|
|
2642
|
+
className: (0, import_classnames11.default)(
|
|
2582
2643
|
`r-rowcell fix-${col.fixedType}`,
|
|
2583
2644
|
{ "cell-fixed": col.fixedType },
|
|
2584
2645
|
{ "r-active": isSelected && editDisable || indexFocus === indexRow }
|
|
@@ -2620,36 +2681,27 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2620
2681
|
e.stopPropagation();
|
|
2621
2682
|
}
|
|
2622
2683
|
},
|
|
2623
|
-
children: /* @__PURE__ */ (0,
|
|
2684
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2624
2685
|
"div",
|
|
2625
2686
|
{
|
|
2626
|
-
className: (0,
|
|
2687
|
+
className: (0, import_classnames11.default)("r-rowcell-div"),
|
|
2627
2688
|
style: {
|
|
2628
2689
|
width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width
|
|
2629
2690
|
},
|
|
2630
|
-
children: /* @__PURE__ */ (0,
|
|
2691
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2631
2692
|
"div",
|
|
2632
2693
|
{
|
|
2633
2694
|
id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
|
|
2634
|
-
className: (0,
|
|
2695
|
+
className: (0, import_classnames11.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
|
|
2635
2696
|
style: {
|
|
2636
2697
|
margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
|
|
2637
2698
|
color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
|
|
2638
2699
|
},
|
|
2639
2700
|
children: [
|
|
2640
|
-
typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) :
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
className: "r-cell-text",
|
|
2645
|
-
style: {
|
|
2646
|
-
display: "block",
|
|
2647
|
-
maxWidth: (col.editType ?? "text") === "text" ? col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto" : "auto"
|
|
2648
|
-
},
|
|
2649
|
-
children: typeDis === 2 ? col.template(row, indexRow) : value
|
|
2650
|
-
}
|
|
2651
|
-
),
|
|
2652
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "icon-table", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ej2_react_popups.TooltipComponent, { className: (0, import_classnames10.default)("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage?.toString() ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.AlertCircle, { fontSize: 15.5 }) }) })
|
|
2701
|
+
typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: `content-${indexRow}-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
|
|
2702
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames11.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.AlertCircle, { fontSize: 15.5 }) }),
|
|
2703
|
+
!(typeDis === 1 && !refreshRow) && col.haveToolTip && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.UncontrolledTooltip, { style: { fontSize: 11 }, autohide: false, target: `content-${indexRow}-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
|
|
2704
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, children: errorMessage?.toString() ?? "" })
|
|
2653
2705
|
]
|
|
2654
2706
|
}
|
|
2655
2707
|
)
|
|
@@ -2662,12 +2714,12 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2662
2714
|
};
|
|
2663
2715
|
const renderHeaderCol = (col, indexCol, indexParent) => {
|
|
2664
2716
|
if (col.field === "checkbox") {
|
|
2665
|
-
return /* @__PURE__ */ (0,
|
|
2717
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2666
2718
|
"th",
|
|
2667
2719
|
{
|
|
2668
2720
|
rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
|
|
2669
2721
|
colSpan: col.columns?.length ?? 1,
|
|
2670
|
-
className: (0,
|
|
2722
|
+
className: (0, import_classnames11.default)(
|
|
2671
2723
|
`r-headercell fix-${col.fixedType}`,
|
|
2672
2724
|
{ "cell-fixed": col.fixedType }
|
|
2673
2725
|
),
|
|
@@ -2679,20 +2731,17 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2679
2731
|
minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
|
|
2680
2732
|
maxWidth: col.maxWidth
|
|
2681
2733
|
},
|
|
2682
|
-
children: /* @__PURE__ */ (0,
|
|
2734
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2683
2735
|
"div",
|
|
2684
2736
|
{
|
|
2685
|
-
style: {
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
},
|
|
2689
|
-
className: (0, import_classnames10.default)("r-headercell-div"),
|
|
2690
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2737
|
+
style: { justifyContent: col.textAlign ?? "left" },
|
|
2738
|
+
className: (0, import_classnames11.default)("r-headercell-div"),
|
|
2739
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2691
2740
|
import_reactstrap8.Input,
|
|
2692
2741
|
{
|
|
2693
2742
|
checked: totalCount > 0 && selectedRows?.length >= totalCount,
|
|
2694
2743
|
type: "checkbox",
|
|
2695
|
-
className: (0,
|
|
2744
|
+
className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
|
|
2696
2745
|
style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
|
|
2697
2746
|
onChange: (e) => {
|
|
2698
2747
|
if (selectEnable) {
|
|
@@ -2712,15 +2761,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2712
2761
|
}
|
|
2713
2762
|
) }, `header-${indexCol}`);
|
|
2714
2763
|
} else if (col.field === "#") {
|
|
2715
|
-
return /* @__PURE__ */ (0,
|
|
2716
|
-
|
|
2764
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2765
|
+
import_react13.Fragment,
|
|
2717
2766
|
{
|
|
2718
|
-
children: col.visible !== false && /* @__PURE__ */ (0,
|
|
2767
|
+
children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2719
2768
|
"th",
|
|
2720
2769
|
{
|
|
2721
2770
|
rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
|
|
2722
2771
|
colSpan: col.columns?.length ?? 1,
|
|
2723
|
-
className: (0,
|
|
2772
|
+
className: (0, import_classnames11.default)(
|
|
2724
2773
|
`r-headercell fix-${col.fixedType}`,
|
|
2725
2774
|
{ "cell-fixed": col.fixedType }
|
|
2726
2775
|
),
|
|
@@ -2732,14 +2781,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2732
2781
|
left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
|
|
2733
2782
|
right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0
|
|
2734
2783
|
},
|
|
2735
|
-
children: /* @__PURE__ */ (0,
|
|
2784
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2736
2785
|
"div",
|
|
2737
2786
|
{
|
|
2738
2787
|
title: t(col.headerText ?? ""),
|
|
2739
|
-
style: {
|
|
2740
|
-
height: `${(col.rowspan ?? 1) * 42}px`,
|
|
2741
|
-
justifyContent: col.textAlign ?? "left"
|
|
2742
|
-
},
|
|
2788
|
+
style: { justifyContent: col.textAlign ?? "left" },
|
|
2743
2789
|
className: "r-headercell-div",
|
|
2744
2790
|
children: t(col.headerText ?? "")
|
|
2745
2791
|
}
|
|
@@ -2750,15 +2796,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2750
2796
|
`header-${indexCol}`
|
|
2751
2797
|
);
|
|
2752
2798
|
} else {
|
|
2753
|
-
return /* @__PURE__ */ (0,
|
|
2754
|
-
|
|
2799
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2800
|
+
import_react13.Fragment,
|
|
2755
2801
|
{
|
|
2756
|
-
children: col.visible !== false && /* @__PURE__ */ (0,
|
|
2802
|
+
children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2757
2803
|
"th",
|
|
2758
2804
|
{
|
|
2759
2805
|
rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
|
|
2760
2806
|
colSpan: col.columns?.length ?? 1,
|
|
2761
|
-
className: (0,
|
|
2807
|
+
className: (0, import_classnames11.default)(
|
|
2762
2808
|
`r-headercell fix-${col.fixedType}`,
|
|
2763
2809
|
{ "cell-fixed": col.fixedType }
|
|
2764
2810
|
),
|
|
@@ -2770,15 +2816,12 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2770
2816
|
right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
|
|
2771
2817
|
maxWidth: col.maxWidth
|
|
2772
2818
|
},
|
|
2773
|
-
children: /* @__PURE__ */ (0,
|
|
2819
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2774
2820
|
"div",
|
|
2775
2821
|
{
|
|
2776
2822
|
role: "textbox",
|
|
2777
2823
|
title: t(col.headerText ?? ""),
|
|
2778
|
-
style: {
|
|
2779
|
-
height: `${(col.rowspan ?? 1) * 42}px`,
|
|
2780
|
-
justifyContent: col.textAlign ?? "left"
|
|
2781
|
-
},
|
|
2824
|
+
style: { justifyContent: col.textAlign ?? "left" },
|
|
2782
2825
|
className: "r-headercell-div",
|
|
2783
2826
|
children: t(col.headerText ?? "")
|
|
2784
2827
|
}
|
|
@@ -2791,10 +2834,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2791
2834
|
}
|
|
2792
2835
|
};
|
|
2793
2836
|
const renderFooterCol = (col, indexCol) => {
|
|
2794
|
-
return /* @__PURE__ */ (0,
|
|
2837
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2795
2838
|
"td",
|
|
2796
2839
|
{
|
|
2797
|
-
className: (0,
|
|
2840
|
+
className: (0, import_classnames11.default)(
|
|
2798
2841
|
`p-0 px-50 r-footer fix-${col.fixedType}`,
|
|
2799
2842
|
{ "cell-fixed": col.fixedType }
|
|
2800
2843
|
),
|
|
@@ -2806,56 +2849,56 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2806
2849
|
maxWidth: col.maxWidth,
|
|
2807
2850
|
textAlign: col.textAlign ? col.textAlign : "left"
|
|
2808
2851
|
},
|
|
2809
|
-
children: /* @__PURE__ */ (0,
|
|
2852
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
|
|
2810
2853
|
return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
|
|
2811
2854
|
}, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
|
|
2812
2855
|
}
|
|
2813
2856
|
) }, `summarycell-${indexCol}`);
|
|
2814
2857
|
};
|
|
2815
2858
|
const renderToolbarTop = () => {
|
|
2816
|
-
return /* @__PURE__ */ (0,
|
|
2817
|
-
/* @__PURE__ */ (0,
|
|
2818
|
-
return item.align === "left" ? /* @__PURE__ */ (0,
|
|
2859
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-toolbar-items", children: [
|
|
2860
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
|
|
2861
|
+
return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
|
|
2819
2862
|
}) }),
|
|
2820
|
-
/* @__PURE__ */ (0,
|
|
2821
|
-
return item.align === "center" ? /* @__PURE__ */ (0,
|
|
2863
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
|
|
2864
|
+
return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
|
|
2822
2865
|
}) }),
|
|
2823
|
-
/* @__PURE__ */ (0,
|
|
2824
|
-
return item.align === "right" ? /* @__PURE__ */ (0,
|
|
2866
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
|
|
2867
|
+
return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
|
|
2825
2868
|
}) })
|
|
2826
2869
|
] }) });
|
|
2827
2870
|
};
|
|
2828
2871
|
const renderToolbarBottom = () => {
|
|
2829
|
-
return /* @__PURE__ */ (0,
|
|
2830
|
-
/* @__PURE__ */ (0,
|
|
2831
|
-
/* @__PURE__ */ (0,
|
|
2832
|
-
(indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0,
|
|
2833
|
-
/* @__PURE__ */ (0,
|
|
2872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-toolbar-items", children: [
|
|
2873
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-toolbar-left", children: [
|
|
2874
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
|
|
2875
|
+
(indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
2876
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: () => {
|
|
2834
2877
|
handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
|
|
2835
2878
|
}, className: "d-flex", children: t("Duplicate") }) }),
|
|
2836
|
-
/* @__PURE__ */ (0,
|
|
2837
|
-
/* @__PURE__ */ (0,
|
|
2838
|
-
] }) : /* @__PURE__ */ (0,
|
|
2839
|
-
/* @__PURE__ */ (0,
|
|
2879
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
|
|
2880
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
|
|
2881
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: " " }),
|
|
2882
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
|
|
2840
2883
|
toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
2841
|
-
return item.align === "left" ? /* @__PURE__ */ (0,
|
|
2884
|
+
return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
|
|
2842
2885
|
})
|
|
2843
2886
|
] }),
|
|
2844
|
-
/* @__PURE__ */ (0,
|
|
2845
|
-
return item.align === "center" ? /* @__PURE__ */ (0,
|
|
2887
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
2888
|
+
return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
|
|
2846
2889
|
}) }),
|
|
2847
|
-
/* @__PURE__ */ (0,
|
|
2890
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-toolbar-right", children: [
|
|
2848
2891
|
toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
2849
|
-
return item.align === "right" ? /* @__PURE__ */ (0,
|
|
2892
|
+
return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
|
|
2850
2893
|
}),
|
|
2851
|
-
/* @__PURE__ */ (0,
|
|
2852
|
-
/* @__PURE__ */ (0,
|
|
2853
|
-
/* @__PURE__ */ (0,
|
|
2854
|
-
/* @__PURE__ */ (0,
|
|
2855
|
-
/* @__PURE__ */ (0,
|
|
2856
|
-
/* @__PURE__ */ (0,
|
|
2857
|
-
/* @__PURE__ */ (0,
|
|
2858
|
-
/* @__PURE__ */ (0,
|
|
2894
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
|
|
2895
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap8.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
|
|
2896
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.DropdownToggle, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.Info, { className: "cursor-pointer" }) }),
|
|
2897
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.DropdownMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex flex-column p-50 py-25", children: [
|
|
2898
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
|
|
2899
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
|
|
2900
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
|
|
2901
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\xE1n h\xE0ng" })
|
|
2859
2902
|
] }) })
|
|
2860
2903
|
] }) })
|
|
2861
2904
|
] })
|
|
@@ -2884,10 +2927,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2884
2927
|
const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
|
|
2885
2928
|
if (flagDisplay) {
|
|
2886
2929
|
countDisplay++;
|
|
2887
|
-
return /* @__PURE__ */ (0,
|
|
2930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2888
2931
|
"tr",
|
|
2889
2932
|
{
|
|
2890
|
-
className: (0,
|
|
2933
|
+
className: (0, import_classnames11.default)("r-row", { "fisrt-row": countDisplay === 0 }),
|
|
2891
2934
|
children: contentColumns.map((col, indexCol) => {
|
|
2892
2935
|
return renderContentCol(col, row, indexRow, indexCol, isSelected);
|
|
2893
2936
|
})
|
|
@@ -2898,43 +2941,41 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2898
2941
|
}
|
|
2899
2942
|
});
|
|
2900
2943
|
};
|
|
2901
|
-
(0,
|
|
2944
|
+
(0, import_react13.useEffect)(() => {
|
|
2902
2945
|
if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
|
|
2903
2946
|
pagingSetting?.setCurrentPage(1);
|
|
2904
2947
|
}
|
|
2905
2948
|
}, [searchTerm, searchSetting?.searchTerm]);
|
|
2906
|
-
return /* @__PURE__ */ (0,
|
|
2907
|
-
/* @__PURE__ */ (0,
|
|
2908
|
-
/* @__PURE__ */ (0,
|
|
2909
|
-
toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0,
|
|
2910
|
-
/* @__PURE__ */ (0,
|
|
2911
|
-
/* @__PURE__ */ (0,
|
|
2912
|
-
return /* @__PURE__ */ (0,
|
|
2949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react13.Fragment, { children: [
|
|
2950
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "react-table-edit", children: [
|
|
2951
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
|
|
2952
|
+
toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {}),
|
|
2953
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { style: { width: "100%" }, children: [
|
|
2954
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
|
|
2955
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
|
|
2913
2956
|
return renderHeaderCol(col, index, indexParent);
|
|
2914
2957
|
}) }, indexParent);
|
|
2915
2958
|
}) }),
|
|
2916
|
-
/* @__PURE__ */ (0,
|
|
2917
|
-
/* @__PURE__ */ (0,
|
|
2959
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
|
|
2960
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
|
|
2918
2961
|
return renderFooterCol(col, index);
|
|
2919
|
-
}) }) : /* @__PURE__ */ (0,
|
|
2962
|
+
}) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {}) })
|
|
2920
2963
|
] }) }),
|
|
2921
|
-
toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0,
|
|
2964
|
+
toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {})
|
|
2922
2965
|
] }),
|
|
2923
|
-
pagingSetting?.allowPaging ? /* @__PURE__ */ (0,
|
|
2924
|
-
|
|
2966
|
+
pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2967
|
+
PagingComponent,
|
|
2925
2968
|
{
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
pageCount: 5,
|
|
2933
|
-
dropDownChanged: onChangePageSize
|
|
2969
|
+
onChangePage,
|
|
2970
|
+
pageSize: pagingSetting?.pageSize ?? 0,
|
|
2971
|
+
currentPage: pagingSetting?.currentPage ?? 0,
|
|
2972
|
+
pageOptions: [20, 30, 50, 100],
|
|
2973
|
+
totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
|
|
2974
|
+
onChangePageSize
|
|
2934
2975
|
}
|
|
2935
|
-
) : /* @__PURE__ */ (0,
|
|
2976
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {})
|
|
2936
2977
|
] }),
|
|
2937
|
-
/* @__PURE__ */ (0,
|
|
2978
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2938
2979
|
sidebar_setting_column_default,
|
|
2939
2980
|
{
|
|
2940
2981
|
handleSidebar: () => {
|
|
@@ -2950,12 +2991,12 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2950
2991
|
var table_default = TableEdit;
|
|
2951
2992
|
|
|
2952
2993
|
// test-app/src/component/tab-menu/index.tsx
|
|
2953
|
-
var
|
|
2954
|
-
var
|
|
2955
|
-
var
|
|
2994
|
+
var import_becoxy_icons6 = require("becoxy-icons");
|
|
2995
|
+
var import_classnames12 = __toESM(require("classnames"));
|
|
2996
|
+
var import_react14 = require("react");
|
|
2956
2997
|
var import_react_router_dom = require("react-router-dom");
|
|
2957
2998
|
var import_reactstrap9 = require("reactstrap");
|
|
2958
|
-
var
|
|
2999
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2959
3000
|
var TabsMenuComponent = ({
|
|
2960
3001
|
buttonWidth,
|
|
2961
3002
|
tabParent,
|
|
@@ -2967,14 +3008,14 @@ var TabsMenuComponent = ({
|
|
|
2967
3008
|
renderModal
|
|
2968
3009
|
}) => {
|
|
2969
3010
|
const navigate = (0, import_react_router_dom.useNavigate)();
|
|
2970
|
-
const [dataMenu, setDataMenu] = (0,
|
|
2971
|
-
const [openMenu, setOpenMenu] = (0,
|
|
2972
|
-
const [url, setUrl] = (0,
|
|
2973
|
-
const [contentWidth, setContentWidth] = (0,
|
|
2974
|
-
const [componentWidth, setComponentWidth] = (0,
|
|
2975
|
-
const [scrollPosition, setScrollPosition] = (0,
|
|
2976
|
-
const [dataItem, setDataItem] = (0,
|
|
2977
|
-
const [openModal, setOpenModal] = (0,
|
|
3011
|
+
const [dataMenu, setDataMenu] = (0, import_react14.useState)([]);
|
|
3012
|
+
const [openMenu, setOpenMenu] = (0, import_react14.useState)(false);
|
|
3013
|
+
const [url, setUrl] = (0, import_react14.useState)("");
|
|
3014
|
+
const [contentWidth, setContentWidth] = (0, import_react14.useState)(0);
|
|
3015
|
+
const [componentWidth, setComponentWidth] = (0, import_react14.useState)(0);
|
|
3016
|
+
const [scrollPosition, setScrollPosition] = (0, import_react14.useState)(0);
|
|
3017
|
+
const [dataItem, setDataItem] = (0, import_react14.useState)([]);
|
|
3018
|
+
const [openModal, setOpenModal] = (0, import_react14.useState)({});
|
|
2978
3019
|
const handleWindowResize = () => {
|
|
2979
3020
|
const tabEle = document.getElementById(`tab-component-${resourceCode}`);
|
|
2980
3021
|
const tabContent = document.getElementById(`content-component-${resourceCode}`);
|
|
@@ -2983,7 +3024,7 @@ var TabsMenuComponent = ({
|
|
|
2983
3024
|
setContentWidth(tabContent?.offsetWidth ?? 0);
|
|
2984
3025
|
}
|
|
2985
3026
|
};
|
|
2986
|
-
(0,
|
|
3027
|
+
(0, import_react14.useEffect)(() => {
|
|
2987
3028
|
setUrl(window.location.pathname);
|
|
2988
3029
|
window.addEventListener("resize", handleWindowResize);
|
|
2989
3030
|
setTimeout(() => {
|
|
@@ -2999,7 +3040,7 @@ var TabsMenuComponent = ({
|
|
|
2999
3040
|
window.removeEventListener("resize", handleWindowResize);
|
|
3000
3041
|
};
|
|
3001
3042
|
}, []);
|
|
3002
|
-
(0,
|
|
3043
|
+
(0, import_react14.useEffect)(() => {
|
|
3003
3044
|
const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
|
|
3004
3045
|
if (item) {
|
|
3005
3046
|
if (resourceCodeParent) {
|
|
@@ -3030,22 +3071,22 @@ var TabsMenuComponent = ({
|
|
|
3030
3071
|
const handleModal = (name) => {
|
|
3031
3072
|
setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
|
|
3032
3073
|
};
|
|
3033
|
-
return /* @__PURE__ */ (0,
|
|
3074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react14.Fragment, { children: [
|
|
3034
3075
|
renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
|
|
3035
|
-
/* @__PURE__ */ (0,
|
|
3036
|
-
/* @__PURE__ */ (0,
|
|
3076
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: (0, import_classnames12.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
|
|
3077
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3037
3078
|
"div",
|
|
3038
3079
|
{
|
|
3039
3080
|
onClick: () => handleScroll(-200),
|
|
3040
|
-
className: (0,
|
|
3041
|
-
children: /* @__PURE__ */ (0,
|
|
3081
|
+
className: (0, import_classnames12.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
3082
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_becoxy_icons6.ChevronLeft, {})
|
|
3042
3083
|
}
|
|
3043
3084
|
),
|
|
3044
|
-
/* @__PURE__ */ (0,
|
|
3085
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
|
|
3045
3086
|
if (item?.resAttributes?.IS_MENU === "1") {
|
|
3046
|
-
return /* @__PURE__ */ (0,
|
|
3047
|
-
/* @__PURE__ */ (0,
|
|
3048
|
-
/* @__PURE__ */ (0,
|
|
3087
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_reactstrap9.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
|
|
3088
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_reactstrap9.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: item.name }) }),
|
|
3089
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_reactstrap9.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3049
3090
|
import_reactstrap9.DropdownItem,
|
|
3050
3091
|
{
|
|
3051
3092
|
style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
|
|
@@ -3062,23 +3103,23 @@ var TabsMenuComponent = ({
|
|
|
3062
3103
|
)) })
|
|
3063
3104
|
] }, item.code);
|
|
3064
3105
|
} else {
|
|
3065
|
-
return /* @__PURE__ */ (0,
|
|
3106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3066
3107
|
import_react_router_dom.Link,
|
|
3067
3108
|
{
|
|
3068
3109
|
to: item.url,
|
|
3069
|
-
className: (0,
|
|
3110
|
+
className: (0, import_classnames12.default)("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
|
|
3070
3111
|
children: item.name
|
|
3071
3112
|
},
|
|
3072
3113
|
item.code
|
|
3073
3114
|
);
|
|
3074
3115
|
}
|
|
3075
3116
|
}) }) }),
|
|
3076
|
-
/* @__PURE__ */ (0,
|
|
3117
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3077
3118
|
"div",
|
|
3078
3119
|
{
|
|
3079
3120
|
onClick: () => handleScroll(200),
|
|
3080
|
-
className: (0,
|
|
3081
|
-
children: /* @__PURE__ */ (0,
|
|
3121
|
+
className: (0, import_classnames12.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
3122
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_becoxy_icons6.ChevronRight, {})
|
|
3082
3123
|
}
|
|
3083
3124
|
)
|
|
3084
3125
|
] })
|