es-grid-template 1.8.95 → 1.8.97
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/es/group-component/hook/utils.d.ts +3 -3
- package/es/table-component/TableContainerEdit.js +234 -9
- package/es/table-component/body/TableBodyRow.js +9 -8
- package/es/table-component/table/Grid.js +1 -1
- package/es/table-component/table/TableWrapper.js +0 -18
- package/lib/table-component/TableContainerEdit.js +234 -9
- package/lib/table-component/body/TableBodyRow.js +9 -8
- package/lib/table-component/table/Grid.js +1 -1
- package/lib/table-component/table/TableWrapper.js +0 -18
- package/package.json +1 -1
|
@@ -208,9 +208,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
|
|
|
208
208
|
ellipsis?: boolean;
|
|
209
209
|
allowResizing?: boolean;
|
|
210
210
|
allowSelection?: boolean | ((rowData: RecordType) => boolean);
|
|
211
|
-
onCellStyles?: Omit<CSSProperties, "position" | "
|
|
212
|
-
onCellHeaderStyles?: Omit<CSSProperties, "position" | "
|
|
213
|
-
onCellFooterStyles?: Omit<CSSProperties, "position" | "
|
|
211
|
+
onCellStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
|
|
212
|
+
onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
|
|
213
|
+
onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
|
|
214
214
|
sumGroup?: boolean;
|
|
215
215
|
getValue?: (row: any, rowIndex: number) => any;
|
|
216
216
|
getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
|
|
@@ -1215,6 +1215,7 @@ const TableContainerEdit = props => {
|
|
|
1215
1215
|
}
|
|
1216
1216
|
};
|
|
1217
1217
|
const toolbarItemsBottom = React.useMemo(() => {
|
|
1218
|
+
// Chưa có dòng| ô được chọn
|
|
1218
1219
|
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1219
1220
|
return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1220
1221
|
if (item.key === 'ADD') {
|
|
@@ -1433,6 +1434,226 @@ const TableContainerEdit = props => {
|
|
|
1433
1434
|
};
|
|
1434
1435
|
});
|
|
1435
1436
|
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1437
|
+
const toolbarItemsTop = React.useMemo(() => {
|
|
1438
|
+
// Chưa có dòng| ô được chọn
|
|
1439
|
+
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1440
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1441
|
+
if (item.key === 'ADD') {
|
|
1442
|
+
return {
|
|
1443
|
+
...item,
|
|
1444
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
|
|
1445
|
+
template: () => {
|
|
1446
|
+
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
|
|
1447
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1448
|
+
}, /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1449
|
+
overlayClassName: 'be-popup-container',
|
|
1450
|
+
trigger: ['click'],
|
|
1451
|
+
style: {
|
|
1452
|
+
color: '#28c76f',
|
|
1453
|
+
borderColor: '#28c76f'
|
|
1454
|
+
},
|
|
1455
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1456
|
+
menu: {
|
|
1457
|
+
items: itemsAdd,
|
|
1458
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1459
|
+
}
|
|
1460
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1461
|
+
style: {
|
|
1462
|
+
color: '#28c76f'
|
|
1463
|
+
},
|
|
1464
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1465
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1466
|
+
}
|
|
1467
|
+
};
|
|
1468
|
+
}
|
|
1469
|
+
if (item.key === 'DELETE') {
|
|
1470
|
+
return {
|
|
1471
|
+
...item,
|
|
1472
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
|
|
1473
|
+
template: () => {
|
|
1474
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1475
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1476
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1477
|
+
style: {
|
|
1478
|
+
color: '#eb4619',
|
|
1479
|
+
borderColor: '#eb4619'
|
|
1480
|
+
},
|
|
1481
|
+
variant: 'outlined',
|
|
1482
|
+
onClick: () => handleDeleteAll(item),
|
|
1483
|
+
className: "d-flex toolbar-button"
|
|
1484
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1485
|
+
}
|
|
1486
|
+
};
|
|
1487
|
+
}
|
|
1488
|
+
return {
|
|
1489
|
+
...item
|
|
1490
|
+
};
|
|
1491
|
+
});
|
|
1492
|
+
}
|
|
1493
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false).map(item => {
|
|
1494
|
+
if (item.key === 'ADD') {
|
|
1495
|
+
return {
|
|
1496
|
+
...item,
|
|
1497
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
|
|
1498
|
+
template: () => {
|
|
1499
|
+
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
|
|
1500
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1501
|
+
}, /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1502
|
+
title: "",
|
|
1503
|
+
overlayClassName: 'be-popup-container',
|
|
1504
|
+
style: {
|
|
1505
|
+
color: '#28c76f',
|
|
1506
|
+
borderColor: '#28c76f'
|
|
1507
|
+
},
|
|
1508
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1509
|
+
menu: {
|
|
1510
|
+
items: itemsAdd,
|
|
1511
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1512
|
+
}
|
|
1513
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1514
|
+
style: {
|
|
1515
|
+
color: '#28c76f'
|
|
1516
|
+
},
|
|
1517
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1518
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1519
|
+
}
|
|
1520
|
+
};
|
|
1521
|
+
}
|
|
1522
|
+
if (item.key === 'DUPLICATE') {
|
|
1523
|
+
return {
|
|
1524
|
+
...item,
|
|
1525
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate',
|
|
1526
|
+
template: () => {
|
|
1527
|
+
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
1528
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1529
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1530
|
+
style: {
|
|
1531
|
+
color: '#28c76f',
|
|
1532
|
+
borderColor: '#28c76f'
|
|
1533
|
+
},
|
|
1534
|
+
variant: 'outlined',
|
|
1535
|
+
onClick: handleDuplicate,
|
|
1536
|
+
className: "d-flex toolbar-button"
|
|
1537
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
|
|
1538
|
+
}
|
|
1539
|
+
};
|
|
1540
|
+
}
|
|
1541
|
+
if (item.key === 'INSERT_BEFORE') {
|
|
1542
|
+
return {
|
|
1543
|
+
...item,
|
|
1544
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before',
|
|
1545
|
+
template: () => {
|
|
1546
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1547
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1548
|
+
}, /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1549
|
+
overlayClassName: 'be-popup-container',
|
|
1550
|
+
style: {
|
|
1551
|
+
color: '#28c76f',
|
|
1552
|
+
borderColor: '#28c76f'
|
|
1553
|
+
},
|
|
1554
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1555
|
+
menu: {
|
|
1556
|
+
items: itemsAdd,
|
|
1557
|
+
onClick: e => handleInsertBefore(item, Number(e.key))
|
|
1558
|
+
}
|
|
1559
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1560
|
+
style: {
|
|
1561
|
+
color: '#28c76f'
|
|
1562
|
+
},
|
|
1563
|
+
onClick: () => handleInsertBefore(item, 1)
|
|
1564
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
|
|
1565
|
+
}
|
|
1566
|
+
};
|
|
1567
|
+
}
|
|
1568
|
+
if (item.key === 'INSERT_AFTER') {
|
|
1569
|
+
return {
|
|
1570
|
+
...item,
|
|
1571
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after',
|
|
1572
|
+
template: () => {
|
|
1573
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1574
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1575
|
+
}, /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1576
|
+
overlayClassName: 'be-popup-container',
|
|
1577
|
+
style: {
|
|
1578
|
+
color: '#28c76f',
|
|
1579
|
+
borderColor: '#28c76f'
|
|
1580
|
+
},
|
|
1581
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1582
|
+
menu: {
|
|
1583
|
+
items: itemsAdd,
|
|
1584
|
+
onClick: e => handleInsertAfter(item, Number(e.key))
|
|
1585
|
+
}
|
|
1586
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1587
|
+
style: {
|
|
1588
|
+
color: '#28c76f'
|
|
1589
|
+
},
|
|
1590
|
+
onClick: () => handleInsertAfter(item, 1)
|
|
1591
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
|
|
1592
|
+
}
|
|
1593
|
+
};
|
|
1594
|
+
}
|
|
1595
|
+
if (item.key === 'INSERT_CHILDREN') {
|
|
1596
|
+
return {
|
|
1597
|
+
...item,
|
|
1598
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children',
|
|
1599
|
+
template: () => {
|
|
1600
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1601
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1602
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1603
|
+
style: {
|
|
1604
|
+
color: '#28c76f',
|
|
1605
|
+
borderColor: '#28c76f'
|
|
1606
|
+
},
|
|
1607
|
+
variant: 'outlined',
|
|
1608
|
+
onClick: () => handleInsertChild(item),
|
|
1609
|
+
className: "d-flex toolbar-button"
|
|
1610
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
|
|
1611
|
+
}
|
|
1612
|
+
};
|
|
1613
|
+
}
|
|
1614
|
+
if (item.key === 'DELETE') {
|
|
1615
|
+
return {
|
|
1616
|
+
...item,
|
|
1617
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
|
|
1618
|
+
template: () => {
|
|
1619
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1620
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1621
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1622
|
+
style: {
|
|
1623
|
+
color: '#eb4619',
|
|
1624
|
+
borderColor: '#eb4619'
|
|
1625
|
+
},
|
|
1626
|
+
variant: 'outlined',
|
|
1627
|
+
onClick: handleDeleteAll,
|
|
1628
|
+
className: "d-flex toolbar-button"
|
|
1629
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1630
|
+
}
|
|
1631
|
+
};
|
|
1632
|
+
}
|
|
1633
|
+
if (item.key === 'DELETE_ROWS') {
|
|
1634
|
+
return {
|
|
1635
|
+
...item,
|
|
1636
|
+
label: t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`,
|
|
1637
|
+
template: () => {
|
|
1638
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1639
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1640
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1641
|
+
style: {
|
|
1642
|
+
color: '#eb4619',
|
|
1643
|
+
borderColor: '#eb4619'
|
|
1644
|
+
},
|
|
1645
|
+
variant: 'outlined',
|
|
1646
|
+
onClick: () => handleDeleteRows(item),
|
|
1647
|
+
className: "d-flex toolbar-button"
|
|
1648
|
+
}, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
|
|
1649
|
+
}
|
|
1650
|
+
};
|
|
1651
|
+
}
|
|
1652
|
+
return {
|
|
1653
|
+
...item
|
|
1654
|
+
};
|
|
1655
|
+
});
|
|
1656
|
+
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1436
1657
|
const triggerCommandClick = args => {
|
|
1437
1658
|
const {
|
|
1438
1659
|
id: idCommand,
|
|
@@ -1645,10 +1866,20 @@ const TableContainerEdit = props => {
|
|
|
1645
1866
|
flex: 1,
|
|
1646
1867
|
overflow: 'hidden'
|
|
1647
1868
|
}
|
|
1869
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1870
|
+
className: classNames('ui-rc-toolbar-bottom', {
|
|
1871
|
+
'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
|
|
1872
|
+
})
|
|
1648
1873
|
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1874
|
+
style: {
|
|
1875
|
+
width: '100%'
|
|
1876
|
+
},
|
|
1877
|
+
items: toolbarItemsTop ?? [],
|
|
1878
|
+
mode: 'scroll',
|
|
1879
|
+
onClick: ({}) => {
|
|
1880
|
+
setEditingKey('');
|
|
1881
|
+
}
|
|
1882
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
1652
1883
|
style: {
|
|
1653
1884
|
display: 'flex',
|
|
1654
1885
|
justifyContent: 'space-between',
|
|
@@ -1790,12 +2021,6 @@ const TableContainerEdit = props => {
|
|
|
1790
2021
|
className: classNames('ui-rc-toolbar-bottom', {
|
|
1791
2022
|
'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
|
|
1792
2023
|
})
|
|
1793
|
-
// style={{ border: '0 1px 1px 1px solid #e0e0e0' }}
|
|
1794
|
-
// style={{
|
|
1795
|
-
// borderBottom: '1px solid #e0e0e0',
|
|
1796
|
-
// borderRight: '1px solid #e0e0e0',
|
|
1797
|
-
// borderLeft: '1px solid #e0e0e0'
|
|
1798
|
-
// }}
|
|
1799
2024
|
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
1800
2025
|
style: {
|
|
1801
2026
|
width: '100%'
|
|
@@ -76,14 +76,15 @@ const TableBodyRow = ({
|
|
|
76
76
|
});
|
|
77
77
|
},
|
|
78
78
|
onContextMenu: e => {
|
|
79
|
-
if (contextMenuItems && contextMenuItems.length) {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
79
|
+
// if (contextMenuItems && contextMenuItems.length) {
|
|
80
|
+
|
|
81
|
+
const cell = e.target.closest('[data-col-key]');
|
|
82
|
+
const colKey = cell?.getAttribute('data-col-key');
|
|
83
|
+
onContextMenu?.({
|
|
84
|
+
rowData: row.original,
|
|
85
|
+
field: colKey
|
|
86
|
+
})(e);
|
|
87
|
+
// }
|
|
87
88
|
}
|
|
88
89
|
}, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
|
|
89
90
|
const cell = row.getVisibleCells().find(c => c.column.id === column.id);
|
|
@@ -157,7 +157,7 @@ const Grid = props => {
|
|
|
157
157
|
getGroupedRowModel: getGroupedRowModel(),
|
|
158
158
|
// onExpandedChange: setExpanded,
|
|
159
159
|
getRowCanExpand: row => {
|
|
160
|
-
return Array.isArray(row.original.children);
|
|
160
|
+
return Array.isArray(row.original.children) && row.original.children.length > 0;
|
|
161
161
|
},
|
|
162
162
|
getExpandedRowModel: getExpandedRowModel(),
|
|
163
163
|
getPaginationRowModel: pagination && !infiniteScroll ? getPaginationRowModel() : undefined,
|
|
@@ -153,24 +153,6 @@ const TableWrapper = props => {
|
|
|
153
153
|
y
|
|
154
154
|
}));
|
|
155
155
|
}, 100);
|
|
156
|
-
|
|
157
|
-
// if (!menuVisible) {
|
|
158
|
-
|
|
159
|
-
// document.addEventListener(`click`, function onClickOutside(e) {
|
|
160
|
-
// const element: any = e.target
|
|
161
|
-
// const menuContainer = document.querySelector('.popup-context-menu')
|
|
162
|
-
|
|
163
|
-
// const isInsideContainer = element.closest('.popup-context-menu') && menuContainer
|
|
164
|
-
|
|
165
|
-
// if (isInsideContainer) {
|
|
166
|
-
// return
|
|
167
|
-
// }
|
|
168
|
-
// setMenuVisible(false)
|
|
169
|
-
// setPosition(prevState => ({ ...prevState, x: undefined, y: undefined }))
|
|
170
|
-
// document.removeEventListener(`click`, onClickOutside)
|
|
171
|
-
// })
|
|
172
|
-
|
|
173
|
-
// }
|
|
174
156
|
};
|
|
175
157
|
React.useEffect(() => {
|
|
176
158
|
const handleClickOutside = event => {
|
|
@@ -1222,6 +1222,7 @@ const TableContainerEdit = props => {
|
|
|
1222
1222
|
}
|
|
1223
1223
|
};
|
|
1224
1224
|
const toolbarItemsBottom = _react.default.useMemo(() => {
|
|
1225
|
+
// Chưa có dòng| ô được chọn
|
|
1225
1226
|
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1226
1227
|
return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1227
1228
|
if (item.key === 'ADD') {
|
|
@@ -1440,6 +1441,226 @@ const TableContainerEdit = props => {
|
|
|
1440
1441
|
};
|
|
1441
1442
|
});
|
|
1442
1443
|
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1444
|
+
const toolbarItemsTop = _react.default.useMemo(() => {
|
|
1445
|
+
// Chưa có dòng| ô được chọn
|
|
1446
|
+
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1447
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1448
|
+
if (item.key === 'ADD') {
|
|
1449
|
+
return {
|
|
1450
|
+
...item,
|
|
1451
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
|
|
1452
|
+
template: () => {
|
|
1453
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
|
|
1454
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1455
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1456
|
+
overlayClassName: 'be-popup-container',
|
|
1457
|
+
trigger: ['click'],
|
|
1458
|
+
style: {
|
|
1459
|
+
color: '#28c76f',
|
|
1460
|
+
borderColor: '#28c76f'
|
|
1461
|
+
},
|
|
1462
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1463
|
+
menu: {
|
|
1464
|
+
items: itemsAdd,
|
|
1465
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1466
|
+
}
|
|
1467
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1468
|
+
style: {
|
|
1469
|
+
color: '#28c76f'
|
|
1470
|
+
},
|
|
1471
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1472
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1473
|
+
}
|
|
1474
|
+
};
|
|
1475
|
+
}
|
|
1476
|
+
if (item.key === 'DELETE') {
|
|
1477
|
+
return {
|
|
1478
|
+
...item,
|
|
1479
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
|
|
1480
|
+
template: () => {
|
|
1481
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1482
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1483
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1484
|
+
style: {
|
|
1485
|
+
color: '#eb4619',
|
|
1486
|
+
borderColor: '#eb4619'
|
|
1487
|
+
},
|
|
1488
|
+
variant: 'outlined',
|
|
1489
|
+
onClick: () => handleDeleteAll(item),
|
|
1490
|
+
className: "d-flex toolbar-button"
|
|
1491
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1492
|
+
}
|
|
1493
|
+
};
|
|
1494
|
+
}
|
|
1495
|
+
return {
|
|
1496
|
+
...item
|
|
1497
|
+
};
|
|
1498
|
+
});
|
|
1499
|
+
}
|
|
1500
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false).map(item => {
|
|
1501
|
+
if (item.key === 'ADD') {
|
|
1502
|
+
return {
|
|
1503
|
+
...item,
|
|
1504
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
|
|
1505
|
+
template: () => {
|
|
1506
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
|
|
1507
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1508
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1509
|
+
title: "",
|
|
1510
|
+
overlayClassName: 'be-popup-container',
|
|
1511
|
+
style: {
|
|
1512
|
+
color: '#28c76f',
|
|
1513
|
+
borderColor: '#28c76f'
|
|
1514
|
+
},
|
|
1515
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1516
|
+
menu: {
|
|
1517
|
+
items: itemsAdd,
|
|
1518
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1519
|
+
}
|
|
1520
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1521
|
+
style: {
|
|
1522
|
+
color: '#28c76f'
|
|
1523
|
+
},
|
|
1524
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1525
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1526
|
+
}
|
|
1527
|
+
};
|
|
1528
|
+
}
|
|
1529
|
+
if (item.key === 'DUPLICATE') {
|
|
1530
|
+
return {
|
|
1531
|
+
...item,
|
|
1532
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate',
|
|
1533
|
+
template: () => {
|
|
1534
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
1535
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1536
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1537
|
+
style: {
|
|
1538
|
+
color: '#28c76f',
|
|
1539
|
+
borderColor: '#28c76f'
|
|
1540
|
+
},
|
|
1541
|
+
variant: 'outlined',
|
|
1542
|
+
onClick: handleDuplicate,
|
|
1543
|
+
className: "d-flex toolbar-button"
|
|
1544
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
|
|
1545
|
+
}
|
|
1546
|
+
};
|
|
1547
|
+
}
|
|
1548
|
+
if (item.key === 'INSERT_BEFORE') {
|
|
1549
|
+
return {
|
|
1550
|
+
...item,
|
|
1551
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before',
|
|
1552
|
+
template: () => {
|
|
1553
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1554
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1555
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1556
|
+
overlayClassName: 'be-popup-container',
|
|
1557
|
+
style: {
|
|
1558
|
+
color: '#28c76f',
|
|
1559
|
+
borderColor: '#28c76f'
|
|
1560
|
+
},
|
|
1561
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1562
|
+
menu: {
|
|
1563
|
+
items: itemsAdd,
|
|
1564
|
+
onClick: e => handleInsertBefore(item, Number(e.key))
|
|
1565
|
+
}
|
|
1566
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1567
|
+
style: {
|
|
1568
|
+
color: '#28c76f'
|
|
1569
|
+
},
|
|
1570
|
+
onClick: () => handleInsertBefore(item, 1)
|
|
1571
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
|
|
1572
|
+
}
|
|
1573
|
+
};
|
|
1574
|
+
}
|
|
1575
|
+
if (item.key === 'INSERT_AFTER') {
|
|
1576
|
+
return {
|
|
1577
|
+
...item,
|
|
1578
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after',
|
|
1579
|
+
template: () => {
|
|
1580
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1581
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1582
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1583
|
+
overlayClassName: 'be-popup-container',
|
|
1584
|
+
style: {
|
|
1585
|
+
color: '#28c76f',
|
|
1586
|
+
borderColor: '#28c76f'
|
|
1587
|
+
},
|
|
1588
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1589
|
+
menu: {
|
|
1590
|
+
items: itemsAdd,
|
|
1591
|
+
onClick: e => handleInsertAfter(item, Number(e.key))
|
|
1592
|
+
}
|
|
1593
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1594
|
+
style: {
|
|
1595
|
+
color: '#28c76f'
|
|
1596
|
+
},
|
|
1597
|
+
onClick: () => handleInsertAfter(item, 1)
|
|
1598
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
|
|
1599
|
+
}
|
|
1600
|
+
};
|
|
1601
|
+
}
|
|
1602
|
+
if (item.key === 'INSERT_CHILDREN') {
|
|
1603
|
+
return {
|
|
1604
|
+
...item,
|
|
1605
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children',
|
|
1606
|
+
template: () => {
|
|
1607
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1608
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1609
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1610
|
+
style: {
|
|
1611
|
+
color: '#28c76f',
|
|
1612
|
+
borderColor: '#28c76f'
|
|
1613
|
+
},
|
|
1614
|
+
variant: 'outlined',
|
|
1615
|
+
onClick: () => handleInsertChild(item),
|
|
1616
|
+
className: "d-flex toolbar-button"
|
|
1617
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
|
|
1618
|
+
}
|
|
1619
|
+
};
|
|
1620
|
+
}
|
|
1621
|
+
if (item.key === 'DELETE') {
|
|
1622
|
+
return {
|
|
1623
|
+
...item,
|
|
1624
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
|
|
1625
|
+
template: () => {
|
|
1626
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1627
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1628
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1629
|
+
style: {
|
|
1630
|
+
color: '#eb4619',
|
|
1631
|
+
borderColor: '#eb4619'
|
|
1632
|
+
},
|
|
1633
|
+
variant: 'outlined',
|
|
1634
|
+
onClick: handleDeleteAll,
|
|
1635
|
+
className: "d-flex toolbar-button"
|
|
1636
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1637
|
+
}
|
|
1638
|
+
};
|
|
1639
|
+
}
|
|
1640
|
+
if (item.key === 'DELETE_ROWS') {
|
|
1641
|
+
return {
|
|
1642
|
+
...item,
|
|
1643
|
+
label: t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`,
|
|
1644
|
+
template: () => {
|
|
1645
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1646
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1647
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1648
|
+
style: {
|
|
1649
|
+
color: '#eb4619',
|
|
1650
|
+
borderColor: '#eb4619'
|
|
1651
|
+
},
|
|
1652
|
+
variant: 'outlined',
|
|
1653
|
+
onClick: () => handleDeleteRows(item),
|
|
1654
|
+
className: "d-flex toolbar-button"
|
|
1655
|
+
}, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
|
|
1656
|
+
}
|
|
1657
|
+
};
|
|
1658
|
+
}
|
|
1659
|
+
return {
|
|
1660
|
+
...item
|
|
1661
|
+
};
|
|
1662
|
+
});
|
|
1663
|
+
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1443
1664
|
const triggerCommandClick = args => {
|
|
1444
1665
|
const {
|
|
1445
1666
|
id: idCommand,
|
|
@@ -1652,10 +1873,20 @@ const TableContainerEdit = props => {
|
|
|
1652
1873
|
flex: 1,
|
|
1653
1874
|
overflow: 'hidden'
|
|
1654
1875
|
}
|
|
1876
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
1877
|
+
className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
|
|
1878
|
+
'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
|
|
1879
|
+
})
|
|
1655
1880
|
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1881
|
+
style: {
|
|
1882
|
+
width: '100%'
|
|
1883
|
+
},
|
|
1884
|
+
items: toolbarItemsTop ?? [],
|
|
1885
|
+
mode: 'scroll',
|
|
1886
|
+
onClick: ({}) => {
|
|
1887
|
+
setEditingKey('');
|
|
1888
|
+
}
|
|
1889
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
1659
1890
|
style: {
|
|
1660
1891
|
display: 'flex',
|
|
1661
1892
|
justifyContent: 'space-between',
|
|
@@ -1797,12 +2028,6 @@ const TableContainerEdit = props => {
|
|
|
1797
2028
|
className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
|
|
1798
2029
|
'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
|
|
1799
2030
|
})
|
|
1800
|
-
// style={{ border: '0 1px 1px 1px solid #e0e0e0' }}
|
|
1801
|
-
// style={{
|
|
1802
|
-
// borderBottom: '1px solid #e0e0e0',
|
|
1803
|
-
// borderRight: '1px solid #e0e0e0',
|
|
1804
|
-
// borderLeft: '1px solid #e0e0e0'
|
|
1805
|
-
// }}
|
|
1806
2031
|
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
1807
2032
|
style: {
|
|
1808
2033
|
width: '100%'
|
|
@@ -83,14 +83,15 @@ const TableBodyRow = ({
|
|
|
83
83
|
});
|
|
84
84
|
},
|
|
85
85
|
onContextMenu: e => {
|
|
86
|
-
if (contextMenuItems && contextMenuItems.length) {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
86
|
+
// if (contextMenuItems && contextMenuItems.length) {
|
|
87
|
+
|
|
88
|
+
const cell = e.target.closest('[data-col-key]');
|
|
89
|
+
const colKey = cell?.getAttribute('data-col-key');
|
|
90
|
+
onContextMenu?.({
|
|
91
|
+
rowData: row.original,
|
|
92
|
+
field: colKey
|
|
93
|
+
})(e);
|
|
94
|
+
// }
|
|
94
95
|
}
|
|
95
96
|
}, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
|
|
96
97
|
const cell = row.getVisibleCells().find(c => c.column.id === column.id);
|
|
@@ -162,7 +162,7 @@ const Grid = props => {
|
|
|
162
162
|
getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
|
|
163
163
|
// onExpandedChange: setExpanded,
|
|
164
164
|
getRowCanExpand: row => {
|
|
165
|
-
return Array.isArray(row.original.children);
|
|
165
|
+
return Array.isArray(row.original.children) && row.original.children.length > 0;
|
|
166
166
|
},
|
|
167
167
|
getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
|
|
168
168
|
getPaginationRowModel: pagination && !infiniteScroll ? (0, _reactTable.getPaginationRowModel)() : undefined,
|
|
@@ -162,24 +162,6 @@ const TableWrapper = props => {
|
|
|
162
162
|
y
|
|
163
163
|
}));
|
|
164
164
|
}, 100);
|
|
165
|
-
|
|
166
|
-
// if (!menuVisible) {
|
|
167
|
-
|
|
168
|
-
// document.addEventListener(`click`, function onClickOutside(e) {
|
|
169
|
-
// const element: any = e.target
|
|
170
|
-
// const menuContainer = document.querySelector('.popup-context-menu')
|
|
171
|
-
|
|
172
|
-
// const isInsideContainer = element.closest('.popup-context-menu') && menuContainer
|
|
173
|
-
|
|
174
|
-
// if (isInsideContainer) {
|
|
175
|
-
// return
|
|
176
|
-
// }
|
|
177
|
-
// setMenuVisible(false)
|
|
178
|
-
// setPosition(prevState => ({ ...prevState, x: undefined, y: undefined }))
|
|
179
|
-
// document.removeEventListener(`click`, onClickOutside)
|
|
180
|
-
// })
|
|
181
|
-
|
|
182
|
-
// }
|
|
183
165
|
};
|
|
184
166
|
_react.default.useEffect(() => {
|
|
185
167
|
const handleClickOutside = event => {
|