react-table-edit 0.5.2 → 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 +242 -192
- package/dist/index.mjs +217 -167
- 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,17 +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
2737
|
style: { justifyContent: col.textAlign ?? "left" },
|
|
2686
|
-
className: (0,
|
|
2687
|
-
children: /* @__PURE__ */ (0,
|
|
2738
|
+
className: (0, import_classnames11.default)("r-headercell-div"),
|
|
2739
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2688
2740
|
import_reactstrap8.Input,
|
|
2689
2741
|
{
|
|
2690
2742
|
checked: totalCount > 0 && selectedRows?.length >= totalCount,
|
|
2691
2743
|
type: "checkbox",
|
|
2692
|
-
className: (0,
|
|
2744
|
+
className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
|
|
2693
2745
|
style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
|
|
2694
2746
|
onChange: (e) => {
|
|
2695
2747
|
if (selectEnable) {
|
|
@@ -2709,15 +2761,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2709
2761
|
}
|
|
2710
2762
|
) }, `header-${indexCol}`);
|
|
2711
2763
|
} else if (col.field === "#") {
|
|
2712
|
-
return /* @__PURE__ */ (0,
|
|
2713
|
-
|
|
2764
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2765
|
+
import_react13.Fragment,
|
|
2714
2766
|
{
|
|
2715
|
-
children: col.visible !== false && /* @__PURE__ */ (0,
|
|
2767
|
+
children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2716
2768
|
"th",
|
|
2717
2769
|
{
|
|
2718
2770
|
rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
|
|
2719
2771
|
colSpan: col.columns?.length ?? 1,
|
|
2720
|
-
className: (0,
|
|
2772
|
+
className: (0, import_classnames11.default)(
|
|
2721
2773
|
`r-headercell fix-${col.fixedType}`,
|
|
2722
2774
|
{ "cell-fixed": col.fixedType }
|
|
2723
2775
|
),
|
|
@@ -2729,7 +2781,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2729
2781
|
left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
|
|
2730
2782
|
right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0
|
|
2731
2783
|
},
|
|
2732
|
-
children: /* @__PURE__ */ (0,
|
|
2784
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2733
2785
|
"div",
|
|
2734
2786
|
{
|
|
2735
2787
|
title: t(col.headerText ?? ""),
|
|
@@ -2744,15 +2796,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2744
2796
|
`header-${indexCol}`
|
|
2745
2797
|
);
|
|
2746
2798
|
} else {
|
|
2747
|
-
return /* @__PURE__ */ (0,
|
|
2748
|
-
|
|
2799
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2800
|
+
import_react13.Fragment,
|
|
2749
2801
|
{
|
|
2750
|
-
children: col.visible !== false && /* @__PURE__ */ (0,
|
|
2802
|
+
children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2751
2803
|
"th",
|
|
2752
2804
|
{
|
|
2753
2805
|
rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
|
|
2754
2806
|
colSpan: col.columns?.length ?? 1,
|
|
2755
|
-
className: (0,
|
|
2807
|
+
className: (0, import_classnames11.default)(
|
|
2756
2808
|
`r-headercell fix-${col.fixedType}`,
|
|
2757
2809
|
{ "cell-fixed": col.fixedType }
|
|
2758
2810
|
),
|
|
@@ -2764,7 +2816,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2764
2816
|
right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
|
|
2765
2817
|
maxWidth: col.maxWidth
|
|
2766
2818
|
},
|
|
2767
|
-
children: /* @__PURE__ */ (0,
|
|
2819
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2768
2820
|
"div",
|
|
2769
2821
|
{
|
|
2770
2822
|
role: "textbox",
|
|
@@ -2782,10 +2834,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2782
2834
|
}
|
|
2783
2835
|
};
|
|
2784
2836
|
const renderFooterCol = (col, indexCol) => {
|
|
2785
|
-
return /* @__PURE__ */ (0,
|
|
2837
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2786
2838
|
"td",
|
|
2787
2839
|
{
|
|
2788
|
-
className: (0,
|
|
2840
|
+
className: (0, import_classnames11.default)(
|
|
2789
2841
|
`p-0 px-50 r-footer fix-${col.fixedType}`,
|
|
2790
2842
|
{ "cell-fixed": col.fixedType }
|
|
2791
2843
|
),
|
|
@@ -2797,56 +2849,56 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2797
2849
|
maxWidth: col.maxWidth,
|
|
2798
2850
|
textAlign: col.textAlign ? col.textAlign : "left"
|
|
2799
2851
|
},
|
|
2800
|
-
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) {
|
|
2801
2853
|
return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
|
|
2802
2854
|
}, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
|
|
2803
2855
|
}
|
|
2804
2856
|
) }, `summarycell-${indexCol}`);
|
|
2805
2857
|
};
|
|
2806
2858
|
const renderToolbarTop = () => {
|
|
2807
|
-
return /* @__PURE__ */ (0,
|
|
2808
|
-
/* @__PURE__ */ (0,
|
|
2809
|
-
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}`) : "";
|
|
2810
2862
|
}) }),
|
|
2811
|
-
/* @__PURE__ */ (0,
|
|
2812
|
-
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}`) : "";
|
|
2813
2865
|
}) }),
|
|
2814
|
-
/* @__PURE__ */ (0,
|
|
2815
|
-
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}`) : "";
|
|
2816
2868
|
}) })
|
|
2817
2869
|
] }) });
|
|
2818
2870
|
};
|
|
2819
2871
|
const renderToolbarBottom = () => {
|
|
2820
|
-
return /* @__PURE__ */ (0,
|
|
2821
|
-
/* @__PURE__ */ (0,
|
|
2822
|
-
/* @__PURE__ */ (0,
|
|
2823
|
-
(indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0,
|
|
2824
|
-
/* @__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: () => {
|
|
2825
2877
|
handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
|
|
2826
2878
|
}, className: "d-flex", children: t("Duplicate") }) }),
|
|
2827
|
-
/* @__PURE__ */ (0,
|
|
2828
|
-
/* @__PURE__ */ (0,
|
|
2829
|
-
] }) : /* @__PURE__ */ (0,
|
|
2830
|
-
/* @__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") }) }),
|
|
2831
2883
|
toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
2832
|
-
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}`) : "";
|
|
2833
2885
|
})
|
|
2834
2886
|
] }),
|
|
2835
|
-
/* @__PURE__ */ (0,
|
|
2836
|
-
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}`) : "";
|
|
2837
2889
|
}) }),
|
|
2838
|
-
/* @__PURE__ */ (0,
|
|
2890
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-toolbar-right", children: [
|
|
2839
2891
|
toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
2840
|
-
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}`) : "";
|
|
2841
2893
|
}),
|
|
2842
|
-
/* @__PURE__ */ (0,
|
|
2843
|
-
/* @__PURE__ */ (0,
|
|
2844
|
-
/* @__PURE__ */ (0,
|
|
2845
|
-
/* @__PURE__ */ (0,
|
|
2846
|
-
/* @__PURE__ */ (0,
|
|
2847
|
-
/* @__PURE__ */ (0,
|
|
2848
|
-
/* @__PURE__ */ (0,
|
|
2849
|
-
/* @__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" })
|
|
2850
2902
|
] }) })
|
|
2851
2903
|
] }) })
|
|
2852
2904
|
] })
|
|
@@ -2875,10 +2927,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2875
2927
|
const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
|
|
2876
2928
|
if (flagDisplay) {
|
|
2877
2929
|
countDisplay++;
|
|
2878
|
-
return /* @__PURE__ */ (0,
|
|
2930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2879
2931
|
"tr",
|
|
2880
2932
|
{
|
|
2881
|
-
className: (0,
|
|
2933
|
+
className: (0, import_classnames11.default)("r-row", { "fisrt-row": countDisplay === 0 }),
|
|
2882
2934
|
children: contentColumns.map((col, indexCol) => {
|
|
2883
2935
|
return renderContentCol(col, row, indexRow, indexCol, isSelected);
|
|
2884
2936
|
})
|
|
@@ -2889,43 +2941,41 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2889
2941
|
}
|
|
2890
2942
|
});
|
|
2891
2943
|
};
|
|
2892
|
-
(0,
|
|
2944
|
+
(0, import_react13.useEffect)(() => {
|
|
2893
2945
|
if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
|
|
2894
2946
|
pagingSetting?.setCurrentPage(1);
|
|
2895
2947
|
}
|
|
2896
2948
|
}, [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,
|
|
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) => {
|
|
2904
2956
|
return renderHeaderCol(col, index, indexParent);
|
|
2905
2957
|
}) }, indexParent);
|
|
2906
2958
|
}) }),
|
|
2907
|
-
/* @__PURE__ */ (0,
|
|
2908
|
-
/* @__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) => {
|
|
2909
2961
|
return renderFooterCol(col, index);
|
|
2910
|
-
}) }) : /* @__PURE__ */ (0,
|
|
2962
|
+
}) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {}) })
|
|
2911
2963
|
] }) }),
|
|
2912
|
-
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, {})
|
|
2913
2965
|
] }),
|
|
2914
|
-
pagingSetting?.allowPaging ? /* @__PURE__ */ (0,
|
|
2915
|
-
|
|
2966
|
+
pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2967
|
+
PagingComponent,
|
|
2916
2968
|
{
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
pageCount: 5,
|
|
2924
|
-
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
|
|
2925
2975
|
}
|
|
2926
|
-
) : /* @__PURE__ */ (0,
|
|
2976
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {})
|
|
2927
2977
|
] }),
|
|
2928
|
-
/* @__PURE__ */ (0,
|
|
2978
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2929
2979
|
sidebar_setting_column_default,
|
|
2930
2980
|
{
|
|
2931
2981
|
handleSidebar: () => {
|
|
@@ -2941,12 +2991,12 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
|
|
|
2941
2991
|
var table_default = TableEdit;
|
|
2942
2992
|
|
|
2943
2993
|
// test-app/src/component/tab-menu/index.tsx
|
|
2944
|
-
var
|
|
2945
|
-
var
|
|
2946
|
-
var
|
|
2994
|
+
var import_becoxy_icons6 = require("becoxy-icons");
|
|
2995
|
+
var import_classnames12 = __toESM(require("classnames"));
|
|
2996
|
+
var import_react14 = require("react");
|
|
2947
2997
|
var import_react_router_dom = require("react-router-dom");
|
|
2948
2998
|
var import_reactstrap9 = require("reactstrap");
|
|
2949
|
-
var
|
|
2999
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2950
3000
|
var TabsMenuComponent = ({
|
|
2951
3001
|
buttonWidth,
|
|
2952
3002
|
tabParent,
|
|
@@ -2958,14 +3008,14 @@ var TabsMenuComponent = ({
|
|
|
2958
3008
|
renderModal
|
|
2959
3009
|
}) => {
|
|
2960
3010
|
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,
|
|
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)({});
|
|
2969
3019
|
const handleWindowResize = () => {
|
|
2970
3020
|
const tabEle = document.getElementById(`tab-component-${resourceCode}`);
|
|
2971
3021
|
const tabContent = document.getElementById(`content-component-${resourceCode}`);
|
|
@@ -2974,7 +3024,7 @@ var TabsMenuComponent = ({
|
|
|
2974
3024
|
setContentWidth(tabContent?.offsetWidth ?? 0);
|
|
2975
3025
|
}
|
|
2976
3026
|
};
|
|
2977
|
-
(0,
|
|
3027
|
+
(0, import_react14.useEffect)(() => {
|
|
2978
3028
|
setUrl(window.location.pathname);
|
|
2979
3029
|
window.addEventListener("resize", handleWindowResize);
|
|
2980
3030
|
setTimeout(() => {
|
|
@@ -2990,7 +3040,7 @@ var TabsMenuComponent = ({
|
|
|
2990
3040
|
window.removeEventListener("resize", handleWindowResize);
|
|
2991
3041
|
};
|
|
2992
3042
|
}, []);
|
|
2993
|
-
(0,
|
|
3043
|
+
(0, import_react14.useEffect)(() => {
|
|
2994
3044
|
const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
|
|
2995
3045
|
if (item) {
|
|
2996
3046
|
if (resourceCodeParent) {
|
|
@@ -3021,22 +3071,22 @@ var TabsMenuComponent = ({
|
|
|
3021
3071
|
const handleModal = (name) => {
|
|
3022
3072
|
setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
|
|
3023
3073
|
};
|
|
3024
|
-
return /* @__PURE__ */ (0,
|
|
3074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react14.Fragment, { children: [
|
|
3025
3075
|
renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
|
|
3026
|
-
/* @__PURE__ */ (0,
|
|
3027
|
-
/* @__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)(
|
|
3028
3078
|
"div",
|
|
3029
3079
|
{
|
|
3030
3080
|
onClick: () => handleScroll(-200),
|
|
3031
|
-
className: (0,
|
|
3032
|
-
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, {})
|
|
3033
3083
|
}
|
|
3034
3084
|
),
|
|
3035
|
-
/* @__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) => {
|
|
3036
3086
|
if (item?.resAttributes?.IS_MENU === "1") {
|
|
3037
|
-
return /* @__PURE__ */ (0,
|
|
3038
|
-
/* @__PURE__ */ (0,
|
|
3039
|
-
/* @__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)(
|
|
3040
3090
|
import_reactstrap9.DropdownItem,
|
|
3041
3091
|
{
|
|
3042
3092
|
style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
|
|
@@ -3053,23 +3103,23 @@ var TabsMenuComponent = ({
|
|
|
3053
3103
|
)) })
|
|
3054
3104
|
] }, item.code);
|
|
3055
3105
|
} else {
|
|
3056
|
-
return /* @__PURE__ */ (0,
|
|
3106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3057
3107
|
import_react_router_dom.Link,
|
|
3058
3108
|
{
|
|
3059
3109
|
to: item.url,
|
|
3060
|
-
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("/"))) }),
|
|
3061
3111
|
children: item.name
|
|
3062
3112
|
},
|
|
3063
3113
|
item.code
|
|
3064
3114
|
);
|
|
3065
3115
|
}
|
|
3066
3116
|
}) }) }),
|
|
3067
|
-
/* @__PURE__ */ (0,
|
|
3117
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3068
3118
|
"div",
|
|
3069
3119
|
{
|
|
3070
3120
|
onClick: () => handleScroll(200),
|
|
3071
|
-
className: (0,
|
|
3072
|
-
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, {})
|
|
3073
3123
|
}
|
|
3074
3124
|
)
|
|
3075
3125
|
] })
|