es-grid-template 1.8.64 → 1.8.65

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 (125) hide show
  1. package/es/grid-component/ColumnsGroup/ColumnsGroup.js +4 -1
  2. package/es/grid-component/TempTable.js +2 -2
  3. package/es/grid-component/hooks/utils.d.ts +2 -8
  4. package/es/grid-component/hooks/utils.js +175 -144
  5. package/es/grid-component/index.d.ts +1 -1
  6. package/es/grid-component/index.js +0 -4
  7. package/es/grid-component/type.d.ts +7 -0
  8. package/es/table-component/type.d.ts +8 -0
  9. package/es/table-virtuoso/ColumnsGroup/ColumnsGroup.d.ts +12 -0
  10. package/es/table-virtuoso/ColumnsGroup/ColumnsGroup.js +232 -0
  11. package/es/table-virtuoso/ColumnsGroup/index.d.ts +1 -0
  12. package/es/table-virtuoso/ColumnsGroup/index.js +1 -0
  13. package/es/{grid-component → table-virtuoso}/InternalTable.d.ts +2 -3
  14. package/es/table-virtuoso/InternalTable.js +413 -0
  15. package/es/table-virtuoso/body/TableBody.d.ts +14 -0
  16. package/es/table-virtuoso/body/TableBody.js +84 -0
  17. package/es/table-virtuoso/body/TableBodyCell.d.ts +14 -0
  18. package/es/table-virtuoso/body/TableBodyCell.js +466 -0
  19. package/es/table-virtuoso/body/TableBodyRow.d.ts +13 -0
  20. package/es/table-virtuoso/body/TableBodyRow.js +116 -0
  21. package/es/table-virtuoso/footer/TableFooterCell.d.ts +7 -0
  22. package/es/table-virtuoso/footer/TableFooterCell.js +54 -0
  23. package/es/table-virtuoso/header/TableHeadCell.d.ts +14 -0
  24. package/es/table-virtuoso/header/TableHeadCell.js +265 -0
  25. package/es/table-virtuoso/header/renderFilter.d.ts +20 -0
  26. package/es/table-virtuoso/header/renderFilter.js +289 -0
  27. package/es/table-virtuoso/hook/constant.d.ts +73 -0
  28. package/es/table-virtuoso/hook/constant.js +240 -0
  29. package/es/table-virtuoso/hook/convert.d.ts +1 -0
  30. package/es/table-virtuoso/hook/convert.js +28 -0
  31. package/es/table-virtuoso/hook/useColumns.d.ts +28 -0
  32. package/es/table-virtuoso/hook/useColumns.js +302 -0
  33. package/es/table-virtuoso/hook/useFilterOperator.d.ts +7 -0
  34. package/es/table-virtuoso/hook/useFilterOperator.js +33 -0
  35. package/es/table-virtuoso/hook/utils.d.ts +159 -0
  36. package/es/table-virtuoso/hook/utils.js +2263 -0
  37. package/es/table-virtuoso/index.d.ts +2 -0
  38. package/es/table-virtuoso/index.js +2 -0
  39. package/es/table-virtuoso/style.d.ts +22 -0
  40. package/es/table-virtuoso/style.js +11 -0
  41. package/es/table-virtuoso/style.scss +1440 -0
  42. package/es/table-virtuoso/table/Grid.d.ts +37 -0
  43. package/es/table-virtuoso/table/Grid.js +302 -0
  44. package/es/table-virtuoso/table/TableContainer.d.ts +49 -0
  45. package/es/table-virtuoso/table/TableContainer.js +305 -0
  46. package/es/table-virtuoso/table/TableWrapper.d.ts +20 -0
  47. package/es/table-virtuoso/table/TableWrapper.js +158 -0
  48. package/es/table-virtuoso/type.d.ts +0 -0
  49. package/es/table-virtuoso/type.js +785 -0
  50. package/es/table-virtuoso/useContext.d.ts +97 -0
  51. package/es/table-virtuoso/useContext.js +21 -0
  52. package/lib/grid-component/ColumnsGroup/ColumnsGroup.js +4 -1
  53. package/lib/grid-component/TempTable.js +2 -2
  54. package/lib/grid-component/hooks/utils.d.ts +2 -8
  55. package/lib/grid-component/hooks/utils.js +176 -152
  56. package/lib/grid-component/index.d.ts +1 -1
  57. package/lib/grid-component/index.js +0 -3
  58. package/lib/grid-component/type.d.ts +7 -0
  59. package/lib/table-component/type.d.ts +8 -0
  60. package/lib/table-virtuoso/ColumnsGroup/ColumnsGroup.d.ts +12 -0
  61. package/lib/table-virtuoso/ColumnsGroup/ColumnsGroup.js +243 -0
  62. package/lib/table-virtuoso/ColumnsGroup/index.d.ts +1 -0
  63. package/lib/table-virtuoso/ColumnsGroup/index.js +16 -0
  64. package/lib/{grid-component → table-virtuoso}/InternalTable.d.ts +2 -3
  65. package/lib/table-virtuoso/InternalTable.js +422 -0
  66. package/lib/table-virtuoso/body/TableBody.d.ts +14 -0
  67. package/lib/table-virtuoso/body/TableBody.js +95 -0
  68. package/lib/table-virtuoso/body/TableBodyCell.d.ts +14 -0
  69. package/lib/table-virtuoso/body/TableBodyCell.js +473 -0
  70. package/lib/table-virtuoso/body/TableBodyRow.d.ts +13 -0
  71. package/lib/table-virtuoso/body/TableBodyRow.js +124 -0
  72. package/lib/table-virtuoso/footer/TableFooterCell.d.ts +7 -0
  73. package/lib/table-virtuoso/footer/TableFooterCell.js +63 -0
  74. package/lib/table-virtuoso/header/TableHeadCell.d.ts +14 -0
  75. package/lib/table-virtuoso/header/TableHeadCell.js +274 -0
  76. package/lib/table-virtuoso/header/renderFilter.d.ts +20 -0
  77. package/lib/table-virtuoso/header/renderFilter.js +299 -0
  78. package/lib/table-virtuoso/hook/constant.d.ts +73 -0
  79. package/lib/table-virtuoso/hook/constant.js +247 -0
  80. package/lib/table-virtuoso/hook/convert.d.ts +1 -0
  81. package/lib/table-virtuoso/hook/convert.js +34 -0
  82. package/lib/table-virtuoso/hook/useColumns.d.ts +28 -0
  83. package/lib/table-virtuoso/hook/useColumns.js +315 -0
  84. package/lib/table-virtuoso/hook/useFilterOperator.d.ts +7 -0
  85. package/lib/table-virtuoso/hook/useFilterOperator.js +40 -0
  86. package/lib/table-virtuoso/hook/utils.d.ts +159 -0
  87. package/lib/table-virtuoso/hook/utils.js +2389 -0
  88. package/lib/table-virtuoso/index.d.ts +2 -0
  89. package/lib/table-virtuoso/index.js +9 -0
  90. package/lib/table-virtuoso/style.d.ts +22 -0
  91. package/lib/table-virtuoso/style.js +18 -0
  92. package/lib/table-virtuoso/style.scss +1440 -0
  93. package/lib/table-virtuoso/table/Grid.d.ts +37 -0
  94. package/lib/table-virtuoso/table/Grid.js +311 -0
  95. package/lib/table-virtuoso/table/TableContainer.d.ts +49 -0
  96. package/lib/table-virtuoso/table/TableContainer.js +313 -0
  97. package/lib/table-virtuoso/table/TableWrapper.d.ts +20 -0
  98. package/lib/table-virtuoso/table/TableWrapper.js +164 -0
  99. package/lib/table-virtuoso/type.d.ts +0 -0
  100. package/lib/table-virtuoso/type.js +786 -0
  101. package/lib/table-virtuoso/useContext.d.ts +97 -0
  102. package/lib/table-virtuoso/useContext.js +27 -0
  103. package/package.json +2 -1
  104. package/es/grid-component/ConvertColumnTable.d.ts +0 -7
  105. package/es/grid-component/ConvertColumnTable.js +0 -144
  106. package/es/grid-component/InternalTable.js +0 -1170
  107. package/es/grid-component/table/Grid.d.ts +0 -23
  108. package/es/grid-component/table/Grid.js +0 -49
  109. package/es/grid-component/table/GridEdit.d.ts +0 -23
  110. package/es/grid-component/table/GridEdit.js +0 -2726
  111. package/es/grid-component/table/Group.d.ts +0 -21
  112. package/es/grid-component/table/Group.js +0 -195
  113. package/es/grid-component/table/InfiniteTable.d.ts +0 -23
  114. package/es/grid-component/table/InfiniteTable.js +0 -101
  115. package/lib/grid-component/ConvertColumnTable.d.ts +0 -7
  116. package/lib/grid-component/ConvertColumnTable.js +0 -153
  117. package/lib/grid-component/InternalTable.js +0 -1178
  118. package/lib/grid-component/table/Grid.d.ts +0 -23
  119. package/lib/grid-component/table/Grid.js +0 -58
  120. package/lib/grid-component/table/GridEdit.d.ts +0 -23
  121. package/lib/grid-component/table/GridEdit.js +0 -2723
  122. package/lib/grid-component/table/Group.d.ts +0 -21
  123. package/lib/grid-component/table/Group.js +0 -204
  124. package/lib/grid-component/table/InfiniteTable.d.ts +0 -23
  125. package/lib/grid-component/table/InfiniteTable.js +0 -109
@@ -1,2723 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
11
- var _classnames = _interopRequireDefault(require("classnames"));
12
- var _antd = require("antd");
13
- var _reactHookForm = require("react-hook-form");
14
- var _reactHotToast = require("react-hot-toast");
15
- var _yup = require("@hookform/resolvers/yup");
16
- var _columns = require("../hooks/columns");
17
- var _EditableCell = _interopRequireDefault(require("../EditableCell"));
18
- var _GridStyle = require("../GridStyle");
19
- var _useContext = require("../useContext");
20
- var _dayjs = _interopRequireDefault(require("dayjs"));
21
- require("dayjs/locale/es");
22
- require("dayjs/locale/vi");
23
- var _TableGrid = _interopRequireDefault(require("../TableGrid"));
24
- var _hooks = require("../hooks");
25
- var _Message = _interopRequireDefault(require("../../Message/Message"));
26
- var _rcMasterUi = require("rc-master-ui");
27
- var _becoxyIcons = require("becoxy-icons");
28
- var _InternalTable = require("../InternalTable");
29
- var _reactNumericComponent = require("react-numeric-component");
30
- var _HeaderContent = _interopRequireDefault(require("../hooks/content/HeaderContent"));
31
- var _sortable = require("@dnd-kit/sortable");
32
- 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); }
33
- 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; }
34
- // import {Button, Dropdown, Form, Modal, Typography} from "antd"
35
-
36
- // import {faker} from "@faker-js/faker";
37
-
38
- const {
39
- Paragraph,
40
- Title
41
- } = _antd.Typography;
42
- _dayjs.default.extend(_customParseFormat.default);
43
- const toast = 'top-right';
44
- // const defaultContext = [
45
- // {
46
- // key: 'INSERT_BEFORE',
47
- // label: 'Thêm dòng bên trên',
48
- // icon: <Plus fontSize={14} />,
49
- // children: [
50
- // {
51
- // parentKey: 'INSERT_BEFORE',
52
- // key: 'INSERT_BEFORE_1',
53
- // label: 'Thêm 1 dòng',
54
- // row: 1
55
- // },
56
- // {
57
- // parentKey: 'INSERT_BEFORE',
58
- // key: 'INSERT_BEFORE_10',
59
- // label: 'Thêm 10 dòng',
60
- // row: 10
61
- // },
62
- // {
63
- // parentKey: 'INSERT_BEFORE',
64
- // key: 'INSERT_BEFORE_50',
65
- // label: 'Thêm 50 dòng',
66
- // row: 50
67
- // },
68
- // {
69
- // parentKey: 'INSERT_BEFORE',
70
- // key: 'INSERT_BEFORE_100',
71
- // label: 'Thêm 100 dòng',
72
- // row: 100
73
- // },
74
- // {
75
- // parentKey: 'INSERT_BEFORE',
76
- // key: 'INSERT_BEFORE_ADV',
77
- // label: 'Tùy chỉnh'
78
- // }
79
- // ]
80
- // },
81
- // {
82
- // key: 'INSERT_AFTER',
83
- // label: 'Thêm dòng bên dưới',
84
- // icon: <Plus fontSize={14} />,
85
- // children: [
86
- // {
87
- // parentKey: 'INSERT_AFTER',
88
- // key: 'INSERT_AFTER_1',
89
- // label: 'Thêm 1 dòng',
90
- // row: 1
91
- // },
92
- // {
93
- // parentKey: 'INSERT_AFTER',
94
- // key: 'INSERT_AFTER_10',
95
- // label: 'Thêm 10 dòng',
96
- // row: 10
97
- // },
98
- // {
99
- // parentKey: 'INSERT_AFTER',
100
- // key: 'INSERT_AFTER_50',
101
- // label: 'Thêm 50 dòng',
102
- // row: 50
103
- // },
104
- // {
105
- // parentKey: 'INSERT_AFTER',
106
- // key: 'INSERT_AFTER_100',
107
- // label: 'Thêm 100 dòng',
108
- // row: 100
109
- // },
110
- // {
111
- // parentKey: 'INSERT_AFTER',
112
- // key: 'INSERT_AFTER_ADV',
113
- // label: 'Tùy chỉnh'
114
- // }
115
- // ]
116
- // },
117
- // {
118
- // key: 'INSERT_CHILDREN',
119
- // // label: 'Insert item children',
120
- // label: 'Thêm cấp con',
121
- // icon: <Plus fontSize={14} />
122
- // // children: [
123
- // // {
124
- // // parentKey: 'INSERT_AFTER',
125
- // // key: 'INSERT_AFTER_1',
126
- // // label: 'Thêm 1 dòng',
127
- // // row: 1
128
- // // },
129
- // // {
130
- // // parentKey: 'INSERT_AFTER',
131
- // // key: 'INSERT_AFTER_10',
132
- // // label: 'Thêm 10 dòng',
133
- // // row: 10
134
- // // },
135
- // // {
136
- // // parentKey: 'INSERT_AFTER',
137
- // // key: 'INSERT_AFTER_50',
138
- // // label: 'Thêm 50 dòng',
139
- // // row: 50
140
- // // },
141
- // // {
142
- // // parentKey: 'INSERT_AFTER',
143
- // // key: 'INSERT_AFTER_100',
144
- // // label: 'Thêm 100 dòng',
145
- // // row: 100
146
- // // },
147
- // // {
148
- // // parentKey: 'INSERT_AFTER',
149
- // // key: 'INSERT_AFTER_ADV',
150
- // // label: 'Tùy chỉnh'
151
- // // }
152
- // // ]
153
- // },
154
- // { key: 'DELETE_CONTENT', label: 'Xóa nội dung', icon: <Trash2 fontSize={14} /> },
155
- // { key: 'DELETE_ROWS', label: 'Xóa dòng', icon: <Trash2 fontSize={14} /> }
156
- // ]
157
-
158
- const validateData = async (data, formSchema) => {
159
- if (!formSchema) {
160
- return [];
161
- } else {
162
- const errors = [];
163
- for (let i = 0; i < data.length; i++) {
164
- try {
165
- await formSchema.validate(data[i], {
166
- abortEarly: false
167
- });
168
- } catch (error) {
169
- errors.push(error.inner.reduce((acc, err) => {
170
- acc[err.path] = {
171
- field: err.path,
172
- index: i,
173
- message: err.message,
174
- type: err.type,
175
- ref: {
176
- name: err.path
177
- }
178
- };
179
- return {
180
- ...acc,
181
- index: i
182
- };
183
- }, {}));
184
- }
185
- }
186
- return errors;
187
- }
188
- };
189
- const SortableHeaderCell = ({
190
- children,
191
- columnKey
192
- }) => {
193
- const {
194
- attributes,
195
- listeners,
196
- setNodeRef,
197
- isDragging
198
- } = (0, _sortable.useSortable)({
199
- id: columnKey
200
- });
201
- const style = {
202
- // ...props.style,
203
- cursor: 'move',
204
- // position: 'absolute',
205
- // left: 3,
206
- // top: -2,
207
- ...(isDragging ? {
208
- zIndex: 9999,
209
- userSelect: 'none'
210
- } : {})
211
- // ...dragActiveStyle(dragState, props.id),
212
- };
213
- return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
214
- ref: setNodeRef,
215
- style: style
216
- }, attributes, listeners), children);
217
- };
218
- const GridEdit = props => {
219
- const {
220
- id,
221
- tableRef,
222
- t,
223
- columns,
224
- dataSource,
225
- originData,
226
- components,
227
- allowResizing,
228
- rowKey = 'id',
229
- selectionSettings,
230
- height,
231
- scrollHeight,
232
- format,
233
- triggerChangeData,
234
- triggerChangeColumns,
235
- onCellPaste,
236
- onCellChange,
237
- triggerPaste,
238
- style,
239
- getRowKey,
240
- className,
241
- toolbarItems,
242
- defaultValue,
243
- expandable,
244
- onCellClick,
245
- rowEditable,
246
- contextMenuItems: propsContext,
247
- showDefaultContext,
248
- validate,
249
- // setTooltipContent,
250
- onBlur,
251
- locale,
252
- mergedFilterKeys,
253
- setMergedFilterKeys,
254
- wrapSettings,
255
- isFullScreen,
256
- ...rest
257
- } = props;
258
- const ref = (0, _react.useRef)(null);
259
- const isSelecting = (0, _react.useRef)(false);
260
- const startCell = (0, _react.useRef)(null);
261
- const childrenColumnName = 'children';
262
-
263
- // const hoveredRow: any = useRef(null)
264
- const isSelectingRow = (0, _react.useRef)(false);
265
- const rowStart = (0, _react.useRef)(null);
266
- const rowsSelected = (0, _react.useRef)(new Set());
267
- const selectedCells = (0, _react.useRef)(new Set());
268
- const pasteCells = (0, _react.useRef)(new Set());
269
- const startSelectedCells = (0, _react.useRef)(null);
270
-
271
- // quét vùng chọn
272
- const isDragMouse = (0, _react.useRef)(false);
273
- const isMouseDown = (0, _react.useRef)(false);
274
- const editingKey = (0, _react.useRef)('');
275
- const cellEditing = (0, _react.useRef)({});
276
-
277
- // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
278
- // const isPasteDragging = useRef(false);
279
-
280
- const visibleCols = _react.default.useMemo(() => {
281
- return (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
282
- }, [columns]);
283
-
284
- // const id = React.useMemo(() => {
285
- //
286
- // return tableId ?? faker.string.alpha(20)
287
- // // return tableId ?? newGuid()
288
- //
289
- // }, [tableId])
290
-
291
- const itemsAdd = _react.default.useMemo(() => {
292
- return [{
293
- key: '10',
294
- label: `10 ${t ? t('rows') : 'rows'}`
295
- }, {
296
- key: '50',
297
- label: `50 ${t ? t('rows') : 'rows'}`
298
- }, {
299
- key: '100',
300
- label: `100 ${t ? t('rows') : 'rows'}`
301
- }];
302
- }, [t]);
303
- const defaultContext = _react.default.useMemo(() => {
304
- return [{
305
- key: 'INSERT_BEFORE',
306
- // label: 'Thêm dòng bên trên',
307
- label: `${t ? t(locale?.add_rows_before ?? 'Add rows before') : 'Add rows before'}`,
308
- icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
309
- fontSize: 14
310
- }),
311
- children: [{
312
- parentKey: 'INSERT_BEFORE',
313
- key: 'INSERT_BEFORE_1',
314
- label: `${t ? t(locale?.add_1 ?? 'Add 1 rows') : 'Add 1 rows'}`,
315
- row: 1
316
- }, {
317
- parentKey: 'INSERT_BEFORE',
318
- key: 'INSERT_BEFORE_10',
319
- label: `${t ? t(locale?.add_10 ?? 'Add 10 rows') : 'Add 10 rows'}`,
320
- row: 10
321
- }, {
322
- parentKey: 'INSERT_BEFORE',
323
- key: 'INSERT_BEFORE_50',
324
- label: `${t ? t(locale?.add_50 ?? 'Add 50 rows') : 'Add 50 rows'}`,
325
- row: 50
326
- }, {
327
- parentKey: 'INSERT_BEFORE',
328
- key: 'INSERT_BEFORE_100',
329
- label: `${t ? t(locale?.add_100 ?? 'Add 100 rows') : 'Add 100 rows'}`,
330
- row: 100
331
- }, {
332
- parentKey: 'INSERT_BEFORE',
333
- key: 'INSERT_BEFORE_ADV',
334
- label: `${t ? t(locale?.custom ?? 'Custom') : 'Custom'}`
335
- }]
336
- }, {
337
- key: 'INSERT_AFTER',
338
- label: `${t ? t(locale?.add_rows_after ?? 'Add rows after') : 'Add rows before'}`,
339
- icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
340
- fontSize: 14
341
- }),
342
- children: [{
343
- parentKey: 'INSERT_AFTER',
344
- key: 'INSERT_AFTER_1',
345
- label: `${t ? t(locale?.add_1 ?? 'Add 1 rows') : 'Add 1 rows'}`,
346
- row: 1
347
- }, {
348
- parentKey: 'INSERT_AFTER',
349
- key: 'INSERT_AFTER_10',
350
- label: `${t ? t(locale?.add_10 ?? 'Add 10 rows') : 'Add 10 rows'}`,
351
- row: 10
352
- }, {
353
- parentKey: 'INSERT_AFTER',
354
- key: 'INSERT_AFTER_50',
355
- label: `${t ? t(locale?.add_50 ?? 'Add 50 rows') : 'Add 50 rows'}`,
356
- row: 50
357
- }, {
358
- parentKey: 'INSERT_AFTER',
359
- key: 'INSERT_AFTER_100',
360
- label: `${t ? t(locale?.add_100 ?? 'Add 100 rows') : 'Add 100 rows'}`,
361
- row: 100
362
- }, {
363
- parentKey: 'INSERT_AFTER',
364
- key: 'INSERT_AFTER_ADV',
365
- label: `${t ? t(locale?.custom ?? 'Custom') : 'Custom'}`
366
- }]
367
- }, {
368
- key: 'INSERT_CHILDREN',
369
- // label: 'Insert item children',
370
- label: `${t ? t(locale?.add_children ?? 'Add children') : 'Add children'}`,
371
- icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
372
- fontSize: 14
373
- })
374
- // children: [
375
- // {
376
- // parentKey: 'INSERT_AFTER',
377
- // key: 'INSERT_AFTER_1',
378
- // label: 'Thêm 1 dòng',
379
- // row: 1
380
- // },
381
- // {
382
- // parentKey: 'INSERT_AFTER',
383
- // key: 'INSERT_AFTER_10',
384
- // label: 'Thêm 10 dòng',
385
- // row: 10
386
- // },
387
- // {
388
- // parentKey: 'INSERT_AFTER',
389
- // key: 'INSERT_AFTER_50',
390
- // label: 'Thêm 50 dòng',
391
- // row: 50
392
- // },
393
- // {
394
- // parentKey: 'INSERT_AFTER',
395
- // key: 'INSERT_AFTER_100',
396
- // label: 'Thêm 100 dòng',
397
- // row: 100
398
- // },
399
- // {
400
- // parentKey: 'INSERT_AFTER',
401
- // key: 'INSERT_AFTER_ADV',
402
- // label: 'Tùy chỉnh'
403
- // }
404
- // ]
405
- }, {
406
- key: 'DELETE_CONTENT',
407
- label: `${t ? t(locale?.delete_content ?? 'Delete content') : 'Delete content'}`,
408
- icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
409
- fontSize: 14
410
- })
411
- }, {
412
- key: 'DELETE_ROWS',
413
- label: `${t ? t(locale?.delete_rows ?? 'Delete rows') : 'Delete rows'}`,
414
- icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
415
- fontSize: 14
416
- })
417
- }];
418
- }, [t, locale]);
419
-
420
- // const [form] = Form.useForm()
421
-
422
- // const [editingKey, setEditingKey] = useState<string | number>('')
423
-
424
- const [dataErrors, setDataErrors] = (0, _react.useState)([]);
425
-
426
- // const abc = useMemo(() => {
427
- //
428
- // return selectedCells
429
- // // return [...new Set(Array.from(selectedCells.current).map((item: any) => parseInt(item.split('-')[0])))]
430
- //
431
- // }, [selectedCells])
432
-
433
- const [rangeCells, setRangeCells] = (0, _react.useState)(new Set());
434
- const [openModalAddRow, setOpenModalAddRow] = (0, _react.useState)({
435
- open: false,
436
- type: ''
437
- });
438
- const [rowsAdd, setRowsAdd] = (0, _react.useState)(1);
439
-
440
- // const [cellEditing, setCellEditing] = useState<any>(null)
441
-
442
- const [isPasteDragging, setIsPasteDragging] = (0, _react.useState)(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
443
-
444
- const [innerExpandedKeys, setInnerExpandedKeys] = _react.default.useState(() => {
445
- // if (defaultExpandedRowKeys) {
446
- // return defaultExpandedRowKeys;
447
- // }
448
- // if (defaultExpandAllRows) {
449
- return (0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? [];
450
- // }
451
- // return [];
452
- });
453
- const mergedExpandedKeys = _react.default.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
454
- _react.default.useEffect(() => {
455
- if (validate && dataSource && dataSource.length) {
456
- validateData(dataSource, validate).then(error => {
457
- setDataErrors([...error]);
458
- // if (getErrors) {
459
- // getErrors([...error])
460
- // }
461
- });
462
- }
463
- }, [validate, dataSource]);
464
- const rowsFocus = _react.default.useMemo(() => {
465
- const leng = (0, _hooks.flattenArray)(dataSource).length;
466
- const arr = [...new Set(Array.from(rangeCells).map(item => parseInt(item.split('-')[0])))];
467
-
468
- // return [...new Set(Array.from(rangeCells).map((item: any) => parseInt(item.split('-')[0])))] ?? []
469
- return arr.filter(it => it < leng);
470
- }, [dataSource, rangeCells]);
471
- const contextMenuItems = _react.default.useMemo(() => {
472
- const a = showDefaultContext !== false ? [...defaultContext] : [];
473
- const b = propsContext && propsContext.length > 0 ? [...propsContext, {
474
- type: 'divider'
475
- }] : [];
476
- return [...b, ...a];
477
- }, [defaultContext, propsContext, showDefaultContext]);
478
- const {
479
- control,
480
- handleSubmit,
481
- setValue,
482
- trigger,
483
- getValues,
484
- reset,
485
- formState: {
486
- errors
487
- }
488
- } = (0, _reactHookForm.useForm)({
489
- mode: 'onChange',
490
- resolver: validate ? (0, _yup.yupResolver)(validate) : undefined
491
- });
492
- const onTriggerExpand = _react.default.useCallback(record => {
493
- const key = getRowKey(record, dataSource.indexOf(record));
494
- let newExpandedKeys;
495
- const hasKey = mergedExpandedKeys.has(key);
496
- if (hasKey) {
497
- mergedExpandedKeys.delete(key);
498
- newExpandedKeys = [...mergedExpandedKeys];
499
- } else {
500
- newExpandedKeys = [...mergedExpandedKeys, key];
501
- }
502
- setInnerExpandedKeys(newExpandedKeys);
503
- //
504
- // onAddBgSelectedCell(rangeCells, id)
505
- // onAddBorderSelectedCell(rangeCells, id)
506
- }, [getRowKey, dataSource, mergedExpandedKeys]);
507
- const handleAddSingle = _react.default.useCallback(item => {
508
- const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
509
- const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
510
- if (item && item.onClick) {
511
- item.onClick({
512
- toolbar: item
513
- });
514
- } else {
515
- const newData = [...dataSource, defaultValue ? {
516
- ...defaultRowValue,
517
- id: undefined,
518
- rowId
519
- } : {
520
- id: undefined,
521
- rowId
522
- }];
523
- triggerChangeData?.(newData, 'Add');
524
- }
525
- }, [dataSource, defaultValue, triggerChangeData]);
526
- const handleAddMulti = _react.default.useCallback((item, n) => {
527
- if (item.onClick) {
528
- item.onClick({
529
- toolbar: item
530
- });
531
- } else {
532
- const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
533
- const newRows = Array.from({
534
- length: n
535
- }).map(() => defaultRowValue ? {
536
- ...defaultRowValue,
537
- id: undefined,
538
- rowId: (0, _hooks.newGuid)()
539
- } : {
540
- id: undefined,
541
- rowId: (0, _hooks.newGuid)()
542
- });
543
- const kkk = (0, _hooks.getAllRowKey)(newRows) ?? [];
544
- const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
545
- setMergedFilterKeys?.(rs);
546
- const newData = dataSource.concat(newRows);
547
- triggerChangeData?.(newData, 'Add');
548
- }
549
- }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
550
- const handleDuplicate = _react.default.useCallback(() => {
551
- // không tính tree
552
-
553
- // Cập nhật data mới
554
- const newData = [...dataSource];
555
- const duplicatedItems = rowsFocus.map(index => ({
556
- ...newData[index],
557
- rowId: (0, _hooks.newGuid)(),
558
- id: undefined,
559
- isDuplicate: true
560
- }));
561
-
562
- // Vị trí chèn là ngay sau phần tử lớn nhất trong rowsFocus
563
- const insertAfter = Math.max(...rowsFocus);
564
- const rsFilter = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
565
-
566
- // const rs = updateOrInsertInOrder(originData, rsFilter)
567
- const rs = (0, _hooks.updateOrInsert)(originData, rsFilter);
568
- // const rs2 = mergeWithFilter(originData, rsFilter)
569
-
570
- triggerChangeData?.(rs, 'DUPLICATE');
571
- }, [dataSource, originData, rowsFocus, triggerChangeData]);
572
-
573
- // thêm n dòng bên trên
574
- const handleInsertBefore = _react.default.useCallback((item, n) => {
575
- const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
576
- // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
577
-
578
- const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
579
- if (item.onClick) {
580
- item.onClick({
581
- toolbar: item
582
- });
583
- } else {
584
- if (!record?.parentId) {
585
- // Cập nhật data mới
586
- // const newData = [...dataSource]
587
- const newData = [...originData];
588
- const newRows = Array.from({
589
- length: n
590
- }).map(() => defaultRowValue ? {
591
- ...defaultRowValue,
592
- id: undefined,
593
- rowId: (0, _hooks.newGuid)()
594
- } : {
595
- id: undefined,
596
- rowId: (0, _hooks.newGuid)()
597
- });
598
- const kkk = (0, _hooks.getAllRowKey)(newRows) ?? [];
599
- const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
600
- setMergedFilterKeys?.(rs);
601
- const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
602
- newData.splice(index, 0, ...newRows);
603
- triggerChangeData?.(newData, 'INSERT_BEFORE');
604
- } else {
605
- // const newData = [...dataSource]
606
- const newData = [...originData];
607
- const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
608
- const newRows = Array.from({
609
- length: n
610
- }).map(() => defaultRowValue ? {
611
- ...defaultRowValue,
612
- id: undefined,
613
- rowId: (0, _hooks.newGuid)(),
614
- parentId: parent.rowId
615
- } : {
616
- id: undefined,
617
- rowId: (0, _hooks.newGuid)(),
618
- parentId: parent.rowId
619
- });
620
-
621
- // Cập nhật childData mới
622
- const childData = parent?.children ? [...parent.children] : [];
623
- const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
624
- childData.splice(index, 0, ...newRows);
625
- const newRowData = {
626
- ...parent,
627
- children: childData
628
- };
629
- const newDataSource = (0, _hooks.updateArrayByKey)(newData, newRowData, rowKey);
630
- triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
631
- }
632
- }
633
- }, [dataSource, defaultValue, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, triggerChangeData]);
634
-
635
- //thêm 1 dòng bên dưới
636
- const handleInsertAfter = _react.default.useCallback((item, n) => {
637
- const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
638
- const insertAfter = Math.max(...rowsFocus);
639
- const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[insertAfter];
640
-
641
- // const record: RecordType = flattenData(childrenColumnName, originData)[rowsFocus[rowsFocus.length - 1]]
642
-
643
- // const record = getRecordByKey()
644
-
645
- if (item.onClick) {
646
- item.onClick({
647
- toolbar: item
648
- });
649
- } else {
650
- if (!record?.parentId) {
651
- // Cập nhật data mới
652
- const newData = [...originData];
653
- const newRows = Array.from({
654
- length: n
655
- }).map(() => defaultRowValue ? {
656
- ...defaultRowValue,
657
- id: undefined,
658
- rowId: (0, _hooks.newGuid)()
659
- } : {
660
- id: undefined,
661
- rowId: (0, _hooks.newGuid)()
662
- });
663
- const kkk = (0, _hooks.getAllRowKey)(newRows) ?? [];
664
- const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
665
- setMergedFilterKeys?.(rs);
666
- const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
667
- newData.splice(index + 1, 0, ...newRows);
668
- triggerChangeData?.(newData, 'INSERT_AFTER');
669
- } else {
670
- const newData = [...originData];
671
- const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
672
- const newRows = Array.from({
673
- length: n
674
- }).map(() => defaultRowValue ? {
675
- ...defaultRowValue,
676
- id: undefined,
677
- rowId: (0, _hooks.newGuid)(),
678
- parentId: parent.rowId
679
- } : {
680
- id: undefined,
681
- rowId: (0, _hooks.newGuid)(),
682
- parentId: parent.rowId
683
- });
684
- const kkk = (0, _hooks.getAllRowKey)(newRows) ?? [];
685
- const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
686
- setMergedFilterKeys?.(rs);
687
-
688
- // Cập nhật childData mới
689
- const childData = parent?.children ? [...parent.children] : [];
690
- const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
691
- childData.splice(index + 1, 0, ...newRows);
692
- const newRowData = {
693
- ...parent,
694
- children: childData
695
- };
696
- const newDataSource = (0, _hooks.updateArrayByKey)(newData, newRowData, rowKey);
697
- triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
698
- }
699
- }
700
- }, [defaultValue, dataSource, rowsFocus, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
701
- const handleInsertChild = _react.default.useCallback(item => {
702
- const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
703
- const rowId = (0, _hooks.newGuid)();
704
- const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
705
- if (item.onClick) {
706
- item.onClick({
707
- toolbar: item
708
- });
709
- } else {
710
- // const newData = [...dataSource]
711
- const newData = [...originData];
712
- let newElement;
713
- if (!record.children || record.children.length === 0) {
714
- newElement = {
715
- ...record,
716
- children: [{
717
- ...defaultRowValue,
718
- parentId: record.rowId,
719
- rowId
720
- }]
721
- };
722
- } else {
723
- newElement = {
724
- ...record,
725
- children: [...record.children, {
726
- ...defaultRowValue,
727
- parentId: record.rowId,
728
- rowId
729
- }]
730
- };
731
- }
732
- const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
733
- setMergedFilterKeys?.(rs);
734
- const newDataSource = (0, _hooks.updateArrayByKey)(newData, newElement, rowKey);
735
- triggerChangeData?.(newDataSource, 'INSERT_CHILDREN');
736
- }
737
- const key = getRowKey(record, dataSource.indexOf(record));
738
-
739
- // let newExpandedKeys: Key[];
740
- const hasKey = mergedExpandedKeys.has(key);
741
- if (!hasKey) {
742
- const newExpandedKeys = [...mergedExpandedKeys, key];
743
- setInnerExpandedKeys(newExpandedKeys);
744
- }
745
- }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, triggerChangeData]);
746
- const handleDeleteRows = _react.default.useCallback(item => {
747
- // setTimeout(() => {
748
- // onAddBgSelectedCell(selectedCells.current, id)
749
- // onAddBorderSelectedCell(selectedCells.current, id)
750
- // })
751
-
752
- if (item.onClick) {
753
- item.onClick({
754
- toolbar: item
755
- });
756
- } else {
757
- // const filterData = flattenArray([...dataSource])
758
- const filterData = (0, _hooks.flattenArray)([...originData]);
759
- const indexesToDelete = [...rowsFocus];
760
-
761
- // Sắp xếp giảm dần để xóa từ cuối lên đầu
762
- indexesToDelete.sort((a, b) => b - a).forEach(index => {
763
- filterData.splice(index, 1);
764
- });
765
-
766
- // const newData = updateOrInsert(flattenArray([...originData]), filterData)
767
- //
768
- const rs = (0, _hooks.unFlattenData)(filterData);
769
- triggerChangeData?.([...rs], 'DELETE_ROWS');
770
- }
771
- setTimeout(() => {
772
- (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
773
- (0, _hooks.showDraggingPoint)(selectedCells.current, id);
774
- }, 0);
775
- }, [id, originData, rowsFocus, triggerChangeData]);
776
- const handleDeleteAll = _react.default.useCallback(() => {
777
- triggerChangeData?.([], 'INSERT_BEFORE');
778
- }, [triggerChangeData]);
779
- const onSubmit = formData => {
780
- try {
781
- // const record = (await form.validateFields()) as RecordType;
782
- const row = {
783
- ...formData
784
- };
785
-
786
- // const newData = [...dataSource]
787
- const newData = [...originData];
788
-
789
- // @ts-ignore
790
- const index = (0, _hooks.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
791
- const rs = (0, _hooks.updateArrayByKey)(newData, row, rowKey);
792
- if (index > -1) {
793
- triggerChangeData?.(rs, 'onChange');
794
- }
795
- } catch (errInfo) {
796
- console.log('Validate Failed:', errInfo);
797
- }
798
- };
799
- const handleCellChange = args => {
800
- const {
801
- record,
802
- type: changeType,
803
- newState,
804
- prevState,
805
- option,
806
- field,
807
- indexCol,
808
- indexRow,
809
- key
810
- } = args;
811
- if (changeType === 'blur') {
812
- const handleChangeCallback = callbackData => {
813
- const callbackRecord = callbackData;
814
- Object.entries(callbackRecord).forEach(([name, value]) => {
815
- setValue(name, value);
816
- });
817
- onSubmit(callbackRecord);
818
- };
819
- if (onCellChange) {
820
- if (onCellChange.length > 1) {
821
- onCellChange({
822
- field,
823
- indexCol,
824
- type: 'onChange',
825
- value: newState,
826
- option,
827
- indexRow,
828
- rowData: record,
829
- rowId: key,
830
- // rowsData: [...dataSource],
831
- rowsData: [...originData],
832
- sumValue: []
833
- }, handleChangeCallback);
834
- } else {
835
- onCellChange({
836
- field,
837
- indexCol,
838
- type: 'onChange',
839
- option,
840
- value: newState,
841
- indexRow,
842
- rowData: record,
843
- rowId: key,
844
- // rowsData: [...dataSource],
845
- rowsData: [...originData],
846
- sumValue: []
847
- }, handleChangeCallback);
848
- onSubmit(record);
849
- }
850
- }
851
- }
852
- if (prevState && newState && prevState !== newState && changeType === 'enter') {
853
- onSubmit(record);
854
- }
855
- };
856
- const handleDeleteContent = () => {
857
- if (selectedCells.current.size > 0) {
858
- const newData = [...dataSource];
859
-
860
- // colIndex => field
861
- const colIndexToField = (0, _columns.flatColumns2)(visibleCols).map(col => col.field);
862
-
863
- // Duyệt qua mỗi ô cần xóa
864
- for (const cell of selectedCells.current) {
865
- const [rowIndexStr, colIndexStr] = cell.split("-");
866
- const rowIndex = Number(rowIndexStr);
867
- const colIndex = Number(colIndexStr);
868
- const field = colIndexToField[colIndex];
869
- const column = (0, _columns.flatColumns2)(visibleCols)[colIndex];
870
- const rowData = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowIndex];
871
- if (newData[rowIndex] && field && field in newData[rowIndex] && (0, _hooks.isEditable)(column, rowData)) {
872
- const rowDta = {
873
- ...newData[rowIndex]
874
- };
875
-
876
- // @ts-ignore
877
- newData[rowIndex][field] = '';
878
- handleCellChange({
879
- key: getRowKey?.(newData[rowIndex], rowIndex),
880
- field: column.field ?? column.dataIndex,
881
- record: newData[rowIndex],
882
- prevState: rowDta[field],
883
- newState: '',
884
- option: '',
885
- indexCol: colIndex,
886
- indexRow: rowIndex,
887
- type: 'blur'
888
- });
889
-
890
- // if (onCellChange)
891
- }
892
- }
893
- const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);
894
- triggerChangeData?.([...rsFilterData], 'DELETE_CONTENT');
895
- }
896
- };
897
- const toolbarItemsBottom = (0, _react.useMemo)(() => {
898
- if (!rowsFocus || rowsFocus.length === 0) {
899
- 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 => {
900
- if (item.key === 'ADD') {
901
- return {
902
- ...item,
903
- template: () => {
904
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
905
- className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
906
- }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
907
- overlayClassName: 'be-popup-container',
908
- trigger: ['click'],
909
- style: {
910
- color: '#28c76f',
911
- borderColor: '#28c76f'
912
- },
913
- className: 'toolbar-button toolbar-dropdown-button',
914
- menu: {
915
- items: itemsAdd,
916
- onClick: e => handleAddMulti(item, Number(e.key))
917
- }
918
- }, /*#__PURE__*/_react.default.createElement("span", {
919
- style: {
920
- color: '#28c76f'
921
- },
922
- onClick: () => handleAddMulti(item, 1)
923
- }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
924
- }
925
- };
926
- }
927
- if (item.key === 'DELETE') {
928
- return {
929
- ...item,
930
- template: () => {
931
- return /*#__PURE__*/_react.default.createElement("div", {
932
- className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
933
- }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
934
- style: {
935
- color: '#eb4619',
936
- borderColor: '#eb4619'
937
- },
938
- variant: 'outlined',
939
- onClick: handleDeleteAll,
940
- className: "d-flex toolbar-button"
941
- }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
942
- }
943
- };
944
- }
945
- return {
946
- ...item
947
- };
948
- });
949
- }
950
- return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
951
- if (item.key === 'ADD') {
952
- return {
953
- ...item,
954
- template: () => {
955
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
956
- className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
957
- }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
958
- overlayClassName: 'be-popup-container',
959
- style: {
960
- color: '#28c76f',
961
- borderColor: '#28c76f'
962
- },
963
- className: 'toolbar-button toolbar-dropdown-button',
964
- menu: {
965
- items: itemsAdd,
966
- onClick: e => handleAddMulti(item, Number(e.key))
967
- }
968
- }, /*#__PURE__*/_react.default.createElement("span", {
969
- style: {
970
- color: '#28c76f'
971
- },
972
- onClick: () => handleAddMulti(item, 1)
973
- }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
974
- }
975
- };
976
- }
977
- if (item.key === 'DUPLICATE') {
978
- return {
979
- ...item,
980
- template: () => {
981
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
982
- className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
983
- }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
984
- style: {
985
- color: '#28c76f',
986
- borderColor: '#28c76f'
987
- },
988
- variant: 'outlined',
989
- onClick: handleDuplicate,
990
- className: "d-flex toolbar-button"
991
- }, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
992
- }
993
- };
994
- }
995
- if (item.key === 'INSERT_BEFORE') {
996
- return {
997
- ...item,
998
- template: () => {
999
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1000
- className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
1001
- }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
1002
- overlayClassName: 'be-popup-container',
1003
- style: {
1004
- color: '#28c76f',
1005
- borderColor: '#28c76f'
1006
- },
1007
- className: 'toolbar-button toolbar-dropdown-button',
1008
- menu: {
1009
- items: itemsAdd,
1010
- onClick: e => handleInsertBefore(item, Number(e.key))
1011
- }
1012
- }, /*#__PURE__*/_react.default.createElement("span", {
1013
- style: {
1014
- color: '#28c76f'
1015
- },
1016
- onClick: () => handleInsertBefore(item, 1)
1017
- }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
1018
- }
1019
- };
1020
- }
1021
- if (item.key === 'INSERT_AFTER') {
1022
- return {
1023
- ...item,
1024
- template: () => {
1025
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1026
- className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
1027
- }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
1028
- overlayClassName: 'be-popup-container',
1029
- style: {
1030
- color: '#28c76f',
1031
- borderColor: '#28c76f'
1032
- },
1033
- className: 'toolbar-button toolbar-dropdown-button',
1034
- menu: {
1035
- items: itemsAdd,
1036
- onClick: e => handleInsertAfter(item, Number(e.key))
1037
- }
1038
- }, /*#__PURE__*/_react.default.createElement("span", {
1039
- style: {
1040
- color: '#28c76f'
1041
- },
1042
- onClick: () => handleInsertAfter(item, 1)
1043
- }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
1044
- }
1045
- };
1046
- }
1047
- if (item.key === 'INSERT_CHILDREN') {
1048
- return {
1049
- ...item,
1050
- template: () => {
1051
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1052
- className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
1053
- }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
1054
- style: {
1055
- color: '#28c76f',
1056
- borderColor: '#28c76f'
1057
- },
1058
- variant: 'outlined',
1059
- onClick: () => handleInsertChild(item),
1060
- className: "d-flex toolbar-button"
1061
- }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
1062
- }
1063
- };
1064
- }
1065
- if (item.key === 'DELETE') {
1066
- return {
1067
- ...item,
1068
- template: () => {
1069
- return /*#__PURE__*/_react.default.createElement("div", {
1070
- className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
1071
- }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
1072
- style: {
1073
- color: '#eb4619',
1074
- borderColor: '#eb4619'
1075
- },
1076
- variant: 'outlined',
1077
- onClick: handleDeleteAll,
1078
- className: "d-flex toolbar-button"
1079
- }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
1080
- }
1081
- };
1082
- }
1083
- if (item.key === 'DELETE_ROWS') {
1084
- return {
1085
- ...item,
1086
- template: () => {
1087
- return /*#__PURE__*/_react.default.createElement("div", {
1088
- className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
1089
- }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
1090
- style: {
1091
- color: '#eb4619',
1092
- borderColor: '#eb4619'
1093
- },
1094
- variant: 'outlined',
1095
- onClick: () => handleDeleteRows(item),
1096
- className: "d-flex toolbar-button"
1097
- }, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
1098
- }
1099
- };
1100
- }
1101
- return {
1102
- ...item
1103
- };
1104
- });
1105
- }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
1106
-
1107
- // const isEditing = React.useCallback((record: RecordType) => {
1108
- // return record[rowKey as any] === editingKey.current
1109
- // }, [editingKey, rowKey])
1110
-
1111
- _react.default.useEffect(() => {
1112
- const handleClickOutside = event => {
1113
- const element = event.target;
1114
-
1115
- // const tableId = id ? document.getElementById(id) : undefined
1116
- // const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
1117
- const container = document.querySelector(".be-popup-container");
1118
- const containerContextMenu = document.querySelector(".popup-context-menu");
1119
- const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody .ui-rc-table-tbody-virtual-holder`);
1120
- // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
1121
-
1122
- // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
1123
- const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
1124
- const itemHeader = document.querySelector(`#${id} .ui-rc-table-thead`);
1125
- const isInsideContainer = element.closest(".be-popup-container") && container;
1126
- const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
1127
- const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
1128
- const isInsideHeader = itemHeader && itemHeader.contains(event.target);
1129
- if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext) {
1130
- return;
1131
- }
1132
-
1133
- // if (ref.current && !ref.current.contains(event.target)) {
1134
- // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
1135
-
1136
- if (ref.current && tableBody && !tableBody.contains(event.target)) {
1137
- if (editingKey.current) {
1138
- onBlur?.(dataSource);
1139
- }
1140
- setTimeout(() => {
1141
- // setEditingKey('')
1142
- editingKey.current = '';
1143
- });
1144
- isSelecting.current = false;
1145
- startCell.current = null;
1146
- // setSelectedCells(new Set())
1147
- // setRowsSelected(new Set())
1148
-
1149
- (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
1150
- (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
1151
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
1152
- rowsSelected.current = new Set();
1153
- selectedCells.current = new Set();
1154
- setRangeCells(new Set());
1155
- }
1156
- };
1157
-
1158
- // document.addEventListener('click', handleClickOutside)
1159
- document.addEventListener('mousedown', handleClickOutside);
1160
- // document.addEventListener('touchstart', handleClickOutside)
1161
-
1162
- return () => {
1163
- // document.removeEventListener('click', handleClickOutside)
1164
- document.removeEventListener('mousedown', handleClickOutside);
1165
- // document.removeEventListener('touchstart', handleClickOutside)
1166
- };
1167
- }, [dataSource, id, onBlur]);
1168
- const triggerDragPaste = (pastesArray, ctrlKey) => {
1169
- const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
1170
- const tmpCols = {
1171
- ...visibleCols
1172
- };
1173
- const rowSelectedFirst = (0, _hooks.getFirstSelectCell)(selectedCells.current).row;
1174
- const rowPasteLast = (0, _hooks.getLastSelectCell)(pasteCells.current).row;
1175
- const selectedArray = Array.from(selectedCells.current).map(key => {
1176
- const [row, col] = key.split("-").map(Number);
1177
- const columnKey = tmpCols[col].field;
1178
-
1179
- // @ts-ignore
1180
- return {
1181
- row,
1182
- col,
1183
- value: (0, _hooks.flattenData)(childrenColumnName, dataSource)[row][columnKey]
1184
- };
1185
- // return { row, col, value: '' };
1186
- });
1187
- const copyRows = selectedArray.map(it => ({
1188
- ...(0, _hooks.flattenData)(childrenColumnName, dataSource)[it.row]
1189
- }));
1190
-
1191
- // Xác định min/max row và col để sắp xếp dữ liệu
1192
- const minRow = Math.min(...selectedArray.map(cell => cell.row));
1193
- const maxRow = Math.max(...selectedArray.map(cell => cell.row));
1194
- const minCol = Math.min(...selectedArray.map(cell => cell.col));
1195
- const maxCol = Math.max(...selectedArray.map(cell => cell.col));
1196
-
1197
- // Tạo dữ liệu dạng bảng (mảng 2D)
1198
- const table = Array.from({
1199
- length: maxRow - minRow + 1
1200
- }, () => Array(maxCol - minCol + 1).fill(""));
1201
-
1202
- // Gán giá trị vào bảng
1203
- selectedArray.forEach(({
1204
- row,
1205
- col,
1206
- value
1207
- }) => {
1208
- table[row - minRow][col - minCol] = value;
1209
- });
1210
- let newRange;
1211
- if (rowPasteLast > rowSelectedFirst) {
1212
- // kéo xuóng
1213
- newRange = ctrlKey ? (0, _hooks.addRowsDownWithCtrl)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length) : (0, _hooks.addRowsDown)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
1214
- } else {
1215
- // kéo lên
1216
- newRange = ctrlKey ? (0, _hooks.addRowsUpWithCtrl)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length) : (0, _hooks.addRowsUp)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
1217
- }
1218
-
1219
- // const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pastesArray).row]
1220
-
1221
- // if (!record?.parentId) {
1222
-
1223
- // Cập nhật data mới
1224
- const newData = (0, _hooks.flattenArray)([...dataSource]);
1225
- // const newData = flattenArray([...originData])
1226
-
1227
- // Lấy vị trí bắt đầu
1228
- // const { row: startRow, col: startCol } = selectedCell;
1229
- const startRow = (0, _hooks.getFirstSelectCell)(pastesArray).row;
1230
- const startCol = (0, _hooks.getFirstSelectCell)(selectedCells.current).col;
1231
- const pastedRows = [];
1232
- const pastedColumns = new Set();
1233
- newRange.addedRows.forEach((rowValues, rowIndex) => {
1234
- const targetRow = startRow + rowIndex;
1235
-
1236
- // Nếu vượt quá số dòng hiện có, thêm dòng mới
1237
- if (targetRow >= newData.length) {
1238
- // @ts-ignore
1239
- newData.push({
1240
- id: undefined,
1241
- rowId: (0, _hooks.newGuid)()
1242
- });
1243
- }
1244
- rowValues.forEach((cellValue, colIndex) => {
1245
- const targetCol = startCol + colIndex;
1246
- if (targetCol >= tmpCols.length) {
1247
- // Không vượt quá số cột
1248
- return;
1249
- }
1250
-
1251
- // @ts-ignore
1252
- const columnKey = tmpCols[targetCol].field;
1253
-
1254
- // @ts-ignore
1255
- newData[targetRow] = {
1256
- ...newData[targetRow],
1257
- [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
1258
- };
1259
- pastedColumns.add(columnKey);
1260
- });
1261
-
1262
- // Lưu dòng được paste
1263
- pastedRows.push(newData[targetRow]);
1264
- });
1265
- const pastedColumnsArray = Array.from(pastedColumns) ?? [];
1266
-
1267
- // const rsFilterData = updateDataByFilter(flattenArray([...originData]), newData)
1268
- const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);
1269
- // const rsFilterData = mergeWithFilter(flattenArray([...originData]), newData)
1270
- // const rsFilterData = mergeWithFilter2(flattenArray([...originData]), newData)
1271
-
1272
- const rs = (0, _hooks.unFlattenData)(rsFilterData);
1273
- triggerPaste?.(pastedRows, pastedColumnsArray, rs, copyRows);
1274
-
1275
- // }
1276
-
1277
- /// cập nhật cell class
1278
- if (selectedCells.current && selectedCells.current.size > 0) {
1279
- // onRemoveBgSelectedCell(rangeCells, id)
1280
- // onRemoveBorderSelectedCell(rangeCells, id)
1281
- }
1282
-
1283
- // selectedCells.current = sortedSetASC(mergedSet)
1284
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
1285
- const newCells = (0, _hooks.sortedSetASC)(mergedSet);
1286
- selectedCells.current = newCells;
1287
- (0, _hooks.onAddBgCellIndex)(newCells, id);
1288
- setRangeCells(newCells);
1289
- (0, _hooks.onAddBgSelectedCell)(newCells, id);
1290
- (0, _hooks.onAddBorderSelectedCell)(newCells, id);
1291
- setTimeout(() => {
1292
- (0, _hooks.showDraggingPoint)(newCells, id);
1293
- }, 50);
1294
-
1295
- // setPasteCells(new Set())
1296
-
1297
- if (pasteCells.current && pasteCells.current.size > 0) {
1298
- (0, _hooks.removeClassBorderPasteCell)(pasteCells.current, 'up', id);
1299
- }
1300
- pasteCells.current = new Set();
1301
- };
1302
- const handlePasted = (record, indexCol, rowNumber, pasteData) => {
1303
- const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
1304
- if (!record?.parentId) {
1305
- // Cập nhật data mới
1306
- const newData = (0, _hooks.flattenArray)([...dataSource]);
1307
-
1308
- // const indexRows = newData.findIndex((it) => it[rowKey as any] === record[rowKey])
1309
-
1310
- // Lấy vị trí bắt đầu
1311
- // const { row: startRow, col: startCol } = selectedCell;
1312
- const startRow = newData.findIndex(it => it[rowKey] === record[rowKey]);
1313
- const startCol = indexCol;
1314
-
1315
- // const flattData = flattenArray(newData);
1316
-
1317
- const pastedRows = [];
1318
- const pastedColumns = new Set();
1319
- rows.forEach((rowValues, rowIndex) => {
1320
- const targetRow = startRow + rowIndex;
1321
-
1322
- // Nếu vượt quá số dòng hiện có, thêm dòng mới
1323
- if (targetRow >= newData.length) {
1324
- // @ts-ignore
1325
- // newData.push({ id: newGuid()});
1326
- newData.push({
1327
- id: undefined,
1328
- rowId: (0, _hooks.newGuid)()
1329
- });
1330
- }
1331
- rowValues.forEach((cellValue, colIndex) => {
1332
- const targetCol = startCol + colIndex;
1333
- if (targetCol >= visibleCols.length) {
1334
- // Không vượt quá số cột
1335
- return;
1336
- }
1337
- const columnTarget = visibleCols[targetCol];
1338
- const isEdit = typeof columnTarget.editEnable === 'function' ? columnTarget.editEnable(newData[targetRow]) : columnTarget.editEnable;
1339
- if (isEdit) {
1340
- const columnKey = visibleCols[targetCol].field;
1341
- // const isEdit = typeof columnTarget.editEnable === 'function' ? columnTarget.editEnable(newData[targetRow]) : columnTarget.editEnable
1342
-
1343
- if (columnTarget.type === 'number' && (0, _hooks.isFormattedNumber)(cellValue.trim())) {
1344
- const colFormat = typeof columnTarget.format === 'function' ? columnTarget.format(record) : columnTarget.format;
1345
- const valuePasteFormat = (0, _hooks.detectSeparators)(cellValue.trim());
1346
- const cellFormat = (0, _hooks.getFormat)(colFormat, format);
1347
- const thousandSeparator = valuePasteFormat?.thousandSeparator ?? cellFormat?.thousandSeparator;
1348
- const decimalSeparator = valuePasteFormat?.decimalSeparator ?? cellFormat?.decimalSeparator;
1349
- const dec = cellFormat?.decimalScale;
1350
- const numericFormatProps = {
1351
- thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
1352
- decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
1353
- allowNegative: cellFormat?.allowNegative ?? true,
1354
- prefix: cellFormat?.prefix,
1355
- suffix: cellFormat?.suffix,
1356
- decimalScale: dec,
1357
- fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
1358
- };
1359
- const val = (0, _reactNumericComponent.removeNumericFormat)(cellValue.trim(), undefined, numericFormatProps);
1360
-
1361
- // @ts-ignore
1362
- newData[targetRow] = {
1363
- ...newData[targetRow],
1364
- [columnKey]: Number(val)
1365
- };
1366
- } else {
1367
- // @ts-ignore
1368
- newData[targetRow] = {
1369
- ...newData[targetRow],
1370
- [columnKey]: cellValue.trim()
1371
- };
1372
- }
1373
- pastedColumns.add(columnKey);
1374
- }
1375
- });
1376
-
1377
- // Lưu dòng được paste
1378
- pastedRows.push(newData[targetRow]);
1379
- });
1380
- const pastedColumnsArray = Array.from(pastedColumns) ?? [];
1381
-
1382
- // const rsFilterData = updateDataByFilter(flattenArray([...originData]), newData)
1383
- // const rsFilterData = mergeWithFilter(flattenArray([...originData]), newData)
1384
- const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);
1385
- const rs = (0, _hooks.unFlattenData)(rsFilterData);
1386
- triggerPaste?.(pastedRows, pastedColumnsArray, rs, []);
1387
- } else {
1388
- // Cập nhật data mới
1389
- // const newData = flattenArray([...dataSource])
1390
-
1391
- const parent = (0, _hooks.findItemByKey)(dataSource, rowKey, record.parentId);
1392
-
1393
- // Cập nhật childData mới
1394
- const childData = parent?.children ? [...parent.children] : [];
1395
-
1396
- // Lấy vị trí bắt đầu
1397
- // const { row: startRow, col: startCol } = selectedCell;
1398
- const startRow = childData.findIndex(it => it[rowKey] === record[rowKey]);
1399
- const startCol = indexCol;
1400
- const pastedRows = [];
1401
- const pastedColumns = new Set();
1402
- rows.forEach((rowValues, rowIndex) => {
1403
- const targetRow = startRow + rowIndex;
1404
-
1405
- // Nếu vượt quá số dòng hiện có, thêm dòng mới
1406
- if (targetRow >= childData.length) {
1407
- childData.push({
1408
- id: undefined,
1409
- rowId: (0, _hooks.newGuid)(),
1410
- parentId: parent[rowKey ?? 'id']
1411
- });
1412
- }
1413
- rowValues.forEach((cellValue, colIndex) => {
1414
- const targetCol = startCol + colIndex;
1415
- if (targetCol >= visibleCols.length) {
1416
- // Không vượt quá số cột
1417
- return;
1418
- }
1419
- const columnTarget = visibleCols[targetCol];
1420
- const isEdit = typeof columnTarget.editEnable === 'function' ? columnTarget.editEnable(childData[targetRow]) : columnTarget.editEnable;
1421
- if (isEdit) {
1422
- // @ts-ignore
1423
- const columnKey = visibleCols[targetCol].field;
1424
-
1425
- // @ts-ignore
1426
- childData[targetRow] = {
1427
- ...childData[targetRow],
1428
- [columnKey]: cellValue.trim()
1429
- };
1430
- pastedColumns.add(columnKey);
1431
- }
1432
- });
1433
-
1434
- // Lưu dòng được paste
1435
- pastedRows.push(childData[targetRow]);
1436
- });
1437
- const pastedColumnsArray = Array.from(pastedColumns) ?? [];
1438
- const newRowData = {
1439
- ...parent,
1440
- children: childData
1441
- }; // item đã được filter
1442
-
1443
- // const newDataSource = updateArrayByKey(newData, newRowData, rowKey as string)
1444
- const newDataSource = (0, _hooks.updateArrayByKey)(originData, newRowData, rowKey);
1445
-
1446
- //
1447
- // // const rsFilterData = updateDataByFilter(flattenArray([...originData]), flattenArray(newDataSource))
1448
- // // const rsFilterData = mergeWithFilter(flattenArray([...originData]), flattenArray(newDataSource))
1449
-
1450
- // const rsFilterData1 = updateOrInsert(flattenArray([...originData]), flattenArray([...newDataSource]))
1451
- //
1452
- //
1453
- // // const rs = unFlattenData(rsFilterData)
1454
- // const rs1 = unFlattenData(rsFilterData1)
1455
-
1456
- triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
1457
- }
1458
- };
1459
- const handlePaste = (record, indexCol, rowNumber, e) => {
1460
- // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
1461
- const pasteData = e.clipboardData.getData("text/plain");
1462
-
1463
- // Chuyển đổi dữ liệu từ clipboard thành mảng
1464
- const rowsPasted = pasteData.split("\n").filter(row => row !== '').map(row =>
1465
- // const rows = pasteData.split("\n").map((row: any) =>
1466
- row.replace(/\r/g, "").split("\t")
1467
-
1468
- // {
1469
- // return row.replace(/\r/g, "").split("\t")
1470
- // }
1471
- );
1472
- if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
1473
- // bật popup thông báo
1474
-
1475
- _antd.Modal.confirm({
1476
- content: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Paragraph, {
1477
- style: {
1478
- marginBottom: '.25rem',
1479
- fontSize: 14
1480
- }
1481
- }, "D\u1EEF li\u1EC7u sao ch\xE9p v\u01B0\u1EE3t qu\xE1 s\u1ED1 d\xF2ng cho ph\xE9p (500 d\xF2ng).Ph\u1EA7n m\u1EC1n s\u1EBD ch\u1EC9 l\u1EA5y 500 d\xF2ng \u0111\u1EA7u ti\xEAn."), /*#__PURE__*/_react.default.createElement(Title, {
1482
- level: 5,
1483
- style: {
1484
- marginTop: '.75rem'
1485
- }
1486
- }, "B\u1EA1n c\xF3 mu\u1ED1n ti\u1EBFp t\u1EE5c sao ch\xE9p kh\xF4ng?")),
1487
- centered: true,
1488
- className: 'be-popup-container',
1489
- onOk: () => {
1490
- handlePasted(record, indexCol, rowNumber, rowsPasted);
1491
- }
1492
- // footer: (_, { OkBtn, CancelBtn }) => (
1493
- // <>
1494
- // <OkBtn />
1495
- // <CancelBtn />
1496
- // </>
1497
- // ),
1498
- });
1499
- } else {
1500
- handlePasted(record, indexCol, rowNumber, rowsPasted);
1501
- }
1502
- };
1503
- const handlePointDoubleClick = e => {
1504
- // e.preventDefault()
1505
- e.stopPropagation();
1506
- const colStart = (0, _hooks.getFirstSelectCell)(selectedCells.current).col;
1507
- const colEnd = (0, _hooks.getLastSelectCell)(selectedCells.current).col;
1508
- const startPasteRow = (0, _hooks.getLastSelectCell)(selectedCells.current).row;
1509
- const newPasteCells = new Set();
1510
- for (let r = Math.min(startPasteRow, dataSource.length - 1) + 1; r <= Math.max(startPasteRow, dataSource.length - 1); r++) {
1511
- for (let c = Math.min(colStart, colStart); c <= Math.max(colStart, colEnd); c++) {
1512
- newPasteCells.add(`${r}-${c}`);
1513
- }
1514
- }
1515
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
1516
- triggerDragPaste(newPasteCells);
1517
- };
1518
- const handleMouseDown = (record, row, col, e) => {
1519
- if (e.button === 2) {
1520
- e.stopPropagation();
1521
- return;
1522
- }
1523
- if (editingKey && editingKey.current === record[rowKey]) {
1524
- return;
1525
- }
1526
- if (record[rowKey] !== editingKey.current && editingKey.current !== '') {
1527
- setTimeout(() => {
1528
- // setEditingKey('')
1529
- editingKey.current = '';
1530
- onBlur?.(dataSource);
1531
- });
1532
- }
1533
-
1534
- // isDragMouse.current = true
1535
- isMouseDown.current = true;
1536
- if (e.ctrlKey) {
1537
- isSelecting.current = true;
1538
- startCell.current = {
1539
- row,
1540
- col
1541
- };
1542
-
1543
- // const cell: any = new Set([`${row}-${col}`])
1544
-
1545
- // setCurrentCtrlCells(cell)
1546
- } else {
1547
- isSelecting.current = true;
1548
- startCell.current = {
1549
- row,
1550
- col
1551
- };
1552
- const target = e.target;
1553
- if (target.closest('.dragging-point')) {
1554
- e.stopPropagation();
1555
- e.preventDefault();
1556
- // Không xử lý gì cả
1557
- } else {
1558
- // setStartSelectedCell({row, col})
1559
-
1560
- startSelectedCells.current = {
1561
- row,
1562
- col
1563
- };
1564
-
1565
- // setSelectedCells(new Set([`${row}-${col}`]));
1566
-
1567
- const cells = new Set([`${row}-${col}`]);
1568
- if (selectedCells.current && selectedCells.current.size > 0) {
1569
- if (!(0, _hooks.isEqualSet)(cells, rangeCells)) {
1570
- // onRemoveBgSelectedCell(rangeCells, id)
1571
- // onRemoveBorderSelectedCell(rangeCells, id)
1572
- (0, _hooks.hideDraggingPoint)(rangeCells, id);
1573
- (0, _hooks.onRemoveBgCellIndex)(selectedCells.current, id);
1574
- }
1575
- }
1576
- if (rowsSelected.current && rowsSelected.current.size > 0) {
1577
- (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
1578
- }
1579
- if (!(0, _hooks.isEqualSet)(cells, selectedCells.current)) {
1580
- (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
1581
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
1582
- selectedCells.current = cells;
1583
- // setRangeCells(cells)
1584
-
1585
- (0, _hooks.onAddBgCellIndex)(cells, id);
1586
- (0, _hooks.onAddBorderSelectedCell)(cells, id);
1587
- (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id, false);
1588
- (0, _hooks.showDraggingPoint)(selectedCells.current, id);
1589
- }
1590
-
1591
- // setRowsSelected(new Set())
1592
- rowsSelected.current = new Set();
1593
- }
1594
- }
1595
- };
1596
- const handleMouseUp = e => {
1597
- isSelecting.current = false;
1598
- startCell.current = null;
1599
- isSelectingRow.current = false;
1600
- rowStart.current = null;
1601
- isDragMouse.current = false;
1602
- isMouseDown.current = false;
1603
- setIsPasteDragging(false);
1604
- if (e.ctrlKey) {
1605
-
1606
- // setCtrlCells([...ctrlCells, currentCtrlCells])
1607
- }
1608
-
1609
- // nếu ctrlCell length > 0 thì set selectCells
1610
-
1611
- if (pasteCells && pasteCells.current.size > 0) {
1612
- triggerDragPaste(pasteCells.current, e.ctrlKey);
1613
- } else {
1614
- setRangeCells(selectedCells.current);
1615
- const target = e.target;
1616
- if (target.closest('.dragging-point')) {
1617
- e.stopPropagation();
1618
- e.preventDefault();
1619
- return; // Không xử lý gì cả
1620
- }
1621
- if (selectedCells.current && selectedCells.current.size > 1) {
1622
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
1623
- (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
1624
-
1625
- // showDraggingPoint(selectedCells.current, id)
1626
- }
1627
- (0, _hooks.showDraggingPoint)(selectedCells.current, id);
1628
- // onAddBorderSelectedCell(selectedCells.current, id)
1629
- }
1630
- };
1631
- const handleMouseEnter = (row, col, e) => {
1632
- if (!isSelecting.current || !startCell.current) {
1633
- return;
1634
- }
1635
- const {
1636
- row: startRow,
1637
- col: startCol
1638
- } = startCell.current;
1639
- if (e.ctrlKey) {
1640
-
1641
- // const newCtrlCells = new Set();
1642
- // for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
1643
- // for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
1644
- // newCtrlCells.add(`${r}-${c}`)
1645
- // }
1646
- // }
1647
-
1648
- // setCurrentCtrlCells(newCtrlCells)
1649
-
1650
- // return
1651
- }
1652
- if (!isPasteDragging) {
1653
- // chọn vùng copy
1654
-
1655
- // setSelectIsDragging(true)
1656
-
1657
- setIsPasteDragging(false);
1658
- // isPasteDragging.current = false
1659
-
1660
- const newSelectedCells = new Set();
1661
- for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
1662
- for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
1663
- newSelectedCells.add(`${r}-${c}`);
1664
- }
1665
- }
1666
-
1667
- // setSelectedCells(newSelectedCells)
1668
-
1669
- if (selectedCells.current && selectedCells.current.size > 0) {
1670
- (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
1671
- }
1672
- selectedCells.current = newSelectedCells;
1673
- (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
1674
- } else {
1675
- // chọn vùng paste
1676
-
1677
- // setSelectIsDragging(false)
1678
-
1679
- // setIsPasteDragging(true) ////////
1680
-
1681
- const newSelectedCells = new Set();
1682
- for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
1683
- for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
1684
- newSelectedCells.add(`${r}-${c}`);
1685
- }
1686
- }
1687
- const colStart = (0, _hooks.getFirstSelectCell)(selectedCells.current).col;
1688
- const colEnd = (0, _hooks.getLastSelectCell)(selectedCells.current).col;
1689
- const rowSelectedEnd = (0, _hooks.getLastSelectCell)(selectedCells.current).row;
1690
- if (row >= rowSelectedEnd) {
1691
- // kéo xuống dưới
1692
-
1693
- const newPasteCells = new Set();
1694
- for (let r = Math.min(startRow, row) + 1; r <= Math.max(startRow, row); r++) {
1695
- for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
1696
- newPasteCells.add(`${r}-${c}`);
1697
- }
1698
- }
1699
-
1700
- // setPasteCells(newPasteCells)
1701
-
1702
- if (pasteCells.current && pasteCells.current.size > 0) {
1703
- (0, _hooks.removeClassBorderPasteCell)(pasteCells.current, 'down', id);
1704
- }
1705
- pasteCells.current = newPasteCells;
1706
- (0, _hooks.addClassBorderPasteCell)(newPasteCells, 'down', id);
1707
- }
1708
- if (row < rowSelectedEnd) {
1709
- // kéo lên trên
1710
-
1711
- const rowSelectedStart = (0, _hooks.getFirstSelectCell)(selectedCells.current).row;
1712
- if (row < rowSelectedStart) {
1713
- const newPasteCells = new Set();
1714
- for (let r = Math.min(rowSelectedStart, row); r <= Math.max(rowSelectedStart, row) - 1; r++) {
1715
- for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
1716
- newPasteCells.add(`${r}-${c}`);
1717
- }
1718
- }
1719
-
1720
- // setPasteCells(newPasteCells)
1721
-
1722
- if (pasteCells.current && pasteCells.current.size > 0) {
1723
- (0, _hooks.removeClassBorderPasteCell)(pasteCells.current, 'up', id);
1724
- }
1725
- pasteCells.current = newPasteCells;
1726
- (0, _hooks.addClassBorderPasteCell)(newPasteCells, 'up', id);
1727
- }
1728
- }
1729
- if (col > colEnd) {
1730
- // kéo sang phải
1731
- }
1732
- if (row < colStart) {
1733
- // kéo sang trái
1734
- }
1735
- }
1736
- };
1737
- const handleClickColHeader = (column, indexColumn) => {
1738
- const newSelectedCells = new Set();
1739
- for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
1740
- for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
1741
- newSelectedCells.add(`${r}-${c}`);
1742
- }
1743
- }
1744
-
1745
- // setSelectedCells(new Set(newSelectedCells));
1746
-
1747
- if (selectedCells.current && selectedCells.current.size > 0) {
1748
- // onRemoveBgSelectedCell(selectedCells.current, id)
1749
- // onRemoveBorderSelectedCell(selectedCells.current, id)
1750
- }
1751
- if (rowsSelected.current && rowsSelected.current.size > 0) {
1752
- (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
1753
- }
1754
- selectedCells.current = newSelectedCells;
1755
- (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
1756
- (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
1757
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
1758
- (0, _hooks.showDraggingPoint)(newSelectedCells, id);
1759
- };
1760
- const handleMouseDownRowHeader = (row, col, column, e) => {
1761
- if (e.button === 2) {
1762
- e.stopPropagation();
1763
- return;
1764
- }
1765
- if (editingKey.current) {
1766
- editingKey.current = '';
1767
- // setEditingKey('')
1768
- }
1769
- isSelectingRow.current = true;
1770
- rowStart.current = {
1771
- row,
1772
- col
1773
- };
1774
- const newSelectedCells = new Set();
1775
- const tCols = (0, _hooks.editAbleColumns)(visibleCols);
1776
- for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
1777
- for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
1778
- newSelectedCells.add(`${r}-${c}`);
1779
- }
1780
- }
1781
- if (selectedCells.current && selectedCells.current.size > 0) {
1782
- (0, _hooks.onRemoveBgCellIndex)(selectedCells.current, id);
1783
- (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
1784
- (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
1785
- // onRemoveBorderSelectedCell(selectedCells.current, id)
1786
- }
1787
- if (rowsSelected.current && rowsSelected.current.size > 0) {
1788
- (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
1789
- }
1790
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
1791
- selectedCells.current = newSelectedCells;
1792
- rowsSelected.current = new Set([`${row}-${col}`]);
1793
- (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id, false);
1794
- setTimeout(() => {
1795
- (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id, false);
1796
- }, 10);
1797
- (0, _hooks.addClassCellIndexSelected)(new Set([`${row}-${col}`]), id);
1798
- };
1799
- const handleMouseEnterRowHeader = (row, col, e) => {
1800
- // dừng sự kiện kéo để chọn từ các column khác khi vừa gặp column index
1801
- if (isSelecting) {
1802
- startCell.current = null;
1803
- e.stopPropagation();
1804
- }
1805
- if (!isSelectingRow.current || !rowStart.current) {
1806
- return;
1807
- }
1808
- // const { row: startRow, col: startCol } = rowStart.current;
1809
- const {
1810
- row: startRow,
1811
- col: startCol
1812
- } = rowStart.current;
1813
- const newSelectedRows = new Set();
1814
- for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
1815
- for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
1816
- newSelectedRows.add(`${r}-${c}`);
1817
- }
1818
- }
1819
- const newSelectedCells = new Set();
1820
- for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
1821
- for (let c = Math.min((0, _hooks.editAbleColumns)(columns).length, col) + 1; c <= Math.max((0, _hooks.editAbleColumns)(columns).length, col); c++) {
1822
- newSelectedCells.add(`${r}-${c}`);
1823
- }
1824
- }
1825
- if (selectedCells.current && selectedCells.current.size > 0) {
1826
- (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
1827
- }
1828
- selectedCells.current = newSelectedCells;
1829
- (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
1830
- if (rowsSelected.current && rowsSelected.current.size > 0) {
1831
- (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
1832
- }
1833
- rowsSelected.current = newSelectedRows;
1834
- (0, _hooks.addClassCellIndexSelected)(newSelectedRows, id);
1835
- };
1836
- const handleCellClick = (indexRow, record, column) => {
1837
- const cellClickCallback = newOptions => {
1838
- if (newOptions) {
1839
- const newElem = {
1840
- ...column,
1841
- editSelectSettings: {
1842
- ...(column?.editSelectSettings ? {
1843
- ...column?.editSelectSettings
1844
- } : {}),
1845
- options: newOptions
1846
- }
1847
- };
1848
- const rrr = (0, _hooks.updateArrayByKey)([...columns], newElem, 'field');
1849
- triggerChangeColumns?.(rrr, 'click');
1850
- }
1851
- };
1852
- if (onCellClick) {
1853
- onCellClick({
1854
- index: indexRow,
1855
- rowId: record.rowId,
1856
- cellValue: record[record.field],
1857
- type: "Editing",
1858
- field: column.field,
1859
- rowData: record
1860
- }, cellClickCallback);
1861
- }
1862
- };
1863
- const handleCopy = e => {
1864
- const selectedArray = Array.from(selectedCells.current).map(key => {
1865
- const [row, col] = key.split("-").map(Number);
1866
- // @ts-ignore
1867
- const columnKey = (0, _hooks.editAbleColumns)(columns)[col - 1].field;
1868
-
1869
- // @ts-ignore
1870
- return {
1871
- row,
1872
- col,
1873
- value: (0, _hooks.flattenData)(childrenColumnName, dataSource)[row][columnKey] ?? ''
1874
- };
1875
- // return { row, col, value: '' };
1876
- });
1877
-
1878
- // Xác định min/max row và col để sắp xếp dữ liệu
1879
- const minRow = Math.min(...selectedArray.map(cell => cell.row));
1880
- const maxRow = Math.max(...selectedArray.map(cell => cell.row));
1881
- const minCol = Math.min(...selectedArray.map(cell => cell.col));
1882
- const maxCol = Math.max(...selectedArray.map(cell => cell.col));
1883
-
1884
- // Tạo dữ liệu dạng bảng (mảng 2D)
1885
- const table = Array.from({
1886
- length: maxRow - minRow + 1
1887
- }, () => Array(maxCol - minCol + 1).fill(""));
1888
-
1889
- // Gán giá trị vào bảng
1890
- selectedArray.forEach(({
1891
- row,
1892
- col,
1893
- value
1894
- }) => {
1895
- table[row - minRow][col - minCol] = value;
1896
- });
1897
-
1898
- // Chuyển mảng 2D thành chuỗi định dạng Excel
1899
- const copyText = table.map(row => row.join("\t")).join("\n");
1900
-
1901
- // Copy vào clipboard
1902
- e.preventDefault();
1903
- e.clipboardData.setData("text/plain", copyText);
1904
- (0, _Message.default)(t ? t('CopySuccessful') : 'Copy Successful');
1905
- };
1906
- const handleEdit = (record, col, editType, rowIndex, e) => {
1907
- (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
1908
-
1909
- // setTooltipContent('')
1910
-
1911
- // @ts-ignore
1912
- // setEditingKey(record[rowKey])
1913
- editingKey.current = record[rowKey];
1914
-
1915
- // setCellEditing({
1916
- // row: record,
1917
- // column: col
1918
- // })
1919
-
1920
- cellEditing.current = {
1921
- row: record,
1922
- column: col
1923
- };
1924
- reset();
1925
-
1926
- // const formattedRecord = { ...record };
1927
-
1928
- if (!(0, _hooks.isObjEmpty)(record)) {
1929
- Object.entries(record).forEach(([name, value]) => {
1930
- setValue(name, value);
1931
-
1932
- // if (listObjectDate.includes(name) && value) {
1933
- // setValue(name, new Date(value))
1934
- // } else {
1935
- // setValue(name, value)
1936
- // }
1937
- });
1938
- }
1939
- if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
1940
- setValue(col.dataIndex, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
1941
- }
1942
- if (editType === 'select') {
1943
- // setSearchValue(e.key)
1944
- // setOpen(true)
1945
- }
1946
- if (startSelectedCells.current && startSelectedCells.current.row !== undefined && startSelectedCells.current.col !== undefined) {
1947
- setTimeout(() => {
1948
- const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] input`);
1949
- const textarea = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] textarea`);
1950
- const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells.current.col}"] .ant-select-selection-search input`);
1951
- if (textarea) {
1952
- // input.focus({
1953
- // preventScroll: true,
1954
- // cursor: 'end'
1955
- // })
1956
-
1957
- textarea.focus();
1958
- textarea.setSelectionRange(textarea.value.length, textarea.value.length);
1959
- }
1960
- if (input) {
1961
- input.focus();
1962
- }
1963
- if (select) {
1964
- // @ts-ignore
1965
- select.searchValue = e.key;
1966
- // @ts-ignore
1967
- select.focus();
1968
- }
1969
- }, 20);
1970
- }
1971
- };
1972
-
1973
- // useEffect(() => {
1974
- // const tableBody = document.querySelector(".ui-rc-table-tbody");
1975
- // const tableHeader = document.querySelector(".ui-rc-table-header");
1976
- //
1977
- // if (tableBody && tableHeader) {
1978
- // tableBody.addEventListener("scroll", () => {
1979
- // tableHeader.scrollLeft = tableBody.scrollLeft;
1980
- // });
1981
- // }
1982
- // }, []);
1983
-
1984
- const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
1985
- const fixedWidth = (0, _hooks.totalFixedWidth)(visibleCols, 'left', selectionSettings);
1986
- if (scrollType === 'horizontal') {
1987
- if (tableRef.current) {
1988
- tableRef.current.scrollTo({
1989
- left: cell.offsetLeft - fixedWidth,
1990
- behavior: "smooth"
1991
- });
1992
-
1993
- // Cuộn header
1994
- // const tableHeader = document?.querySelector(".ui-rc-table-header");
1995
- // if (tableHeader) {
1996
- // tableHeader.scrollLeft = cell.offsetLeft - fixedWidth
1997
- // }
1998
- }
1999
- } else {
2000
- tableRef?.current?.scrollTo({
2001
- index: rowIndex,
2002
- behavior: 'smooth'
2003
- });
2004
- }
2005
- };
2006
- const handleFocusCell = (rowIndex, colIndex, col, scrollType, e, isTimeout) => {
2007
- const isEdit = editingKey.current !== '';
2008
- const cellEdit = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
2009
- const cell = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
2010
- const updateSelection = () => {
2011
- // setStartSelectedCell({ row: rowIndex, col: colIndex });
2012
- startSelectedCells.current = {
2013
- row: rowIndex,
2014
- col: colIndex
2015
- };
2016
- // setSelectedCells(new Set([`${rowIndex}-${colIndex}`]));
2017
-
2018
- const cells = new Set([`${rowIndex}-${colIndex}`]);
2019
- if (selectedCells.current && selectedCells.current.size > 0) {
2020
- (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
2021
- (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
2022
- }
2023
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
2024
- selectedCells.current = cells;
2025
- setRangeCells(cells);
2026
-
2027
- // setTimeout(() => {
2028
- //
2029
- // // onAddBgSelectedCell(selectedCells.current, id)
2030
- // // onAddBorderSelectedCell(selectedCells.current, id)
2031
- //
2032
- // }, 50)
2033
-
2034
- (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
2035
- (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
2036
- (0, _hooks.showDraggingPoint)(cells, id);
2037
- };
2038
- const focusNextCell = (editingCell, cellEditable) => {
2039
- if (isEdit) {
2040
- if (editingCell) {
2041
- updateSelection();
2042
- if (e?.key !== 'Tab') {
2043
- editingCell.focus();
2044
- // editingCell.click()
2045
- }
2046
- }
2047
- if (scrollType === 'horizontal' && editingCell) {
2048
- scrollToCell(rowIndex, colIndex, editingCell, 'horizontal');
2049
- }
2050
- if (scrollType === 'vertical' && cellEditable) {
2051
- // setEditingKey('')
2052
- editingKey.current = '';
2053
- updateSelection();
2054
- scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
2055
- if (e?.key !== 'Tab') {
2056
- cellEditable.focus();
2057
- (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
2058
- // editingCell.click()
2059
- }
2060
- }
2061
- } else {
2062
- if (cellEditable) {
2063
- updateSelection();
2064
- if (e?.key !== 'Tab') {
2065
- cellEditable.focus();
2066
- (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
2067
- }
2068
- }
2069
- if (cellEditable) {
2070
- scrollToCell(rowIndex, colIndex, cellEditable, scrollType);
2071
- }
2072
- }
2073
- };
2074
- if (isTimeout) {
2075
- let cellEdit1 = undefined;
2076
- let cell1 = undefined;
2077
- setTimeout(() => {
2078
- cellEdit1 = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
2079
- cell1 = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
2080
- }, 20);
2081
- setTimeout(() => {
2082
- focusNextCell(cellEdit1, cell1);
2083
- }, 50);
2084
- } else {
2085
- focusNextCell(cellEdit, cell);
2086
- }
2087
- };
2088
- const convertColumns = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
2089
- if (column === _InternalTable.SELECTION_COLUMN) {
2090
- return _InternalTable.SELECTION_COLUMN;
2091
- }
2092
- if (column.field === '#') {
2093
- return {
2094
- ...column,
2095
- className: 'rc-ui-cell-editable rc-ui-cell-index',
2096
- onCell: (record, rowIndex) => {
2097
- const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
2098
- return {
2099
- 'data-row-index': rowNumber,
2100
- onPaste: event => {
2101
- if (editingKey.current === '') {
2102
- handlePaste(record, colIndex + 1, rowNumber, event);
2103
- event.preventDefault();
2104
- }
2105
- },
2106
- onCopy: e => {
2107
- if (editingKey.current === '') {
2108
- handleCopy(e);
2109
- e.preventDefault();
2110
- }
2111
- },
2112
- // onClick: () => {
2113
- // if (record[rowKey] !== editingKey && (editingKey !== '')) {
2114
- // setEditingKey('')
2115
- // }
2116
- // },
2117
- tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
2118
- };
2119
- },
2120
- render: (value, record) => {
2121
- const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
2122
- return /*#__PURE__*/_react.default.createElement("div", {
2123
- className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {}),
2124
- onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
2125
- onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
2126
- onMouseUp: event => handleMouseUp(event)
2127
- }, /*#__PURE__*/_react.default.createElement("div", {
2128
- className: 'ui-rc_content'
2129
- }, (0, _hooks.findItemPath)(dataSource, record, rowKey)));
2130
- }
2131
- };
2132
- }
2133
- if (column.field === 'command') {
2134
- return {
2135
- ...column
2136
- };
2137
- }
2138
- return {
2139
- ...column,
2140
- title: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(SortableHeaderCell, {
2141
- columnKey: column.field
2142
- }, /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
2143
- column: {
2144
- ...column
2145
- },
2146
- t: t,
2147
- id: id,
2148
- wrapSettings: wrapSettings,
2149
- onClick: () => {
2150
- handleClickColHeader(column, colIndex);
2151
- },
2152
- onCopy: e => {
2153
- if (editingKey.current === '') {
2154
- handleCopy(e);
2155
- e.preventDefault();
2156
- }
2157
- },
2158
- onPaste: event => {
2159
- if (editingKey.current === '') {
2160
- handlePaste(dataSource[0], colIndex, 0, event);
2161
- event.preventDefault();
2162
- }
2163
- }
2164
- }))),
2165
- onCell: (record, rowIndex) => {
2166
- const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
2167
- return {
2168
- ...column?.onCell?.(record, rowIndex),
2169
- onKeyDown: event => {
2170
- const key = getRowKey(record, dataSource.indexOf(record));
2171
- if (event.key === 'Control' && event.ctrlKey) {} else {
2172
- if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
2173
- if (record[rowKey] !== editingKey.current && (0, _hooks.isEditable)(column, record)) {
2174
- // ~~ khi editingKey = ''
2175
- event.preventDefault();
2176
- event.stopPropagation();
2177
- handleEdit(record, column, column.editType, rowNumber, event);
2178
-
2179
- // onRemoveBgSelectedCell(selectedCells.current, id)
2180
- // onRemoveBorderSelectedCell(selectedCells.current, id)
2181
-
2182
- // selectedCells.current = new Set()
2183
-
2184
- handleCellClick(rowNumber, record, column);
2185
- const hasKey = mergedExpandedKeys.has(key);
2186
- if (hasKey) {
2187
- // mergedExpandedKeys.delete(key);
2188
- // newExpandedKeys = [...mergedExpandedKeys];
2189
- } else {
2190
- onTriggerExpand(record);
2191
- }
2192
- } else {
2193
- if (event.shiftKey && event.key === 'Enter') {} else {
2194
- if (event.key === 'Enter') {
2195
- event.preventDefault();
2196
- event.stopPropagation();
2197
- if (editingKey && editingKey.current !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
2198
- handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
2199
- } else {
2200
- // // focus cell hiện tại và tắt edit
2201
- // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
2202
- // setEditingKey('')
2203
-
2204
- // thêm dòng mới
2205
-
2206
- handleAddSingle();
2207
- handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true);
2208
- }
2209
- }
2210
- }
2211
- }
2212
- }
2213
- if (event.key === 'Tab') {
2214
- if (editingKey.current) {} else {
2215
- if (colIndex + 1 !== visibleCols.length) {
2216
- handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
2217
- } else {
2218
- event.stopPropagation();
2219
- event.preventDefault();
2220
- }
2221
- }
2222
- }
2223
- if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
2224
- if (editingKey.current !== '') {} else {
2225
- handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
2226
- }
2227
- }
2228
- if (event.key === 'ArrowLeft' && colIndex > 0) {
2229
- if (!column.dataIndex && !column.key || column.field === '#' || column.dataIndex === '#') {
2230
- event.stopPropagation();
2231
- event.preventDefault();
2232
- } else {
2233
- if (editingKey.current !== '') {} else {
2234
- handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
2235
- }
2236
- }
2237
- }
2238
- if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length) {
2239
- // if (isEditing(record) && (
2240
- if (record[rowKey] === editingKey.current && ((0, _hooks.getEditType)(column, record) === 'treeSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'asyncSelect')) {
2241
- event.stopPropagation();
2242
- } else {
2243
- handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
2244
- }
2245
- }
2246
- if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
2247
- if (record[rowKey] === editingKey.current && ((0, _hooks.getEditType)(column, record) === 'asyncSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'treeSelect')) {
2248
- event.stopPropagation();
2249
- } else {
2250
- handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
2251
- }
2252
- }
2253
- if (event.key === 'Delete') {
2254
- if (!(0, _hooks.isEditable)(column, record)) {}
2255
- handleDeleteContent();
2256
- }
2257
- if (event.key === 'Escape') {
2258
- // setEditingKey('')
2259
- editingKey.current = '';
2260
- }
2261
- }
2262
- },
2263
- onPaste: event => {
2264
- if (editingKey.current === '') {
2265
- handlePaste(record, colIndex, rowNumber, event);
2266
- event.preventDefault();
2267
- }
2268
- },
2269
- onCopy: e => {
2270
- if (editingKey.current === '') {
2271
- handleCopy(e);
2272
- e.preventDefault();
2273
- }
2274
- },
2275
- onDoubleClick: event => {
2276
- // if (!isEditing(record) && record[rowKey] !== editingKey.current && isEditable(column as any, record)) {
2277
- if (!(record[rowKey] === editingKey.current) && record[rowKey] !== editingKey.current && (0, _hooks.isEditable)(column, record)) {
2278
- handleEdit(record, column, (0, _hooks.getEditType)(column, record), rowNumber, event);
2279
-
2280
- // onRemoveBgSelectedCell(selectedCells.current, id)
2281
- // onRemoveBorderSelectedCell(selectedCells.current, id)
2282
- handleCellClick(rowNumber, record, column);
2283
- }
2284
- },
2285
- onContextMenu: () => {
2286
- // isSelecting.current = true;
2287
- // startCell.current = { row: rowNumber, col: colIndex };
2288
-
2289
- // if (selectedCells.size === 0) {
2290
- // setStartSelectedCell({ row: rowNumber, col: colIndex })
2291
- // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
2292
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
2293
- startSelectedCells.current = {
2294
- row: rowNumber,
2295
- col: colIndex
2296
- };
2297
- selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
2298
- rowsSelected.current = new Set();
2299
- (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
2300
- (0, _hooks.showDraggingPoint)(selectedCells.current, id);
2301
- setRangeCells(selectedCells.current);
2302
-
2303
- // }
2304
- },
2305
- onClick: () => {
2306
- if (record[rowKey] !== editingKey.current && editingKey.current !== '') {
2307
- // setEditingKey('')
2308
- } else {
2309
- if (record[rowKey] !== editingKey.current) {
2310
- (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
2311
- }
2312
- if (editingKey.current) {
2313
- handleCellClick(rowNumber, record, column);
2314
- }
2315
- }
2316
- },
2317
- // className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column as any, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column as any, record) ? 'disable' : ''}`,
2318
- className: (0, _classnames.default)('rc-ui-cell-editable', {
2319
- 'cell-editing': record[rowKey] === editingKey.current,
2320
- 'cell-editable': !(record[rowKey] === editingKey.current),
2321
- disable: !(0, _hooks.isEditable)(column, record)
2322
- }),
2323
- record,
2324
- column,
2325
- editType: (0, _hooks.getEditType)(column, record),
2326
- dataIndex: column.dataIndex,
2327
- indexRow: rowNumber,
2328
- indexCol: colIndex,
2329
- title: (0, _columns.getValueCell)(column, record[column.field], record, rowNumber, colIndex, format),
2330
- 'data-col-index': colIndex,
2331
- 'data-row-index': rowNumber,
2332
- // 'data-tooltip-id': "tooltip-cell-content",
2333
- 'data-tooltip-id': `${id}-tooltip-cell-content`,
2334
- // editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column as any, record),
2335
- editing: record.rowId === editingKey.current && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
2336
- cellEditing: cellEditing.current,
2337
- t,
2338
- tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
2339
- style: isPasteDragging ? {
2340
- cursor: "crosshair"
2341
- } : {}
2342
- };
2343
- },
2344
- // onHeaderCell: (data: any, index: any) => {
2345
- //
2346
- // return ({
2347
- // ...column.onHeaderCell ? column.onHeaderCell?.(data, index) : {},
2348
- // // onClick: () => {
2349
- // // handleClickColHeader(column, colIndex)
2350
- // // },
2351
- // // onCopy: (e: any) => {
2352
- // // if (editingKey.current === '') {
2353
- // // handleCopy(e)
2354
- // // e.preventDefault()
2355
- // // }
2356
- // // },
2357
- // //
2358
- // // onPaste: (event: any) => {
2359
- // //
2360
- // // if (editingKey.current === '') {
2361
- // //
2362
- // // handlePaste(dataSource[0], colIndex, 0 as number, event)
2363
- // // event.preventDefault()
2364
- // // }
2365
- // //
2366
- // // },
2367
- // style: {
2368
- // userSelect: 'none'
2369
- // }
2370
- // })
2371
- // },
2372
-
2373
- render: (value, record, rowIndex) => {
2374
- const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
2375
- const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
2376
- const cellFormat = (0, _hooks.getFormat)(colFormat, format);
2377
- const rowError = dataErrors.find(it => it.index === rowNumber);
2378
-
2379
- // const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null
2380
-
2381
- const handleClick = event => {
2382
- if (!(record[rowKey] === editingKey.current) && record[rowKey] !== editingKey.current && (0, _hooks.isEditable)(column, record)) {
2383
- handleEdit(record, column, (0, _hooks.getEditType)(column, record), rowNumber, event);
2384
-
2385
- // onRemoveBgSelectedCell(selectedCells.current, id)
2386
- // onRemoveBorderSelectedCell(selectedCells.current, id)
2387
- handleCellClick(rowNumber, record, column);
2388
- }
2389
- };
2390
- return /*#__PURE__*/_react.default.createElement("div", {
2391
- className: (0, _classnames.default)('ui-rc_cell-content', {
2392
- isValid: column.field && rowError && rowError[column.field]?.field === column?.field
2393
- }),
2394
- onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
2395
- onMouseEnter: event => {
2396
- // setTooltipContent(cellError ? cellError.message : '')
2397
-
2398
- handleMouseEnter(rowNumber, colIndex, event);
2399
-
2400
- // hoveredRow.current = rowNumber
2401
- },
2402
- onMouseUp: handleMouseUp,
2403
- onMouseMove: () => {
2404
- if (selectedCells && selectedCells.current.size > 0 && isMouseDown.current) {
2405
- (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
2406
- isDragMouse.current = true;
2407
- }
2408
- }
2409
- }, /*#__PURE__*/_react.default.createElement("div", {
2410
- className: (0, _classnames.default)('ui-rc_content', {
2411
- 'select-cell': ['select', 'selectTable', 'asyncSelect'].includes((0, _hooks.getEditType)(column, record))
2412
- })
2413
- }, (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, true, cellFormat, handleClick)), !isDragMouse.current && /*#__PURE__*/_react.default.createElement("div", {
2414
- className: 'dragging-point hidden',
2415
- onMouseDown: e => {
2416
- // e.stopPropagation()
2417
- e.preventDefault();
2418
- if (e.button === 0) {
2419
- setIsPasteDragging(true);
2420
- }
2421
- },
2422
- onDoubleClick: handlePointDoubleClick
2423
- }, /*#__PURE__*/_react.default.createElement("span", {
2424
- className: 'dot-point'
2425
- })));
2426
- }
2427
- };
2428
- });
2429
- // [
2430
- // cellEditing,
2431
- // columns,
2432
- // dataErrors,
2433
- // dataSource,
2434
- // editingKey,
2435
- // format,
2436
- // getRowKey,
2437
- // handleAddSingle,
2438
- // handleCellClick,
2439
- // handleClickColHeader,
2440
- // handleCopy,
2441
- // handleDeleteContent,
2442
- // handleEdit,
2443
- // handleFocusCell,
2444
- // handleMouseDown,
2445
- // handleMouseDownRowHeader,
2446
- // handleMouseEnter,
2447
- // handleMouseEnterRowHeader,
2448
- // handleMouseUp,
2449
- // handlePaste,
2450
- // handlePointDoubleClick,
2451
- // id,
2452
- // isEditing,
2453
- // isPasteDragging,
2454
- // mergedExpandedKeys,
2455
- // onTriggerExpand,
2456
- // rowEditable,
2457
- // rowKey,
2458
- // setTooltipContent,
2459
- // t,
2460
- // visibleCols.length
2461
- // ])
2462
-
2463
- const transformColumns = _react.default.useCallback(cols => {
2464
- // @ts-ignore
2465
- return cols.map(column => {
2466
- const find = convertColumns.find(it => it?.field === column.field);
2467
- if (column === _InternalTable.SELECTION_COLUMN) {
2468
- return _InternalTable.SELECTION_COLUMN;
2469
- }
2470
-
2471
- // Xử lý đệ quy cho children
2472
- if (column.children?.length) {
2473
- return {
2474
- ...column,
2475
- children: transformColumns(column.children)
2476
- };
2477
- }
2478
- if (find) {
2479
- return {
2480
- ...find
2481
- };
2482
- }
2483
- if (!find) {
2484
- return {
2485
- ...column
2486
- };
2487
- }
2488
- });
2489
- }, [convertColumns]);
2490
- const mergedColumns = _react.default.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
2491
- const bottomToolbar = () => {
2492
- return /*#__PURE__*/_react.default.createElement("div", {
2493
- className: 'ui-rc-toolbar-bottom',
2494
- style: {
2495
- borderBottom: '1px solid #e0e0e0'
2496
- }
2497
- }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
2498
- style: {
2499
- width: '100%'
2500
- },
2501
- items: toolbarItemsBottom ?? [],
2502
- mode: 'scroll',
2503
- onClick: ({}) => {
2504
- editingKey.current = '';
2505
- // setEditingKey('')
2506
- }
2507
- }));
2508
- };
2509
- const contextMenuClick = args => {
2510
- if (args.item?.parentKey && args.item.parentKey === 'INSERT_BEFORE') {
2511
- if (args.item.key === 'INSERT_BEFORE_ADV') {
2512
- // mở Modal
2513
-
2514
- setOpenModalAddRow(prev => ({
2515
- ...prev,
2516
- open: true,
2517
- type: 'INSERT_BEFORE'
2518
- }));
2519
- } else {
2520
- handleInsertBefore(args.item, args.item.row);
2521
- }
2522
- return;
2523
- }
2524
- if (args.item?.parentKey && args.item.parentKey === 'INSERT_AFTER') {
2525
- if (args.item.key === 'INSERT_AFTER_ADV') {
2526
- setOpenModalAddRow(prev => ({
2527
- ...prev,
2528
- open: true,
2529
- type: 'INSERT_AFTER'
2530
- }));
2531
- } else {
2532
- handleInsertAfter(args.item, args.item.row);
2533
- }
2534
- return;
2535
- }
2536
- if (args.item.key === 'INSERT_CHILDREN') {
2537
- handleInsertChild(args.item);
2538
- return;
2539
- }
2540
- if (args.item.key === 'DELETE_ROWS') {
2541
- handleDeleteRows(args.item);
2542
- return;
2543
- }
2544
- if (args.item.key === 'DELETE_CONTENT') {
2545
- handleDeleteContent();
2546
- }
2547
- };
2548
- const hideModalAddRow = () => {
2549
- setOpenModalAddRow(prev => ({
2550
- ...prev,
2551
- open: false,
2552
- type: ''
2553
- }));
2554
- setRowsAdd(1);
2555
- };
2556
- const onOkAddRow = () => {
2557
- if (openModalAddRow.type === 'INSERT_AFTER') {
2558
- handleInsertAfter({}, rowsAdd);
2559
- }
2560
- if (openModalAddRow.type === 'INSERT_BEFORE') {
2561
- handleInsertBefore({}, rowsAdd);
2562
- }
2563
- hideModalAddRow();
2564
- };
2565
- const onChangeRows = val => {
2566
- setRowsAdd(val);
2567
- };
2568
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
2569
- $heightTable: height,
2570
- $heightScroll: scrollHeight,
2571
- $isFullScreen: isFullScreen,
2572
- style: {
2573
- position: 'relative'
2574
- },
2575
- ref: ref,
2576
- id: id
2577
- }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
2578
- value: {
2579
- id: id ?? '',
2580
- rowKey,
2581
- // form,
2582
- format,
2583
- control,
2584
- trigger,
2585
- errors,
2586
- getValues,
2587
- handleCellChange,
2588
- getRowKey
2589
- }
2590
- }, /*#__PURE__*/_react.default.createElement("form", {
2591
- onSubmit: handleSubmit(onSubmit)
2592
- }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
2593
- theme: {
2594
- components: {
2595
- Table: {
2596
- rowHoverBg: '#eb461912',
2597
- rowSelectedBg: '#eb4619',
2598
- rowSelectedHoverBg: '#eb4619',
2599
- // cellFontSize: 12,
2600
- cellFontSizeSM: 13,
2601
- headerBg: '#ffffff',
2602
- cellPaddingBlockSM: 7
2603
- // cellPaddingBlock: 0,
2604
- // cellPaddingBlockSM: 0,
2605
- // cellPaddingInlineSM: 0,
2606
- // cellPaddingInline: 0
2607
- }
2608
- }
2609
- }
2610
- }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
2611
- t: t,
2612
- id: id,
2613
- tableRef: tableRef,
2614
- dataSource: dataSource,
2615
- locale: locale,
2616
- components: {
2617
- ...components,
2618
- body: {
2619
- cell: _EditableCell.default
2620
- // row: RowComponent
2621
- }
2622
- },
2623
- className: (0, _classnames.default)(className, 'grid-editable'),
2624
- rowKey: rowKey,
2625
- getRowKey: getRowKey,
2626
- columns: mergedColumns,
2627
- showSorterTooltip: {
2628
- target: 'sorter-icon'
2629
- },
2630
- format: format,
2631
- toolbarItems: toolbarItems
2632
- // selectionSettings={selectionSettings ? {...selectionSettings, checkboxOnly: true} : undefined}
2633
- ,
2634
- selectionSettings: selectionSettings ? {
2635
- ...selectionSettings,
2636
- checkboxOnly: true,
2637
- arrowKey: false
2638
- } : {
2639
- checkboxOnly: true,
2640
- arrowKey: false
2641
- },
2642
- rowHoverable: false,
2643
- bottomToolbar: bottomToolbar,
2644
- expandable: expandable ? {
2645
- expandIconColumnIndex: (0, _hooks.checkChild)(dataSource) ? 3 : undefined,
2646
- ...expandable,
2647
- expandedRowKeys: innerExpandedKeys,
2648
- expandIcon: args => {
2649
- const {
2650
- record,
2651
- expanded
2652
- } = args;
2653
-
2654
- // @ts-ignore
2655
- if (record?.children?.length > 0 || record?.isChildren) {
2656
- return expanded ? /*#__PURE__*/_react.default.createElement("button", {
2657
- onClick: e => {
2658
- e.preventDefault();
2659
- e.stopPropagation();
2660
- onTriggerExpand(record);
2661
- // onExpand(record, e)
2662
- },
2663
- className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
2664
- }) : /*#__PURE__*/_react.default.createElement("button", {
2665
- onClick: e => {
2666
- e.preventDefault();
2667
- e.stopPropagation();
2668
- onTriggerExpand(record);
2669
- // onExpand(record, e)
2670
- },
2671
- className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
2672
- });
2673
- } else {
2674
- return /*#__PURE__*/_react.default.createElement("button", {
2675
- className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
2676
- });
2677
- }
2678
- }
2679
- } : undefined,
2680
- triggerChangeColumns: triggerChangeColumns,
2681
- clickHeaderToSort: false,
2682
- contextMenuItems: contextMenuItems,
2683
- contextMenuClick: contextMenuClick,
2684
- onScroll: () => {
2685
- if (selectedCells.current && selectedCells.current.size > 0) {
2686
- (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
2687
- (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
2688
- (0, _hooks.showDraggingPoint)(selectedCells.current, id);
2689
- }
2690
- if (rowsSelected && rowsSelected.current.size > 0) {
2691
- (0, _hooks.addClassCellIndexSelected)(rowsSelected.current, id);
2692
- }
2693
- },
2694
- isFullScreen: isFullScreen
2695
- })))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
2696
- position: toast,
2697
- toastOptions: {
2698
- className: 'react-hot-toast'
2699
- }
2700
- }), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
2701
- title: `${t ? t(locale?.add_rows ?? 'Add rows') : 'Add rows'}`,
2702
- open: openModalAddRow.open,
2703
- onOk: onOkAddRow,
2704
- onCancel: hideModalAddRow,
2705
- okText: `${t ? t(locale?.ok_btn ?? 'Ok') : 'Ok'}`,
2706
- cancelText: `${t ? t(locale?.cancel_btn ?? 'Cancel') : 'Cancel'}`,
2707
- className: 'be-popup-container',
2708
- centered: true,
2709
- width: 250,
2710
- closable: false
2711
- }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.InputNumber, {
2712
- style: {
2713
- width: '100%'
2714
- },
2715
- defaultValue: 1,
2716
- value: rowsAdd,
2717
- min: 1,
2718
- max: 1000,
2719
- onChange: onChangeRows,
2720
- changeOnWheel: true
2721
- })));
2722
- };
2723
- var _default = exports.default = GridEdit;