venice-ui 3.0.38 → 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.
- package/dist/cjs/components/DatePicker/DatePicker.js +2 -2
- package/dist/cjs/components/Filters/Filters.js +11 -9
- package/dist/esm/components/DatePicker/DatePicker.js +2 -2
- package/dist/esm/components/Filters/Filters.js +11 -9
- package/dist/types/components/DatePicker/DatePicker.d.ts +1 -0
- package/package.json +1 -1
|
@@ -48,7 +48,7 @@ const DatePicker = ({ name, value, label, labelPosition = 'top', theme, themeVar
|
|
|
48
48
|
months: config_2.wordbook.calendar.months,
|
|
49
49
|
weekdaysShort: config_2.wordbook.calendar.weekdaysShort,
|
|
50
50
|
firstDayOfWeek: 1,
|
|
51
|
-
}, placeholder = config_2.wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth }) => {
|
|
51
|
+
}, placeholder = config_2.wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth, withoutClearIcon = false }) => {
|
|
52
52
|
const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
|
|
53
53
|
theme,
|
|
54
54
|
themeVariant,
|
|
@@ -89,7 +89,7 @@ const DatePicker = ({ name, value, label, labelPosition = 'top', theme, themeVar
|
|
|
89
89
|
react_1.default.createElement(DatePicker_styles_1.DatePickerValue, { theme: resolvedTheme, config: datePickerConfig, size: size },
|
|
90
90
|
value ? (0, date_fns_1.format)(new Date(value), 'dd-MM-yyyy') : placeholder,
|
|
91
91
|
react_1.default.createElement(Aligment_1.Aligment, { width: "auto", align: "flex-end", gap: datePickerConfig.size.common.iconGap },
|
|
92
|
-
value && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
|
|
92
|
+
(value && !withoutClearIcon) && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
|
|
93
93
|
if (e?.stopPropagation) {
|
|
94
94
|
e.stopPropagation();
|
|
95
95
|
}
|
|
@@ -246,14 +246,16 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
246
246
|
});
|
|
247
247
|
}, []);
|
|
248
248
|
const setRangeFilter = (0, react_1.useCallback)((name, value) => {
|
|
249
|
-
const [filterName, filterParam] = String(name).split('
|
|
249
|
+
const [filterName, filterParam] = String(name).split('__');
|
|
250
|
+
console.log(filterName, filterParam);
|
|
250
251
|
setActiveFilters((prev) => ({
|
|
251
252
|
...prev,
|
|
252
253
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
253
254
|
}));
|
|
254
255
|
}, []);
|
|
256
|
+
console.log('activeFilters', activeFilters);
|
|
255
257
|
const setTextFilter = (0, react_1.useCallback)((name, value) => {
|
|
256
|
-
const filterName = (name || '').split('
|
|
258
|
+
const filterName = (name || '').split('__')[0];
|
|
257
259
|
setActiveFilters((prev) => ({
|
|
258
260
|
...prev,
|
|
259
261
|
[filterName]: {
|
|
@@ -293,8 +295,8 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
293
295
|
else if (f.type === 'date') {
|
|
294
296
|
if (!isFilterActive(f))
|
|
295
297
|
return;
|
|
296
|
-
const fromTsRaw =
|
|
297
|
-
const toTsRaw =
|
|
298
|
+
const fromTsRaw = f.min;
|
|
299
|
+
const toTsRaw = f.max;
|
|
298
300
|
const fromDate = fromTsRaw !== undefined ? new Date(fromTsRaw) : null;
|
|
299
301
|
const toDate = toTsRaw !== undefined ? new Date(toTsRaw) : null;
|
|
300
302
|
const fromTs = fromDate
|
|
@@ -396,18 +398,18 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
396
398
|
case 'range':
|
|
397
399
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
398
400
|
react_1.default.createElement(Filters_styles_1.FilterGrid, null,
|
|
399
|
-
react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}
|
|
400
|
-
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%' }))));
|
|
401
403
|
case 'date':
|
|
402
404
|
const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
|
|
403
405
|
const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
|
|
404
406
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
405
407
|
react_1.default.createElement(Filters_styles_1.FilterGrid, null,
|
|
406
|
-
react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}
|
|
407
|
-
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 }))));
|
|
408
410
|
case 'text':
|
|
409
411
|
return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
410
|
-
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%' })));
|
|
411
413
|
default:
|
|
412
414
|
return null;
|
|
413
415
|
}
|
|
@@ -12,7 +12,7 @@ export const DatePicker = ({ name, value, label, labelPosition = 'top', theme, t
|
|
|
12
12
|
months: wordbook.calendar.months,
|
|
13
13
|
weekdaysShort: wordbook.calendar.weekdaysShort,
|
|
14
14
|
firstDayOfWeek: 1,
|
|
15
|
-
}, placeholder = wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth }) => {
|
|
15
|
+
}, placeholder = wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth, withoutClearIcon = false }) => {
|
|
16
16
|
const resolvedThemeData = resolveThemeWithComponentsConfig({
|
|
17
17
|
theme,
|
|
18
18
|
themeVariant,
|
|
@@ -53,7 +53,7 @@ export const DatePicker = ({ name, value, label, labelPosition = 'top', theme, t
|
|
|
53
53
|
React.createElement(DatePickerValue, { theme: resolvedTheme, config: datePickerConfig, size: size },
|
|
54
54
|
value ? format(new Date(value), 'dd-MM-yyyy') : placeholder,
|
|
55
55
|
React.createElement(Aligment, { width: "auto", align: "flex-end", gap: datePickerConfig.size.common.iconGap },
|
|
56
|
-
value && !readOnly && (React.createElement(Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
|
|
56
|
+
(value && !withoutClearIcon) && !readOnly && (React.createElement(Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
|
|
57
57
|
if (e?.stopPropagation) {
|
|
58
58
|
e.stopPropagation();
|
|
59
59
|
}
|
|
@@ -210,14 +210,16 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
210
210
|
});
|
|
211
211
|
}, []);
|
|
212
212
|
const setRangeFilter = useCallback((name, value) => {
|
|
213
|
-
const [filterName, filterParam] = String(name).split('
|
|
213
|
+
const [filterName, filterParam] = String(name).split('__');
|
|
214
|
+
console.log(filterName, filterParam);
|
|
214
215
|
setActiveFilters((prev) => ({
|
|
215
216
|
...prev,
|
|
216
217
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
217
218
|
}));
|
|
218
219
|
}, []);
|
|
220
|
+
console.log('activeFilters', activeFilters);
|
|
219
221
|
const setTextFilter = useCallback((name, value) => {
|
|
220
|
-
const filterName = (name || '').split('
|
|
222
|
+
const filterName = (name || '').split('__')[0];
|
|
221
223
|
setActiveFilters((prev) => ({
|
|
222
224
|
...prev,
|
|
223
225
|
[filterName]: {
|
|
@@ -257,8 +259,8 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
257
259
|
else if (f.type === 'date') {
|
|
258
260
|
if (!isFilterActive(f))
|
|
259
261
|
return;
|
|
260
|
-
const fromTsRaw =
|
|
261
|
-
const toTsRaw =
|
|
262
|
+
const fromTsRaw = f.min;
|
|
263
|
+
const toTsRaw = f.max;
|
|
262
264
|
const fromDate = fromTsRaw !== undefined ? new Date(fromTsRaw) : null;
|
|
263
265
|
const toDate = toTsRaw !== undefined ? new Date(toTsRaw) : null;
|
|
264
266
|
const fromTs = fromDate
|
|
@@ -360,18 +362,18 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
360
362
|
case 'range':
|
|
361
363
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
362
364
|
React.createElement(FilterGrid, null,
|
|
363
|
-
React.createElement(Numerical, { type: "number", name: `${filter.name}
|
|
364
|
-
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%' }))));
|
|
365
367
|
case 'date':
|
|
366
368
|
const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
|
|
367
369
|
const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
|
|
368
370
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
369
371
|
React.createElement(FilterGrid, null,
|
|
370
|
-
React.createElement(DatePicker, { name: `${filter.name}
|
|
371
|
-
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 }))));
|
|
372
374
|
case 'text':
|
|
373
375
|
return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
|
|
374
|
-
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%' })));
|
|
375
377
|
default:
|
|
376
378
|
return null;
|
|
377
379
|
}
|