venice-ui 3.0.39 → 3.0.40
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.
|
@@ -164,7 +164,6 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
164
164
|
});
|
|
165
165
|
return obj;
|
|
166
166
|
}, [filtersConfig]);
|
|
167
|
-
console.log(filtersConfig);
|
|
168
167
|
const [openFilters, setOpenFilters] = (0, react_1.useState)(false);
|
|
169
168
|
const [activeFilters, setActiveFilters] = (0, react_1.useState)(generateStateObj());
|
|
170
169
|
const [collapsedFilters, setCollapsedFilters] = (0, react_1.useState)({});
|
|
@@ -247,15 +246,16 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
247
246
|
});
|
|
248
247
|
}, []);
|
|
249
248
|
const setRangeFilter = (0, react_1.useCallback)((name, value) => {
|
|
250
|
-
const [filterName, filterParam] = String(name).split('
|
|
251
|
-
console.log(filterName, filterParam
|
|
249
|
+
const [filterName, filterParam] = String(name).split('__');
|
|
250
|
+
console.log(filterName, filterParam);
|
|
252
251
|
setActiveFilters((prev) => ({
|
|
253
252
|
...prev,
|
|
254
253
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
255
254
|
}));
|
|
256
255
|
}, []);
|
|
256
|
+
console.log('activeFilters', activeFilters);
|
|
257
257
|
const setTextFilter = (0, react_1.useCallback)((name, value) => {
|
|
258
|
-
const filterName = (name || '').split('
|
|
258
|
+
const filterName = (name || '').split('__')[0];
|
|
259
259
|
setActiveFilters((prev) => ({
|
|
260
260
|
...prev,
|
|
261
261
|
[filterName]: {
|
|
@@ -398,18 +398,18 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
398
398
|
case 'range':
|
|
399
399
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
400
400
|
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}
|
|
401
|
+
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
|
|
402
|
+
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
|
|
403
403
|
case 'date':
|
|
404
404
|
const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
|
|
405
405
|
const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
|
|
406
406
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
407
407
|
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}
|
|
408
|
+
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 }),
|
|
409
|
+
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
410
|
case 'text':
|
|
411
411
|
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}
|
|
412
|
+
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
413
|
default:
|
|
414
414
|
return null;
|
|
415
415
|
}
|
|
@@ -128,7 +128,6 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
128
128
|
});
|
|
129
129
|
return obj;
|
|
130
130
|
}, [filtersConfig]);
|
|
131
|
-
console.log(filtersConfig);
|
|
132
131
|
const [openFilters, setOpenFilters] = useState(false);
|
|
133
132
|
const [activeFilters, setActiveFilters] = useState(generateStateObj());
|
|
134
133
|
const [collapsedFilters, setCollapsedFilters] = useState({});
|
|
@@ -211,15 +210,16 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
211
210
|
});
|
|
212
211
|
}, []);
|
|
213
212
|
const setRangeFilter = useCallback((name, value) => {
|
|
214
|
-
const [filterName, filterParam] = String(name).split('
|
|
215
|
-
console.log(filterName, filterParam
|
|
213
|
+
const [filterName, filterParam] = String(name).split('__');
|
|
214
|
+
console.log(filterName, filterParam);
|
|
216
215
|
setActiveFilters((prev) => ({
|
|
217
216
|
...prev,
|
|
218
217
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
219
218
|
}));
|
|
220
219
|
}, []);
|
|
220
|
+
console.log('activeFilters', activeFilters);
|
|
221
221
|
const setTextFilter = useCallback((name, value) => {
|
|
222
|
-
const filterName = (name || '').split('
|
|
222
|
+
const filterName = (name || '').split('__')[0];
|
|
223
223
|
setActiveFilters((prev) => ({
|
|
224
224
|
...prev,
|
|
225
225
|
[filterName]: {
|
|
@@ -362,18 +362,18 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
362
362
|
case 'range':
|
|
363
363
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
364
364
|
React.createElement(FilterGrid, null,
|
|
365
|
-
React.createElement(Numerical, { type: "number", name: `${filter.name}
|
|
366
|
-
React.createElement(Numerical, { type: "number", name: `${filter.name}
|
|
365
|
+
React.createElement(Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
|
|
366
|
+
React.createElement(Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
|
|
367
367
|
case 'date':
|
|
368
368
|
const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
|
|
369
369
|
const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
|
|
370
370
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
371
371
|
React.createElement(FilterGrid, null,
|
|
372
|
-
React.createElement(DatePicker, { name: `${filter.name}
|
|
373
|
-
React.createElement(DatePicker, { name: `${filter.name}
|
|
372
|
+
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 }),
|
|
373
|
+
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
374
|
case 'text':
|
|
375
375
|
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}
|
|
376
|
+
React.createElement(Input, { type: "text", name: `${filter.name}__query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));
|
|
377
377
|
default:
|
|
378
378
|
return null;
|
|
379
379
|
}
|