es-grid-template 1.7.32 → 1.7.33
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/ColumnsChoose.js +0 -3
- package/es/grid-component/InternalTable.js +0 -4
- package/es/grid-component/TableGrid.js +0 -4
- package/es/grid-component/TempTable.js +2 -0
- package/es/grid-component/hooks/columns/index.js +0 -8
- package/es/grid-component/hooks/utils.js +0 -14
- package/es/grid-component/table/GridEdit.js +3 -5
- package/es/table-component/TableContainer.js +7 -0
- package/es/table-component/TableContainerEdit.d.ts +0 -1
- package/es/table-component/TableContainerEdit.js +31 -12
- package/es/table-component/body/TableBodyCellEdit.js +8 -10
- package/es/table-component/body/TableBodyRow.js +5 -0
- package/es/table-component/header/TableHeadCell.d.ts +2 -0
- package/es/table-component/header/TableHeadCell.js +8 -4
- package/es/table-component/header/TableHeadRow.d.ts +1 -1
- package/es/table-component/header/TableHeadRow.js +4 -5
- package/es/table-component/hook/utils.js +4 -4
- package/es/table-component/style.scss +22 -0
- package/es/table-component/table/Grid.js +3 -1
- package/es/table-component/table/TableWrapper.js +5 -5
- package/es/table-component/type.d.ts +5 -0
- package/es/table-component/useContext.d.ts +1 -0
- package/lib/grid-component/ColumnsChoose.js +0 -3
- package/lib/grid-component/InternalTable.js +0 -4
- package/lib/grid-component/TableGrid.js +0 -4
- package/lib/grid-component/TempTable.js +2 -0
- package/lib/grid-component/hooks/columns/index.js +0 -8
- package/lib/grid-component/hooks/utils.js +0 -14
- package/lib/grid-component/table/GridEdit.js +3 -5
- package/lib/table-component/TableContainer.js +7 -0
- package/lib/table-component/TableContainerEdit.d.ts +0 -1
- package/lib/table-component/TableContainerEdit.js +31 -12
- package/lib/table-component/body/TableBodyCellEdit.js +8 -9
- package/lib/table-component/body/TableBodyRow.js +5 -0
- package/lib/table-component/header/TableHeadCell.d.ts +2 -0
- package/lib/table-component/header/TableHeadCell.js +7 -4
- package/lib/table-component/header/TableHeadRow.d.ts +1 -1
- package/lib/table-component/header/TableHeadRow.js +4 -5
- package/lib/table-component/hook/utils.js +4 -4
- package/lib/table-component/style.scss +22 -0
- package/lib/table-component/table/Grid.js +3 -1
- package/lib/table-component/table/TableWrapper.js +5 -5
- package/lib/table-component/type.d.ts +5 -0
- package/lib/table-component/useContext.d.ts +1 -0
- package/package.json +1 -1
|
@@ -167,12 +167,12 @@ const TableWrapper = props => {
|
|
|
167
167
|
return /*#__PURE__*/React.createElement("div", {
|
|
168
168
|
style: {
|
|
169
169
|
position: 'relative'
|
|
170
|
-
}
|
|
171
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
170
|
+
},
|
|
172
171
|
className: classNames(`${prefix}-grid-container`, {
|
|
173
172
|
'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
|
|
174
173
|
'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
|
|
175
|
-
})
|
|
174
|
+
})
|
|
175
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
176
176
|
id: id,
|
|
177
177
|
ref: tableContainerRef,
|
|
178
178
|
style: {
|
|
@@ -191,8 +191,8 @@ const TableWrapper = props => {
|
|
|
191
191
|
onScroll: handleScroll
|
|
192
192
|
}, /*#__PURE__*/React.createElement("table", {
|
|
193
193
|
style: {
|
|
194
|
-
display: 'grid'
|
|
195
|
-
|
|
194
|
+
display: 'grid',
|
|
195
|
+
minWidth: table.getTotalSize()
|
|
196
196
|
}
|
|
197
197
|
}, /*#__PURE__*/React.createElement(TableHead, {
|
|
198
198
|
tableContainerRef: tableContainerRef,
|
|
@@ -106,6 +106,11 @@ export type ColumnTable<RecordType = AnyObject> = {
|
|
|
106
106
|
source?: any[];
|
|
107
107
|
showFilterSearch?: boolean;
|
|
108
108
|
headerText?: string;
|
|
109
|
+
/**
|
|
110
|
+
* @deprecated Please use `visible` instead.
|
|
111
|
+
* @since 1.7.33
|
|
112
|
+
*/
|
|
113
|
+
hidden?: boolean;
|
|
109
114
|
visible?: boolean;
|
|
110
115
|
headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
|
|
111
116
|
columnGroupText?: string;
|
|
@@ -227,7 +227,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
227
227
|
//
|
|
228
228
|
// const onCheck = (keys: string[]) => {
|
|
229
229
|
//
|
|
230
|
-
// console.log('keys', keys)
|
|
231
230
|
// // setSelectedKeys(keys)
|
|
232
231
|
// setMergedSelectedKeys(keys)
|
|
233
232
|
// // setIsManualUpdate(true)
|
|
@@ -236,12 +235,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
236
235
|
//
|
|
237
236
|
// const handleAccept = () => {
|
|
238
237
|
//
|
|
239
|
-
// console.log('mergedSelectedKeys', mergedSelectedKeys)
|
|
240
238
|
//
|
|
241
239
|
// // const rs1 = updateColumns(propsColumns, selectedKeys)
|
|
242
240
|
// const rs1 = updateColumns(propsColumns, mergedSelectedKeys)
|
|
243
241
|
//
|
|
244
|
-
// console.log('rs1', rs1)
|
|
245
242
|
//
|
|
246
243
|
// triggerChangeColumns?.(rs1, 'columnChoose')
|
|
247
244
|
//
|
|
@@ -307,7 +307,6 @@ const InternalTable = props => {
|
|
|
307
307
|
setColumns(propsColumns);
|
|
308
308
|
}, [propsColumns]);
|
|
309
309
|
const handleOnFilter = queries => {
|
|
310
|
-
console.log('queries', queries);
|
|
311
310
|
if (onFilter) {
|
|
312
311
|
onFilter?.((0, _hooks.convertFilters)(queries));
|
|
313
312
|
} else {
|
|
@@ -353,8 +352,6 @@ const InternalTable = props => {
|
|
|
353
352
|
searchValue,
|
|
354
353
|
setSearchValue
|
|
355
354
|
}) => {
|
|
356
|
-
// console.log('selectedKeys', selectedKeys)
|
|
357
|
-
|
|
358
355
|
const type = (0, _hooks.getTypeFilter)(column);
|
|
359
356
|
// const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
|
|
360
357
|
|
|
@@ -907,7 +904,6 @@ const InternalTable = props => {
|
|
|
907
904
|
}
|
|
908
905
|
};
|
|
909
906
|
const handleChange = (paging, filters, sorter) => {
|
|
910
|
-
console.log('sorter', sorter);
|
|
911
907
|
onSorter?.(sorter);
|
|
912
908
|
};
|
|
913
909
|
|
|
@@ -351,10 +351,6 @@ const TableGrid = props => {
|
|
|
351
351
|
hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
|
|
352
352
|
}
|
|
353
353
|
|
|
354
|
-
// onScroll={(event) => {
|
|
355
|
-
// console.log('event', event)
|
|
356
|
-
// }}
|
|
357
|
-
|
|
358
354
|
// onFilter={(val: any) => {
|
|
359
355
|
// handleOnFilter(val)
|
|
360
356
|
// // triggerFilter?.(convertFilters(val))
|
|
@@ -21,6 +21,8 @@ const TempTable = props => {
|
|
|
21
21
|
|
|
22
22
|
// const TabComponent = groupAble ? InternalTable : Table
|
|
23
23
|
const TabComponent = editAble ? _tableComponent.default : _InternalTable.default;
|
|
24
|
+
// const TabComponent = InternalTable
|
|
25
|
+
|
|
24
26
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(TabComponent, (0, _extends2.default)({}, rest, {
|
|
25
27
|
infiniteScroll: infiniteScroll,
|
|
26
28
|
groupAble: groupAble,
|
|
@@ -79,9 +79,6 @@ const getValueCell = (column, value, record, rowIndex, colIndex, format) => {
|
|
|
79
79
|
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
|
|
80
80
|
|
|
81
81
|
const tmpval = typeof value === 'string' ? Number(value) : value;
|
|
82
|
-
|
|
83
|
-
// console.log('aaaaa', Number(value))
|
|
84
|
-
|
|
85
82
|
const numericFormatProps = {
|
|
86
83
|
thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
|
|
87
84
|
decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
|
|
@@ -95,7 +92,6 @@ const getValueCell = (column, value, record, rowIndex, colIndex, format) => {
|
|
|
95
92
|
// if ( typeof value === "string") {
|
|
96
93
|
// const ttt = removeNumericFormat(value, undefined, numericFormatProps )
|
|
97
94
|
//
|
|
98
|
-
// console.log('ttt', ttt)
|
|
99
95
|
// }
|
|
100
96
|
|
|
101
97
|
const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
|
|
@@ -140,9 +136,6 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
|
|
|
140
136
|
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
|
|
141
137
|
|
|
142
138
|
const tmpval = typeof value === 'string' ? Number(value) : value;
|
|
143
|
-
|
|
144
|
-
// console.log('aaaaa', Number(value))
|
|
145
|
-
|
|
146
139
|
const numericFormatProps = {
|
|
147
140
|
thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
|
|
148
141
|
decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
|
|
@@ -156,7 +149,6 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
|
|
|
156
149
|
// if ( typeof value === "string") {
|
|
157
150
|
// const ttt = removeNumericFormat(value, undefined, numericFormatProps )
|
|
158
151
|
//
|
|
159
|
-
// console.log('ttt', ttt)
|
|
160
152
|
// }
|
|
161
153
|
|
|
162
154
|
const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
|
|
@@ -691,7 +691,6 @@ function addRowsDownWithCtrl(arr, n) {
|
|
|
691
691
|
|
|
692
692
|
// Hàm kiểm tra kiểu date hợp lệ
|
|
693
693
|
const isValidDate = item => {
|
|
694
|
-
// console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
|
|
695
694
|
// return !isNaN(Date.parse(d))
|
|
696
695
|
|
|
697
696
|
if (typeof item === 'number') {
|
|
@@ -831,7 +830,6 @@ function addRowsDown(arr, n) {
|
|
|
831
830
|
// const isValidDate = (item: any) => {
|
|
832
831
|
//
|
|
833
832
|
//
|
|
834
|
-
// // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
|
|
835
833
|
// // return !isNaN(Date.parse(d))
|
|
836
834
|
//
|
|
837
835
|
// if (typeof item === 'number') {
|
|
@@ -978,7 +976,6 @@ function addRowsUpWithCtrl(array, n) {
|
|
|
978
976
|
|
|
979
977
|
// Hàm kiểm tra kiểu date hợp lệ
|
|
980
978
|
const isValidDate = item => {
|
|
981
|
-
// console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
|
|
982
979
|
// return !isNaN(Date.parse(d))
|
|
983
980
|
|
|
984
981
|
if (typeof item === 'number') {
|
|
@@ -1122,7 +1119,6 @@ function addRowsUp(array, n) {
|
|
|
1122
1119
|
// const isValidDate = (item: any) => {
|
|
1123
1120
|
//
|
|
1124
1121
|
//
|
|
1125
|
-
// // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
|
|
1126
1122
|
// // return !isNaN(Date.parse(d))
|
|
1127
1123
|
//
|
|
1128
1124
|
// if (typeof item === 'number') {
|
|
@@ -2706,17 +2702,12 @@ function mergeWithFilter(dataArray, dataFilter) {
|
|
|
2706
2702
|
const result = [...dataArray];
|
|
2707
2703
|
dataFilter.forEach((filterItem, i) => {
|
|
2708
2704
|
const existsInArray = result.find(item => item.rowId === filterItem.rowId);
|
|
2709
|
-
|
|
2710
|
-
// console.log('existsInArray', existsInArray)
|
|
2711
|
-
|
|
2712
2705
|
if (!existsInArray) {
|
|
2713
2706
|
// tìm index của phần tử trước đó trong dataFilter
|
|
2714
2707
|
for (let j = i - 1; j >= 0; j--) {
|
|
2715
2708
|
const prevFilterItem = dataFilter[j];
|
|
2716
2709
|
const indexInResult = result.findIndex(item => item.rowId === prevFilterItem.rowId);
|
|
2717
2710
|
if (indexInResult !== -1) {
|
|
2718
|
-
// console.log('filterItem', filterItem)
|
|
2719
|
-
|
|
2720
2711
|
result.splice(indexInResult + 1, 0, filterItem);
|
|
2721
2712
|
return;
|
|
2722
2713
|
}
|
|
@@ -2736,17 +2727,12 @@ function mergeWithFilter2(dataArray, dataFilter) {
|
|
|
2736
2727
|
const result = [...dataArray];
|
|
2737
2728
|
dataFilter.forEach((filterItem, i) => {
|
|
2738
2729
|
const existsInArray = result.find(item => item.rowId === filterItem.rowId);
|
|
2739
|
-
|
|
2740
|
-
// console.log('existsInArray', existsInArray)
|
|
2741
|
-
|
|
2742
2730
|
if (!existsInArray) {
|
|
2743
2731
|
// tìm index của phần tử trước đó trong dataFilter
|
|
2744
2732
|
for (let j = i - 1; j >= 0; j--) {
|
|
2745
2733
|
const prevFilterItem = dataFilter[j];
|
|
2746
2734
|
const indexInResult = result.findIndex(item => item.rowId === prevFilterItem.rowId);
|
|
2747
2735
|
if (indexInResult !== -1) {
|
|
2748
|
-
// console.log('filterItem', filterItem)
|
|
2749
|
-
|
|
2750
2736
|
result.splice(indexInResult + 1, 0, filterItem);
|
|
2751
2737
|
return;
|
|
2752
2738
|
}
|
|
@@ -742,7 +742,7 @@ const GridEdit = props => {
|
|
|
742
742
|
const newExpandedKeys = [...mergedExpandedKeys, key];
|
|
743
743
|
setInnerExpandedKeys(newExpandedKeys);
|
|
744
744
|
}
|
|
745
|
-
}, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
|
|
745
|
+
}, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, triggerChangeData]);
|
|
746
746
|
const handleDeleteRows = _react.default.useCallback(item => {
|
|
747
747
|
// setTimeout(() => {
|
|
748
748
|
// onAddBgSelectedCell(selectedCells.current, id)
|
|
@@ -808,7 +808,6 @@ const GridEdit = props => {
|
|
|
808
808
|
indexRow,
|
|
809
809
|
key
|
|
810
810
|
} = args;
|
|
811
|
-
console.log('changeType', changeType);
|
|
812
811
|
if (changeType === 'blur') {
|
|
813
812
|
const handleChangeCallback = callbackData => {
|
|
814
813
|
const callbackRecord = callbackData;
|
|
@@ -854,7 +853,7 @@ const GridEdit = props => {
|
|
|
854
853
|
onSubmit(record);
|
|
855
854
|
}
|
|
856
855
|
};
|
|
857
|
-
const handleDeleteContent =
|
|
856
|
+
const handleDeleteContent = () => {
|
|
858
857
|
if (selectedCells.current.size > 0) {
|
|
859
858
|
const newData = [...dataSource];
|
|
860
859
|
|
|
@@ -894,7 +893,7 @@ const GridEdit = props => {
|
|
|
894
893
|
const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);
|
|
895
894
|
triggerChangeData?.([...rsFilterData], 'DELETE_CONTENT');
|
|
896
895
|
}
|
|
897
|
-
}
|
|
896
|
+
};
|
|
898
897
|
const toolbarItemsBottom = (0, _react.useMemo)(() => {
|
|
899
898
|
if (!rowsFocus || rowsFocus.length === 0) {
|
|
900
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 => {
|
|
@@ -1467,7 +1466,6 @@ const GridEdit = props => {
|
|
|
1467
1466
|
row.replace(/\r/g, "").split("\t")
|
|
1468
1467
|
|
|
1469
1468
|
// {
|
|
1470
|
-
// console.log('row', row)
|
|
1471
1469
|
// return row.replace(/\r/g, "").split("\t")
|
|
1472
1470
|
// }
|
|
1473
1471
|
);
|
|
@@ -132,6 +132,12 @@ const TableContainer = props => {
|
|
|
132
132
|
virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
|
|
133
133
|
// virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
|
|
134
134
|
}
|
|
135
|
+
const columnSizingState = table.getState().columnSizing;
|
|
136
|
+
_react.default.useEffect(() => {
|
|
137
|
+
requestAnimationFrame(() => {
|
|
138
|
+
columnVirtualizer.measure();
|
|
139
|
+
});
|
|
140
|
+
}, [columnSizingState, columnVirtualizer]);
|
|
135
141
|
const triggerCommandClick = () => {};
|
|
136
142
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
137
143
|
ref: containerRef,
|
|
@@ -192,6 +198,7 @@ const TableContainer = props => {
|
|
|
192
198
|
triggerChangeColumns: triggerChangeColumns
|
|
193
199
|
})))), /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
|
|
194
200
|
value: {
|
|
201
|
+
t,
|
|
195
202
|
locale,
|
|
196
203
|
prefix,
|
|
197
204
|
id,
|
|
@@ -22,7 +22,6 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
|
|
|
22
22
|
innerHeight: number;
|
|
23
23
|
innerWidth: number;
|
|
24
24
|
};
|
|
25
|
-
triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
|
|
26
25
|
mergedFilterKeys?: any;
|
|
27
26
|
setMergedFilterKeys?: any;
|
|
28
27
|
setExpanded?: any;
|
|
@@ -284,6 +284,8 @@ const TableContainerEdit = props => {
|
|
|
284
284
|
}
|
|
285
285
|
}, [validate, dataSource]);
|
|
286
286
|
const visibleColumns = table.getVisibleLeafColumns();
|
|
287
|
+
// const visibleColumns = table.getVisibleFlatColumns();
|
|
288
|
+
|
|
287
289
|
const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
|
|
288
290
|
const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
|
|
289
291
|
|
|
@@ -300,7 +302,7 @@ const TableContainerEdit = props => {
|
|
|
300
302
|
// },
|
|
301
303
|
|
|
302
304
|
measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
|
|
303
|
-
overscan:
|
|
305
|
+
overscan: 0 //how many columns to render on each side off screen each way (adjust this for performance)
|
|
304
306
|
});
|
|
305
307
|
const virtualColumns = columnVirtualizer.getVirtualItems();
|
|
306
308
|
const cacheColumns = columnVirtualizer.measurementsCache;
|
|
@@ -387,7 +389,7 @@ const TableContainerEdit = props => {
|
|
|
387
389
|
}, [onDataChange]);
|
|
388
390
|
const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
|
|
389
391
|
const handlePasteCallback = callbackData => {
|
|
390
|
-
const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...
|
|
392
|
+
const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), callbackData);
|
|
391
393
|
const rs = (0, _utils.unFlattenData)(rsFilterData);
|
|
392
394
|
triggerChangeData(rs);
|
|
393
395
|
};
|
|
@@ -398,7 +400,7 @@ const TableContainerEdit = props => {
|
|
|
398
400
|
pasteData: pastedRows,
|
|
399
401
|
copyRows,
|
|
400
402
|
type: 'onPaste',
|
|
401
|
-
data:
|
|
403
|
+
data: originData,
|
|
402
404
|
pastedColumns: pastedColumnsArray
|
|
403
405
|
}, handlePasteCallback);
|
|
404
406
|
} else {
|
|
@@ -407,7 +409,7 @@ const TableContainerEdit = props => {
|
|
|
407
409
|
pasteData: pastedRows,
|
|
408
410
|
type: 'onPaste',
|
|
409
411
|
copyRows,
|
|
410
|
-
data:
|
|
412
|
+
data: originData,
|
|
411
413
|
pastedColumns: pastedColumnsArray
|
|
412
414
|
}, handlePasteCallback);
|
|
413
415
|
triggerChangeData(newData);
|
|
@@ -415,7 +417,7 @@ const TableContainerEdit = props => {
|
|
|
415
417
|
} else {
|
|
416
418
|
triggerChangeData(newData);
|
|
417
419
|
}
|
|
418
|
-
}, [
|
|
420
|
+
}, [onCellPaste, originData, triggerChangeData]);
|
|
419
421
|
const handlePasted = _react.default.useCallback(pasteData => {
|
|
420
422
|
if (!startCell) {
|
|
421
423
|
return;
|
|
@@ -613,7 +615,7 @@ const TableContainerEdit = props => {
|
|
|
613
615
|
}, [startCell, endCell, table, copySelectionToClipboard]);
|
|
614
616
|
_react.default.useEffect(() => {
|
|
615
617
|
const handlePaste = e => {
|
|
616
|
-
if (startCell) {
|
|
618
|
+
if (startCell && !editingKey) {
|
|
617
619
|
e.preventDefault(); // Chặn hành vi mặc định
|
|
618
620
|
const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
|
|
619
621
|
handlePasteToTable(clipboardText);
|
|
@@ -621,7 +623,7 @@ const TableContainerEdit = props => {
|
|
|
621
623
|
};
|
|
622
624
|
window.addEventListener('paste', handlePaste);
|
|
623
625
|
return () => window.removeEventListener('paste', handlePaste);
|
|
624
|
-
}, [startCell, endCell, table, handlePasteToTable]);
|
|
626
|
+
}, [startCell, endCell, table, handlePasteToTable, editingKey]);
|
|
625
627
|
_react.default.useEffect(() => {
|
|
626
628
|
const handleClickOutside = event => {
|
|
627
629
|
const element = event.target;
|
|
@@ -634,7 +636,7 @@ const TableContainerEdit = props => {
|
|
|
634
636
|
const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
|
|
635
637
|
const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
|
|
636
638
|
const isInsideHeader = itemHeader && itemHeader.contains(event.target);
|
|
637
|
-
if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext) {
|
|
639
|
+
if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
|
|
638
640
|
return;
|
|
639
641
|
}
|
|
640
642
|
if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
|
|
@@ -661,14 +663,30 @@ const TableContainerEdit = props => {
|
|
|
661
663
|
// document.removeEventListener('touchstart', handleClickOutside)
|
|
662
664
|
};
|
|
663
665
|
}, [dataSource, editingKey, id, onBlur]);
|
|
666
|
+
const columnSizingState = table.getState().columnSizing;
|
|
667
|
+
_react.default.useEffect(() => {
|
|
668
|
+
requestAnimationFrame(() => {
|
|
669
|
+
columnVirtualizer.measure();
|
|
670
|
+
});
|
|
671
|
+
}, [columnSizingState, columnVirtualizer]);
|
|
664
672
|
|
|
665
673
|
// React.useEffect(() => {
|
|
666
|
-
//
|
|
674
|
+
// if (!containerRef.current) return;
|
|
675
|
+
|
|
676
|
+
// const containerWidth = containerRef.current.offsetWidth - 2;
|
|
677
|
+
// const totalWidth = table.getTotalSize();
|
|
678
|
+
|
|
679
|
+
// if (totalWidth && totalWidth < containerWidth) {
|
|
680
|
+
// const factor = containerWidth / totalWidth;
|
|
667
681
|
|
|
668
|
-
//
|
|
669
|
-
//
|
|
682
|
+
// table.setColumnSizing(
|
|
683
|
+
// table.getAllLeafColumns().reduce((acc, col) => {
|
|
684
|
+
// acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
|
|
685
|
+
// return acc;
|
|
686
|
+
// }, {} as Record<string, number>)
|
|
687
|
+
// );
|
|
670
688
|
// }
|
|
671
|
-
// }, [
|
|
689
|
+
// }, [table.getTotalSize(), windowSize.innerWidth])
|
|
672
690
|
|
|
673
691
|
_react.default.useEffect(() => {
|
|
674
692
|
const totalHeight = minHeight ?? height;
|
|
@@ -1491,6 +1509,7 @@ const TableContainerEdit = props => {
|
|
|
1491
1509
|
onSubmit: handleSubmit(onSubmit)
|
|
1492
1510
|
}, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
|
|
1493
1511
|
value: {
|
|
1512
|
+
t,
|
|
1494
1513
|
locale,
|
|
1495
1514
|
prefix,
|
|
1496
1515
|
id,
|
|
@@ -8,6 +8,7 @@ exports.default = void 0;
|
|
|
8
8
|
var _reactTable = require("@tanstack/react-table");
|
|
9
9
|
var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
|
|
10
10
|
var _Command = _interopRequireDefault(require("../components/command/Command"));
|
|
11
|
+
var _server = _interopRequireDefault(require("react-dom/server"));
|
|
11
12
|
var _utils = require("../hook/utils");
|
|
12
13
|
var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
|
|
13
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
@@ -15,8 +16,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
16
|
var _useContext = require("../useContext");
|
|
16
17
|
var _EditableCell = _interopRequireDefault(require("./EditableCell"));
|
|
17
18
|
var _constant = require("../hook/constant");
|
|
18
|
-
// import ReactDOMServer from 'react-dom/server'
|
|
19
|
-
|
|
20
19
|
// import { nonActionColumn } from "../hook/constant";
|
|
21
20
|
|
|
22
21
|
// import type { Dispatch, SetStateAction } from "react";
|
|
@@ -52,7 +51,7 @@ const renderCommand = args => {
|
|
|
52
51
|
visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
|
|
53
52
|
};
|
|
54
53
|
}) : [];
|
|
55
|
-
return /*#__PURE__*/_react.default.createElement("
|
|
54
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
56
55
|
className: "ui-rc_cell-content"
|
|
57
56
|
}, /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
|
|
58
57
|
return /*#__PURE__*/_react.default.createElement(_Command.default, {
|
|
@@ -140,8 +139,7 @@ const TableBodyCellEdit = props => {
|
|
|
140
139
|
const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
|
|
141
140
|
const record = cell.row.original;
|
|
142
141
|
const columnMeta = cell.column.columnDef.meta ?? {};
|
|
143
|
-
|
|
144
|
-
// const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
|
|
142
|
+
const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
|
|
145
143
|
// const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
|
|
146
144
|
// const hasValue = html.trim().length > 0;
|
|
147
145
|
|
|
@@ -601,7 +599,7 @@ const TableBodyCellEdit = props => {
|
|
|
601
599
|
handleEdit(e);
|
|
602
600
|
return;
|
|
603
601
|
}
|
|
604
|
-
if (e.key.length === 1) {
|
|
602
|
+
if (e.key.length === 1 && !e.ctrlKey) {
|
|
605
603
|
e.preventDefault();
|
|
606
604
|
e.stopPropagation();
|
|
607
605
|
handleEdit(e);
|
|
@@ -734,7 +732,7 @@ const TableBodyCellEdit = props => {
|
|
|
734
732
|
if (cell.column.id === "command") {
|
|
735
733
|
return /*#__PURE__*/_react.default.createElement("td", {
|
|
736
734
|
key: cell.id,
|
|
737
|
-
className: (0, _classnames.default)(`${prefix}-grid-cell`, {
|
|
735
|
+
className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
|
|
738
736
|
[`${prefix}-grid-cell-ellipsis`]: true,
|
|
739
737
|
[`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
|
|
740
738
|
[`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
|
|
@@ -846,8 +844,9 @@ const TableBodyCellEdit = props => {
|
|
|
846
844
|
"data-tooltip-id": `${id}-tooltip-content`
|
|
847
845
|
// data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
|
|
848
846
|
// data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
|
|
847
|
+
// data-tooltip-content={isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
|
|
849
848
|
,
|
|
850
|
-
"data-tooltip-
|
|
849
|
+
"data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent)),
|
|
851
850
|
className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable `, {
|
|
852
851
|
[`${prefix}-grid-cell-ellipsis`]: true,
|
|
853
852
|
'cell-editing': isEditing,
|
|
@@ -1038,7 +1037,7 @@ const TableBodyCellEdit = props => {
|
|
|
1038
1037
|
handleEdit(e);
|
|
1039
1038
|
// setEditingKey?.(cell.row.id)
|
|
1040
1039
|
}
|
|
1041
|
-
})), !isSelecting && !isEditing &&
|
|
1040
|
+
})), !isSelecting && !isEditing && rowNumber === rangeState?.endRowIndex && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/_react.default.createElement("div", {
|
|
1042
1041
|
className: 'dragging-point',
|
|
1043
1042
|
onMouseDown: e => {
|
|
1044
1043
|
e.preventDefault();
|
|
@@ -34,8 +34,13 @@ const TableBodyRow = ({
|
|
|
34
34
|
recordDoubleClick
|
|
35
35
|
} = _react.default.useContext(_useContext.TableContext);
|
|
36
36
|
const visibleCells = row.getVisibleCells();
|
|
37
|
+
|
|
38
|
+
// console.log('visibleCells', visibleCells)
|
|
39
|
+
|
|
37
40
|
const virtualColumns = columnVirtualizer.getVirtualItems();
|
|
38
41
|
|
|
42
|
+
// console.log('virtualColumns', virtualColumns)
|
|
43
|
+
|
|
39
44
|
// table.options.set
|
|
40
45
|
|
|
41
46
|
return /*#__PURE__*/_react.default.createElement("tr", {
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import type { Table } from '@tanstack/react-table';
|
|
2
2
|
import { type Header } from '@tanstack/react-table';
|
|
3
3
|
import React from 'react';
|
|
4
|
+
import type { Virtualizer } from '@tanstack/react-virtual';
|
|
4
5
|
interface TableHeadCellProps<T> {
|
|
5
6
|
t?: any;
|
|
6
7
|
table: Table<T>;
|
|
7
8
|
header: Header<T, unknown>;
|
|
8
9
|
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
|
10
|
+
columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
|
|
9
11
|
colSpan: any;
|
|
10
12
|
rowSpan: any;
|
|
11
13
|
}
|
|
@@ -32,13 +32,14 @@ const TableHeadCell = props => {
|
|
|
32
32
|
header,
|
|
33
33
|
getPopupContainer,
|
|
34
34
|
table,
|
|
35
|
-
t,
|
|
35
|
+
// t,
|
|
36
36
|
// columnVirtualizer,
|
|
37
37
|
// rowHeaderVirtualizer,
|
|
38
38
|
colSpan,
|
|
39
39
|
rowSpan
|
|
40
40
|
} = props;
|
|
41
41
|
const {
|
|
42
|
+
t,
|
|
42
43
|
prefix,
|
|
43
44
|
setSorterChange,
|
|
44
45
|
setFilterChange,
|
|
@@ -122,13 +123,16 @@ const TableHeadCell = props => {
|
|
|
122
123
|
};
|
|
123
124
|
const doFilter = type => {
|
|
124
125
|
if (type) {
|
|
125
|
-
header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? [''] : selectedKeys);
|
|
126
|
+
header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
|
|
126
127
|
} else {
|
|
127
128
|
header.column.setFilterValue(undefined);
|
|
128
129
|
setSelectedKeys([]);
|
|
129
130
|
}
|
|
130
131
|
setFilterChange(true);
|
|
131
132
|
triggerVisible(false);
|
|
133
|
+
setTimeout(() => {
|
|
134
|
+
setFilterChange(false);
|
|
135
|
+
}, 10);
|
|
132
136
|
};
|
|
133
137
|
const mergedDropdownProps = (0, _utils.extendsObject)({
|
|
134
138
|
trigger: ['click'],
|
|
@@ -228,7 +232,6 @@ const TableHeadCell = props => {
|
|
|
228
232
|
style: {
|
|
229
233
|
// display: 'flex',
|
|
230
234
|
width: header.getSize(),
|
|
231
|
-
// width: 'inherit',
|
|
232
235
|
minWidth: header.getSize(),
|
|
233
236
|
maxWidth: header.getSize(),
|
|
234
237
|
...(0, _utils.getCommonPinningStyles)(header.column),
|
|
@@ -314,7 +317,7 @@ const TableHeadCell = props => {
|
|
|
314
317
|
// onMouseUp: () => {
|
|
315
318
|
// requestAnimationFrame(() => {
|
|
316
319
|
// columnVirtualizer.measure()
|
|
317
|
-
// rowHeaderVirtualizer.measure()
|
|
320
|
+
// // rowHeaderVirtualizer.measure()
|
|
318
321
|
// })
|
|
319
322
|
// },
|
|
320
323
|
|
|
@@ -11,5 +11,5 @@ interface TableHeadRowProps<T> {
|
|
|
11
11
|
fixedLeftColumns: Column<T, unknown>[];
|
|
12
12
|
fixedRightColumns: Column<T, unknown>[];
|
|
13
13
|
}
|
|
14
|
-
declare const TableHeadRow: ({ table, headerGroup, }: TableHeadRowProps<any>) => React.JSX.Element;
|
|
14
|
+
declare const TableHeadRow: ({ table, headerGroup, columnVirtualizer, }: TableHeadRowProps<any>) => React.JSX.Element;
|
|
15
15
|
export default TableHeadRow;
|
|
@@ -16,9 +16,8 @@ var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell"));
|
|
|
16
16
|
|
|
17
17
|
const TableHeadRow = ({
|
|
18
18
|
table,
|
|
19
|
-
headerGroup
|
|
20
|
-
|
|
21
|
-
// columnVirtualizer,
|
|
19
|
+
headerGroup,
|
|
20
|
+
columnVirtualizer
|
|
22
21
|
// virtualPaddingLeft,
|
|
23
22
|
// virtualPaddingRight,
|
|
24
23
|
// fixedLeftColumns,
|
|
@@ -61,8 +60,8 @@ const TableHeadRow = ({
|
|
|
61
60
|
return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
|
|
62
61
|
key: header.id,
|
|
63
62
|
header: header,
|
|
64
|
-
table: table
|
|
65
|
-
|
|
63
|
+
table: table,
|
|
64
|
+
columnVirtualizer: columnVirtualizer
|
|
66
65
|
// rowHeaderVirtualizer={rowHeaderVirtualizer}
|
|
67
66
|
,
|
|
68
67
|
colSpan: header.colSpan,
|
|
@@ -370,7 +370,7 @@ function getFixedFields(columns, type) {
|
|
|
370
370
|
const result = [];
|
|
371
371
|
function traverse(cols) {
|
|
372
372
|
for (const col of cols) {
|
|
373
|
-
if ((col.fixed ?? col.fixedType) === type && col.field && col.visible !== false) {
|
|
373
|
+
if ((col.fixed ?? col.fixedType) === type && col.field && (col.visible !== false || col.hidden !== true)) {
|
|
374
374
|
result.push(col.field);
|
|
375
375
|
}
|
|
376
376
|
if (col.children && col.children.length > 0) {
|
|
@@ -1751,7 +1751,7 @@ exports.convertFilters = convertFilters;
|
|
|
1751
1751
|
function getInvisibleColumns(columns) {
|
|
1752
1752
|
const result = {};
|
|
1753
1753
|
for (const col of columns) {
|
|
1754
|
-
if (col.visible === false) {
|
|
1754
|
+
if (col.visible === false || col.hidden) {
|
|
1755
1755
|
result[col.field ?? ''] = false;
|
|
1756
1756
|
}
|
|
1757
1757
|
}
|
|
@@ -1780,7 +1780,7 @@ const getAllVisibleKeys1 = columns => {
|
|
|
1780
1780
|
const keys = [];
|
|
1781
1781
|
const traverse = (cols, parentHidden = false) => {
|
|
1782
1782
|
for (const col of cols) {
|
|
1783
|
-
if (col.visible === false || parentHidden) {
|
|
1783
|
+
if (col.visible === false || col.hidden || parentHidden) {
|
|
1784
1784
|
continue;
|
|
1785
1785
|
}
|
|
1786
1786
|
if (col.field) {
|
|
@@ -1821,7 +1821,7 @@ function getHiddenParentKeys1(columns, parentKeys = []) {
|
|
|
1821
1821
|
childHiddenParents.forEach(key => hiddenParents.add(key));
|
|
1822
1822
|
currentPath.forEach(key => hiddenParents.add(key));
|
|
1823
1823
|
}
|
|
1824
|
-
} else if (column.visible !== false) {
|
|
1824
|
+
} else if (column.visible !== false && column.hidden !== true) {
|
|
1825
1825
|
parentKeys.forEach(key => hiddenParents.add(key));
|
|
1826
1826
|
}
|
|
1827
1827
|
}
|