es-grid-template 1.7.27 → 1.7.29

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.
Files changed (87) hide show
  1. package/es/grid-component/InternalTable.js +31 -36
  2. package/es/grid-component/TempTable.d.ts +4 -0
  3. package/es/grid-component/TempTable.js +21 -0
  4. package/es/grid-component/hooks/columns/index.js +3 -1
  5. package/es/grid-component/index.d.ts +2 -2
  6. package/es/grid-component/index.js +6 -4
  7. package/es/grid-component/styles.scss +0 -1
  8. package/es/grid-component/table/GridEdit.js +112 -96
  9. package/es/grid-component/type.d.ts +7 -1
  10. package/es/table-component/InternalTable.js +100 -127
  11. package/es/table-component/TableContainer.d.ts +6 -1
  12. package/es/table-component/TableContainer.js +82 -74
  13. package/es/table-component/TableContainerEdit.d.ts +4 -0
  14. package/es/table-component/TableContainerEdit.js +370 -85
  15. package/es/table-component/body/TableBody.d.ts +2 -8
  16. package/es/table-component/body/TableBody.js +1 -0
  17. package/es/table-component/body/TableBodyCell.d.ts +1 -1
  18. package/es/table-component/body/TableBodyCell.js +25 -12
  19. package/es/table-component/body/TableBodyCellEdit.d.ts +1 -1
  20. package/es/table-component/body/TableBodyCellEdit.js +44 -19
  21. package/es/table-component/body/TableBodyRow.d.ts +3 -3
  22. package/es/table-component/body/TableBodyRow.js +4 -6
  23. package/es/table-component/footer/TableFooter.d.ts +2 -8
  24. package/es/table-component/footer/TableFooter.js +14 -13
  25. package/es/table-component/footer/TableFooterCell.d.ts +3 -6
  26. package/es/table-component/footer/TableFooterCell.js +12 -10
  27. package/es/table-component/footer/TableFooterRow.d.ts +2 -8
  28. package/es/table-component/footer/TableFooterRow.js +23 -48
  29. package/es/table-component/header/TableHead.d.ts +4 -3
  30. package/es/table-component/header/TableHead.js +3 -61
  31. package/es/table-component/header/TableHeadCell.d.ts +0 -3
  32. package/es/table-component/header/TableHeadCell.js +11 -9
  33. package/es/table-component/header/TableHeadRow.d.ts +6 -6
  34. package/es/table-component/header/TableHeadRow.js +10 -32
  35. package/es/table-component/hook/utils.js +1 -1
  36. package/es/table-component/style.scss +26 -2
  37. package/es/table-component/table/Grid.d.ts +1 -0
  38. package/es/table-component/table/Grid.js +12 -6
  39. package/es/table-component/table/TableWrapper.d.ts +33 -0
  40. package/es/table-component/table/TableWrapper.js +245 -0
  41. package/es/table-component/type.d.ts +5 -4
  42. package/es/table-component/useContext.d.ts +4 -0
  43. package/es/table-component/useContext.js +4 -0
  44. package/lib/grid-component/InternalTable.js +30 -35
  45. package/lib/grid-component/TempTable.d.ts +4 -0
  46. package/lib/grid-component/TempTable.js +30 -0
  47. package/lib/grid-component/hooks/columns/index.js +3 -1
  48. package/lib/grid-component/index.d.ts +2 -2
  49. package/lib/grid-component/index.js +5 -3
  50. package/lib/grid-component/styles.scss +0 -1
  51. package/lib/grid-component/table/GridEdit.js +112 -96
  52. package/lib/grid-component/type.d.ts +7 -1
  53. package/lib/table-component/InternalTable.js +101 -127
  54. package/lib/table-component/TableContainer.d.ts +6 -1
  55. package/lib/table-component/TableContainer.js +84 -74
  56. package/lib/table-component/TableContainerEdit.d.ts +4 -0
  57. package/lib/table-component/TableContainerEdit.js +366 -83
  58. package/lib/table-component/body/TableBody.d.ts +2 -8
  59. package/lib/table-component/body/TableBody.js +2 -0
  60. package/lib/table-component/body/TableBodyCell.d.ts +1 -1
  61. package/lib/table-component/body/TableBodyCell.js +25 -12
  62. package/lib/table-component/body/TableBodyCellEdit.d.ts +1 -1
  63. package/lib/table-component/body/TableBodyCellEdit.js +43 -19
  64. package/lib/table-component/body/TableBodyRow.d.ts +3 -3
  65. package/lib/table-component/body/TableBodyRow.js +4 -6
  66. package/lib/table-component/footer/TableFooter.d.ts +2 -8
  67. package/lib/table-component/footer/TableFooter.js +15 -13
  68. package/lib/table-component/footer/TableFooterCell.d.ts +3 -6
  69. package/lib/table-component/footer/TableFooterCell.js +13 -10
  70. package/lib/table-component/footer/TableFooterRow.d.ts +2 -8
  71. package/lib/table-component/footer/TableFooterRow.js +23 -48
  72. package/lib/table-component/header/TableHead.d.ts +4 -3
  73. package/lib/table-component/header/TableHead.js +3 -61
  74. package/lib/table-component/header/TableHeadCell.d.ts +0 -3
  75. package/lib/table-component/header/TableHeadCell.js +11 -8
  76. package/lib/table-component/header/TableHeadRow.d.ts +6 -6
  77. package/lib/table-component/header/TableHeadRow.js +10 -32
  78. package/lib/table-component/hook/utils.js +1 -1
  79. package/lib/table-component/style.scss +26 -2
  80. package/lib/table-component/table/Grid.d.ts +1 -0
  81. package/lib/table-component/table/Grid.js +12 -6
  82. package/lib/table-component/table/TableWrapper.d.ts +33 -0
  83. package/lib/table-component/table/TableWrapper.js +254 -0
  84. package/lib/table-component/type.d.ts +5 -4
  85. package/lib/table-component/useContext.d.ts +4 -0
  86. package/lib/table-component/useContext.js +4 -0
  87. package/package.json +1 -1
@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _react = _interopRequireWildcard(require("react"));
10
- var _TableBody = _interopRequireDefault(require("./body/TableBody"));
11
- var _TableHead = _interopRequireDefault(require("./header/TableHead"));
12
10
  var _utils = require("./hook/utils");
13
11
  var _reactVirtual = require("@tanstack/react-virtual");
14
12
  var _reactHookForm = require("react-hook-form");
@@ -21,9 +19,12 @@ var _rcMasterUi = require("rc-master-ui");
21
19
  var _classnames = _interopRequireDefault(require("classnames"));
22
20
  var _becoxyIcons = require("becoxy-icons");
23
21
  var _ColumnsChoose = require("./ColumnsChoose");
24
- var _TableFooter = _interopRequireDefault(require("./footer/TableFooter"));
22
+ var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
23
+ var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
24
+ var _sweetalert = _interopRequireDefault(require("sweetalert2"));
25
25
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
26
26
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
27
+ const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
27
28
  const {
28
29
  Paragraph,
29
30
  Title
@@ -78,8 +79,8 @@ const TableContainerEdit = props => {
78
79
  // triggerFilter,
79
80
  selectionSettings,
80
81
  setIsSelectionChange,
81
- onContextMenu,
82
- contextMenuItems,
82
+ // onContextMenu,
83
+ contextMenuItems: propsContext,
83
84
  setSorterChange,
84
85
  setFilterChange,
85
86
  // tableHeight,
@@ -102,6 +103,7 @@ const TableContainerEdit = props => {
102
103
  actionTemplate,
103
104
  showColumnChoose,
104
105
  height,
106
+ minHeight,
105
107
  summary,
106
108
  locale,
107
109
  groupColumns,
@@ -111,11 +113,17 @@ const TableContainerEdit = props => {
111
113
  columnHidden,
112
114
  showEmptyText,
113
115
  isFullScreen,
114
- setIsFullScreen
116
+ setIsFullScreen,
117
+ infiniteScroll,
118
+ windowSize,
119
+ next,
120
+ loading,
121
+ contextMenuOpen,
122
+ contextMenuClick,
123
+ contextMenuHidden,
124
+ showDefaultContext,
125
+ commandSettings
115
126
  } = props;
116
-
117
- // console.log('setIsFullScreen', setIsFullScreen)
118
-
119
127
  const containerRef = _react.default.useRef(null);
120
128
  const bottomToolbarRef = _react.default.useRef(null);
121
129
  const topToolbarRef = _react.default.useRef(null);
@@ -125,26 +133,126 @@ const TableContainerEdit = props => {
125
133
 
126
134
  // //The virtualizers need to know the scrollable container element
127
135
  const tableContainerRef = _react.default.useRef(null);
128
- const visibleColumns = table.getVisibleLeafColumns();
129
- const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
130
- const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
131
-
132
- //we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
133
- const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
134
- count: visibleColumns.length,
135
- estimateSize: index => visibleColumns[index].getSize(),
136
- //estimate width of each column for accurate scrollbar dragging
137
- getScrollElement: () => tableContainerRef.current,
138
- horizontal: true,
139
- // measureElement(element) {
140
136
 
141
- // return element?.getBoundingClientRect().width;
142
- // },
137
+ // const columnSizingState = table.getState().columnSizing;
143
138
 
144
- measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
145
- overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
146
- });
147
- const columnSizingState = table.getState().columnSizing;
139
+ const defaultContext = _react.default.useMemo(() => {
140
+ return [{
141
+ key: 'INSERT_BEFORE',
142
+ // label: 'Thêm dòng bên trên',
143
+ // label: `${t ? t(locale?.add_rows_before ?? 'Add rows before') : 'Add rows before'}`,
144
+ label: locale?.add_rows_before ?? 'Add rows before',
145
+ icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
146
+ fontSize: 14
147
+ }),
148
+ children: [{
149
+ parentKey: 'INSERT_BEFORE',
150
+ key: 'INSERT_BEFORE_1',
151
+ label: locale?.add_1 ?? 'Add 1 rows',
152
+ row: 1
153
+ }, {
154
+ parentKey: 'INSERT_BEFORE',
155
+ key: 'INSERT_BEFORE_10',
156
+ label: locale?.add_10 ?? 'Add 10 rows',
157
+ row: 10
158
+ }, {
159
+ parentKey: 'INSERT_BEFORE',
160
+ key: 'INSERT_BEFORE_50',
161
+ label: locale?.add_50 ?? 'Add 50 rows',
162
+ row: 50
163
+ }, {
164
+ parentKey: 'INSERT_BEFORE',
165
+ key: 'INSERT_BEFORE_100',
166
+ label: locale?.add_100 ?? 'Add 100 rows',
167
+ row: 100
168
+ }, {
169
+ parentKey: 'INSERT_BEFORE',
170
+ key: 'INSERT_BEFORE_ADV',
171
+ label: locale?.custom ?? 'Custom'
172
+ }]
173
+ }, {
174
+ key: 'INSERT_AFTER',
175
+ label: locale?.add_rows_after ?? 'Add rows after',
176
+ icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
177
+ fontSize: 14
178
+ }),
179
+ children: [{
180
+ parentKey: 'INSERT_AFTER',
181
+ key: 'INSERT_AFTER_1',
182
+ label: locale?.add_1 ?? 'Add 1 rows',
183
+ row: 1
184
+ }, {
185
+ parentKey: 'INSERT_AFTER',
186
+ key: 'INSERT_AFTER_10',
187
+ label: locale?.add_10 ?? 'Add 10 rows',
188
+ row: 10
189
+ }, {
190
+ parentKey: 'INSERT_AFTER',
191
+ key: 'INSERT_AFTER_50',
192
+ label: locale?.add_50 ?? 'Add 50 rows',
193
+ row: 50
194
+ }, {
195
+ parentKey: 'INSERT_AFTER',
196
+ key: 'INSERT_AFTER_100',
197
+ label: locale?.add_100 ?? 'Add 100 rows',
198
+ row: 100
199
+ }, {
200
+ parentKey: 'INSERT_AFTER',
201
+ key: 'INSERT_AFTER_ADV',
202
+ label: locale?.custom ?? 'Custom'
203
+ }]
204
+ }, {
205
+ key: 'INSERT_CHILDREN',
206
+ // label: 'Insert item children',
207
+ label: locale?.add_children ?? 'Add children',
208
+ icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
209
+ fontSize: 14
210
+ })
211
+ // children: [
212
+ // {
213
+ // parentKey: 'INSERT_AFTER',
214
+ // key: 'INSERT_AFTER_1',
215
+ // label: 'Thêm 1 dòng',
216
+ // row: 1
217
+ // },
218
+ // {
219
+ // parentKey: 'INSERT_AFTER',
220
+ // key: 'INSERT_AFTER_10',
221
+ // label: 'Thêm 10 dòng',
222
+ // row: 10
223
+ // },
224
+ // {
225
+ // parentKey: 'INSERT_AFTER',
226
+ // key: 'INSERT_AFTER_50',
227
+ // label: 'Thêm 50 dòng',
228
+ // row: 50
229
+ // },
230
+ // {
231
+ // parentKey: 'INSERT_AFTER',
232
+ // key: 'INSERT_AFTER_100',
233
+ // label: 'Thêm 100 dòng',
234
+ // row: 100
235
+ // },
236
+ // {
237
+ // parentKey: 'INSERT_AFTER',
238
+ // key: 'INSERT_AFTER_ADV',
239
+ // label: 'Tùy chỉnh'
240
+ // }
241
+ // ]
242
+ }, {
243
+ key: 'DELETE_CONTENT',
244
+ label: locale?.delete_content ?? 'Delete content',
245
+ icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
246
+ fontSize: 14
247
+ })
248
+ }, {
249
+ key: 'DELETE_ROWS',
250
+ label: locale?.delete_rows ?? 'Delete rows',
251
+ icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
252
+ fontSize: 14
253
+ })
254
+ }];
255
+ }, [locale]);
148
256
  const itemsAdd = _react.default.useMemo(() => {
149
257
  return [{
150
258
  key: '10',
@@ -157,12 +265,14 @@ const TableContainerEdit = props => {
157
265
  label: `100 ${t ? t('rows') : 'rows'}`
158
266
  }];
159
267
  }, [t]);
268
+ const contextMenuItems = _react.default.useMemo(() => {
269
+ const a = showDefaultContext !== false ? [...defaultContext] : [];
270
+ const b = propsContext && propsContext.length > 0 ? [...propsContext, {
271
+ type: 'divider'
272
+ }] : [];
273
+ return [...b, ...a];
274
+ }, [defaultContext, propsContext, showDefaultContext]);
160
275
  const [dataErrors, setDataErrors] = _react.default.useState([]);
161
- _react.default.useEffect(() => {
162
- requestAnimationFrame(() => {
163
- columnVirtualizer.measure();
164
- });
165
- }, [columnSizingState, columnVirtualizer]);
166
276
  _react.default.useEffect(() => {
167
277
  if (validate && dataSource && dataSource.length) {
168
278
  validateData(dataSource, validate).then(error => {
@@ -173,6 +283,25 @@ const TableContainerEdit = props => {
173
283
  });
174
284
  }
175
285
  }, [validate, dataSource]);
286
+ const visibleColumns = table.getVisibleLeafColumns();
287
+ const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
288
+ const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
289
+
290
+ //we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
291
+ const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
292
+ count: visibleColumns.length,
293
+ estimateSize: index => visibleColumns[index].getSize(),
294
+ //estimate width of each column for accurate scrollbar dragging
295
+ getScrollElement: () => tableContainerRef.current,
296
+ horizontal: true,
297
+ // measureElement(element) {
298
+
299
+ // return element?.getBoundingClientRect().width;
300
+ // },
301
+
302
+ measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
303
+ overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
304
+ });
176
305
  const virtualColumns = columnVirtualizer.getVirtualItems();
177
306
  const cacheColumns = columnVirtualizer.measurementsCache;
178
307
  const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
@@ -532,12 +661,23 @@ const TableContainerEdit = props => {
532
661
  // document.removeEventListener('touchstart', handleClickOutside)
533
662
  };
534
663
  }, [dataSource, editingKey, id, onBlur]);
664
+
665
+ // React.useEffect(() => {
666
+ // const totalHeight = height
667
+
668
+ // if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
669
+ // settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight)
670
+ // }
671
+ // }, [id, height, editAble])
672
+
535
673
  _react.default.useEffect(() => {
536
- const totalHeight = height;
537
- if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
538
- settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
674
+ const totalHeight = minHeight ?? height;
675
+ if (totalHeight) {
676
+ const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
677
+ const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
678
+ settableHeight(totalHeight - topHeight - bottomHeight);
539
679
  }
540
- }, [id, height, editAble]);
680
+ }, [id, height, editAble, minHeight]);
541
681
  const {
542
682
  control,
543
683
  handleSubmit,
@@ -1110,6 +1250,174 @@ const TableContainerEdit = props => {
1110
1250
  };
1111
1251
  });
1112
1252
  }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
1253
+ const triggerCommandClick = args => {
1254
+ const {
1255
+ id: idCommand,
1256
+ rowId,
1257
+ rowData,
1258
+ index
1259
+ } = args;
1260
+ const tmpData = [...dataSource];
1261
+ if (idCommand === 'DELETE') {
1262
+ // bật modal confirm
1263
+ if (commandSettings && commandSettings.confirmDialog) {
1264
+ MySwal.fire({
1265
+ title: t ? t('Confirm') : 'Confirm',
1266
+ text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
1267
+ // icon: 'warning',
1268
+ allowOutsideClick: false,
1269
+ showCancelButton: true,
1270
+ confirmButtonText: t ? t('Delete') : 'Delete',
1271
+ cancelButtonText: t ? t('Cancel') : 'Cancel',
1272
+ customClass: {
1273
+ confirmButton: 'be-button btn-primary',
1274
+ cancelButton: 'be-button btn-danger ms-1'
1275
+ },
1276
+ buttonsStyling: false
1277
+ }).then(async result => {
1278
+ if (result.value) {
1279
+ if (!commandSettings || commandSettings && commandSettings.client !== false) {
1280
+ // client
1281
+
1282
+ // kiểm tra dòng hiện tại có parent
1283
+
1284
+ let newData = [];
1285
+ if (rowData?.parentId) {
1286
+ const parent = (0, _utils.findItemByKey)(tmpData, rowKey, rowData.parentId);
1287
+ const childData = parent?.children ? [...parent.children] : [];
1288
+ const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
1289
+ childData.splice(Number(findIndex), 1);
1290
+ const newRowData = {
1291
+ ...parent,
1292
+ children: childData
1293
+ };
1294
+ // const newDataSource = updateArrayByKey(tmpData, newRowData, rowKey as string)
1295
+ newData = (0, _utils.updateArrayByKey)(tmpData, newRowData, rowKey);
1296
+ } else {
1297
+ tmpData.splice(Number(index), 1);
1298
+ newData = [...tmpData];
1299
+ }
1300
+ if (commandClick) {
1301
+ commandClick({
1302
+ id: idCommand,
1303
+ rowId: rowData.rowId,
1304
+ rowData,
1305
+ index,
1306
+ rows: [...newData]
1307
+ });
1308
+ }
1309
+ } else {
1310
+ // server ~~ không làm gì
1311
+ if (commandClick) {
1312
+ commandClick({
1313
+ id: idCommand,
1314
+ rowId: rowData.rowId,
1315
+ rowData,
1316
+ index,
1317
+ rows: [...originData]
1318
+ });
1319
+ }
1320
+ }
1321
+ } else if (result.dismiss === MySwal.DismissReason.cancel) {}
1322
+ });
1323
+ } else {
1324
+ // -------------------
1325
+
1326
+ if (!commandSettings || commandSettings && commandSettings.client !== false) {
1327
+ // client
1328
+
1329
+ let newData2 = [];
1330
+ if (rowData?.parentId) {
1331
+ const parent = (0, _utils.findItemByKey)(originData, rowKey, rowData.parentId);
1332
+ const childData = parent?.children ? [...parent.children] : [];
1333
+ const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
1334
+ childData.splice(Number(findIndex), 1);
1335
+ const newRowData = {
1336
+ ...parent,
1337
+ children: childData
1338
+ };
1339
+ newData2 = (0, _utils.updateArrayByKey)(tmpData, newRowData, rowKey);
1340
+ } else {
1341
+ tmpData.splice(Number(index), 1);
1342
+ newData2 = [...tmpData];
1343
+ }
1344
+ if (commandClick) {
1345
+ commandClick({
1346
+ id: idCommand,
1347
+ rowId,
1348
+ rowData,
1349
+ index,
1350
+ rows: [...newData2]
1351
+ });
1352
+ }
1353
+ } else {
1354
+ // server
1355
+ if (commandClick) {
1356
+ commandClick({
1357
+ id: idCommand,
1358
+ rowId,
1359
+ rowData,
1360
+ index,
1361
+ rows: [...originData]
1362
+ });
1363
+ }
1364
+ }
1365
+ }
1366
+ } else {
1367
+ if (commandClick) {
1368
+ commandClick({
1369
+ ...args,
1370
+ rows: originData
1371
+ });
1372
+ }
1373
+ }
1374
+ };
1375
+ const triggerContextMenuClick = args => {
1376
+ if (args.item?.parentKey && args.item.parentKey === 'INSERT_BEFORE') {
1377
+ if (args.item.key === 'INSERT_BEFORE_ADV') {
1378
+ // mở Modal
1379
+
1380
+ // setOpenModalAddRow((prev) => (
1381
+ // {
1382
+ // ...prev,
1383
+ // open: true,
1384
+ // type: 'INSERT_BEFORE'
1385
+ // }
1386
+ // ))
1387
+ } else {
1388
+ handleInsertBefore(args.item, args.item.row);
1389
+ }
1390
+ return;
1391
+ }
1392
+ if (args.item?.parentKey && args.item.parentKey === 'INSERT_AFTER') {
1393
+ if (args.item.key === 'INSERT_AFTER_ADV') {
1394
+
1395
+ // setOpenModalAddRow((prev) => (
1396
+ // {
1397
+ // ...prev,
1398
+ // open: true,
1399
+ // type: 'INSERT_AFTER'
1400
+ // }
1401
+ // ))
1402
+ } else {
1403
+ handleInsertAfter(args.item, args.item.row);
1404
+ }
1405
+ return;
1406
+ }
1407
+ if (args.item.key === 'INSERT_CHILDREN') {
1408
+ handleInsertChild(args.item);
1409
+ return;
1410
+ }
1411
+ if (args.item.key === 'DELETE_ROWS') {
1412
+ handleDeleteRows(args.item);
1413
+ return;
1414
+ }
1415
+ if (args.item.key === 'DELETE_CONTENT') {
1416
+ handleDeleteContent();
1417
+ return;
1418
+ }
1419
+ contextMenuClick?.(args);
1420
+ };
1113
1421
  return /*#__PURE__*/_react.default.createElement("div", {
1114
1422
  ref: containerRef,
1115
1423
  id: id
@@ -1169,21 +1477,6 @@ const TableContainerEdit = props => {
1169
1477
  columnHidden: columnHidden
1170
1478
  })))), /*#__PURE__*/_react.default.createElement("form", {
1171
1479
  onSubmit: handleSubmit(onSubmit)
1172
- }, /*#__PURE__*/_react.default.createElement("div", {
1173
- // className="container"
1174
- className: (0, _classnames.default)(`${prefix}-grid-container`, {
1175
- 'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
1176
- 'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
1177
- }),
1178
- ref: tableContainerRef,
1179
- style: {
1180
- overflow: 'auto',
1181
- //our scrollable table container
1182
- position: 'relative',
1183
- //needed for sticky header
1184
- // height: tableHeight, //should be a fixed height
1185
- maxHeight: tableHeight //should be a fixed height
1186
- }
1187
1480
  }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
1188
1481
  value: {
1189
1482
  locale,
@@ -1200,7 +1493,7 @@ const TableContainerEdit = props => {
1200
1493
  recordDoubleClick,
1201
1494
  selectionSettings,
1202
1495
  setIsSelectionChange,
1203
- onContextMenu,
1496
+ // onContextMenu,
1204
1497
  setSorterChange,
1205
1498
  setFilterChange,
1206
1499
  rangeState,
@@ -1234,44 +1527,34 @@ const TableContainerEdit = props => {
1234
1527
  triggerPaste,
1235
1528
  handleDeleteContent,
1236
1529
  handleAddMulti,
1237
- dataErrors
1530
+ dataErrors,
1531
+ windowSize
1238
1532
  }
1239
- }, /*#__PURE__*/_react.default.createElement("table", {
1240
- // className={`${prefix}-grid-container`}
1241
- style: {
1242
- display: 'grid',
1243
- // minWidth: table.getTotalSize()
1244
- width: table.getTotalSize()
1245
- }
1246
- }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
1247
- tableContainerRef: tableContainerRef,
1248
- columnVirtualizer: columnVirtualizer,
1249
- table: table,
1250
- virtualPaddingLeft: virtualPaddingLeft,
1251
- virtualPaddingRight: virtualPaddingRight,
1252
- fixedLeftColumns: fixedLeftColumns,
1253
- fixedRightColumns: fixedRightColumns
1254
- }), /*#__PURE__*/_react.default.createElement(_TableBody.default, {
1255
- tableId: id,
1256
- columnVirtualizer: columnVirtualizer,
1533
+ }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
1534
+ contextMenuItems: contextMenuItems,
1535
+ height: tableHeight,
1536
+ minHeight: minHeight,
1537
+ id: id,
1538
+ prefix: prefix,
1257
1539
  table: table,
1258
1540
  tableContainerRef: tableContainerRef,
1259
- virtualPaddingLeft: virtualPaddingLeft,
1260
- virtualPaddingRight: virtualPaddingRight,
1261
- fixedLeftColumns: fixedLeftColumns,
1262
- fixedRightColumns: fixedRightColumns,
1263
- commandClick: commandClick,
1541
+ commandClick: triggerCommandClick,
1542
+ contextMenuClick: triggerContextMenuClick,
1543
+ contextMenuHidden: contextMenuHidden,
1544
+ contextMenuOpen: contextMenuOpen,
1264
1545
  editAble: editAble,
1265
- contextMenuItems: contextMenuItems,
1266
- showEmptyText: showEmptyText
1267
- }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
1546
+ showEmptyText: showEmptyText,
1547
+ summary: summary,
1548
+ dataSource: dataSource,
1549
+ infiniteScroll: infiniteScroll,
1550
+ next: next,
1551
+ loading: loading,
1268
1552
  columnVirtualizer: columnVirtualizer,
1269
- table: table,
1270
1553
  virtualPaddingLeft: virtualPaddingLeft,
1271
1554
  virtualPaddingRight: virtualPaddingRight,
1272
1555
  fixedLeftColumns: fixedLeftColumns,
1273
1556
  fixedRightColumns: fixedRightColumns
1274
- }))))), /*#__PURE__*/_react.default.createElement("div", {
1557
+ }))), /*#__PURE__*/_react.default.createElement("div", {
1275
1558
  ref: bottomToolbarRef
1276
1559
  }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
1277
1560
  className: 'ui-rc-toolbar-bottom'
@@ -1291,7 +1574,7 @@ const TableContainerEdit = props => {
1291
1574
  onClick: ({}) => {
1292
1575
  setEditingKey('');
1293
1576
  }
1294
- })), pagination && /*#__PURE__*/_react.default.createElement(_pagination.default
1577
+ })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default
1295
1578
  // style={{padding: '0.75rem 1rem'}}
1296
1579
  , (0, _extends2.default)({}, pagination, {
1297
1580
  rootClassName: 'pagination-template',
@@ -1299,7 +1582,7 @@ const TableContainerEdit = props => {
1299
1582
  responsive: true,
1300
1583
  size: 'small',
1301
1584
  total: pagination.total,
1302
- pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
1585
+ pageSize: pagination.onChange ? pagination?.pageSize : table.getState().pagination.pageSize,
1303
1586
  pageSizeOptions: [20, 50, 100, 1000, 10000],
1304
1587
  onChange: (page, pageSize) => {
1305
1588
  if (pagination.onChange) {
@@ -1,16 +1,10 @@
1
- import { type Column, type Table } from "@tanstack/react-table";
2
- import type { Virtualizer } from "@tanstack/react-virtual";
1
+ import { type Table } from "@tanstack/react-table";
3
2
  import type { CommandClick } from "../type";
4
3
  import React from "react";
5
4
  interface TableBodyProps<T> {
6
- columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
7
5
  table: Table<T>;
8
6
  tableContainerRef: React.RefObject<HTMLDivElement>;
9
- virtualPaddingLeft: number | undefined;
10
- virtualPaddingRight: number | undefined;
11
- fixedLeftColumns: Column<T, unknown>[];
12
- fixedRightColumns: Column<T, unknown>[];
13
- commandClick?: (args: CommandClick) => void;
7
+ commandClick?: (args: CommandClick<T>) => void;
14
8
  editAble?: boolean;
15
9
  tableId: string;
16
10
  showEmptyText?: boolean;
@@ -13,6 +13,8 @@ var _useContext = require("../useContext");
13
13
  var _rcMasterUi = require("rc-master-ui");
14
14
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
15
15
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
+ // import type { Virtualizer } from "@tanstack/react-virtual";
17
+
16
18
  // import type { Dispatch, SetStateAction } from "react";
17
19
 
18
20
  const TableBody = ({
@@ -4,7 +4,7 @@ import React from "react";
4
4
  import type { VirtualItem } from "@tanstack/react-virtual";
5
5
  interface TableBodyCellProps<T> {
6
6
  cell: Cell<T, unknown>;
7
- commandClick?: (args: CommandClick) => void;
7
+ commandClick?: (args: CommandClick<T>) => void;
8
8
  table: Table<T>;
9
9
  virtualRow?: VirtualItem;
10
10
  }