venice-ui 3.0.39 → 3.0.41
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.
|
@@ -92,7 +92,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
92
92
|
.map((h) => {
|
|
93
93
|
const type = h.filterType || 'select';
|
|
94
94
|
const key = h.valueSource || h.name;
|
|
95
|
-
const values = (
|
|
95
|
+
const values = (fullElements || [])
|
|
96
96
|
.map((it) => it?.[key])
|
|
97
97
|
.filter((v) => v !== undefined && v !== null);
|
|
98
98
|
if (type === 'select' && h.scope && h.scope.length) {
|
|
@@ -136,6 +136,9 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
136
136
|
collapsible: true,
|
|
137
137
|
};
|
|
138
138
|
}
|
|
139
|
+
if (type === 'select') {
|
|
140
|
+
console.log('scope', values);
|
|
141
|
+
}
|
|
139
142
|
return {
|
|
140
143
|
label: h.name,
|
|
141
144
|
name: key,
|
|
@@ -164,7 +167,6 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
164
167
|
});
|
|
165
168
|
return obj;
|
|
166
169
|
}, [filtersConfig]);
|
|
167
|
-
console.log(filtersConfig);
|
|
168
170
|
const [openFilters, setOpenFilters] = (0, react_1.useState)(false);
|
|
169
171
|
const [activeFilters, setActiveFilters] = (0, react_1.useState)(generateStateObj());
|
|
170
172
|
const [collapsedFilters, setCollapsedFilters] = (0, react_1.useState)({});
|
|
@@ -247,15 +249,16 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
247
249
|
});
|
|
248
250
|
}, []);
|
|
249
251
|
const setRangeFilter = (0, react_1.useCallback)((name, value) => {
|
|
250
|
-
const [filterName, filterParam] = String(name).split('
|
|
251
|
-
console.log(filterName, filterParam
|
|
252
|
+
const [filterName, filterParam] = String(name).split('__');
|
|
253
|
+
console.log(filterName, filterParam);
|
|
252
254
|
setActiveFilters((prev) => ({
|
|
253
255
|
...prev,
|
|
254
256
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
255
257
|
}));
|
|
256
258
|
}, []);
|
|
259
|
+
console.log('activeFilters', activeFilters);
|
|
257
260
|
const setTextFilter = (0, react_1.useCallback)((name, value) => {
|
|
258
|
-
const filterName = (name || '').split('
|
|
261
|
+
const filterName = (name || '').split('__')[0];
|
|
259
262
|
setActiveFilters((prev) => ({
|
|
260
263
|
...prev,
|
|
261
264
|
[filterName]: {
|
|
@@ -398,18 +401,18 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
398
401
|
case 'range':
|
|
399
402
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
400
403
|
react_1.default.createElement(Filters_styles_1.FilterGrid, null,
|
|
401
|
-
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}
|
|
402
|
-
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}
|
|
404
|
+
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
|
|
405
|
+
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
|
|
403
406
|
case 'date':
|
|
404
407
|
const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
|
|
405
408
|
const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
|
|
406
409
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
407
410
|
react_1.default.createElement(Filters_styles_1.FilterGrid, null,
|
|
408
|
-
react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}
|
|
409
|
-
react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}
|
|
411
|
+
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 }),
|
|
412
|
+
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 }))));
|
|
410
413
|
case 'text':
|
|
411
414
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
412
|
-
react_1.default.createElement(Input_1.Input, { type: "text", name: `${filter.name}
|
|
415
|
+
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%' })));
|
|
413
416
|
default:
|
|
414
417
|
return null;
|
|
415
418
|
}
|
|
@@ -56,7 +56,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
56
56
|
.map((h) => {
|
|
57
57
|
const type = h.filterType || 'select';
|
|
58
58
|
const key = h.valueSource || h.name;
|
|
59
|
-
const values = (
|
|
59
|
+
const values = (fullElements || [])
|
|
60
60
|
.map((it) => it?.[key])
|
|
61
61
|
.filter((v) => v !== undefined && v !== null);
|
|
62
62
|
if (type === 'select' && h.scope && h.scope.length) {
|
|
@@ -100,6 +100,9 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
100
100
|
collapsible: true,
|
|
101
101
|
};
|
|
102
102
|
}
|
|
103
|
+
if (type === 'select') {
|
|
104
|
+
console.log('scope', values);
|
|
105
|
+
}
|
|
103
106
|
return {
|
|
104
107
|
label: h.name,
|
|
105
108
|
name: key,
|
|
@@ -128,7 +131,6 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
128
131
|
});
|
|
129
132
|
return obj;
|
|
130
133
|
}, [filtersConfig]);
|
|
131
|
-
console.log(filtersConfig);
|
|
132
134
|
const [openFilters, setOpenFilters] = useState(false);
|
|
133
135
|
const [activeFilters, setActiveFilters] = useState(generateStateObj());
|
|
134
136
|
const [collapsedFilters, setCollapsedFilters] = useState({});
|
|
@@ -211,15 +213,16 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
211
213
|
});
|
|
212
214
|
}, []);
|
|
213
215
|
const setRangeFilter = useCallback((name, value) => {
|
|
214
|
-
const [filterName, filterParam] = String(name).split('
|
|
215
|
-
console.log(filterName, filterParam
|
|
216
|
+
const [filterName, filterParam] = String(name).split('__');
|
|
217
|
+
console.log(filterName, filterParam);
|
|
216
218
|
setActiveFilters((prev) => ({
|
|
217
219
|
...prev,
|
|
218
220
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
219
221
|
}));
|
|
220
222
|
}, []);
|
|
223
|
+
console.log('activeFilters', activeFilters);
|
|
221
224
|
const setTextFilter = useCallback((name, value) => {
|
|
222
|
-
const filterName = (name || '').split('
|
|
225
|
+
const filterName = (name || '').split('__')[0];
|
|
223
226
|
setActiveFilters((prev) => ({
|
|
224
227
|
...prev,
|
|
225
228
|
[filterName]: {
|
|
@@ -362,18 +365,18 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
362
365
|
case 'range':
|
|
363
366
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
364
367
|
React.createElement(FilterGrid, null,
|
|
365
|
-
React.createElement(Numerical, { type: "number", name: `${filter.name}
|
|
366
|
-
React.createElement(Numerical, { type: "number", name: `${filter.name}
|
|
368
|
+
React.createElement(Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
|
|
369
|
+
React.createElement(Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
|
|
367
370
|
case 'date':
|
|
368
371
|
const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
|
|
369
372
|
const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
|
|
370
373
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
371
374
|
React.createElement(FilterGrid, null,
|
|
372
|
-
React.createElement(DatePicker, { name: `${filter.name}
|
|
373
|
-
React.createElement(DatePicker, { name: `${filter.name}
|
|
375
|
+
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 }),
|
|
376
|
+
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 }))));
|
|
374
377
|
case 'text':
|
|
375
378
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
376
|
-
React.createElement(Input, { type: "text", name: `${filter.name}
|
|
379
|
+
React.createElement(Input, { type: "text", name: `${filter.name}__query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));
|
|
377
380
|
default:
|
|
378
381
|
return null;
|
|
379
382
|
}
|