venice-ui 3.0.42 → 3.0.43
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.
|
@@ -61,17 +61,26 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
61
61
|
const resolvedTheme = resolvedThemeData.resolvedTheme;
|
|
62
62
|
const { componentsConfig } = resolvedThemeData;
|
|
63
63
|
const filterConfig = componentsConfig.filters;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
64
|
+
console.log('fullElements', fullElements);
|
|
65
|
+
// const normalizeDateValue = useCallback(
|
|
66
|
+
// (rawValue: any): number | undefined => {
|
|
67
|
+
// if (rawValue === undefined || rawValue === null || rawValue === '') {
|
|
68
|
+
// return undefined
|
|
69
|
+
// }
|
|
70
|
+
// const numericValue =
|
|
71
|
+
// typeof rawValue === 'number' ? rawValue : Number(rawValue)
|
|
72
|
+
// if (!Number.isNaN(numericValue)) {
|
|
73
|
+
// return numericValue
|
|
74
|
+
// }
|
|
75
|
+
// const parsed = new Date(rawValue)
|
|
76
|
+
// return Number.isNaN(parsed.getTime()) ? undefined : parsed.getTime()
|
|
77
|
+
// },
|
|
78
|
+
// [],
|
|
79
|
+
// )
|
|
80
|
+
const [source, setSource] = (0, react_1.useState)(fullElements || []);
|
|
81
|
+
(0, react_1.useEffect)(() => {
|
|
82
|
+
setSource(fullElements || []);
|
|
83
|
+
}, [fullElements]);
|
|
75
84
|
const filtersConfig = (0, react_1.useMemo)(() => {
|
|
76
85
|
const uniq = (arr) => Array.from(new Set(arr.filter((v) => v !== undefined && v !== null)));
|
|
77
86
|
if (filters && filters.length) {
|
|
@@ -92,7 +101,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
92
101
|
.map((h) => {
|
|
93
102
|
const type = h.filterType || 'select';
|
|
94
103
|
const key = h.valueSource || h.name;
|
|
95
|
-
const values = (
|
|
104
|
+
const values = (source || [])
|
|
96
105
|
.map((it) => it?.[key])
|
|
97
106
|
.filter((v) => v !== undefined && v !== null);
|
|
98
107
|
if (type === 'select' && h.scope && h.scope.length) {
|
|
@@ -108,12 +117,8 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
108
117
|
const dates = values
|
|
109
118
|
.map((v) => (v ? new Date(v).getTime() : NaN))
|
|
110
119
|
.filter((d) => !Number.isNaN(d));
|
|
111
|
-
const min = dates.length
|
|
112
|
-
|
|
113
|
-
: undefined;
|
|
114
|
-
const max = dates.length
|
|
115
|
-
? Math.max(...dates)
|
|
116
|
-
: undefined;
|
|
120
|
+
const min = dates.length ? Math.min(...dates) : undefined;
|
|
121
|
+
const max = dates.length ? Math.max(...dates) : undefined;
|
|
117
122
|
return {
|
|
118
123
|
label: h.name,
|
|
119
124
|
name: key,
|
|
@@ -147,7 +152,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
147
152
|
collapsible: true,
|
|
148
153
|
};
|
|
149
154
|
});
|
|
150
|
-
}, [filters, headers, elements,
|
|
155
|
+
}, [filters, headers, elements, source]);
|
|
151
156
|
const generateStateObj = (0, react_1.useCallback)(() => {
|
|
152
157
|
const obj = {};
|
|
153
158
|
filtersConfig.forEach((filter) => {
|
|
@@ -166,7 +171,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
166
171
|
};
|
|
167
172
|
});
|
|
168
173
|
return obj;
|
|
169
|
-
}, [filtersConfig,
|
|
174
|
+
}, [filtersConfig, source]);
|
|
170
175
|
const [openFilters, setOpenFilters] = (0, react_1.useState)(false);
|
|
171
176
|
const [activeFilters, setActiveFilters] = (0, react_1.useState)(generateStateObj());
|
|
172
177
|
const [collapsedFilters, setCollapsedFilters] = (0, react_1.useState)({});
|
|
@@ -250,7 +255,6 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
250
255
|
}, []);
|
|
251
256
|
const setRangeFilter = (0, react_1.useCallback)((name, value) => {
|
|
252
257
|
const [filterName, filterParam] = String(name).split('__');
|
|
253
|
-
console.log(filterName, filterParam);
|
|
254
258
|
setActiveFilters((prev) => ({
|
|
255
259
|
...prev,
|
|
256
260
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
@@ -354,13 +358,13 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
354
358
|
const cleared = clearAll();
|
|
355
359
|
setActiveFilters(cleared);
|
|
356
360
|
handleSubmitFilters &&
|
|
357
|
-
handleSubmitFilters((
|
|
361
|
+
handleSubmitFilters((source && source.length ? source : elements) || []);
|
|
358
362
|
}
|
|
359
363
|
}, [
|
|
360
364
|
externalClearSignal,
|
|
361
365
|
clearAll,
|
|
362
366
|
handleSubmitFilters,
|
|
363
|
-
|
|
367
|
+
source,
|
|
364
368
|
elements,
|
|
365
369
|
]);
|
|
366
370
|
const mapListItems = (0, react_1.useCallback)((filterName, allowValues) => {
|
|
@@ -401,25 +405,29 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
401
405
|
case 'range':
|
|
402
406
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
403
407
|
react_1.default.createElement(Filters_styles_1.FilterGrid, null,
|
|
404
|
-
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth:
|
|
405
|
-
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth:
|
|
408
|
+
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: "100%" }),
|
|
409
|
+
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: "100%" }))));
|
|
406
410
|
case 'date':
|
|
407
|
-
const minValue = activeFilters[filter.name]?.min !== ''
|
|
408
|
-
|
|
411
|
+
const minValue = activeFilters[filter.name]?.min !== ''
|
|
412
|
+
? activeFilters[filter.name]?.min
|
|
413
|
+
: activeFilters[filter.name]?.rangeMin;
|
|
414
|
+
const maxValue = activeFilters[filter.name]?.max !== ''
|
|
415
|
+
? activeFilters[filter.name]?.max
|
|
416
|
+
: activeFilters[filter.name]?.rangeMax;
|
|
409
417
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
410
418
|
react_1.default.createElement(Filters_styles_1.FilterGrid, null,
|
|
411
|
-
react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}__min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth:
|
|
412
|
-
react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}__max`, value: maxValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth:
|
|
419
|
+
react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}__min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: "100%", labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }),
|
|
420
|
+
react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}__max`, value: maxValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: "100%", labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }))));
|
|
413
421
|
case 'text':
|
|
414
422
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
415
|
-
react_1.default.createElement(Input_1.Input, { type: "text", name: `${filter.name}__query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth:
|
|
423
|
+
react_1.default.createElement(Input_1.Input, { type: "text", name: `${filter.name}__query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: "100%", width: "100%" })));
|
|
416
424
|
default:
|
|
417
425
|
return null;
|
|
418
426
|
}
|
|
419
427
|
}, [
|
|
420
428
|
activeFilters,
|
|
421
429
|
mapListItems,
|
|
422
|
-
normalizeDateValue,
|
|
430
|
+
// normalizeDateValue,
|
|
423
431
|
setRangeFilter,
|
|
424
432
|
setTextFilter,
|
|
425
433
|
]);
|
|
@@ -25,17 +25,26 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
25
25
|
const resolvedTheme = resolvedThemeData.resolvedTheme;
|
|
26
26
|
const { componentsConfig } = resolvedThemeData;
|
|
27
27
|
const filterConfig = componentsConfig.filters;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
28
|
+
console.log('fullElements', fullElements);
|
|
29
|
+
// const normalizeDateValue = useCallback(
|
|
30
|
+
// (rawValue: any): number | undefined => {
|
|
31
|
+
// if (rawValue === undefined || rawValue === null || rawValue === '') {
|
|
32
|
+
// return undefined
|
|
33
|
+
// }
|
|
34
|
+
// const numericValue =
|
|
35
|
+
// typeof rawValue === 'number' ? rawValue : Number(rawValue)
|
|
36
|
+
// if (!Number.isNaN(numericValue)) {
|
|
37
|
+
// return numericValue
|
|
38
|
+
// }
|
|
39
|
+
// const parsed = new Date(rawValue)
|
|
40
|
+
// return Number.isNaN(parsed.getTime()) ? undefined : parsed.getTime()
|
|
41
|
+
// },
|
|
42
|
+
// [],
|
|
43
|
+
// )
|
|
44
|
+
const [source, setSource] = useState(fullElements || []);
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
setSource(fullElements || []);
|
|
47
|
+
}, [fullElements]);
|
|
39
48
|
const filtersConfig = useMemo(() => {
|
|
40
49
|
const uniq = (arr) => Array.from(new Set(arr.filter((v) => v !== undefined && v !== null)));
|
|
41
50
|
if (filters && filters.length) {
|
|
@@ -56,7 +65,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
56
65
|
.map((h) => {
|
|
57
66
|
const type = h.filterType || 'select';
|
|
58
67
|
const key = h.valueSource || h.name;
|
|
59
|
-
const values = (
|
|
68
|
+
const values = (source || [])
|
|
60
69
|
.map((it) => it?.[key])
|
|
61
70
|
.filter((v) => v !== undefined && v !== null);
|
|
62
71
|
if (type === 'select' && h.scope && h.scope.length) {
|
|
@@ -72,12 +81,8 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
72
81
|
const dates = values
|
|
73
82
|
.map((v) => (v ? new Date(v).getTime() : NaN))
|
|
74
83
|
.filter((d) => !Number.isNaN(d));
|
|
75
|
-
const min = dates.length
|
|
76
|
-
|
|
77
|
-
: undefined;
|
|
78
|
-
const max = dates.length
|
|
79
|
-
? Math.max(...dates)
|
|
80
|
-
: undefined;
|
|
84
|
+
const min = dates.length ? Math.min(...dates) : undefined;
|
|
85
|
+
const max = dates.length ? Math.max(...dates) : undefined;
|
|
81
86
|
return {
|
|
82
87
|
label: h.name,
|
|
83
88
|
name: key,
|
|
@@ -111,7 +116,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
111
116
|
collapsible: true,
|
|
112
117
|
};
|
|
113
118
|
});
|
|
114
|
-
}, [filters, headers, elements,
|
|
119
|
+
}, [filters, headers, elements, source]);
|
|
115
120
|
const generateStateObj = useCallback(() => {
|
|
116
121
|
const obj = {};
|
|
117
122
|
filtersConfig.forEach((filter) => {
|
|
@@ -130,7 +135,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
130
135
|
};
|
|
131
136
|
});
|
|
132
137
|
return obj;
|
|
133
|
-
}, [filtersConfig,
|
|
138
|
+
}, [filtersConfig, source]);
|
|
134
139
|
const [openFilters, setOpenFilters] = useState(false);
|
|
135
140
|
const [activeFilters, setActiveFilters] = useState(generateStateObj());
|
|
136
141
|
const [collapsedFilters, setCollapsedFilters] = useState({});
|
|
@@ -214,7 +219,6 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
214
219
|
}, []);
|
|
215
220
|
const setRangeFilter = useCallback((name, value) => {
|
|
216
221
|
const [filterName, filterParam] = String(name).split('__');
|
|
217
|
-
console.log(filterName, filterParam);
|
|
218
222
|
setActiveFilters((prev) => ({
|
|
219
223
|
...prev,
|
|
220
224
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
@@ -318,13 +322,13 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
318
322
|
const cleared = clearAll();
|
|
319
323
|
setActiveFilters(cleared);
|
|
320
324
|
handleSubmitFilters &&
|
|
321
|
-
handleSubmitFilters((
|
|
325
|
+
handleSubmitFilters((source && source.length ? source : elements) || []);
|
|
322
326
|
}
|
|
323
327
|
}, [
|
|
324
328
|
externalClearSignal,
|
|
325
329
|
clearAll,
|
|
326
330
|
handleSubmitFilters,
|
|
327
|
-
|
|
331
|
+
source,
|
|
328
332
|
elements,
|
|
329
333
|
]);
|
|
330
334
|
const mapListItems = useCallback((filterName, allowValues) => {
|
|
@@ -365,25 +369,29 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
365
369
|
case 'range':
|
|
366
370
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
367
371
|
React.createElement(FilterGrid, null,
|
|
368
|
-
React.createElement(Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth:
|
|
369
|
-
React.createElement(Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth:
|
|
372
|
+
React.createElement(Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: "100%" }),
|
|
373
|
+
React.createElement(Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: "100%" }))));
|
|
370
374
|
case 'date':
|
|
371
|
-
const minValue = activeFilters[filter.name]?.min !== ''
|
|
372
|
-
|
|
375
|
+
const minValue = activeFilters[filter.name]?.min !== ''
|
|
376
|
+
? activeFilters[filter.name]?.min
|
|
377
|
+
: activeFilters[filter.name]?.rangeMin;
|
|
378
|
+
const maxValue = activeFilters[filter.name]?.max !== ''
|
|
379
|
+
? activeFilters[filter.name]?.max
|
|
380
|
+
: activeFilters[filter.name]?.rangeMax;
|
|
373
381
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
374
382
|
React.createElement(FilterGrid, null,
|
|
375
|
-
React.createElement(DatePicker, { name: `${filter.name}__min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth:
|
|
376
|
-
React.createElement(DatePicker, { name: `${filter.name}__max`, value: maxValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth:
|
|
383
|
+
React.createElement(DatePicker, { name: `${filter.name}__min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: "100%", labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }),
|
|
384
|
+
React.createElement(DatePicker, { name: `${filter.name}__max`, value: maxValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: "100%", labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }))));
|
|
377
385
|
case 'text':
|
|
378
386
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
379
|
-
React.createElement(Input, { type: "text", name: `${filter.name}__query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth:
|
|
387
|
+
React.createElement(Input, { type: "text", name: `${filter.name}__query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: "100%", width: "100%" })));
|
|
380
388
|
default:
|
|
381
389
|
return null;
|
|
382
390
|
}
|
|
383
391
|
}, [
|
|
384
392
|
activeFilters,
|
|
385
393
|
mapListItems,
|
|
386
|
-
normalizeDateValue,
|
|
394
|
+
// normalizeDateValue,
|
|
387
395
|
setRangeFilter,
|
|
388
396
|
setTextFilter,
|
|
389
397
|
]);
|