venice-ui 3.0.42 → 3.0.44

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.
@@ -61,17 +61,32 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
61
61
  const resolvedTheme = resolvedThemeData.resolvedTheme;
62
62
  const { componentsConfig } = resolvedThemeData;
63
63
  const filterConfig = componentsConfig.filters;
64
- const normalizeDateValue = (0, react_1.useCallback)((rawValue) => {
65
- if (rawValue === undefined || rawValue === null || rawValue === '') {
66
- return undefined;
67
- }
68
- const numericValue = typeof rawValue === 'number' ? rawValue : Number(rawValue);
69
- if (!Number.isNaN(numericValue)) {
70
- return numericValue;
71
- }
72
- const parsed = new Date(rawValue);
73
- return Number.isNaN(parsed.getTime()) ? undefined : parsed.getTime();
74
- }, []);
64
+ console.log('--------');
65
+ console.log('filter fullElements', fullElements);
66
+ // const normalizeDateValue = useCallback(
67
+ // (rawValue: any): number | undefined => {
68
+ // if (rawValue === undefined || rawValue === null || rawValue === '') {
69
+ // return undefined
70
+ // }
71
+ // const numericValue =
72
+ // typeof rawValue === 'number' ? rawValue : Number(rawValue)
73
+ // if (!Number.isNaN(numericValue)) {
74
+ // return numericValue
75
+ // }
76
+ // const parsed = new Date(rawValue)
77
+ // return Number.isNaN(parsed.getTime()) ? undefined : parsed.getTime()
78
+ // },
79
+ // [],
80
+ // )
81
+ const [source, _setSource] = (0, react_1.useState)(fullElements || []);
82
+ const sourceRef = (0, react_1.useRef)(source);
83
+ const setSource = (data) => {
84
+ sourceRef.current = data;
85
+ _setSource(data);
86
+ };
87
+ (0, react_1.useEffect)(() => {
88
+ setSource(fullElements || []);
89
+ }, [fullElements]);
75
90
  const filtersConfig = (0, react_1.useMemo)(() => {
76
91
  const uniq = (arr) => Array.from(new Set(arr.filter((v) => v !== undefined && v !== null)));
77
92
  if (filters && filters.length) {
@@ -92,7 +107,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
92
107
  .map((h) => {
93
108
  const type = h.filterType || 'select';
94
109
  const key = h.valueSource || h.name;
95
- const values = (fullElements || [])
110
+ const values = (source || [])
96
111
  .map((it) => it?.[key])
97
112
  .filter((v) => v !== undefined && v !== null);
98
113
  if (type === 'select' && h.scope && h.scope.length) {
@@ -108,12 +123,8 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
108
123
  const dates = values
109
124
  .map((v) => (v ? new Date(v).getTime() : NaN))
110
125
  .filter((d) => !Number.isNaN(d));
111
- const min = dates.length
112
- ? Math.min(...dates)
113
- : undefined;
114
- const max = dates.length
115
- ? Math.max(...dates)
116
- : undefined;
126
+ const min = dates.length ? Math.min(...dates) : undefined;
127
+ const max = dates.length ? Math.max(...dates) : undefined;
117
128
  return {
118
129
  label: h.name,
119
130
  name: key,
@@ -136,7 +147,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
136
147
  collapsible: true,
137
148
  };
138
149
  }
139
- if (type === 'select') {
150
+ if (type === 'select' && h.name === 'joint_name') {
140
151
  console.log('scope', values);
141
152
  }
142
153
  return {
@@ -147,7 +158,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
147
158
  collapsible: true,
148
159
  };
149
160
  });
150
- }, [filters, headers, elements, fullElements]);
161
+ }, [filters, headers, elements, source]);
151
162
  const generateStateObj = (0, react_1.useCallback)(() => {
152
163
  const obj = {};
153
164
  filtersConfig.forEach((filter) => {
@@ -166,7 +177,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
166
177
  };
167
178
  });
168
179
  return obj;
169
- }, [filtersConfig, fullElements]);
180
+ }, [filtersConfig, source]);
170
181
  const [openFilters, setOpenFilters] = (0, react_1.useState)(false);
171
182
  const [activeFilters, setActiveFilters] = (0, react_1.useState)(generateStateObj());
172
183
  const [collapsedFilters, setCollapsedFilters] = (0, react_1.useState)({});
@@ -250,7 +261,6 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
250
261
  }, []);
251
262
  const setRangeFilter = (0, react_1.useCallback)((name, value) => {
252
263
  const [filterName, filterParam] = String(name).split('__');
253
- console.log(filterName, filterParam);
254
264
  setActiveFilters((prev) => ({
255
265
  ...prev,
256
266
  [filterName]: { ...prev[filterName], [filterParam]: value },
@@ -354,15 +364,9 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
354
364
  const cleared = clearAll();
355
365
  setActiveFilters(cleared);
356
366
  handleSubmitFilters &&
357
- handleSubmitFilters((fullElements && fullElements.length ? fullElements : elements) || []);
367
+ handleSubmitFilters((source && source.length ? source : elements) || []);
358
368
  }
359
- }, [
360
- externalClearSignal,
361
- clearAll,
362
- handleSubmitFilters,
363
- fullElements,
364
- elements,
365
- ]);
369
+ }, [externalClearSignal, clearAll, handleSubmitFilters, source, elements]);
366
370
  const mapListItems = (0, react_1.useCallback)((filterName, allowValues) => {
367
371
  const sel = (activeFilters[filterName]?.value || []).map(String);
368
372
  return (allowValues || []).map((v) => ({
@@ -401,25 +405,29 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
401
405
  case 'range':
402
406
  return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
403
407
  react_1.default.createElement(Filters_styles_1.FilterGrid, null,
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%' }))));
408
+ react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: "100%" }),
409
+ react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: "100%" }))));
406
410
  case 'date':
407
- const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
408
- const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
411
+ const minValue = activeFilters[filter.name]?.min !== ''
412
+ ? activeFilters[filter.name]?.min
413
+ : activeFilters[filter.name]?.rangeMin;
414
+ const maxValue = activeFilters[filter.name]?.max !== ''
415
+ ? activeFilters[filter.name]?.max
416
+ : activeFilters[filter.name]?.rangeMax;
409
417
  return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
410
418
  react_1.default.createElement(Filters_styles_1.FilterGrid, null,
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 }))));
419
+ 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 }),
420
+ 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 }))));
413
421
  case 'text':
414
422
  return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
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%' })));
423
+ 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%" })));
416
424
  default:
417
425
  return null;
418
426
  }
419
427
  }, [
420
428
  activeFilters,
421
429
  mapListItems,
422
- normalizeDateValue,
430
+ // normalizeDateValue,
423
431
  setRangeFilter,
424
432
  setTextFilter,
425
433
  ]);
@@ -48,6 +48,7 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
48
48
  name: '',
49
49
  order: 'none',
50
50
  }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
51
+ console.log('=====================');
51
52
  const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
52
53
  theme,
53
54
  themeVariant,
@@ -57,6 +58,7 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
57
58
  const tableConfig = componentsConfig.table;
58
59
  const initialElementsRef = (0, react_1.useRef)(null);
59
60
  (0, react_1.useEffect)(() => {
61
+ console.log('zmiana eleemnts detect', elements);
60
62
  if (!initialElementsRef.current &&
61
63
  Array.isArray(elements) &&
62
64
  elements.length > 0) {
@@ -141,6 +143,8 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
141
143
  setCurrentPage(1);
142
144
  setNoResultsMessage(null);
143
145
  }, [elements, setCurrentPage, setNoResultsMessage]);
146
+ console.log('table Elements', elements);
147
+ console.log('initialElementsRef', initialElementsRef.current);
144
148
  const tableElements = (0, react_1.useMemo)(() => {
145
149
  if (pagination) {
146
150
  return paginatedElements;
@@ -25,17 +25,32 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
25
25
  const resolvedTheme = resolvedThemeData.resolvedTheme;
26
26
  const { componentsConfig } = resolvedThemeData;
27
27
  const filterConfig = componentsConfig.filters;
28
- const normalizeDateValue = useCallback((rawValue) => {
29
- if (rawValue === undefined || rawValue === null || rawValue === '') {
30
- return undefined;
31
- }
32
- const numericValue = typeof rawValue === 'number' ? rawValue : Number(rawValue);
33
- if (!Number.isNaN(numericValue)) {
34
- return numericValue;
35
- }
36
- const parsed = new Date(rawValue);
37
- return Number.isNaN(parsed.getTime()) ? undefined : parsed.getTime();
38
- }, []);
28
+ console.log('--------');
29
+ console.log('filter fullElements', fullElements);
30
+ // const normalizeDateValue = useCallback(
31
+ // (rawValue: any): number | undefined => {
32
+ // if (rawValue === undefined || rawValue === null || rawValue === '') {
33
+ // return undefined
34
+ // }
35
+ // const numericValue =
36
+ // typeof rawValue === 'number' ? rawValue : Number(rawValue)
37
+ // if (!Number.isNaN(numericValue)) {
38
+ // return numericValue
39
+ // }
40
+ // const parsed = new Date(rawValue)
41
+ // return Number.isNaN(parsed.getTime()) ? undefined : parsed.getTime()
42
+ // },
43
+ // [],
44
+ // )
45
+ const [source, _setSource] = useState(fullElements || []);
46
+ const sourceRef = useRef(source);
47
+ const setSource = (data) => {
48
+ sourceRef.current = data;
49
+ _setSource(data);
50
+ };
51
+ useEffect(() => {
52
+ setSource(fullElements || []);
53
+ }, [fullElements]);
39
54
  const filtersConfig = useMemo(() => {
40
55
  const uniq = (arr) => Array.from(new Set(arr.filter((v) => v !== undefined && v !== null)));
41
56
  if (filters && filters.length) {
@@ -56,7 +71,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
56
71
  .map((h) => {
57
72
  const type = h.filterType || 'select';
58
73
  const key = h.valueSource || h.name;
59
- const values = (fullElements || [])
74
+ const values = (source || [])
60
75
  .map((it) => it?.[key])
61
76
  .filter((v) => v !== undefined && v !== null);
62
77
  if (type === 'select' && h.scope && h.scope.length) {
@@ -72,12 +87,8 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
72
87
  const dates = values
73
88
  .map((v) => (v ? new Date(v).getTime() : NaN))
74
89
  .filter((d) => !Number.isNaN(d));
75
- const min = dates.length
76
- ? Math.min(...dates)
77
- : undefined;
78
- const max = dates.length
79
- ? Math.max(...dates)
80
- : undefined;
90
+ const min = dates.length ? Math.min(...dates) : undefined;
91
+ const max = dates.length ? Math.max(...dates) : undefined;
81
92
  return {
82
93
  label: h.name,
83
94
  name: key,
@@ -100,7 +111,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
100
111
  collapsible: true,
101
112
  };
102
113
  }
103
- if (type === 'select') {
114
+ if (type === 'select' && h.name === 'joint_name') {
104
115
  console.log('scope', values);
105
116
  }
106
117
  return {
@@ -111,7 +122,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
111
122
  collapsible: true,
112
123
  };
113
124
  });
114
- }, [filters, headers, elements, fullElements]);
125
+ }, [filters, headers, elements, source]);
115
126
  const generateStateObj = useCallback(() => {
116
127
  const obj = {};
117
128
  filtersConfig.forEach((filter) => {
@@ -130,7 +141,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
130
141
  };
131
142
  });
132
143
  return obj;
133
- }, [filtersConfig, fullElements]);
144
+ }, [filtersConfig, source]);
134
145
  const [openFilters, setOpenFilters] = useState(false);
135
146
  const [activeFilters, setActiveFilters] = useState(generateStateObj());
136
147
  const [collapsedFilters, setCollapsedFilters] = useState({});
@@ -214,7 +225,6 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
214
225
  }, []);
215
226
  const setRangeFilter = useCallback((name, value) => {
216
227
  const [filterName, filterParam] = String(name).split('__');
217
- console.log(filterName, filterParam);
218
228
  setActiveFilters((prev) => ({
219
229
  ...prev,
220
230
  [filterName]: { ...prev[filterName], [filterParam]: value },
@@ -318,15 +328,9 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
318
328
  const cleared = clearAll();
319
329
  setActiveFilters(cleared);
320
330
  handleSubmitFilters &&
321
- handleSubmitFilters((fullElements && fullElements.length ? fullElements : elements) || []);
331
+ handleSubmitFilters((source && source.length ? source : elements) || []);
322
332
  }
323
- }, [
324
- externalClearSignal,
325
- clearAll,
326
- handleSubmitFilters,
327
- fullElements,
328
- elements,
329
- ]);
333
+ }, [externalClearSignal, clearAll, handleSubmitFilters, source, elements]);
330
334
  const mapListItems = useCallback((filterName, allowValues) => {
331
335
  const sel = (activeFilters[filterName]?.value || []).map(String);
332
336
  return (allowValues || []).map((v) => ({
@@ -365,25 +369,29 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
365
369
  case 'range':
366
370
  return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
367
371
  React.createElement(FilterGrid, null,
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%' }))));
372
+ React.createElement(Numerical, { type: "number", name: `${filter.name}__min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: "100%" }),
373
+ React.createElement(Numerical, { type: "number", name: `${filter.name}__max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: "100%" }))));
370
374
  case 'date':
371
- const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
372
- const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
375
+ const minValue = activeFilters[filter.name]?.min !== ''
376
+ ? activeFilters[filter.name]?.min
377
+ : activeFilters[filter.name]?.rangeMin;
378
+ const maxValue = activeFilters[filter.name]?.max !== ''
379
+ ? activeFilters[filter.name]?.max
380
+ : activeFilters[filter.name]?.rangeMax;
373
381
  return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
374
382
  React.createElement(FilterGrid, null,
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 }))));
383
+ 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 }),
384
+ 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 }))));
377
385
  case 'text':
378
386
  return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
379
- React.createElement(Input, { type: "text", name: `${filter.name}__query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));
387
+ React.createElement(Input, { type: "text", name: `${filter.name}__query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: "100%", width: "100%" })));
380
388
  default:
381
389
  return null;
382
390
  }
383
391
  }, [
384
392
  activeFilters,
385
393
  mapListItems,
386
- normalizeDateValue,
394
+ // normalizeDateValue,
387
395
  setRangeFilter,
388
396
  setTextFilter,
389
397
  ]);
@@ -12,6 +12,7 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
12
12
  name: '',
13
13
  order: 'none',
14
14
  }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
15
+ console.log('=====================');
15
16
  const resolvedThemeData = resolveThemeWithComponentsConfig({
16
17
  theme,
17
18
  themeVariant,
@@ -21,6 +22,7 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
21
22
  const tableConfig = componentsConfig.table;
22
23
  const initialElementsRef = useRef(null);
23
24
  useEffect(() => {
25
+ console.log('zmiana eleemnts detect', elements);
24
26
  if (!initialElementsRef.current &&
25
27
  Array.isArray(elements) &&
26
28
  elements.length > 0) {
@@ -105,6 +107,8 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
105
107
  setCurrentPage(1);
106
108
  setNoResultsMessage(null);
107
109
  }, [elements, setCurrentPage, setNoResultsMessage]);
110
+ console.log('table Elements', elements);
111
+ console.log('initialElementsRef', initialElementsRef.current);
108
112
  const tableElements = useMemo(() => {
109
113
  if (pagination) {
110
114
  return paginatedElements;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "3.0.42",
3
+ "version": "3.0.44",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",