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