es-grid-template 1.8.25 → 1.8.27
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/LICENSE +21 -21
- package/README.md +1 -1
- package/assets/index.scss +1170 -1170
- package/es/grid-component/hooks/constant.js +6 -6
- package/es/grid-component/hooks/useColumns.d.ts +3 -1
- package/es/grid-component/styles.scss +1437 -1437
- package/es/table-component/TableContainerEdit.js +1 -1
- package/es/table-component/body/TableBodyCell.js +17 -9
- package/es/table-component/body/TableBodyRow.js +2 -2
- package/es/table-component/header/TableHeadCell2.js +6 -3
- package/es/table-component/hook/constant.js +6 -6
- package/es/table-component/hook/useColumns.js +5 -2
- package/es/table-component/hook/utils.d.ts +1 -1
- package/es/table-component/hook/utils.js +42 -7
- package/es/table-component/style.scss +1220 -1220
- package/es/table-component/table/Grid.js +4 -0
- package/es/table-component/type.d.ts +2 -0
- package/lib/grid-component/hooks/constant.js +6 -6
- package/lib/grid-component/hooks/useColumns.d.ts +3 -1
- package/lib/grid-component/styles.scss +1437 -1437
- package/lib/table-component/TableContainerEdit.js +1 -1
- package/lib/table-component/body/TableBodyCell.js +17 -9
- package/lib/table-component/body/TableBodyRow.js +2 -2
- package/lib/table-component/header/TableHeadCell2.js +6 -3
- package/lib/table-component/hook/constant.js +6 -6
- package/lib/table-component/hook/useColumns.js +5 -2
- package/lib/table-component/hook/utils.d.ts +1 -1
- package/lib/table-component/hook/utils.js +42 -7
- package/lib/table-component/style.scss +1220 -1220
- package/lib/table-component/table/Grid.js +4 -0
- package/lib/table-component/type.d.ts +2 -0
- package/package.json +116 -116
- package/CHANGELOG.md +0 -6
|
@@ -1171,7 +1171,7 @@ const TableContainerEdit = props => {
|
|
|
1171
1171
|
// const newData = [...dataSource]
|
|
1172
1172
|
const newData = [...originData];
|
|
1173
1173
|
let newElement;
|
|
1174
|
-
if (!record
|
|
1174
|
+
if (!record?.children || record?.children && record.children.length === 0) {
|
|
1175
1175
|
newElement = {
|
|
1176
1176
|
...record,
|
|
1177
1177
|
children: [{
|
|
@@ -281,6 +281,8 @@ const TableBodyCell = props => {
|
|
|
281
281
|
// maxWidth: cell.column.getSize(),
|
|
282
282
|
...(0, _utils.getCommonPinningStyles)(cell.column)
|
|
283
283
|
}
|
|
284
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
285
|
+
className: (0, _classnames.default)('ui-rc_cell-content', {})
|
|
284
286
|
}, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
|
|
285
287
|
className: "ui-rc-table-row-expand-trigger",
|
|
286
288
|
style: {
|
|
@@ -323,7 +325,7 @@ const TableBodyCell = props => {
|
|
|
323
325
|
isDataTree,
|
|
324
326
|
setExpanded,
|
|
325
327
|
expandIconColumnIndex
|
|
326
|
-
}));
|
|
328
|
+
})));
|
|
327
329
|
}
|
|
328
330
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
329
331
|
key: cell.id,
|
|
@@ -369,8 +371,11 @@ const TableBodyCell = props => {
|
|
|
369
371
|
if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
|
|
370
372
|
setIsOpenTooltip(true);
|
|
371
373
|
}
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
// onMouseUp={() => { }}
|
|
377
|
+
,
|
|
378
|
+
|
|
374
379
|
onKeyDown: e => {
|
|
375
380
|
const flatRows = table.getRowModel().flatRows;
|
|
376
381
|
if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
|
|
@@ -413,12 +418,15 @@ const TableBodyCell = props => {
|
|
|
413
418
|
onDoubleClick: () => {},
|
|
414
419
|
onClick: e => {
|
|
415
420
|
if (selectionSettings?.checkboxOnly !== true) {
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
421
|
+
const isInsideCell = e.target.closest(".ui-rc-grid-cell");
|
|
422
|
+
if (isInsideCell) {
|
|
423
|
+
cell.row.getToggleSelectedHandler()(e);
|
|
424
|
+
setIsSelectionChange({
|
|
425
|
+
isChange: true,
|
|
426
|
+
type: 'rowSelected',
|
|
427
|
+
rowData: cell.row.original
|
|
428
|
+
});
|
|
429
|
+
}
|
|
422
430
|
}
|
|
423
431
|
}
|
|
424
432
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -70,8 +70,8 @@ const TableBodyRow = ({
|
|
|
70
70
|
// height: isEditing ? '36px' : undefined,
|
|
71
71
|
gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
|
|
72
72
|
// gridTemplateColumns: `repeat(${centerCOlumns.length + fixedLeftColumns.length + fixedRightColumns.length}, minmax(0, 1fr))`,
|
|
73
|
-
height: isEditing ? virtualRow.size : undefined
|
|
74
|
-
|
|
73
|
+
height: isEditing ? virtualRow.size : undefined,
|
|
74
|
+
minHeight: isEditing ? undefined : virtualRow.size
|
|
75
75
|
},
|
|
76
76
|
onDoubleClick: e => {
|
|
77
77
|
recordDoubleClick?.({
|
|
@@ -153,7 +153,10 @@ const TableHeadCell2 = props => {
|
|
|
153
153
|
destroyPopupOnHide: true,
|
|
154
154
|
dropdownRender: () => {
|
|
155
155
|
const type = (0, _utils.getTypeFilter)(originalColumn);
|
|
156
|
-
|
|
156
|
+
|
|
157
|
+
// const operatorValue = (column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string
|
|
158
|
+
|
|
159
|
+
const operatorValue = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(column.columnDef?.meta ?? {});
|
|
157
160
|
const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _constant.booleanOperator : !type || type === 'Text' ? _constant.stringOperator : _constant.numberOperator;
|
|
158
161
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
159
162
|
// className='ui-rc-table-filter-dropdown'
|
|
@@ -165,7 +168,7 @@ const TableHeadCell2 = props => {
|
|
|
165
168
|
minWidth: 275,
|
|
166
169
|
padding: '8px'
|
|
167
170
|
}
|
|
168
|
-
}, /*#__PURE__*/_react.default.createElement("div", null), column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
|
|
171
|
+
}, /*#__PURE__*/_react.default.createElement("div", null), column.columnDef.meta?.showOperator !== false && column.columnDef.meta?.typeFilter !== 'DateRange' && column.columnDef.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
|
|
169
172
|
className: 'mb-1'
|
|
170
173
|
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
|
|
171
174
|
options: (0, _constant.translateOption)(operatorOptions, t),
|
|
@@ -182,7 +185,7 @@ const TableHeadCell2 = props => {
|
|
|
182
185
|
marginBottom: 8
|
|
183
186
|
}
|
|
184
187
|
}, (0, _renderFilter.renderFilter)({
|
|
185
|
-
column: column,
|
|
188
|
+
column: column.columnDef,
|
|
186
189
|
selectedKeys,
|
|
187
190
|
setSelectedKeys
|
|
188
191
|
// selectedKeys: (column.getFilterValue() ?? []) as string[],
|
|
@@ -220,16 +220,16 @@ const optionFontSize = exports.optionFontSize = [{
|
|
|
220
220
|
label: '48'
|
|
221
221
|
}];
|
|
222
222
|
|
|
223
|
-
/**
|
|
224
|
-
* Sort order for BaseTable
|
|
223
|
+
/**
|
|
224
|
+
* Sort order for BaseTable
|
|
225
225
|
*/
|
|
226
226
|
const SortOrder = {
|
|
227
|
-
/**
|
|
228
|
-
* Sort data in ascending order
|
|
227
|
+
/**
|
|
228
|
+
* Sort data in ascending order
|
|
229
229
|
*/
|
|
230
230
|
ascend: 'Ascending',
|
|
231
|
-
/**
|
|
232
|
-
* Sort data in descending order
|
|
231
|
+
/**
|
|
232
|
+
* Sort data in descending order
|
|
233
233
|
*/
|
|
234
234
|
descend: 'Descending'
|
|
235
235
|
};
|
|
@@ -107,7 +107,8 @@ function convertToTanStackColumns({
|
|
|
107
107
|
allowResizing,
|
|
108
108
|
minWidth,
|
|
109
109
|
template,
|
|
110
|
-
allowSorter
|
|
110
|
+
allowSorter,
|
|
111
|
+
allowFiltering
|
|
111
112
|
} = col;
|
|
112
113
|
const {
|
|
113
114
|
children,
|
|
@@ -159,7 +160,9 @@ function convertToTanStackColumns({
|
|
|
159
160
|
sortDescFirst: false,
|
|
160
161
|
minSize: minWidth,
|
|
161
162
|
// maxSize: maxWidth,
|
|
162
|
-
enableSorting: allowSorter !== false || col.sorter !== false
|
|
163
|
+
enableSorting: allowSorter !== false || col.sorter !== false,
|
|
164
|
+
// enableColumnFilter: allowFiltering !== false && !nonActionColumn.includes(field)
|
|
165
|
+
enableColumnFilter: allowFiltering !== false
|
|
163
166
|
};
|
|
164
167
|
if (children) {
|
|
165
168
|
// @ts-ignore
|
|
@@ -137,7 +137,7 @@ export declare const convertToObjTrue: (arr: any) => {
|
|
|
137
137
|
export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
|
|
138
138
|
export declare function isTree(arr: any[]): boolean;
|
|
139
139
|
export declare function findFirst(items: Column<any>[]): Column<any, unknown>;
|
|
140
|
-
export declare function isTreeArray(arr: any[]): boolean;
|
|
140
|
+
export declare function isTreeArray(arr: any[], options?: any): boolean;
|
|
141
141
|
export declare function updateColumnWidthsRecursive(columns: any[], sizing: Record<string, number>): any[];
|
|
142
142
|
export declare function updateWidthsByOther(source: any[], target: any[]): any[];
|
|
143
143
|
export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];
|
|
@@ -2042,14 +2042,49 @@ function findFirst(items) {
|
|
|
2042
2042
|
if (leftItem) return leftItem;
|
|
2043
2043
|
return null;
|
|
2044
2044
|
}
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2045
|
+
|
|
2046
|
+
// export function isTreeArray(arr: any[]): boolean {
|
|
2047
|
+
|
|
2048
|
+
// // if (!Array.isArray(arr)) return false;
|
|
2049
|
+
|
|
2050
|
+
// // return arr.every(item => {
|
|
2051
|
+
// // if ("children" in item) {
|
|
2052
|
+
// // return Array.isArray(item.children) && item.children.length > 0;
|
|
2053
|
+
// // }
|
|
2054
|
+
// // return true; // node lá thì hợp lệ
|
|
2055
|
+
// // });
|
|
2056
|
+
|
|
2057
|
+
// if (!Array.isArray(arr)) return false;
|
|
2058
|
+
|
|
2059
|
+
// return arr.every(item => {
|
|
2060
|
+
// if (typeof item !== "object" || item === null) return false;
|
|
2061
|
+
|
|
2062
|
+
// if ("children" in item) {
|
|
2063
|
+
// return Array.isArray(item.children);
|
|
2064
|
+
// }
|
|
2065
|
+
|
|
2066
|
+
// return false; // node lá thì hợp lệ
|
|
2067
|
+
// });
|
|
2068
|
+
|
|
2069
|
+
// }
|
|
2070
|
+
|
|
2071
|
+
function isTreeArray(arr, options) {
|
|
2072
|
+
if (!Array.isArray(arr) || arr.length === 0) return false;
|
|
2073
|
+
const requireNonEmpty = options?.requireNonEmptyChildren ?? false;
|
|
2074
|
+
let hasParent = false;
|
|
2075
|
+
for (const item of arr) {
|
|
2076
|
+
if (typeof item !== 'object' || item === null) return false;
|
|
2077
|
+
if ('children' in item) {
|
|
2078
|
+
const children = item.children;
|
|
2079
|
+
if (!Array.isArray(children)) return false;
|
|
2080
|
+
if (requireNonEmpty) {
|
|
2081
|
+
if (children.length > 0) hasParent = true;
|
|
2082
|
+
} else {
|
|
2083
|
+
hasParent = true;
|
|
2084
|
+
}
|
|
2050
2085
|
}
|
|
2051
|
-
|
|
2052
|
-
|
|
2086
|
+
}
|
|
2087
|
+
return hasParent;
|
|
2053
2088
|
}
|
|
2054
2089
|
function updateColumnWidthsRecursive(columns, sizing) {
|
|
2055
2090
|
return columns.map(col => {
|