venice-ui 3.0.38 → 3.0.39
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 +6 -4
- package/dist/esm/components/DatePicker/DatePicker.js +2 -2
- package/dist/esm/components/Filters/Filters.js +6 -4
- 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
|
}
|
|
@@ -164,6 +164,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
164
164
|
});
|
|
165
165
|
return obj;
|
|
166
166
|
}, [filtersConfig]);
|
|
167
|
+
console.log(filtersConfig);
|
|
167
168
|
const [openFilters, setOpenFilters] = (0, react_1.useState)(false);
|
|
168
169
|
const [activeFilters, setActiveFilters] = (0, react_1.useState)(generateStateObj());
|
|
169
170
|
const [collapsedFilters, setCollapsedFilters] = (0, react_1.useState)({});
|
|
@@ -247,6 +248,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
247
248
|
}, []);
|
|
248
249
|
const setRangeFilter = (0, react_1.useCallback)((name, value) => {
|
|
249
250
|
const [filterName, filterParam] = String(name).split('_');
|
|
251
|
+
console.log(filterName, filterParam, value);
|
|
250
252
|
setActiveFilters((prev) => ({
|
|
251
253
|
...prev,
|
|
252
254
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
@@ -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
|
|
@@ -403,8 +405,8 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
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}_min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }),
|
|
407
|
-
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 }))));
|
|
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
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%' })));
|
|
@@ -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
|
}
|
|
@@ -128,6 +128,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
128
128
|
});
|
|
129
129
|
return obj;
|
|
130
130
|
}, [filtersConfig]);
|
|
131
|
+
console.log(filtersConfig);
|
|
131
132
|
const [openFilters, setOpenFilters] = useState(false);
|
|
132
133
|
const [activeFilters, setActiveFilters] = useState(generateStateObj());
|
|
133
134
|
const [collapsedFilters, setCollapsedFilters] = useState({});
|
|
@@ -211,6 +212,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
211
212
|
}, []);
|
|
212
213
|
const setRangeFilter = useCallback((name, value) => {
|
|
213
214
|
const [filterName, filterParam] = String(name).split('_');
|
|
215
|
+
console.log(filterName, filterParam, value);
|
|
214
216
|
setActiveFilters((prev) => ({
|
|
215
217
|
...prev,
|
|
216
218
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
@@ -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
|
|
@@ -367,8 +369,8 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
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}_min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }),
|
|
371
|
-
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 }))));
|
|
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
376
|
React.createElement(Input, { type: "text", name: `${filter.name}_query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));
|