es-grid-template 1.9.83 → 1.9.84
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/ali-table/InternalTable.js +1 -0
- package/es/ali-table/pipeline/features/columnCustom.js +4 -1
- package/es/ali-table/utils/utility.js +6 -0
- package/es/grid-component/hooks/constant.js +32 -0
- package/es/group-component/body/TableBodyRow.js +1 -1
- package/es/group-component/hook/utils.js +6 -0
- package/es/group-component/table/Grid.js +3 -1
- package/es/table-component/body/TableBodyRow.js +1 -1
- package/es/table-component/header/TableHeadCell.js +13 -3
- package/es/table-component/header/TableHeadCell2.js +17 -10
- package/es/table-component/hook/utils.js +6 -0
- package/es/table-component/table/Grid.js +3 -1
- package/es/table-virtuoso/header/TableHeadCell.js +16 -2
- package/es/table-virtuoso/hook/utils.js +6 -0
- package/es/table-virtuoso/table/Grid.js +3 -1
- package/lib/ali-table/InternalTable.js +1 -0
- package/lib/ali-table/pipeline/features/columnCustom.js +4 -1
- package/lib/ali-table/utils/utility.js +6 -0
- package/lib/grid-component/hooks/constant.js +32 -0
- package/lib/group-component/body/TableBodyRow.js +1 -1
- package/lib/group-component/hook/utils.js +6 -0
- package/lib/group-component/table/Grid.js +3 -1
- package/lib/table-component/body/TableBodyRow.js +1 -1
- package/lib/table-component/header/TableHeadCell.js +13 -3
- package/lib/table-component/header/TableHeadCell2.js +17 -10
- package/lib/table-component/hook/utils.js +6 -0
- package/lib/table-component/table/Grid.js +3 -1
- package/lib/table-virtuoso/header/TableHeadCell.js +16 -2
- package/lib/table-virtuoso/hook/utils.js +6 -0
- package/lib/table-virtuoso/table/Grid.js +3 -1
- package/package.json +1 -1
|
@@ -262,6 +262,7 @@ export function columnCustom(opts) {
|
|
|
262
262
|
newFilterState = convertFilters([...rs]);
|
|
263
263
|
}
|
|
264
264
|
if (onFilter) {
|
|
265
|
+
console.log('[onFilter] src/ali-table/pipeline/features/columnCustom.tsx:confirm', newFilterState);
|
|
265
266
|
onFilter(newFilterState);
|
|
266
267
|
} else {
|
|
267
268
|
|
|
@@ -302,7 +303,9 @@ export function columnCustom(opts) {
|
|
|
302
303
|
|
|
303
304
|
pipeline.setStateAtKey(stateKeyFilter, rs);
|
|
304
305
|
if (onFilter) {
|
|
305
|
-
|
|
306
|
+
const convertedFilterState = convertFilters([...newFilterState]);
|
|
307
|
+
console.log('[onFilter] src/ali-table/pipeline/features/columnCustom.tsx:clear', convertedFilterState);
|
|
308
|
+
onFilter(convertedFilterState);
|
|
306
309
|
} else {
|
|
307
310
|
|
|
308
311
|
// const newData = filterDataByColumns(data, newFilterState, sorterStates, [], false)
|
|
@@ -103,6 +103,12 @@ export const shouldIncludeOptimized = (item, queries, ignoreAccents = true) => {
|
|
|
103
103
|
case 'endswith':
|
|
104
104
|
condition = ignoreAccents === false ? itemValue?.endsWith(value) : itemStr.endsWith(compareValue);
|
|
105
105
|
break;
|
|
106
|
+
case 'empty':
|
|
107
|
+
condition = ignoreAccents === false ? itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '' : itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
|
|
108
|
+
break;
|
|
109
|
+
case 'notempty':
|
|
110
|
+
condition = ignoreAccents === false ? !(itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '') : !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
|
|
111
|
+
break;
|
|
106
112
|
}
|
|
107
113
|
}
|
|
108
114
|
|
|
@@ -24,6 +24,14 @@ export const numberOperator = [{
|
|
|
24
24
|
value: 'notequal',
|
|
25
25
|
label: 'Not equal',
|
|
26
26
|
key: '!='
|
|
27
|
+
}, {
|
|
28
|
+
value: 'empty',
|
|
29
|
+
key: 'empty',
|
|
30
|
+
label: 'Empty'
|
|
31
|
+
}, {
|
|
32
|
+
value: 'notempty',
|
|
33
|
+
key: 'notempty',
|
|
34
|
+
label: 'Not empty'
|
|
27
35
|
}];
|
|
28
36
|
export const stringOperator = [{
|
|
29
37
|
value: 'startswith',
|
|
@@ -49,6 +57,14 @@ export const stringOperator = [{
|
|
|
49
57
|
value: 'notequal',
|
|
50
58
|
key: '!=',
|
|
51
59
|
label: 'Not equal'
|
|
60
|
+
}, {
|
|
61
|
+
value: 'empty',
|
|
62
|
+
key: 'empty',
|
|
63
|
+
label: 'Empty'
|
|
64
|
+
}, {
|
|
65
|
+
value: 'notempty',
|
|
66
|
+
key: 'notempty',
|
|
67
|
+
label: 'Not empty'
|
|
52
68
|
}];
|
|
53
69
|
export const dateOperator = [{
|
|
54
70
|
value: 'equal',
|
|
@@ -66,6 +82,14 @@ export const dateOperator = [{
|
|
|
66
82
|
value: 'lessthan',
|
|
67
83
|
key: '<',
|
|
68
84
|
label: 'Less than'
|
|
85
|
+
}, {
|
|
86
|
+
value: 'empty',
|
|
87
|
+
key: 'empty',
|
|
88
|
+
label: 'Empty'
|
|
89
|
+
}, {
|
|
90
|
+
value: 'notempty',
|
|
91
|
+
key: 'notempty',
|
|
92
|
+
label: 'Not empty'
|
|
69
93
|
}];
|
|
70
94
|
export const dateTimeOperator = [{
|
|
71
95
|
value: 'equal',
|
|
@@ -83,6 +107,14 @@ export const dateTimeOperator = [{
|
|
|
83
107
|
value: 'lessthan',
|
|
84
108
|
key: '<',
|
|
85
109
|
label: 'Less than'
|
|
110
|
+
}, {
|
|
111
|
+
value: 'empty',
|
|
112
|
+
key: 'empty',
|
|
113
|
+
label: 'Empty'
|
|
114
|
+
}, {
|
|
115
|
+
value: 'notempty',
|
|
116
|
+
key: 'notempty',
|
|
117
|
+
label: 'Not empty'
|
|
86
118
|
}];
|
|
87
119
|
export const booleanOperator = [{
|
|
88
120
|
value: 'equal',
|
|
@@ -49,7 +49,7 @@ const TableBodyRow = ({
|
|
|
49
49
|
return /*#__PURE__*/React.createElement("div", {
|
|
50
50
|
"data-index": virtualRow.index //needed for dynamic row height measurement
|
|
51
51
|
,
|
|
52
|
-
ref:
|
|
52
|
+
ref: rowVirtualizer.measureElement //measure dynamic row height
|
|
53
53
|
,
|
|
54
54
|
key: row.id,
|
|
55
55
|
"data-row-key": row.id,
|
|
@@ -810,6 +810,12 @@ export const shouldInclude = (item, queries) => {
|
|
|
810
810
|
case "endswith":
|
|
811
811
|
condition = itemStr?.endsWith(queryStr);
|
|
812
812
|
break;
|
|
813
|
+
case "empty":
|
|
814
|
+
condition = itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
|
|
815
|
+
break;
|
|
816
|
+
case "notempty":
|
|
817
|
+
condition = !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
|
|
818
|
+
break;
|
|
813
819
|
default:
|
|
814
820
|
console.warn(`Unknown operator: ${operator}`);
|
|
815
821
|
break;
|
|
@@ -235,7 +235,9 @@ const Grid = props => {
|
|
|
235
235
|
};
|
|
236
236
|
});
|
|
237
237
|
if (onFilter) {
|
|
238
|
-
|
|
238
|
+
const convertedFilters = convertFilters(merged);
|
|
239
|
+
console.log('[onFilter] src/group-component/table/Grid.tsx', convertedFilters);
|
|
240
|
+
onFilter?.(convertedFilters);
|
|
239
241
|
} else {
|
|
240
242
|
triggerFilter(convertFilters(merged));
|
|
241
243
|
const b = filterDataByColumns(originData, convertFilters(merged), [], []);
|
|
@@ -46,7 +46,7 @@ const TableBodyRow = ({
|
|
|
46
46
|
return /*#__PURE__*/React.createElement("div", {
|
|
47
47
|
"data-index": virtualRow.index //needed for dynamic row height measurement
|
|
48
48
|
,
|
|
49
|
-
ref:
|
|
49
|
+
ref: rowVirtualizer.measureElement //measure dynamic row height
|
|
50
50
|
,
|
|
51
51
|
key: row.id,
|
|
52
52
|
"data-row-key": row.id,
|
|
@@ -89,15 +89,21 @@ const TableHeadCell = props => {
|
|
|
89
89
|
if (newVisible) {
|
|
90
90
|
const filterValue = header.column.getFilterValue() ?? [];
|
|
91
91
|
const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
|
|
92
|
-
setSelectedKeys(filterValue);
|
|
92
|
+
setSelectedKeys(['empty', 'notempty'].includes(operatorValue) ? [] : filterValue);
|
|
93
93
|
header.column.setFilterOperator?.(operatorValue);
|
|
94
94
|
} else {}
|
|
95
95
|
triggerVisible(newVisible);
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
98
|
const doFilter = type => {
|
|
99
|
+
console.log('[doFilter] src/table-component/header/TableHeadCell.tsx', {
|
|
100
|
+
type
|
|
101
|
+
});
|
|
99
102
|
if (type) {
|
|
100
|
-
header.column.
|
|
103
|
+
const operatorValue = header.column.getFilterOperator();
|
|
104
|
+
const isEmptyOperator = ['empty', 'notempty'].includes(operatorValue);
|
|
105
|
+
const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
|
|
106
|
+
header.column.setFilterValue(filterValue);
|
|
101
107
|
} else {
|
|
102
108
|
header.column.setFilterValue(undefined);
|
|
103
109
|
setSelectedKeys([]);
|
|
@@ -123,6 +129,7 @@ const TableHeadCell = props => {
|
|
|
123
129
|
dropdownRender: () => {
|
|
124
130
|
const type = getTypeFilter(originalColumn);
|
|
125
131
|
const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(originalColumn);
|
|
132
|
+
const hideFilterInput = ['empty', 'notempty'].includes(operatorValue);
|
|
126
133
|
const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
|
|
127
134
|
return /*#__PURE__*/React.createElement("div", {
|
|
128
135
|
// className='ui-rc-table-filter-dropdown'
|
|
@@ -145,8 +152,11 @@ const TableHeadCell = props => {
|
|
|
145
152
|
value: operatorValue,
|
|
146
153
|
onChange: val => {
|
|
147
154
|
header.column.setFilterOperator(val);
|
|
155
|
+
if (['empty', 'notempty'].includes(val)) {
|
|
156
|
+
setSelectedKeys([]);
|
|
157
|
+
}
|
|
148
158
|
}
|
|
149
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
159
|
+
})), !hideFilterInput && /*#__PURE__*/React.createElement("div", {
|
|
150
160
|
style: {
|
|
151
161
|
marginBottom: 8
|
|
152
162
|
}
|
|
@@ -105,8 +105,8 @@ const TableHeadCell2 = props => {
|
|
|
105
105
|
const filterValue = column.getFilterValue() ?? [];
|
|
106
106
|
const filterValueOrigin = fieldOriginal ? fieldOriginal.getFilterValue() ?? [] : undefined;
|
|
107
107
|
const defaultFilterOption = defaultFilter?.find(it => it.field === originalColumn.field);
|
|
108
|
-
const operatorValue = column.getFilterOperator() ?? defaultFilterOption?.operator ?? getDefaultOperator(column.columnDef?.meta ?? {});
|
|
109
|
-
setSelectedKeys(filterValueOrigin ?? filterValue);
|
|
108
|
+
const operatorValue = (fieldOriginal ?? column).getFilterOperator() ?? defaultFilterOption?.operator ?? getDefaultOperator(column.columnDef?.meta ?? {});
|
|
109
|
+
setSelectedKeys(['empty', 'notempty'].includes(operatorValue) ? [] : filterValueOrigin ?? filterValue);
|
|
110
110
|
if (fieldOriginal) {
|
|
111
111
|
fieldOriginal.setFilterOperator?.(operatorValue);
|
|
112
112
|
} else {
|
|
@@ -123,12 +123,15 @@ const TableHeadCell2 = props => {
|
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
125
|
const doFilter = type => {
|
|
126
|
+
console.log('[doFilter] src/table-component/header/TableHeadCell2.tsx', {
|
|
127
|
+
type
|
|
128
|
+
});
|
|
126
129
|
if (type) {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
130
|
+
const filterColumn = fieldOriginal ?? column;
|
|
131
|
+
const operatorValue = filterColumn.getFilterOperator();
|
|
132
|
+
const isEmptyOperator = ['empty', 'notempty'].includes(operatorValue);
|
|
133
|
+
const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys;
|
|
134
|
+
filterColumn.setFilterValue(filterValue);
|
|
132
135
|
|
|
133
136
|
// column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)
|
|
134
137
|
} else {
|
|
@@ -160,7 +163,8 @@ const TableHeadCell2 = props => {
|
|
|
160
163
|
dropdownRender: () => {
|
|
161
164
|
const type = getTypeFilter(originalColumn);
|
|
162
165
|
const defaultOperatorValue = defaultFilter?.find(it => it.field === originalColumn.field);
|
|
163
|
-
const operatorValue = column.getFilterOperator() ?? defaultOperatorValue?.operator ?? getDefaultOperator(originalColumn);
|
|
166
|
+
const operatorValue = (fieldOriginal ?? column).getFilterOperator() ?? defaultOperatorValue?.operator ?? getDefaultOperator(originalColumn);
|
|
167
|
+
const hideFilterInput = ['empty', 'notempty'].includes(operatorValue);
|
|
164
168
|
const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
|
|
165
169
|
return /*#__PURE__*/React.createElement("div", {
|
|
166
170
|
// className='ui-rc-table-filter-dropdown'
|
|
@@ -182,13 +186,16 @@ const TableHeadCell2 = props => {
|
|
|
182
186
|
},
|
|
183
187
|
value: operatorValue,
|
|
184
188
|
onChange: val => {
|
|
185
|
-
column.setFilterOperator(val);
|
|
189
|
+
(fieldOriginal ?? column).setFilterOperator(val);
|
|
190
|
+
if (['empty', 'notempty'].includes(val)) {
|
|
191
|
+
setSelectedKeys([]);
|
|
192
|
+
}
|
|
186
193
|
}
|
|
187
194
|
// dropdownStyle={{
|
|
188
195
|
|
|
189
196
|
// zIndex: 1059
|
|
190
197
|
// }}
|
|
191
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
198
|
+
})), !hideFilterInput && /*#__PURE__*/React.createElement("div", {
|
|
192
199
|
style: {
|
|
193
200
|
marginBottom: 8
|
|
194
201
|
}
|
|
@@ -1077,6 +1077,12 @@ export const shouldInclude = (item, queries, ignoreAccents) => {
|
|
|
1077
1077
|
case "endswith":
|
|
1078
1078
|
condition = ignoreAccents === false ? itemValue?.endsWith(value) : itemStr?.endsWith(queryStr);
|
|
1079
1079
|
break;
|
|
1080
|
+
case 'empty':
|
|
1081
|
+
condition = ignoreAccents === false ? itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '' : itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
|
|
1082
|
+
break;
|
|
1083
|
+
case 'notempty':
|
|
1084
|
+
condition = ignoreAccents === false ? !(itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '') : !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
|
|
1085
|
+
break;
|
|
1080
1086
|
default:
|
|
1081
1087
|
console.warn(`Unknown operator: ${operator}`);
|
|
1082
1088
|
break;
|
|
@@ -307,7 +307,9 @@ const Grid = props => {
|
|
|
307
307
|
};
|
|
308
308
|
});
|
|
309
309
|
if (onFilter) {
|
|
310
|
-
|
|
310
|
+
const convertedFilters = convertFilters(merged);
|
|
311
|
+
console.log('[onFilter] src/table-component/table/Grid.tsx', convertedFilters);
|
|
312
|
+
onFilter?.(convertedFilters);
|
|
311
313
|
} else {
|
|
312
314
|
triggerFilter(convertFilters(merged));
|
|
313
315
|
const b = filterDataByColumns(originData, convertFilters(merged), [], []);
|
|
@@ -52,6 +52,11 @@ const TableHeadCell = props => {
|
|
|
52
52
|
React.useEffect(() => {
|
|
53
53
|
setSelectedKeys(filterValue);
|
|
54
54
|
}, []);
|
|
55
|
+
React.useEffect(() => {
|
|
56
|
+
if (['empty', 'notempty'].includes(currentFilter.ope)) {
|
|
57
|
+
setSelectedKeys([]);
|
|
58
|
+
}
|
|
59
|
+
}, [currentFilter.ope]);
|
|
55
60
|
const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
|
|
56
61
|
const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
|
|
57
62
|
const cellStyles = cellStyles2 ?? cellStyles1;
|
|
@@ -87,8 +92,13 @@ const TableHeadCell = props => {
|
|
|
87
92
|
}, iconFilter);
|
|
88
93
|
};
|
|
89
94
|
const doFilter = type => {
|
|
95
|
+
console.log('[doFilter] src/table-virtuoso/header/TableHeadCell.tsx', {
|
|
96
|
+
type
|
|
97
|
+
});
|
|
90
98
|
if (type) {
|
|
91
|
-
|
|
99
|
+
const isEmptyOperator = ['empty', 'notempty'].includes(currentFilter.ope);
|
|
100
|
+
const nextFilterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
|
|
101
|
+
header.column.setFilterValue(nextFilterValue);
|
|
92
102
|
header.column.setFilterOperator?.(currentFilter.ope);
|
|
93
103
|
} else {
|
|
94
104
|
header.column.setFilterValue(undefined);
|
|
@@ -112,6 +122,7 @@ const TableHeadCell = props => {
|
|
|
112
122
|
destroyPopupOnHide: true,
|
|
113
123
|
dropdownRender: () => {
|
|
114
124
|
const type = getTypeFilter(originalColumn);
|
|
125
|
+
const hideFilterInput = ['empty', 'notempty'].includes(currentFilter.ope);
|
|
115
126
|
|
|
116
127
|
// const operatorValue = (header.column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string
|
|
117
128
|
|
|
@@ -141,9 +152,12 @@ const TableHeadCell = props => {
|
|
|
141
152
|
...prev,
|
|
142
153
|
ope: val
|
|
143
154
|
}));
|
|
155
|
+
if (['empty', 'notempty'].includes(val)) {
|
|
156
|
+
setSelectedKeys([]);
|
|
157
|
+
}
|
|
144
158
|
// header.column.setFilterOperator(val)
|
|
145
159
|
}
|
|
146
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
160
|
+
})), !hideFilterInput && /*#__PURE__*/React.createElement("div", {
|
|
147
161
|
style: {
|
|
148
162
|
marginBottom: 8
|
|
149
163
|
}
|
|
@@ -859,6 +859,12 @@ export const shouldInclude = (item, queries) => {
|
|
|
859
859
|
case "endswith":
|
|
860
860
|
condition = itemStr?.endsWith(queryStr);
|
|
861
861
|
break;
|
|
862
|
+
case "empty":
|
|
863
|
+
condition = itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
|
|
864
|
+
break;
|
|
865
|
+
case "notempty":
|
|
866
|
+
condition = !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
|
|
867
|
+
break;
|
|
862
868
|
default:
|
|
863
869
|
console.warn(`Unknown operator: ${operator}`);
|
|
864
870
|
break;
|
|
@@ -123,7 +123,9 @@ const Grid = props => {
|
|
|
123
123
|
};
|
|
124
124
|
});
|
|
125
125
|
if (onFilter) {
|
|
126
|
-
|
|
126
|
+
const convertedFilters = convertFilters(merged);
|
|
127
|
+
console.log('[onFilter] src/table-virtuoso/table/Grid.tsx', convertedFilters);
|
|
128
|
+
onFilter?.(convertedFilters);
|
|
127
129
|
} else {
|
|
128
130
|
triggerFilter(convertFilters(merged));
|
|
129
131
|
const b = filterDataByColumns(originData, convertFilters(merged), [], []);
|
|
@@ -258,6 +258,7 @@ function columnCustom(opts) {
|
|
|
258
258
|
newFilterState = (0, _utils2.convertFilters)([...rs]);
|
|
259
259
|
}
|
|
260
260
|
if (onFilter) {
|
|
261
|
+
console.log('[onFilter] src/ali-table/pipeline/features/columnCustom.tsx:confirm', newFilterState);
|
|
261
262
|
onFilter(newFilterState);
|
|
262
263
|
} else {
|
|
263
264
|
|
|
@@ -298,7 +299,9 @@ function columnCustom(opts) {
|
|
|
298
299
|
|
|
299
300
|
pipeline.setStateAtKey(_constants.stateKeyFilter, rs);
|
|
300
301
|
if (onFilter) {
|
|
301
|
-
|
|
302
|
+
const convertedFilterState = (0, _utils2.convertFilters)([...newFilterState]);
|
|
303
|
+
console.log('[onFilter] src/ali-table/pipeline/features/columnCustom.tsx:clear', convertedFilterState);
|
|
304
|
+
onFilter(convertedFilterState);
|
|
302
305
|
} else {
|
|
303
306
|
|
|
304
307
|
// const newData = filterDataByColumns(data, newFilterState, sorterStates, [], false)
|
|
@@ -120,6 +120,12 @@ const shouldIncludeOptimized = (item, queries, ignoreAccents = true) => {
|
|
|
120
120
|
case 'endswith':
|
|
121
121
|
condition = ignoreAccents === false ? itemValue?.endsWith(value) : itemStr.endsWith(compareValue);
|
|
122
122
|
break;
|
|
123
|
+
case 'empty':
|
|
124
|
+
condition = ignoreAccents === false ? itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '' : itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
|
|
125
|
+
break;
|
|
126
|
+
case 'notempty':
|
|
127
|
+
condition = ignoreAccents === false ? !(itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '') : !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
|
|
128
|
+
break;
|
|
123
129
|
}
|
|
124
130
|
}
|
|
125
131
|
|
|
@@ -30,6 +30,14 @@ const numberOperator = exports.numberOperator = [{
|
|
|
30
30
|
value: 'notequal',
|
|
31
31
|
label: 'Not equal',
|
|
32
32
|
key: '!='
|
|
33
|
+
}, {
|
|
34
|
+
value: 'empty',
|
|
35
|
+
key: 'empty',
|
|
36
|
+
label: 'Empty'
|
|
37
|
+
}, {
|
|
38
|
+
value: 'notempty',
|
|
39
|
+
key: 'notempty',
|
|
40
|
+
label: 'Not empty'
|
|
33
41
|
}];
|
|
34
42
|
const stringOperator = exports.stringOperator = [{
|
|
35
43
|
value: 'startswith',
|
|
@@ -55,6 +63,14 @@ const stringOperator = exports.stringOperator = [{
|
|
|
55
63
|
value: 'notequal',
|
|
56
64
|
key: '!=',
|
|
57
65
|
label: 'Not equal'
|
|
66
|
+
}, {
|
|
67
|
+
value: 'empty',
|
|
68
|
+
key: 'empty',
|
|
69
|
+
label: 'Empty'
|
|
70
|
+
}, {
|
|
71
|
+
value: 'notempty',
|
|
72
|
+
key: 'notempty',
|
|
73
|
+
label: 'Not empty'
|
|
58
74
|
}];
|
|
59
75
|
const dateOperator = exports.dateOperator = [{
|
|
60
76
|
value: 'equal',
|
|
@@ -72,6 +88,14 @@ const dateOperator = exports.dateOperator = [{
|
|
|
72
88
|
value: 'lessthan',
|
|
73
89
|
key: '<',
|
|
74
90
|
label: 'Less than'
|
|
91
|
+
}, {
|
|
92
|
+
value: 'empty',
|
|
93
|
+
key: 'empty',
|
|
94
|
+
label: 'Empty'
|
|
95
|
+
}, {
|
|
96
|
+
value: 'notempty',
|
|
97
|
+
key: 'notempty',
|
|
98
|
+
label: 'Not empty'
|
|
75
99
|
}];
|
|
76
100
|
const dateTimeOperator = exports.dateTimeOperator = [{
|
|
77
101
|
value: 'equal',
|
|
@@ -89,6 +113,14 @@ const dateTimeOperator = exports.dateTimeOperator = [{
|
|
|
89
113
|
value: 'lessthan',
|
|
90
114
|
key: '<',
|
|
91
115
|
label: 'Less than'
|
|
116
|
+
}, {
|
|
117
|
+
value: 'empty',
|
|
118
|
+
key: 'empty',
|
|
119
|
+
label: 'Empty'
|
|
120
|
+
}, {
|
|
121
|
+
value: 'notempty',
|
|
122
|
+
key: 'notempty',
|
|
123
|
+
label: 'Not empty'
|
|
92
124
|
}];
|
|
93
125
|
const booleanOperator = exports.booleanOperator = [{
|
|
94
126
|
value: 'equal',
|
|
@@ -56,7 +56,7 @@ const TableBodyRow = ({
|
|
|
56
56
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
57
57
|
"data-index": virtualRow.index //needed for dynamic row height measurement
|
|
58
58
|
,
|
|
59
|
-
ref:
|
|
59
|
+
ref: rowVirtualizer.measureElement //measure dynamic row height
|
|
60
60
|
,
|
|
61
61
|
key: row.id,
|
|
62
62
|
"data-row-key": row.id,
|
|
@@ -902,6 +902,12 @@ const shouldInclude = (item, queries) => {
|
|
|
902
902
|
case "endswith":
|
|
903
903
|
condition = itemStr?.endsWith(queryStr);
|
|
904
904
|
break;
|
|
905
|
+
case "empty":
|
|
906
|
+
condition = itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
|
|
907
|
+
break;
|
|
908
|
+
case "notempty":
|
|
909
|
+
condition = !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
|
|
910
|
+
break;
|
|
905
911
|
default:
|
|
906
912
|
console.warn(`Unknown operator: ${operator}`);
|
|
907
913
|
break;
|
|
@@ -241,7 +241,9 @@ const Grid = props => {
|
|
|
241
241
|
};
|
|
242
242
|
});
|
|
243
243
|
if (onFilter) {
|
|
244
|
-
|
|
244
|
+
const convertedFilters = (0, _utils.convertFilters)(merged);
|
|
245
|
+
console.log('[onFilter] src/group-component/table/Grid.tsx', convertedFilters);
|
|
246
|
+
onFilter?.(convertedFilters);
|
|
245
247
|
} else {
|
|
246
248
|
triggerFilter((0, _utils.convertFilters)(merged));
|
|
247
249
|
const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);
|
|
@@ -53,7 +53,7 @@ const TableBodyRow = ({
|
|
|
53
53
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
54
54
|
"data-index": virtualRow.index //needed for dynamic row height measurement
|
|
55
55
|
,
|
|
56
|
-
ref:
|
|
56
|
+
ref: rowVirtualizer.measureElement //measure dynamic row height
|
|
57
57
|
,
|
|
58
58
|
key: row.id,
|
|
59
59
|
"data-row-key": row.id,
|
|
@@ -97,15 +97,21 @@ const TableHeadCell = props => {
|
|
|
97
97
|
if (newVisible) {
|
|
98
98
|
const filterValue = header.column.getFilterValue() ?? [];
|
|
99
99
|
const operatorValue = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(column?.meta ?? {});
|
|
100
|
-
setSelectedKeys(filterValue);
|
|
100
|
+
setSelectedKeys(['empty', 'notempty'].includes(operatorValue) ? [] : filterValue);
|
|
101
101
|
header.column.setFilterOperator?.(operatorValue);
|
|
102
102
|
} else {}
|
|
103
103
|
triggerVisible(newVisible);
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
106
|
const doFilter = type => {
|
|
107
|
+
console.log('[doFilter] src/table-component/header/TableHeadCell.tsx', {
|
|
108
|
+
type
|
|
109
|
+
});
|
|
107
110
|
if (type) {
|
|
108
|
-
header.column.
|
|
111
|
+
const operatorValue = header.column.getFilterOperator();
|
|
112
|
+
const isEmptyOperator = ['empty', 'notempty'].includes(operatorValue);
|
|
113
|
+
const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
|
|
114
|
+
header.column.setFilterValue(filterValue);
|
|
109
115
|
} else {
|
|
110
116
|
header.column.setFilterValue(undefined);
|
|
111
117
|
setSelectedKeys([]);
|
|
@@ -131,6 +137,7 @@ const TableHeadCell = props => {
|
|
|
131
137
|
dropdownRender: () => {
|
|
132
138
|
const type = (0, _utils.getTypeFilter)(originalColumn);
|
|
133
139
|
const operatorValue = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(originalColumn);
|
|
140
|
+
const hideFilterInput = ['empty', 'notempty'].includes(operatorValue);
|
|
134
141
|
const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
|
|
135
142
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
136
143
|
// className='ui-rc-table-filter-dropdown'
|
|
@@ -153,8 +160,11 @@ const TableHeadCell = props => {
|
|
|
153
160
|
value: operatorValue,
|
|
154
161
|
onChange: val => {
|
|
155
162
|
header.column.setFilterOperator(val);
|
|
163
|
+
if (['empty', 'notempty'].includes(val)) {
|
|
164
|
+
setSelectedKeys([]);
|
|
165
|
+
}
|
|
156
166
|
}
|
|
157
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
167
|
+
})), !hideFilterInput && /*#__PURE__*/_react.default.createElement("div", {
|
|
158
168
|
style: {
|
|
159
169
|
marginBottom: 8
|
|
160
170
|
}
|
|
@@ -113,8 +113,8 @@ const TableHeadCell2 = props => {
|
|
|
113
113
|
const filterValue = column.getFilterValue() ?? [];
|
|
114
114
|
const filterValueOrigin = fieldOriginal ? fieldOriginal.getFilterValue() ?? [] : undefined;
|
|
115
115
|
const defaultFilterOption = defaultFilter?.find(it => it.field === originalColumn.field);
|
|
116
|
-
const operatorValue = column.getFilterOperator() ?? defaultFilterOption?.operator ?? (0, _utils.getDefaultOperator)(column.columnDef?.meta ?? {});
|
|
117
|
-
setSelectedKeys(filterValueOrigin ?? filterValue);
|
|
116
|
+
const operatorValue = (fieldOriginal ?? column).getFilterOperator() ?? defaultFilterOption?.operator ?? (0, _utils.getDefaultOperator)(column.columnDef?.meta ?? {});
|
|
117
|
+
setSelectedKeys(['empty', 'notempty'].includes(operatorValue) ? [] : filterValueOrigin ?? filterValue);
|
|
118
118
|
if (fieldOriginal) {
|
|
119
119
|
fieldOriginal.setFilterOperator?.(operatorValue);
|
|
120
120
|
} else {
|
|
@@ -131,12 +131,15 @@ const TableHeadCell2 = props => {
|
|
|
131
131
|
}
|
|
132
132
|
};
|
|
133
133
|
const doFilter = type => {
|
|
134
|
+
console.log('[doFilter] src/table-component/header/TableHeadCell2.tsx', {
|
|
135
|
+
type
|
|
136
|
+
});
|
|
134
137
|
if (type) {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
138
|
+
const filterColumn = fieldOriginal ?? column;
|
|
139
|
+
const operatorValue = filterColumn.getFilterOperator();
|
|
140
|
+
const isEmptyOperator = ['empty', 'notempty'].includes(operatorValue);
|
|
141
|
+
const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys;
|
|
142
|
+
filterColumn.setFilterValue(filterValue);
|
|
140
143
|
|
|
141
144
|
// column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)
|
|
142
145
|
} else {
|
|
@@ -168,7 +171,8 @@ const TableHeadCell2 = props => {
|
|
|
168
171
|
dropdownRender: () => {
|
|
169
172
|
const type = (0, _utils.getTypeFilter)(originalColumn);
|
|
170
173
|
const defaultOperatorValue = defaultFilter?.find(it => it.field === originalColumn.field);
|
|
171
|
-
const operatorValue = column.getFilterOperator() ?? defaultOperatorValue?.operator ?? (0, _utils.getDefaultOperator)(originalColumn);
|
|
174
|
+
const operatorValue = (fieldOriginal ?? column).getFilterOperator() ?? defaultOperatorValue?.operator ?? (0, _utils.getDefaultOperator)(originalColumn);
|
|
175
|
+
const hideFilterInput = ['empty', 'notempty'].includes(operatorValue);
|
|
172
176
|
const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
|
|
173
177
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
174
178
|
// className='ui-rc-table-filter-dropdown'
|
|
@@ -190,13 +194,16 @@ const TableHeadCell2 = props => {
|
|
|
190
194
|
},
|
|
191
195
|
value: operatorValue,
|
|
192
196
|
onChange: val => {
|
|
193
|
-
column.setFilterOperator(val);
|
|
197
|
+
(fieldOriginal ?? column).setFilterOperator(val);
|
|
198
|
+
if (['empty', 'notempty'].includes(val)) {
|
|
199
|
+
setSelectedKeys([]);
|
|
200
|
+
}
|
|
194
201
|
}
|
|
195
202
|
// dropdownStyle={{
|
|
196
203
|
|
|
197
204
|
// zIndex: 1059
|
|
198
205
|
// }}
|
|
199
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
206
|
+
})), !hideFilterInput && /*#__PURE__*/_react.default.createElement("div", {
|
|
200
207
|
style: {
|
|
201
208
|
marginBottom: 8
|
|
202
209
|
}
|
|
@@ -1191,6 +1191,12 @@ const shouldInclude = (item, queries, ignoreAccents) => {
|
|
|
1191
1191
|
case "endswith":
|
|
1192
1192
|
condition = ignoreAccents === false ? itemValue?.endsWith(value) : itemStr?.endsWith(queryStr);
|
|
1193
1193
|
break;
|
|
1194
|
+
case 'empty':
|
|
1195
|
+
condition = ignoreAccents === false ? itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '' : itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
|
|
1196
|
+
break;
|
|
1197
|
+
case 'notempty':
|
|
1198
|
+
condition = ignoreAccents === false ? !(itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '') : !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
|
|
1199
|
+
break;
|
|
1194
1200
|
default:
|
|
1195
1201
|
console.warn(`Unknown operator: ${operator}`);
|
|
1196
1202
|
break;
|
|
@@ -312,7 +312,9 @@ const Grid = props => {
|
|
|
312
312
|
};
|
|
313
313
|
});
|
|
314
314
|
if (onFilter) {
|
|
315
|
-
|
|
315
|
+
const convertedFilters = (0, _utils.convertFilters)(merged);
|
|
316
|
+
console.log('[onFilter] src/table-component/table/Grid.tsx', convertedFilters);
|
|
317
|
+
onFilter?.(convertedFilters);
|
|
316
318
|
} else {
|
|
317
319
|
triggerFilter((0, _utils.convertFilters)(merged));
|
|
318
320
|
const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);
|
|
@@ -60,6 +60,11 @@ const TableHeadCell = props => {
|
|
|
60
60
|
_react.default.useEffect(() => {
|
|
61
61
|
setSelectedKeys(filterValue);
|
|
62
62
|
}, []);
|
|
63
|
+
_react.default.useEffect(() => {
|
|
64
|
+
if (['empty', 'notempty'].includes(currentFilter.ope)) {
|
|
65
|
+
setSelectedKeys([]);
|
|
66
|
+
}
|
|
67
|
+
}, [currentFilter.ope]);
|
|
63
68
|
const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
|
|
64
69
|
const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
|
|
65
70
|
const cellStyles = cellStyles2 ?? cellStyles1;
|
|
@@ -95,8 +100,13 @@ const TableHeadCell = props => {
|
|
|
95
100
|
}, iconFilter);
|
|
96
101
|
};
|
|
97
102
|
const doFilter = type => {
|
|
103
|
+
console.log('[doFilter] src/table-virtuoso/header/TableHeadCell.tsx', {
|
|
104
|
+
type
|
|
105
|
+
});
|
|
98
106
|
if (type) {
|
|
99
|
-
|
|
107
|
+
const isEmptyOperator = ['empty', 'notempty'].includes(currentFilter.ope);
|
|
108
|
+
const nextFilterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
|
|
109
|
+
header.column.setFilterValue(nextFilterValue);
|
|
100
110
|
header.column.setFilterOperator?.(currentFilter.ope);
|
|
101
111
|
} else {
|
|
102
112
|
header.column.setFilterValue(undefined);
|
|
@@ -120,6 +130,7 @@ const TableHeadCell = props => {
|
|
|
120
130
|
destroyPopupOnHide: true,
|
|
121
131
|
dropdownRender: () => {
|
|
122
132
|
const type = (0, _utils.getTypeFilter)(originalColumn);
|
|
133
|
+
const hideFilterInput = ['empty', 'notempty'].includes(currentFilter.ope);
|
|
123
134
|
|
|
124
135
|
// const operatorValue = (header.column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string
|
|
125
136
|
|
|
@@ -149,9 +160,12 @@ const TableHeadCell = props => {
|
|
|
149
160
|
...prev,
|
|
150
161
|
ope: val
|
|
151
162
|
}));
|
|
163
|
+
if (['empty', 'notempty'].includes(val)) {
|
|
164
|
+
setSelectedKeys([]);
|
|
165
|
+
}
|
|
152
166
|
// header.column.setFilterOperator(val)
|
|
153
167
|
}
|
|
154
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
168
|
+
})), !hideFilterInput && /*#__PURE__*/_react.default.createElement("div", {
|
|
155
169
|
style: {
|
|
156
170
|
marginBottom: 8
|
|
157
171
|
}
|
|
@@ -958,6 +958,12 @@ const shouldInclude = (item, queries) => {
|
|
|
958
958
|
case "endswith":
|
|
959
959
|
condition = itemStr?.endsWith(queryStr);
|
|
960
960
|
break;
|
|
961
|
+
case "empty":
|
|
962
|
+
condition = itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
|
|
963
|
+
break;
|
|
964
|
+
case "notempty":
|
|
965
|
+
condition = !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
|
|
966
|
+
break;
|
|
961
967
|
default:
|
|
962
968
|
console.warn(`Unknown operator: ${operator}`);
|
|
963
969
|
break;
|
|
@@ -132,7 +132,9 @@ const Grid = props => {
|
|
|
132
132
|
};
|
|
133
133
|
});
|
|
134
134
|
if (onFilter) {
|
|
135
|
-
|
|
135
|
+
const convertedFilters = (0, _utils.convertFilters)(merged);
|
|
136
|
+
console.log('[onFilter] src/table-virtuoso/table/Grid.tsx', convertedFilters);
|
|
137
|
+
onFilter?.(convertedFilters);
|
|
136
138
|
} else {
|
|
137
139
|
triggerFilter((0, _utils.convertFilters)(merged));
|
|
138
140
|
const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);
|