react-table-edit 0.5.2 → 0.5.4
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 +247 -190
- package/dist/index.mjs +222 -165
- 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, { className: "r-tooltip", 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,34 @@ 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
|
-
|
|
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, { className: "r-tooltip", autohide: false, target: `content-${indexRow}-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
|
|
2704
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2705
|
+
import_reactstrap8.UncontrolledTooltip,
|
|
2642
2706
|
{
|
|
2643
|
-
|
|
2644
|
-
className: "r-
|
|
2645
|
-
|
|
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
|
|
2707
|
+
target: `error-${indexRow}-${indexCol}`,
|
|
2708
|
+
className: "r-tooltip tooltip-error",
|
|
2709
|
+
children: errorMessage?.toString() ?? ""
|
|
2650
2710
|
}
|
|
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 }) }) })
|
|
2711
|
+
)
|
|
2653
2712
|
]
|
|
2654
2713
|
}
|
|
2655
2714
|
)
|
|
@@ -2662,12 +2721,12 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2662
2721
|
};
|
|
2663
2722
|
const renderHeaderCol = (col, indexCol, indexParent) => {
|
|
2664
2723
|
if (col.field === "checkbox") {
|
|
2665
|
-
return /* @__PURE__ */ (0,
|
|
2724
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2666
2725
|
"th",
|
|
2667
2726
|
{
|
|
2668
2727
|
rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
|
|
2669
2728
|
colSpan: col.columns?.length ?? 1,
|
|
2670
|
-
className: (0,
|
|
2729
|
+
className: (0, import_classnames11.default)(
|
|
2671
2730
|
`r-headercell fix-${col.fixedType}`,
|
|
2672
2731
|
{ "cell-fixed": col.fixedType }
|
|
2673
2732
|
),
|
|
@@ -2679,17 +2738,17 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2679
2738
|
minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
|
|
2680
2739
|
maxWidth: col.maxWidth
|
|
2681
2740
|
},
|
|
2682
|
-
children: /* @__PURE__ */ (0,
|
|
2741
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2683
2742
|
"div",
|
|
2684
2743
|
{
|
|
2685
2744
|
style: { justifyContent: col.textAlign ?? "left" },
|
|
2686
|
-
className: (0,
|
|
2687
|
-
children: /* @__PURE__ */ (0,
|
|
2745
|
+
className: (0, import_classnames11.default)("r-headercell-div"),
|
|
2746
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2688
2747
|
import_reactstrap8.Input,
|
|
2689
2748
|
{
|
|
2690
2749
|
checked: totalCount > 0 && selectedRows?.length >= totalCount,
|
|
2691
2750
|
type: "checkbox",
|
|
2692
|
-
className: (0,
|
|
2751
|
+
className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
|
|
2693
2752
|
style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
|
|
2694
2753
|
onChange: (e) => {
|
|
2695
2754
|
if (selectEnable) {
|
|
@@ -2709,15 +2768,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2709
2768
|
}
|
|
2710
2769
|
) }, `header-${indexCol}`);
|
|
2711
2770
|
} else if (col.field === "#") {
|
|
2712
|
-
return /* @__PURE__ */ (0,
|
|
2713
|
-
|
|
2771
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2772
|
+
import_react13.Fragment,
|
|
2714
2773
|
{
|
|
2715
|
-
children: col.visible !== false && /* @__PURE__ */ (0,
|
|
2774
|
+
children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2716
2775
|
"th",
|
|
2717
2776
|
{
|
|
2718
2777
|
rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
|
|
2719
2778
|
colSpan: col.columns?.length ?? 1,
|
|
2720
|
-
className: (0,
|
|
2779
|
+
className: (0, import_classnames11.default)(
|
|
2721
2780
|
`r-headercell fix-${col.fixedType}`,
|
|
2722
2781
|
{ "cell-fixed": col.fixedType }
|
|
2723
2782
|
),
|
|
@@ -2729,7 +2788,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2729
2788
|
left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
|
|
2730
2789
|
right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0
|
|
2731
2790
|
},
|
|
2732
|
-
children: /* @__PURE__ */ (0,
|
|
2791
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2733
2792
|
"div",
|
|
2734
2793
|
{
|
|
2735
2794
|
title: t(col.headerText ?? ""),
|
|
@@ -2744,15 +2803,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2744
2803
|
`header-${indexCol}`
|
|
2745
2804
|
);
|
|
2746
2805
|
} else {
|
|
2747
|
-
return /* @__PURE__ */ (0,
|
|
2748
|
-
|
|
2806
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2807
|
+
import_react13.Fragment,
|
|
2749
2808
|
{
|
|
2750
|
-
children: col.visible !== false && /* @__PURE__ */ (0,
|
|
2809
|
+
children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2751
2810
|
"th",
|
|
2752
2811
|
{
|
|
2753
2812
|
rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
|
|
2754
2813
|
colSpan: col.columns?.length ?? 1,
|
|
2755
|
-
className: (0,
|
|
2814
|
+
className: (0, import_classnames11.default)(
|
|
2756
2815
|
`r-headercell fix-${col.fixedType}`,
|
|
2757
2816
|
{ "cell-fixed": col.fixedType }
|
|
2758
2817
|
),
|
|
@@ -2764,7 +2823,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2764
2823
|
right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
|
|
2765
2824
|
maxWidth: col.maxWidth
|
|
2766
2825
|
},
|
|
2767
|
-
children: /* @__PURE__ */ (0,
|
|
2826
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2768
2827
|
"div",
|
|
2769
2828
|
{
|
|
2770
2829
|
role: "textbox",
|
|
@@ -2782,10 +2841,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2782
2841
|
}
|
|
2783
2842
|
};
|
|
2784
2843
|
const renderFooterCol = (col, indexCol) => {
|
|
2785
|
-
return /* @__PURE__ */ (0,
|
|
2844
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2786
2845
|
"td",
|
|
2787
2846
|
{
|
|
2788
|
-
className: (0,
|
|
2847
|
+
className: (0, import_classnames11.default)(
|
|
2789
2848
|
`p-0 px-50 r-footer fix-${col.fixedType}`,
|
|
2790
2849
|
{ "cell-fixed": col.fixedType }
|
|
2791
2850
|
),
|
|
@@ -2797,56 +2856,56 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2797
2856
|
maxWidth: col.maxWidth,
|
|
2798
2857
|
textAlign: col.textAlign ? col.textAlign : "left"
|
|
2799
2858
|
},
|
|
2800
|
-
children: /* @__PURE__ */ (0,
|
|
2859
|
+
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) {
|
|
2801
2860
|
return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
|
|
2802
2861
|
}, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
|
|
2803
2862
|
}
|
|
2804
2863
|
) }, `summarycell-${indexCol}`);
|
|
2805
2864
|
};
|
|
2806
2865
|
const renderToolbarTop = () => {
|
|
2807
|
-
return /* @__PURE__ */ (0,
|
|
2808
|
-
/* @__PURE__ */ (0,
|
|
2809
|
-
return item.align === "left" ? /* @__PURE__ */ (0,
|
|
2866
|
+
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: [
|
|
2867
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
|
|
2868
|
+
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}`) : "";
|
|
2810
2869
|
}) }),
|
|
2811
|
-
/* @__PURE__ */ (0,
|
|
2812
|
-
return item.align === "center" ? /* @__PURE__ */ (0,
|
|
2870
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
|
|
2871
|
+
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}`) : "";
|
|
2813
2872
|
}) }),
|
|
2814
|
-
/* @__PURE__ */ (0,
|
|
2815
|
-
return item.align === "right" ? /* @__PURE__ */ (0,
|
|
2873
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
|
|
2874
|
+
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}`) : "";
|
|
2816
2875
|
}) })
|
|
2817
2876
|
] }) });
|
|
2818
2877
|
};
|
|
2819
2878
|
const renderToolbarBottom = () => {
|
|
2820
|
-
return /* @__PURE__ */ (0,
|
|
2821
|
-
/* @__PURE__ */ (0,
|
|
2822
|
-
/* @__PURE__ */ (0,
|
|
2823
|
-
(indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0,
|
|
2824
|
-
/* @__PURE__ */ (0,
|
|
2879
|
+
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: [
|
|
2880
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-toolbar-left", children: [
|
|
2881
|
+
/* @__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") }) }),
|
|
2882
|
+
(indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
2883
|
+
/* @__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: () => {
|
|
2825
2884
|
handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
|
|
2826
2885
|
}, className: "d-flex", children: t("Duplicate") }) }),
|
|
2827
|
-
/* @__PURE__ */ (0,
|
|
2828
|
-
/* @__PURE__ */ (0,
|
|
2829
|
-
] }) : /* @__PURE__ */ (0,
|
|
2830
|
-
/* @__PURE__ */ (0,
|
|
2886
|
+
/* @__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") }) }),
|
|
2887
|
+
/* @__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") }) })
|
|
2888
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: " " }),
|
|
2889
|
+
/* @__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") }) }),
|
|
2831
2890
|
toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
2832
|
-
return item.align === "left" ? /* @__PURE__ */ (0,
|
|
2891
|
+
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}`) : "";
|
|
2833
2892
|
})
|
|
2834
2893
|
] }),
|
|
2835
|
-
/* @__PURE__ */ (0,
|
|
2836
|
-
return item.align === "center" ? /* @__PURE__ */ (0,
|
|
2894
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
2895
|
+
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}`) : "";
|
|
2837
2896
|
}) }),
|
|
2838
|
-
/* @__PURE__ */ (0,
|
|
2897
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-toolbar-right", children: [
|
|
2839
2898
|
toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
2840
|
-
return item.align === "right" ? /* @__PURE__ */ (0,
|
|
2899
|
+
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}`) : "";
|
|
2841
2900
|
}),
|
|
2842
|
-
/* @__PURE__ */ (0,
|
|
2843
|
-
/* @__PURE__ */ (0,
|
|
2844
|
-
/* @__PURE__ */ (0,
|
|
2845
|
-
/* @__PURE__ */ (0,
|
|
2846
|
-
/* @__PURE__ */ (0,
|
|
2847
|
-
/* @__PURE__ */ (0,
|
|
2848
|
-
/* @__PURE__ */ (0,
|
|
2849
|
-
/* @__PURE__ */ (0,
|
|
2901
|
+
/* @__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) }) }),
|
|
2902
|
+
/* @__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: [
|
|
2903
|
+
/* @__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" }) }),
|
|
2904
|
+
/* @__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: [
|
|
2905
|
+
/* @__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" }),
|
|
2906
|
+
/* @__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" }),
|
|
2907
|
+
/* @__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" }),
|
|
2908
|
+
/* @__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" })
|
|
2850
2909
|
] }) })
|
|
2851
2910
|
] }) })
|
|
2852
2911
|
] })
|
|
@@ -2875,10 +2934,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2875
2934
|
const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
|
|
2876
2935
|
if (flagDisplay) {
|
|
2877
2936
|
countDisplay++;
|
|
2878
|
-
return /* @__PURE__ */ (0,
|
|
2937
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2879
2938
|
"tr",
|
|
2880
2939
|
{
|
|
2881
|
-
className: (0,
|
|
2940
|
+
className: (0, import_classnames11.default)("r-row", { "fisrt-row": countDisplay === 0 }),
|
|
2882
2941
|
children: contentColumns.map((col, indexCol) => {
|
|
2883
2942
|
return renderContentCol(col, row, indexRow, indexCol, isSelected);
|
|
2884
2943
|
})
|
|
@@ -2889,43 +2948,41 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2889
2948
|
}
|
|
2890
2949
|
});
|
|
2891
2950
|
};
|
|
2892
|
-
(0,
|
|
2951
|
+
(0, import_react13.useEffect)(() => {
|
|
2893
2952
|
if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
|
|
2894
2953
|
pagingSetting?.setCurrentPage(1);
|
|
2895
2954
|
}
|
|
2896
2955
|
}, [searchTerm, searchSetting?.searchTerm]);
|
|
2897
|
-
return /* @__PURE__ */ (0,
|
|
2898
|
-
/* @__PURE__ */ (0,
|
|
2899
|
-
/* @__PURE__ */ (0,
|
|
2900
|
-
toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0,
|
|
2901
|
-
/* @__PURE__ */ (0,
|
|
2902
|
-
/* @__PURE__ */ (0,
|
|
2903
|
-
return /* @__PURE__ */ (0,
|
|
2956
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react13.Fragment, { children: [
|
|
2957
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "react-table-edit", children: [
|
|
2958
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
|
|
2959
|
+
toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {}),
|
|
2960
|
+
/* @__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: [
|
|
2961
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
|
|
2962
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
|
|
2904
2963
|
return renderHeaderCol(col, index, indexParent);
|
|
2905
2964
|
}) }, indexParent);
|
|
2906
2965
|
}) }),
|
|
2907
|
-
/* @__PURE__ */ (0,
|
|
2908
|
-
/* @__PURE__ */ (0,
|
|
2966
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
|
|
2967
|
+
/* @__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) => {
|
|
2909
2968
|
return renderFooterCol(col, index);
|
|
2910
|
-
}) }) : /* @__PURE__ */ (0,
|
|
2969
|
+
}) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {}) })
|
|
2911
2970
|
] }) }),
|
|
2912
|
-
toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0,
|
|
2971
|
+
toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {})
|
|
2913
2972
|
] }),
|
|
2914
|
-
pagingSetting?.allowPaging ? /* @__PURE__ */ (0,
|
|
2915
|
-
|
|
2973
|
+
pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2974
|
+
PagingComponent,
|
|
2916
2975
|
{
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
pageCount: 5,
|
|
2924
|
-
dropDownChanged: onChangePageSize
|
|
2976
|
+
onChangePage,
|
|
2977
|
+
pageSize: pagingSetting?.pageSize ?? 0,
|
|
2978
|
+
currentPage: pagingSetting?.currentPage ?? 0,
|
|
2979
|
+
pageOptions: [20, 30, 50, 100],
|
|
2980
|
+
totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
|
|
2981
|
+
onChangePageSize
|
|
2925
2982
|
}
|
|
2926
|
-
) : /* @__PURE__ */ (0,
|
|
2983
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {})
|
|
2927
2984
|
] }),
|
|
2928
|
-
/* @__PURE__ */ (0,
|
|
2985
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2929
2986
|
sidebar_setting_column_default,
|
|
2930
2987
|
{
|
|
2931
2988
|
handleSidebar: () => {
|
|
@@ -2941,12 +2998,12 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2941
2998
|
var table_default = TableEdit;
|
|
2942
2999
|
|
|
2943
3000
|
// test-app/src/component/tab-menu/index.tsx
|
|
2944
|
-
var
|
|
2945
|
-
var
|
|
2946
|
-
var
|
|
3001
|
+
var import_becoxy_icons6 = require("becoxy-icons");
|
|
3002
|
+
var import_classnames12 = __toESM(require("classnames"));
|
|
3003
|
+
var import_react14 = require("react");
|
|
2947
3004
|
var import_react_router_dom = require("react-router-dom");
|
|
2948
3005
|
var import_reactstrap9 = require("reactstrap");
|
|
2949
|
-
var
|
|
3006
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2950
3007
|
var TabsMenuComponent = ({
|
|
2951
3008
|
buttonWidth,
|
|
2952
3009
|
tabParent,
|
|
@@ -2958,14 +3015,14 @@ var TabsMenuComponent = ({
|
|
|
2958
3015
|
renderModal
|
|
2959
3016
|
}) => {
|
|
2960
3017
|
const navigate = (0, import_react_router_dom.useNavigate)();
|
|
2961
|
-
const [dataMenu, setDataMenu] = (0,
|
|
2962
|
-
const [openMenu, setOpenMenu] = (0,
|
|
2963
|
-
const [url, setUrl] = (0,
|
|
2964
|
-
const [contentWidth, setContentWidth] = (0,
|
|
2965
|
-
const [componentWidth, setComponentWidth] = (0,
|
|
2966
|
-
const [scrollPosition, setScrollPosition] = (0,
|
|
2967
|
-
const [dataItem, setDataItem] = (0,
|
|
2968
|
-
const [openModal, setOpenModal] = (0,
|
|
3018
|
+
const [dataMenu, setDataMenu] = (0, import_react14.useState)([]);
|
|
3019
|
+
const [openMenu, setOpenMenu] = (0, import_react14.useState)(false);
|
|
3020
|
+
const [url, setUrl] = (0, import_react14.useState)("");
|
|
3021
|
+
const [contentWidth, setContentWidth] = (0, import_react14.useState)(0);
|
|
3022
|
+
const [componentWidth, setComponentWidth] = (0, import_react14.useState)(0);
|
|
3023
|
+
const [scrollPosition, setScrollPosition] = (0, import_react14.useState)(0);
|
|
3024
|
+
const [dataItem, setDataItem] = (0, import_react14.useState)([]);
|
|
3025
|
+
const [openModal, setOpenModal] = (0, import_react14.useState)({});
|
|
2969
3026
|
const handleWindowResize = () => {
|
|
2970
3027
|
const tabEle = document.getElementById(`tab-component-${resourceCode}`);
|
|
2971
3028
|
const tabContent = document.getElementById(`content-component-${resourceCode}`);
|
|
@@ -2974,7 +3031,7 @@ var TabsMenuComponent = ({
|
|
|
2974
3031
|
setContentWidth(tabContent?.offsetWidth ?? 0);
|
|
2975
3032
|
}
|
|
2976
3033
|
};
|
|
2977
|
-
(0,
|
|
3034
|
+
(0, import_react14.useEffect)(() => {
|
|
2978
3035
|
setUrl(window.location.pathname);
|
|
2979
3036
|
window.addEventListener("resize", handleWindowResize);
|
|
2980
3037
|
setTimeout(() => {
|
|
@@ -2990,7 +3047,7 @@ var TabsMenuComponent = ({
|
|
|
2990
3047
|
window.removeEventListener("resize", handleWindowResize);
|
|
2991
3048
|
};
|
|
2992
3049
|
}, []);
|
|
2993
|
-
(0,
|
|
3050
|
+
(0, import_react14.useEffect)(() => {
|
|
2994
3051
|
const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
|
|
2995
3052
|
if (item) {
|
|
2996
3053
|
if (resourceCodeParent) {
|
|
@@ -3021,22 +3078,22 @@ var TabsMenuComponent = ({
|
|
|
3021
3078
|
const handleModal = (name) => {
|
|
3022
3079
|
setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
|
|
3023
3080
|
};
|
|
3024
|
-
return /* @__PURE__ */ (0,
|
|
3081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react14.Fragment, { children: [
|
|
3025
3082
|
renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
|
|
3026
|
-
/* @__PURE__ */ (0,
|
|
3027
|
-
/* @__PURE__ */ (0,
|
|
3083
|
+
/* @__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: [
|
|
3084
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3028
3085
|
"div",
|
|
3029
3086
|
{
|
|
3030
3087
|
onClick: () => handleScroll(-200),
|
|
3031
|
-
className: (0,
|
|
3032
|
-
children: /* @__PURE__ */ (0,
|
|
3088
|
+
className: (0, import_classnames12.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
3089
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_becoxy_icons6.ChevronLeft, {})
|
|
3033
3090
|
}
|
|
3034
3091
|
),
|
|
3035
|
-
/* @__PURE__ */ (0,
|
|
3092
|
+
/* @__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) => {
|
|
3036
3093
|
if (item?.resAttributes?.IS_MENU === "1") {
|
|
3037
|
-
return /* @__PURE__ */ (0,
|
|
3038
|
-
/* @__PURE__ */ (0,
|
|
3039
|
-
/* @__PURE__ */ (0,
|
|
3094
|
+
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: [
|
|
3095
|
+
/* @__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 }) }),
|
|
3096
|
+
/* @__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)(
|
|
3040
3097
|
import_reactstrap9.DropdownItem,
|
|
3041
3098
|
{
|
|
3042
3099
|
style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
|
|
@@ -3053,23 +3110,23 @@ var TabsMenuComponent = ({
|
|
|
3053
3110
|
)) })
|
|
3054
3111
|
] }, item.code);
|
|
3055
3112
|
} else {
|
|
3056
|
-
return /* @__PURE__ */ (0,
|
|
3113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3057
3114
|
import_react_router_dom.Link,
|
|
3058
3115
|
{
|
|
3059
3116
|
to: item.url,
|
|
3060
|
-
className: (0,
|
|
3117
|
+
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("/"))) }),
|
|
3061
3118
|
children: item.name
|
|
3062
3119
|
},
|
|
3063
3120
|
item.code
|
|
3064
3121
|
);
|
|
3065
3122
|
}
|
|
3066
3123
|
}) }) }),
|
|
3067
|
-
/* @__PURE__ */ (0,
|
|
3124
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3068
3125
|
"div",
|
|
3069
3126
|
{
|
|
3070
3127
|
onClick: () => handleScroll(200),
|
|
3071
|
-
className: (0,
|
|
3072
|
-
children: /* @__PURE__ */ (0,
|
|
3128
|
+
className: (0, import_classnames12.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
|
|
3129
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_becoxy_icons6.ChevronRight, {})
|
|
3073
3130
|
}
|
|
3074
3131
|
)
|
|
3075
3132
|
] })
|