venice-ui 3.0.36 → 3.0.38

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.
Files changed (6) hide show
  1. package/dist/cjs/components/Filters/Filters.js +13 -39
  2. package/dist/esm/components/Filters/Filters.js +13 -39
  3. package/dist/types/components/Filters/Filters.d.ts +3 -2
  4. package/dist/types/components/Table/Table.d.ts +2 -1
  5. package/dist/types/types/types.d.ts +1 -0
  6. package/package.json +1 -1
package/dist/cjs/components/Filters/Filters.js CHANGED
@@ -90,27 +90,12 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
90
90
  return headers
91
91
  .filter((h) => !h.action)
92
92
  .map((h) => {
93
+ const type = h.filterType || 'select';
93
94
  const key = h.valueSource || h.name;
94
95
  const values = (elements || [])
95
96
  .map((it) => it?.[key])
96
97
  .filter((v) => v !== undefined && v !== null);
97
- const nameLower = (h.name || '').toString().toLowerCase();
98
- if (nameLower === 'age' || nameLower.includes('age')) {
99
- const nums = values
100
- .map((v) => Number(v))
101
- .filter((n) => !Number.isNaN(n));
102
- const min = nums.length ? Math.min(...nums) : 0;
103
- const max = nums.length ? Math.max(...nums) : 0;
104
- return {
105
- label: h.name,
106
- name: key,
107
- type: 'range',
108
- min,
109
- max,
110
- collapsible: true,
111
- };
112
- }
113
- if (h.scope && h.scope.length) {
98
+ if (type === 'select' && h.scope && h.scope.length) {
114
99
  return {
115
100
  label: h.name,
116
101
  name: key,
@@ -119,26 +104,26 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
119
104
  collapsible: true,
120
105
  };
121
106
  }
122
- if (h.date) {
107
+ if (type === 'date') {
123
108
  const dates = values
124
109
  .map((v) => (v ? new Date(v).getTime() : NaN))
125
110
  .filter((d) => !Number.isNaN(d));
126
111
  const min = dates.length
127
- ? new Date(Math.min(...dates)).toISOString()
112
+ ? Math.min(...dates)
128
113
  : undefined;
129
114
  const max = dates.length
130
- ? new Date(Math.max(...dates)).toISOString()
115
+ ? Math.max(...dates)
131
116
  : undefined;
132
117
  return {
133
118
  label: h.name,
134
119
  name: key,
135
120
  type: 'date',
136
- min,
137
- max,
121
+ min: min,
122
+ max: max,
138
123
  collapsible: true,
139
124
  };
140
125
  }
141
- if (h.isCount) {
126
+ if (type === 'range') {
142
127
  const nums = values
143
128
  .map((v) => Number(v))
144
129
  .filter((n) => !Number.isNaN(n));
@@ -151,19 +136,6 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
151
136
  collapsible: true,
152
137
  };
153
138
  }
154
- const numericValues = values
155
- .map((v) => Number(v))
156
- .filter((n) => !Number.isNaN(n));
157
- if (numericValues.length === values.length && values.length > 0) {
158
- return {
159
- label: h.name,
160
- name: key,
161
- type: 'range',
162
- min: Math.min(...numericValues),
163
- max: Math.max(...numericValues),
164
- collapsible: true,
165
- };
166
- }
167
139
  return {
168
140
  label: h.name,
169
141
  name: key,
@@ -172,7 +144,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
172
144
  collapsible: true,
173
145
  };
174
146
  });
175
- }, [filters, headers, elements]);
147
+ }, [filters, headers, elements, fullElements]);
176
148
  const generateStateObj = (0, react_1.useCallback)(() => {
177
149
  const obj = {};
178
150
  filtersConfig.forEach((filter) => {
@@ -427,10 +399,12 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
427
399
  react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
428
400
  react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
429
401
  case 'date':
402
+ const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
403
+ const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
430
404
  return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
431
405
  react_1.default.createElement(Filters_styles_1.FilterGrid, null,
432
- react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }),
433
- react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }))));
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 }))));
434
408
  case 'text':
435
409
  return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
436
410
  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%' })));
package/dist/esm/components/Filters/Filters.js CHANGED
@@ -54,27 +54,12 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
54
54
  return headers
55
55
  .filter((h) => !h.action)
56
56
  .map((h) => {
57
+ const type = h.filterType || 'select';
57
58
  const key = h.valueSource || h.name;
58
59
  const values = (elements || [])
59
60
  .map((it) => it?.[key])
60
61
  .filter((v) => v !== undefined && v !== null);
61
- const nameLower = (h.name || '').toString().toLowerCase();
62
- if (nameLower === 'age' || nameLower.includes('age')) {
63
- const nums = values
64
- .map((v) => Number(v))
65
- .filter((n) => !Number.isNaN(n));
66
- const min = nums.length ? Math.min(...nums) : 0;
67
- const max = nums.length ? Math.max(...nums) : 0;
68
- return {
69
- label: h.name,
70
- name: key,
71
- type: 'range',
72
- min,
73
- max,
74
- collapsible: true,
75
- };
76
- }
77
- if (h.scope && h.scope.length) {
62
+ if (type === 'select' && h.scope && h.scope.length) {
78
63
  return {
79
64
  label: h.name,
80
65
  name: key,
@@ -83,26 +68,26 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
83
68
  collapsible: true,
84
69
  };
85
70
  }
86
- if (h.date) {
71
+ if (type === 'date') {
87
72
  const dates = values
88
73
  .map((v) => (v ? new Date(v).getTime() : NaN))
89
74
  .filter((d) => !Number.isNaN(d));
90
75
  const min = dates.length
91
- ? new Date(Math.min(...dates)).toISOString()
76
+ ? Math.min(...dates)
92
77
  : undefined;
93
78
  const max = dates.length
94
- ? new Date(Math.max(...dates)).toISOString()
79
+ ? Math.max(...dates)
95
80
  : undefined;
96
81
  return {
97
82
  label: h.name,
98
83
  name: key,
99
84
  type: 'date',
100
- min,
101
- max,
85
+ min: min,
86
+ max: max,
102
87
  collapsible: true,
103
88
  };
104
89
  }
105
- if (h.isCount) {
90
+ if (type === 'range') {
106
91
  const nums = values
107
92
  .map((v) => Number(v))
108
93
  .filter((n) => !Number.isNaN(n));
@@ -115,19 +100,6 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
115
100
  collapsible: true,
116
101
  };
117
102
  }
118
- const numericValues = values
119
- .map((v) => Number(v))
120
- .filter((n) => !Number.isNaN(n));
121
- if (numericValues.length === values.length && values.length > 0) {
122
- return {
123
- label: h.name,
124
- name: key,
125
- type: 'range',
126
- min: Math.min(...numericValues),
127
- max: Math.max(...numericValues),
128
- collapsible: true,
129
- };
130
- }
131
103
  return {
132
104
  label: h.name,
133
105
  name: key,
@@ -136,7 +108,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
136
108
  collapsible: true,
137
109
  };
138
110
  });
139
- }, [filters, headers, elements]);
111
+ }, [filters, headers, elements, fullElements]);
140
112
  const generateStateObj = useCallback(() => {
141
113
  const obj = {};
142
114
  filtersConfig.forEach((filter) => {
@@ -391,10 +363,12 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
391
363
  React.createElement(Numerical, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
392
364
  React.createElement(Numerical, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
393
365
  case 'date':
366
+ const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
367
+ const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
394
368
  return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
395
369
  React.createElement(FilterGrid, null,
396
- React.createElement(DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }),
397
- React.createElement(DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }))));
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 }))));
398
372
  case 'text':
399
373
  return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
400
374
  React.createElement(Input, { type: "text", name: `${filter.name}_query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));
package/dist/types/components/Filters/Filters.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FC } from 'react';
2
2
  import { AppTheme, ThemeName } from '../../config';
3
- import { ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
3
+ import { FilterType, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
4
4
  interface IHeader {
5
5
  name: string;
6
6
  valueSource?: string;
@@ -11,6 +11,7 @@ interface IHeader {
11
11
  value?: string;
12
12
  label?: string;
13
13
  }>;
14
+ filterType?: FilterType;
14
15
  }
15
16
  export interface IApplyFilterResults {
16
17
  name: string;
@@ -31,7 +32,7 @@ export interface IFilterProps {
31
32
  }>;
32
33
  label: string;
33
34
  name: string;
34
- type: 'select' | 'range' | string;
35
+ type: 'select' | 'range' | 'date' | 'text';
35
36
  allowValues?: string[] | number[];
36
37
  min?: number;
37
38
  max?: number;
package/dist/types/components/Table/Table.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { AppTheme, ThemeName } from '../../config';
2
2
  import { FC } from 'react';
3
- import { IAction, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
3
+ import { FilterType, IAction, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
4
4
  interface ITableProps {
5
5
  theme?: AppTheme;
6
6
  themeVariant?: ThemeName;
@@ -33,6 +33,7 @@ export interface ITableHeaderProps {
33
33
  isCount?: boolean;
34
34
  scope?: ITableScopeProps[];
35
35
  size?: InputSize;
36
+ filterType?: FilterType;
36
37
  }
37
38
  export interface ITableSortProps {
38
39
  name: string;
package/dist/types/types/types.d.ts CHANGED
@@ -8,3 +8,4 @@ export type TIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl2' | 'xl3' | 'xl4'
8
8
  export type THelperMode = 'default' | 'error' | 'success';
9
9
  export type AdditionalType = 'button' | 'toggle';
10
10
  export type TagType = 'default' | 'success' | 'warning' | 'error';
11
+ export type FilterType = 'text' | 'number' | 'date' | 'select' | 'range';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "3.0.36",
3
+ "version": "3.0.38",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",