es-grid-template 1.9.39 → 1.9.40
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/grid-component/type.d.ts +1 -0
- package/es/group-component/TableContainerEdit.js +225 -2
- package/es/table-component/TableContainer.js +41 -5
- package/es/table-component/TableContainerEdit.js +19 -4
- package/es/table-virtuoso/table/TableContainer.js +22 -2
- package/lib/grid-component/type.d.ts +1 -0
- package/lib/group-component/TableContainerEdit.js +225 -2
- package/lib/table-component/TableContainer.js +41 -5
- package/lib/table-component/TableContainerEdit.js +19 -4
- package/lib/table-virtuoso/table/TableContainer.js +22 -2
- package/package.json +1 -1
|
@@ -1432,6 +1432,221 @@ const TableContainerEdit = props => {
|
|
|
1432
1432
|
triggerChangeData?.([...newData]);
|
|
1433
1433
|
}
|
|
1434
1434
|
};
|
|
1435
|
+
const toolbarItemsTop = React.useMemo(() => {
|
|
1436
|
+
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1437
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.fixedRight !== false && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1438
|
+
if (item.key === 'ADD') {
|
|
1439
|
+
return {
|
|
1440
|
+
...item,
|
|
1441
|
+
template: () => {
|
|
1442
|
+
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
|
|
1443
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1444
|
+
}, /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1445
|
+
overlayClassName: 'be-popup-container',
|
|
1446
|
+
trigger: ['click'],
|
|
1447
|
+
style: {
|
|
1448
|
+
color: '#28c76f',
|
|
1449
|
+
borderColor: '#28c76f'
|
|
1450
|
+
},
|
|
1451
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1452
|
+
menu: {
|
|
1453
|
+
items: itemsAdd,
|
|
1454
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1455
|
+
}
|
|
1456
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1457
|
+
style: {
|
|
1458
|
+
color: '#28c76f'
|
|
1459
|
+
},
|
|
1460
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1461
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1462
|
+
}
|
|
1463
|
+
};
|
|
1464
|
+
}
|
|
1465
|
+
if (item.key === 'DELETE') {
|
|
1466
|
+
return {
|
|
1467
|
+
...item,
|
|
1468
|
+
template: () => {
|
|
1469
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1470
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1471
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1472
|
+
style: {
|
|
1473
|
+
color: '#eb4619',
|
|
1474
|
+
borderColor: '#eb4619'
|
|
1475
|
+
},
|
|
1476
|
+
variant: 'outlined',
|
|
1477
|
+
onClick: () => handleDeleteAll(item),
|
|
1478
|
+
className: "d-flex toolbar-button"
|
|
1479
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1480
|
+
}
|
|
1481
|
+
};
|
|
1482
|
+
}
|
|
1483
|
+
return {
|
|
1484
|
+
...item
|
|
1485
|
+
};
|
|
1486
|
+
});
|
|
1487
|
+
}
|
|
1488
|
+
return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
|
|
1489
|
+
if (item.key === 'ADD') {
|
|
1490
|
+
return {
|
|
1491
|
+
...item,
|
|
1492
|
+
template: () => {
|
|
1493
|
+
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
|
|
1494
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1495
|
+
}, /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1496
|
+
overlayClassName: 'be-popup-container',
|
|
1497
|
+
style: {
|
|
1498
|
+
color: '#28c76f',
|
|
1499
|
+
borderColor: '#28c76f'
|
|
1500
|
+
},
|
|
1501
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1502
|
+
menu: {
|
|
1503
|
+
items: itemsAdd,
|
|
1504
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1505
|
+
}
|
|
1506
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1507
|
+
style: {
|
|
1508
|
+
color: '#28c76f'
|
|
1509
|
+
},
|
|
1510
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1511
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1512
|
+
}
|
|
1513
|
+
};
|
|
1514
|
+
}
|
|
1515
|
+
if (item.key === 'DUPLICATE') {
|
|
1516
|
+
return {
|
|
1517
|
+
...item,
|
|
1518
|
+
template: () => {
|
|
1519
|
+
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
1520
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1521
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1522
|
+
style: {
|
|
1523
|
+
color: '#28c76f',
|
|
1524
|
+
borderColor: '#28c76f'
|
|
1525
|
+
},
|
|
1526
|
+
variant: 'outlined',
|
|
1527
|
+
onClick: handleDuplicate,
|
|
1528
|
+
className: "d-flex toolbar-button"
|
|
1529
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
|
|
1530
|
+
}
|
|
1531
|
+
};
|
|
1532
|
+
}
|
|
1533
|
+
if (item.key === 'INSERT_BEFORE') {
|
|
1534
|
+
return {
|
|
1535
|
+
...item,
|
|
1536
|
+
template: () => {
|
|
1537
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1538
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1539
|
+
}, /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1540
|
+
overlayClassName: 'be-popup-container',
|
|
1541
|
+
style: {
|
|
1542
|
+
color: '#28c76f',
|
|
1543
|
+
borderColor: '#28c76f'
|
|
1544
|
+
},
|
|
1545
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1546
|
+
menu: {
|
|
1547
|
+
items: itemsAdd,
|
|
1548
|
+
onClick: e => handleInsertBefore(item, Number(e.key))
|
|
1549
|
+
}
|
|
1550
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1551
|
+
style: {
|
|
1552
|
+
color: '#28c76f'
|
|
1553
|
+
},
|
|
1554
|
+
onClick: () => handleInsertBefore(item, 1)
|
|
1555
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
|
|
1556
|
+
}
|
|
1557
|
+
};
|
|
1558
|
+
}
|
|
1559
|
+
if (item.key === 'INSERT_AFTER') {
|
|
1560
|
+
return {
|
|
1561
|
+
...item,
|
|
1562
|
+
template: () => {
|
|
1563
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1564
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1565
|
+
}, /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1566
|
+
overlayClassName: 'be-popup-container',
|
|
1567
|
+
style: {
|
|
1568
|
+
color: '#28c76f',
|
|
1569
|
+
borderColor: '#28c76f'
|
|
1570
|
+
},
|
|
1571
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1572
|
+
menu: {
|
|
1573
|
+
items: itemsAdd,
|
|
1574
|
+
onClick: e => handleInsertAfter(item, Number(e.key))
|
|
1575
|
+
}
|
|
1576
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1577
|
+
style: {
|
|
1578
|
+
color: '#28c76f'
|
|
1579
|
+
},
|
|
1580
|
+
onClick: () => handleInsertAfter(item, 1)
|
|
1581
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
|
|
1582
|
+
}
|
|
1583
|
+
};
|
|
1584
|
+
}
|
|
1585
|
+
if (item.key === 'INSERT_CHILDREN') {
|
|
1586
|
+
return {
|
|
1587
|
+
...item,
|
|
1588
|
+
template: () => {
|
|
1589
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1590
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1591
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1592
|
+
style: {
|
|
1593
|
+
color: '#28c76f',
|
|
1594
|
+
borderColor: '#28c76f'
|
|
1595
|
+
},
|
|
1596
|
+
variant: 'outlined',
|
|
1597
|
+
onClick: () => handleInsertChild(item),
|
|
1598
|
+
className: "d-flex toolbar-button"
|
|
1599
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
|
|
1600
|
+
}
|
|
1601
|
+
};
|
|
1602
|
+
}
|
|
1603
|
+
if (item.key === 'DELETE') {
|
|
1604
|
+
return {
|
|
1605
|
+
...item,
|
|
1606
|
+
template: () => {
|
|
1607
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1608
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1609
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1610
|
+
style: {
|
|
1611
|
+
color: '#eb4619',
|
|
1612
|
+
borderColor: '#eb4619'
|
|
1613
|
+
},
|
|
1614
|
+
variant: 'outlined',
|
|
1615
|
+
onClick: handleDeleteAll,
|
|
1616
|
+
className: "d-flex toolbar-button"
|
|
1617
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1618
|
+
}
|
|
1619
|
+
};
|
|
1620
|
+
}
|
|
1621
|
+
if (item.key === 'DELETE_ROWS') {
|
|
1622
|
+
return {
|
|
1623
|
+
...item,
|
|
1624
|
+
template: () => {
|
|
1625
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1626
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1627
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1628
|
+
style: {
|
|
1629
|
+
color: '#eb4619',
|
|
1630
|
+
borderColor: '#eb4619'
|
|
1631
|
+
},
|
|
1632
|
+
variant: 'outlined',
|
|
1633
|
+
onClick: () => handleDeleteRows(item),
|
|
1634
|
+
className: "d-flex toolbar-button"
|
|
1635
|
+
}, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
|
|
1636
|
+
}
|
|
1637
|
+
};
|
|
1638
|
+
}
|
|
1639
|
+
return {
|
|
1640
|
+
...item
|
|
1641
|
+
};
|
|
1642
|
+
});
|
|
1643
|
+
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1644
|
+
const toolbarItemTopRight = React.useMemo(() => {
|
|
1645
|
+
if (!toolbarItems) {
|
|
1646
|
+
return undefined;
|
|
1647
|
+
}
|
|
1648
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight && it.visible !== false);
|
|
1649
|
+
}, [toolbarItems]);
|
|
1435
1650
|
const toolbarItemsBottom = React.useMemo(() => {
|
|
1436
1651
|
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1437
1652
|
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 => {
|
|
@@ -1900,7 +2115,7 @@ const TableContainerEdit = props => {
|
|
|
1900
2115
|
overflow: 'hidden'
|
|
1901
2116
|
}
|
|
1902
2117
|
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
1903
|
-
items:
|
|
2118
|
+
items: toolbarItemsTop ?? [],
|
|
1904
2119
|
mode: 'scroll'
|
|
1905
2120
|
})), /*#__PURE__*/React.createElement("div", {
|
|
1906
2121
|
style: {
|
|
@@ -1917,7 +2132,15 @@ const TableContainerEdit = props => {
|
|
|
1917
2132
|
showTotal: (total, range) =>
|
|
1918
2133
|
// @ts-ignore
|
|
1919
2134
|
`${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
|
|
1920
|
-
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate,
|
|
2135
|
+
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
|
|
2136
|
+
style: {
|
|
2137
|
+
flex: 1,
|
|
2138
|
+
overflow: 'hidden'
|
|
2139
|
+
}
|
|
2140
|
+
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
2141
|
+
items: toolbarItemTopRight,
|
|
2142
|
+
mode: 'responsive'
|
|
2143
|
+
})), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
|
|
1921
2144
|
fontSize: 16,
|
|
1922
2145
|
onClick: () => {
|
|
1923
2146
|
setIsFullScreen(!isFullScreen);
|
|
@@ -89,7 +89,6 @@ const TableContainer = props => {
|
|
|
89
89
|
const [tableHeight, settableHeight] = React.useState(0);
|
|
90
90
|
const [focusedCell, setFocusedCell] = React.useState(undefined);
|
|
91
91
|
React.useEffect(() => {
|
|
92
|
-
// const totalHeight = minHeight ?? height
|
|
93
92
|
const totalHeight = getTableHeight(height, minHeight);
|
|
94
93
|
if (totalHeight) {
|
|
95
94
|
const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
|
|
@@ -197,6 +196,24 @@ const TableContainer = props => {
|
|
|
197
196
|
// })
|
|
198
197
|
}
|
|
199
198
|
}, [columnSizingInfo]);
|
|
199
|
+
const toolbarItemTop = React.useMemo(() => {
|
|
200
|
+
if (!toolbarItems) {
|
|
201
|
+
return undefined;
|
|
202
|
+
}
|
|
203
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
|
|
204
|
+
}, [toolbarItems]);
|
|
205
|
+
const toolbarItemBottom = React.useMemo(() => {
|
|
206
|
+
if (!toolbarItems) {
|
|
207
|
+
return undefined;
|
|
208
|
+
}
|
|
209
|
+
return toolbarItems.filter(it => it.position === 'Bottom');
|
|
210
|
+
}, [toolbarItems]);
|
|
211
|
+
const toolbarItemTopRight = React.useMemo(() => {
|
|
212
|
+
if (!toolbarItems) {
|
|
213
|
+
return undefined;
|
|
214
|
+
}
|
|
215
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
|
|
216
|
+
}, [toolbarItems]);
|
|
200
217
|
const triggerCommandClick = args => {
|
|
201
218
|
// const { id: idCommand, rowId, rowData, index } = args
|
|
202
219
|
|
|
@@ -219,7 +236,8 @@ const TableContainer = props => {
|
|
|
219
236
|
style: {
|
|
220
237
|
display: 'flex',
|
|
221
238
|
justifyContent: 'space-between',
|
|
222
|
-
alignItems: 'center'
|
|
239
|
+
alignItems: 'center',
|
|
240
|
+
gap: '1rem'
|
|
223
241
|
}
|
|
224
242
|
}, /*#__PURE__*/React.createElement("div", {
|
|
225
243
|
style: {
|
|
@@ -227,7 +245,7 @@ const TableContainer = props => {
|
|
|
227
245
|
overflow: 'hidden'
|
|
228
246
|
}
|
|
229
247
|
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
230
|
-
items:
|
|
248
|
+
items: toolbarItemTop ?? []
|
|
231
249
|
// mode={'scroll'}
|
|
232
250
|
,
|
|
233
251
|
mode: toolbarMode
|
|
@@ -246,7 +264,15 @@ const TableContainer = props => {
|
|
|
246
264
|
showTotal: (totalItems, range) =>
|
|
247
265
|
// @ts-ignore
|
|
248
266
|
`${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
|
|
249
|
-
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate,
|
|
267
|
+
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
|
|
268
|
+
style: {
|
|
269
|
+
flex: 1,
|
|
270
|
+
overflow: 'hidden'
|
|
271
|
+
}
|
|
272
|
+
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
273
|
+
items: toolbarItemTopRight,
|
|
274
|
+
mode: toolbarMode
|
|
275
|
+
})), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
|
|
250
276
|
fontSize: 16,
|
|
251
277
|
onClick: () => {
|
|
252
278
|
setIsFullScreen(!isFullScreen);
|
|
@@ -341,7 +367,17 @@ const TableContainer = props => {
|
|
|
341
367
|
fixedRightColumns: fixedRightColumns
|
|
342
368
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
343
369
|
ref: bottomToolbarRef
|
|
344
|
-
},
|
|
370
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
371
|
+
style: {
|
|
372
|
+
flex: 1,
|
|
373
|
+
overflow: 'hidden'
|
|
374
|
+
}
|
|
375
|
+
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
376
|
+
items: toolbarItemBottom ?? []
|
|
377
|
+
// mode={'scroll'}
|
|
378
|
+
,
|
|
379
|
+
mode: toolbarMode
|
|
380
|
+
})), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
|
|
345
381
|
pageSizeOptions: [20, 50, 100, 1000, 10000],
|
|
346
382
|
rootClassName: 'pagination-template',
|
|
347
383
|
showSizeChanger: true,
|
|
@@ -1575,7 +1575,7 @@ const TableContainerEdit = props => {
|
|
|
1575
1575
|
const toolbarItemsTop = React.useMemo(() => {
|
|
1576
1576
|
// Chưa có dòng| ô được chọn
|
|
1577
1577
|
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1578
|
-
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 => {
|
|
1578
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1579
1579
|
if (item.key === 'ADD') {
|
|
1580
1580
|
return {
|
|
1581
1581
|
...item,
|
|
@@ -1636,7 +1636,7 @@ const TableContainerEdit = props => {
|
|
|
1636
1636
|
};
|
|
1637
1637
|
});
|
|
1638
1638
|
}
|
|
1639
|
-
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false).map(item => {
|
|
1639
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false).map(item => {
|
|
1640
1640
|
if (item.key === 'ADD') {
|
|
1641
1641
|
return {
|
|
1642
1642
|
...item,
|
|
@@ -1824,6 +1824,12 @@ const TableContainerEdit = props => {
|
|
|
1824
1824
|
};
|
|
1825
1825
|
});
|
|
1826
1826
|
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1827
|
+
const toolbarItemTopRight = React.useMemo(() => {
|
|
1828
|
+
if (!toolbarItems) {
|
|
1829
|
+
return undefined;
|
|
1830
|
+
}
|
|
1831
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
|
|
1832
|
+
}, [toolbarItems]);
|
|
1827
1833
|
const triggerCommandClick = args => {
|
|
1828
1834
|
const {
|
|
1829
1835
|
id: idCommand,
|
|
@@ -2032,7 +2038,8 @@ const TableContainerEdit = props => {
|
|
|
2032
2038
|
style: {
|
|
2033
2039
|
display: 'flex',
|
|
2034
2040
|
justifyContent: 'space-between',
|
|
2035
|
-
alignItems: 'center'
|
|
2041
|
+
alignItems: 'center',
|
|
2042
|
+
gap: '1rem'
|
|
2036
2043
|
}
|
|
2037
2044
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2038
2045
|
style: {
|
|
@@ -2067,7 +2074,15 @@ const TableContainerEdit = props => {
|
|
|
2067
2074
|
showTotal: (total, range) =>
|
|
2068
2075
|
// @ts-ignore
|
|
2069
2076
|
`${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
|
|
2070
|
-
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate,
|
|
2077
|
+
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
|
|
2078
|
+
style: {
|
|
2079
|
+
flex: 1,
|
|
2080
|
+
overflow: 'hidden'
|
|
2081
|
+
}
|
|
2082
|
+
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
2083
|
+
items: toolbarItemTopRight,
|
|
2084
|
+
mode: toolbarMode
|
|
2085
|
+
})), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
|
|
2071
2086
|
fontSize: 16,
|
|
2072
2087
|
onClick: () => {
|
|
2073
2088
|
setIsFullScreen(!isFullScreen);
|
|
@@ -109,6 +109,18 @@ const TableContainer = props => {
|
|
|
109
109
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
110
110
|
};
|
|
111
111
|
}, []);
|
|
112
|
+
const toolbarItemTop = React.useMemo(() => {
|
|
113
|
+
if (!toolbarItems) {
|
|
114
|
+
return undefined;
|
|
115
|
+
}
|
|
116
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
|
|
117
|
+
}, [toolbarItems]);
|
|
118
|
+
const toolbarItemTopRight = React.useMemo(() => {
|
|
119
|
+
if (!toolbarItems) {
|
|
120
|
+
return undefined;
|
|
121
|
+
}
|
|
122
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
|
|
123
|
+
}, [toolbarItems]);
|
|
112
124
|
const triggerCommandClick = args => {
|
|
113
125
|
// const { id: idCommand, rowId, rowData, index } = args
|
|
114
126
|
|
|
@@ -181,7 +193,7 @@ const TableContainer = props => {
|
|
|
181
193
|
overflow: 'hidden'
|
|
182
194
|
}
|
|
183
195
|
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
184
|
-
items:
|
|
196
|
+
items: toolbarItemTop ?? [],
|
|
185
197
|
mode: toolbarMode
|
|
186
198
|
})), /*#__PURE__*/React.createElement("div", {
|
|
187
199
|
style: {
|
|
@@ -198,7 +210,15 @@ const TableContainer = props => {
|
|
|
198
210
|
showTotal: (totalItems, range) =>
|
|
199
211
|
// @ts-ignore
|
|
200
212
|
`${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
|
|
201
|
-
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate,
|
|
213
|
+
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
|
|
214
|
+
style: {
|
|
215
|
+
flex: 1,
|
|
216
|
+
overflow: 'hidden'
|
|
217
|
+
}
|
|
218
|
+
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
219
|
+
items: toolbarItemTopRight,
|
|
220
|
+
mode: toolbarMode
|
|
221
|
+
})), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
|
|
202
222
|
fontSize: 16,
|
|
203
223
|
onClick: () => {
|
|
204
224
|
setIsFullScreen(!isFullScreen);
|
|
@@ -1440,6 +1440,221 @@ const TableContainerEdit = props => {
|
|
|
1440
1440
|
triggerChangeData?.([...newData]);
|
|
1441
1441
|
}
|
|
1442
1442
|
};
|
|
1443
|
+
const toolbarItemsTop = _react.default.useMemo(() => {
|
|
1444
|
+
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1445
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.fixedRight !== false && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1446
|
+
if (item.key === 'ADD') {
|
|
1447
|
+
return {
|
|
1448
|
+
...item,
|
|
1449
|
+
template: () => {
|
|
1450
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
|
|
1451
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1452
|
+
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown.Button, {
|
|
1453
|
+
overlayClassName: 'be-popup-container',
|
|
1454
|
+
trigger: ['click'],
|
|
1455
|
+
style: {
|
|
1456
|
+
color: '#28c76f',
|
|
1457
|
+
borderColor: '#28c76f'
|
|
1458
|
+
},
|
|
1459
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1460
|
+
menu: {
|
|
1461
|
+
items: itemsAdd,
|
|
1462
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1463
|
+
}
|
|
1464
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1465
|
+
style: {
|
|
1466
|
+
color: '#28c76f'
|
|
1467
|
+
},
|
|
1468
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1469
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1470
|
+
}
|
|
1471
|
+
};
|
|
1472
|
+
}
|
|
1473
|
+
if (item.key === 'DELETE') {
|
|
1474
|
+
return {
|
|
1475
|
+
...item,
|
|
1476
|
+
template: () => {
|
|
1477
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1478
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1479
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
1480
|
+
style: {
|
|
1481
|
+
color: '#eb4619',
|
|
1482
|
+
borderColor: '#eb4619'
|
|
1483
|
+
},
|
|
1484
|
+
variant: 'outlined',
|
|
1485
|
+
onClick: () => handleDeleteAll(item),
|
|
1486
|
+
className: "d-flex toolbar-button"
|
|
1487
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1488
|
+
}
|
|
1489
|
+
};
|
|
1490
|
+
}
|
|
1491
|
+
return {
|
|
1492
|
+
...item
|
|
1493
|
+
};
|
|
1494
|
+
});
|
|
1495
|
+
}
|
|
1496
|
+
return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
|
|
1497
|
+
if (item.key === 'ADD') {
|
|
1498
|
+
return {
|
|
1499
|
+
...item,
|
|
1500
|
+
template: () => {
|
|
1501
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
|
|
1502
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1503
|
+
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown.Button, {
|
|
1504
|
+
overlayClassName: 'be-popup-container',
|
|
1505
|
+
style: {
|
|
1506
|
+
color: '#28c76f',
|
|
1507
|
+
borderColor: '#28c76f'
|
|
1508
|
+
},
|
|
1509
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1510
|
+
menu: {
|
|
1511
|
+
items: itemsAdd,
|
|
1512
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1513
|
+
}
|
|
1514
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1515
|
+
style: {
|
|
1516
|
+
color: '#28c76f'
|
|
1517
|
+
},
|
|
1518
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1519
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1520
|
+
}
|
|
1521
|
+
};
|
|
1522
|
+
}
|
|
1523
|
+
if (item.key === 'DUPLICATE') {
|
|
1524
|
+
return {
|
|
1525
|
+
...item,
|
|
1526
|
+
template: () => {
|
|
1527
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
1528
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1529
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
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
|
+
template: () => {
|
|
1545
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1546
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1547
|
+
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown.Button, {
|
|
1548
|
+
overlayClassName: 'be-popup-container',
|
|
1549
|
+
style: {
|
|
1550
|
+
color: '#28c76f',
|
|
1551
|
+
borderColor: '#28c76f'
|
|
1552
|
+
},
|
|
1553
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1554
|
+
menu: {
|
|
1555
|
+
items: itemsAdd,
|
|
1556
|
+
onClick: e => handleInsertBefore(item, Number(e.key))
|
|
1557
|
+
}
|
|
1558
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1559
|
+
style: {
|
|
1560
|
+
color: '#28c76f'
|
|
1561
|
+
},
|
|
1562
|
+
onClick: () => handleInsertBefore(item, 1)
|
|
1563
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
|
|
1564
|
+
}
|
|
1565
|
+
};
|
|
1566
|
+
}
|
|
1567
|
+
if (item.key === 'INSERT_AFTER') {
|
|
1568
|
+
return {
|
|
1569
|
+
...item,
|
|
1570
|
+
template: () => {
|
|
1571
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1572
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1573
|
+
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown.Button, {
|
|
1574
|
+
overlayClassName: 'be-popup-container',
|
|
1575
|
+
style: {
|
|
1576
|
+
color: '#28c76f',
|
|
1577
|
+
borderColor: '#28c76f'
|
|
1578
|
+
},
|
|
1579
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1580
|
+
menu: {
|
|
1581
|
+
items: itemsAdd,
|
|
1582
|
+
onClick: e => handleInsertAfter(item, Number(e.key))
|
|
1583
|
+
}
|
|
1584
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1585
|
+
style: {
|
|
1586
|
+
color: '#28c76f'
|
|
1587
|
+
},
|
|
1588
|
+
onClick: () => handleInsertAfter(item, 1)
|
|
1589
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
|
|
1590
|
+
}
|
|
1591
|
+
};
|
|
1592
|
+
}
|
|
1593
|
+
if (item.key === 'INSERT_CHILDREN') {
|
|
1594
|
+
return {
|
|
1595
|
+
...item,
|
|
1596
|
+
template: () => {
|
|
1597
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1598
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1599
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
1600
|
+
style: {
|
|
1601
|
+
color: '#28c76f',
|
|
1602
|
+
borderColor: '#28c76f'
|
|
1603
|
+
},
|
|
1604
|
+
variant: 'outlined',
|
|
1605
|
+
onClick: () => handleInsertChild(item),
|
|
1606
|
+
className: "d-flex toolbar-button"
|
|
1607
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
|
|
1608
|
+
}
|
|
1609
|
+
};
|
|
1610
|
+
}
|
|
1611
|
+
if (item.key === 'DELETE') {
|
|
1612
|
+
return {
|
|
1613
|
+
...item,
|
|
1614
|
+
template: () => {
|
|
1615
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1616
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1617
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
1618
|
+
style: {
|
|
1619
|
+
color: '#eb4619',
|
|
1620
|
+
borderColor: '#eb4619'
|
|
1621
|
+
},
|
|
1622
|
+
variant: 'outlined',
|
|
1623
|
+
onClick: handleDeleteAll,
|
|
1624
|
+
className: "d-flex toolbar-button"
|
|
1625
|
+
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1626
|
+
}
|
|
1627
|
+
};
|
|
1628
|
+
}
|
|
1629
|
+
if (item.key === 'DELETE_ROWS') {
|
|
1630
|
+
return {
|
|
1631
|
+
...item,
|
|
1632
|
+
template: () => {
|
|
1633
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1634
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1635
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
1636
|
+
style: {
|
|
1637
|
+
color: '#eb4619',
|
|
1638
|
+
borderColor: '#eb4619'
|
|
1639
|
+
},
|
|
1640
|
+
variant: 'outlined',
|
|
1641
|
+
onClick: () => handleDeleteRows(item),
|
|
1642
|
+
className: "d-flex toolbar-button"
|
|
1643
|
+
}, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
|
|
1644
|
+
}
|
|
1645
|
+
};
|
|
1646
|
+
}
|
|
1647
|
+
return {
|
|
1648
|
+
...item
|
|
1649
|
+
};
|
|
1650
|
+
});
|
|
1651
|
+
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1652
|
+
const toolbarItemTopRight = _react.default.useMemo(() => {
|
|
1653
|
+
if (!toolbarItems) {
|
|
1654
|
+
return undefined;
|
|
1655
|
+
}
|
|
1656
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight && it.visible !== false);
|
|
1657
|
+
}, [toolbarItems]);
|
|
1443
1658
|
const toolbarItemsBottom = _react.default.useMemo(() => {
|
|
1444
1659
|
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1445
1660
|
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 => {
|
|
@@ -1908,7 +2123,7 @@ const TableContainerEdit = props => {
|
|
|
1908
2123
|
overflow: 'hidden'
|
|
1909
2124
|
}
|
|
1910
2125
|
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
1911
|
-
items:
|
|
2126
|
+
items: toolbarItemsTop ?? [],
|
|
1912
2127
|
mode: 'scroll'
|
|
1913
2128
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
1914
2129
|
style: {
|
|
@@ -1925,7 +2140,15 @@ const TableContainerEdit = props => {
|
|
|
1925
2140
|
showTotal: (total, range) =>
|
|
1926
2141
|
// @ts-ignore
|
|
1927
2142
|
`${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
|
|
1928
|
-
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate,
|
|
2143
|
+
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
|
|
2144
|
+
style: {
|
|
2145
|
+
flex: 1,
|
|
2146
|
+
overflow: 'hidden'
|
|
2147
|
+
}
|
|
2148
|
+
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
2149
|
+
items: toolbarItemTopRight,
|
|
2150
|
+
mode: 'responsive'
|
|
2151
|
+
})), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
|
|
1929
2152
|
fontSize: 16,
|
|
1930
2153
|
onClick: () => {
|
|
1931
2154
|
setIsFullScreen(!isFullScreen);
|
|
@@ -96,7 +96,6 @@ const TableContainer = props => {
|
|
|
96
96
|
const [tableHeight, settableHeight] = _react.default.useState(0);
|
|
97
97
|
const [focusedCell, setFocusedCell] = _react.default.useState(undefined);
|
|
98
98
|
_react.default.useEffect(() => {
|
|
99
|
-
// const totalHeight = minHeight ?? height
|
|
100
99
|
const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
|
|
101
100
|
if (totalHeight) {
|
|
102
101
|
const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
|
|
@@ -204,6 +203,24 @@ const TableContainer = props => {
|
|
|
204
203
|
// })
|
|
205
204
|
}
|
|
206
205
|
}, [columnSizingInfo]);
|
|
206
|
+
const toolbarItemTop = _react.default.useMemo(() => {
|
|
207
|
+
if (!toolbarItems) {
|
|
208
|
+
return undefined;
|
|
209
|
+
}
|
|
210
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
|
|
211
|
+
}, [toolbarItems]);
|
|
212
|
+
const toolbarItemBottom = _react.default.useMemo(() => {
|
|
213
|
+
if (!toolbarItems) {
|
|
214
|
+
return undefined;
|
|
215
|
+
}
|
|
216
|
+
return toolbarItems.filter(it => it.position === 'Bottom');
|
|
217
|
+
}, [toolbarItems]);
|
|
218
|
+
const toolbarItemTopRight = _react.default.useMemo(() => {
|
|
219
|
+
if (!toolbarItems) {
|
|
220
|
+
return undefined;
|
|
221
|
+
}
|
|
222
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
|
|
223
|
+
}, [toolbarItems]);
|
|
207
224
|
const triggerCommandClick = args => {
|
|
208
225
|
// const { id: idCommand, rowId, rowData, index } = args
|
|
209
226
|
|
|
@@ -226,7 +243,8 @@ const TableContainer = props => {
|
|
|
226
243
|
style: {
|
|
227
244
|
display: 'flex',
|
|
228
245
|
justifyContent: 'space-between',
|
|
229
|
-
alignItems: 'center'
|
|
246
|
+
alignItems: 'center',
|
|
247
|
+
gap: '1rem'
|
|
230
248
|
}
|
|
231
249
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
232
250
|
style: {
|
|
@@ -234,7 +252,7 @@ const TableContainer = props => {
|
|
|
234
252
|
overflow: 'hidden'
|
|
235
253
|
}
|
|
236
254
|
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
237
|
-
items:
|
|
255
|
+
items: toolbarItemTop ?? []
|
|
238
256
|
// mode={'scroll'}
|
|
239
257
|
,
|
|
240
258
|
mode: toolbarMode
|
|
@@ -253,7 +271,15 @@ const TableContainer = props => {
|
|
|
253
271
|
showTotal: (totalItems, range) =>
|
|
254
272
|
// @ts-ignore
|
|
255
273
|
`${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
|
|
256
|
-
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate,
|
|
274
|
+
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
|
|
275
|
+
style: {
|
|
276
|
+
flex: 1,
|
|
277
|
+
overflow: 'hidden'
|
|
278
|
+
}
|
|
279
|
+
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
280
|
+
items: toolbarItemTopRight,
|
|
281
|
+
mode: toolbarMode
|
|
282
|
+
})), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
|
|
257
283
|
fontSize: 16,
|
|
258
284
|
onClick: () => {
|
|
259
285
|
setIsFullScreen(!isFullScreen);
|
|
@@ -348,7 +374,17 @@ const TableContainer = props => {
|
|
|
348
374
|
fixedRightColumns: fixedRightColumns
|
|
349
375
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
350
376
|
ref: bottomToolbarRef
|
|
351
|
-
},
|
|
377
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
378
|
+
style: {
|
|
379
|
+
flex: 1,
|
|
380
|
+
overflow: 'hidden'
|
|
381
|
+
}
|
|
382
|
+
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
383
|
+
items: toolbarItemBottom ?? []
|
|
384
|
+
// mode={'scroll'}
|
|
385
|
+
,
|
|
386
|
+
mode: toolbarMode
|
|
387
|
+
})), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
|
|
352
388
|
pageSizeOptions: [20, 50, 100, 1000, 10000],
|
|
353
389
|
rootClassName: 'pagination-template',
|
|
354
390
|
showSizeChanger: true,
|
|
@@ -1576,7 +1576,7 @@ const TableContainerEdit = props => {
|
|
|
1576
1576
|
const toolbarItemsTop = _react.default.useMemo(() => {
|
|
1577
1577
|
// Chưa có dòng| ô được chọn
|
|
1578
1578
|
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1579
|
-
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 => {
|
|
1579
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1580
1580
|
if (item.key === 'ADD') {
|
|
1581
1581
|
return {
|
|
1582
1582
|
...item,
|
|
@@ -1637,7 +1637,7 @@ const TableContainerEdit = props => {
|
|
|
1637
1637
|
};
|
|
1638
1638
|
});
|
|
1639
1639
|
}
|
|
1640
|
-
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false).map(item => {
|
|
1640
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false).map(item => {
|
|
1641
1641
|
if (item.key === 'ADD') {
|
|
1642
1642
|
return {
|
|
1643
1643
|
...item,
|
|
@@ -1825,6 +1825,12 @@ const TableContainerEdit = props => {
|
|
|
1825
1825
|
};
|
|
1826
1826
|
});
|
|
1827
1827
|
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1828
|
+
const toolbarItemTopRight = _react.default.useMemo(() => {
|
|
1829
|
+
if (!toolbarItems) {
|
|
1830
|
+
return undefined;
|
|
1831
|
+
}
|
|
1832
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
|
|
1833
|
+
}, [toolbarItems]);
|
|
1828
1834
|
const triggerCommandClick = args => {
|
|
1829
1835
|
const {
|
|
1830
1836
|
id: idCommand,
|
|
@@ -2033,7 +2039,8 @@ const TableContainerEdit = props => {
|
|
|
2033
2039
|
style: {
|
|
2034
2040
|
display: 'flex',
|
|
2035
2041
|
justifyContent: 'space-between',
|
|
2036
|
-
alignItems: 'center'
|
|
2042
|
+
alignItems: 'center',
|
|
2043
|
+
gap: '1rem'
|
|
2037
2044
|
}
|
|
2038
2045
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
2039
2046
|
style: {
|
|
@@ -2068,7 +2075,15 @@ const TableContainerEdit = props => {
|
|
|
2068
2075
|
showTotal: (total, range) =>
|
|
2069
2076
|
// @ts-ignore
|
|
2070
2077
|
`${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
|
|
2071
|
-
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate,
|
|
2078
|
+
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
|
|
2079
|
+
style: {
|
|
2080
|
+
flex: 1,
|
|
2081
|
+
overflow: 'hidden'
|
|
2082
|
+
}
|
|
2083
|
+
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
2084
|
+
items: toolbarItemTopRight,
|
|
2085
|
+
mode: toolbarMode
|
|
2086
|
+
})), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
|
|
2072
2087
|
fontSize: 16,
|
|
2073
2088
|
onClick: () => {
|
|
2074
2089
|
setIsFullScreen(!isFullScreen);
|
|
@@ -117,6 +117,18 @@ const TableContainer = props => {
|
|
|
117
117
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
118
118
|
};
|
|
119
119
|
}, []);
|
|
120
|
+
const toolbarItemTop = _react.default.useMemo(() => {
|
|
121
|
+
if (!toolbarItems) {
|
|
122
|
+
return undefined;
|
|
123
|
+
}
|
|
124
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
|
|
125
|
+
}, [toolbarItems]);
|
|
126
|
+
const toolbarItemTopRight = _react.default.useMemo(() => {
|
|
127
|
+
if (!toolbarItems) {
|
|
128
|
+
return undefined;
|
|
129
|
+
}
|
|
130
|
+
return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
|
|
131
|
+
}, [toolbarItems]);
|
|
120
132
|
const triggerCommandClick = args => {
|
|
121
133
|
// const { id: idCommand, rowId, rowData, index } = args
|
|
122
134
|
|
|
@@ -189,7 +201,7 @@ const TableContainer = props => {
|
|
|
189
201
|
overflow: 'hidden'
|
|
190
202
|
}
|
|
191
203
|
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
192
|
-
items:
|
|
204
|
+
items: toolbarItemTop ?? [],
|
|
193
205
|
mode: toolbarMode
|
|
194
206
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
195
207
|
style: {
|
|
@@ -206,7 +218,15 @@ const TableContainer = props => {
|
|
|
206
218
|
showTotal: (totalItems, range) =>
|
|
207
219
|
// @ts-ignore
|
|
208
220
|
`${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
|
|
209
|
-
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate,
|
|
221
|
+
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
|
|
222
|
+
style: {
|
|
223
|
+
flex: 1,
|
|
224
|
+
overflow: 'hidden'
|
|
225
|
+
}
|
|
226
|
+
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
227
|
+
items: toolbarItemTopRight,
|
|
228
|
+
mode: toolbarMode
|
|
229
|
+
})), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
|
|
210
230
|
fontSize: 16,
|
|
211
231
|
onClick: () => {
|
|
212
232
|
setIsFullScreen(!isFullScreen);
|