venice-ui 3.0.44 → 3.0.45

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 (4) hide show
  1. package/dist/cjs/components/Table/Table.js +42 -69
  2. package/dist/esm/components/Table/Table.js +43 -70
  3. package/dist/types/components/Table/Table.d.ts +1 -1
  4. package/package.json +1 -1
package/dist/cjs/components/Table/Table.js CHANGED
@@ -48,7 +48,6 @@ 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('=====================');
52
51
  const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
53
52
  theme,
54
53
  themeVariant,
@@ -56,68 +55,55 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
56
55
  const resolvedTheme = resolvedThemeData.resolvedTheme;
57
56
  const { componentsConfig } = resolvedThemeData;
58
57
  const tableConfig = componentsConfig.table;
59
- const initialElementsRef = (0, react_1.useRef)(null);
60
- (0, react_1.useEffect)(() => {
61
- console.log('zmiana eleemnts detect', elements);
62
- if (!initialElementsRef.current &&
63
- Array.isArray(elements) &&
64
- elements.length > 0) {
65
- initialElementsRef.current = elements.slice();
66
- }
67
- setTableProps((prev) => ({
68
- ...prev,
69
- elements: Array.isArray(elements) ? elements : [],
70
- }));
71
- // eslint-disable-next-line react-hooks/exhaustive-deps
72
- }, [elements]);
73
- const checkHeaders = () => {
74
- const tableHeaders = [...headers];
58
+ const tableHeaders = (0, react_1.useMemo)(() => {
59
+ const nextHeaders = [...headers];
75
60
  if (moreActions.length > 0) {
76
- tableHeaders.push({
61
+ nextHeaders.push({
77
62
  name: 'option',
78
63
  valueSource: 'empty',
79
64
  action: true,
80
65
  size: 'sm',
81
66
  });
82
67
  }
83
- return tableHeaders;
84
- };
68
+ return nextHeaders;
69
+ }, [headers, moreActions]);
70
+ const fullElements = (0, react_1.useMemo)(() => {
71
+ return Array.isArray(elements) ? elements : [];
72
+ }, [elements]);
85
73
  const [tableProps, setTableProps] = (0, react_1.useState)({
86
- elements: elements,
87
- sort: sort,
88
- headers: checkHeaders(),
74
+ elements: fullElements,
75
+ sort,
76
+ headers: tableHeaders,
89
77
  });
90
78
  (0, react_1.useEffect)(() => {
91
- setTableProps({
92
- ...tableProps,
93
- elements: elements,
94
- });
95
- }, [elements]);
79
+ setTableProps((prev) => ({
80
+ ...prev,
81
+ elements: fullElements,
82
+ headers: tableHeaders,
83
+ }));
84
+ }, [fullElements, tableHeaders]);
96
85
  const [selectedRow, setSelectedRow] = (0, react_1.useState)('');
86
+ const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
87
+ const [currentPageSize, setCurrentPageSize] = (0, react_1.useState)(pageSize || 10);
88
+ const [noResultsMessage, setNoResultsMessage] = (0, react_1.useState)(null);
89
+ const [filtersClearSignal, setFiltersClearSignal] = (0, react_1.useState)(0);
97
90
  const handleRowClick = (id) => {
98
91
  if (selectable) {
99
92
  setSelectedRow(id);
100
93
  }
101
- onRowClick && onRowClick(id);
94
+ onRowClick?.(id);
102
95
  };
103
96
  const handleHeaderCellClick = (targetValue, order) => {
104
- if (sortable) {
105
- const newSort = (0, tableHelper_1.setSortParams)(targetValue, order, tableProps.sort);
106
- setTableProps({
107
- ...tableProps,
108
- elements: (0, tableHelper_1.applySort)(newSort, tableProps.elements),
109
- sort: newSort,
110
- });
97
+ if (!sortable) {
98
+ return;
111
99
  }
100
+ const newSort = (0, tableHelper_1.setSortParams)(targetValue, order, tableProps.sort);
101
+ setTableProps((prev) => ({
102
+ ...prev,
103
+ elements: (0, tableHelper_1.applySort)(newSort, prev.elements),
104
+ sort: newSort,
105
+ }));
112
106
  };
113
- const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
114
- const [currentPageSize, setCurrentPageSize] = (0, react_1.useState)(pageSize || 10);
115
- const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
116
- const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
117
- (0, react_1.useEffect)(() => {
118
- setCurrentPage(1);
119
- }, [elements, currentPageSize]);
120
- const [noResultsMessage, setNoResultsMessage] = (0, react_1.useState)(null);
121
107
  const handleApplyFilters = (0, react_1.useCallback)((filteredElements) => {
122
108
  setTableProps((prev) => ({
123
109
  ...prev,
@@ -127,24 +113,21 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
127
113
  setNoResultsMessage(filteredElements && filteredElements.length === 0
128
114
  ? config_2.wordbook.table.filterEmptyState
129
115
  : null);
130
- }, [setCurrentPage, setTableProps]);
131
- const [filtersClearSignal, setFiltersClearSignal] = (0, react_1.useState)(0);
116
+ }, []);
132
117
  const handleClearFilters = (0, react_1.useCallback)(() => {
133
118
  setFiltersClearSignal((s) => s + 1);
134
- const full = initialElementsRef.current && initialElementsRef.current.length > 0
135
- ? initialElementsRef.current
136
- : Array.isArray(elements)
137
- ? elements
138
- : [];
139
119
  setTableProps((prev) => ({
140
120
  ...prev,
141
- elements: Array.isArray(full) ? full.slice() : [],
121
+ elements: fullElements.slice(),
142
122
  }));
143
123
  setCurrentPage(1);
144
124
  setNoResultsMessage(null);
145
- }, [elements, setCurrentPage, setNoResultsMessage]);
146
- console.log('table Elements', elements);
147
- console.log('initialElementsRef', initialElementsRef.current);
125
+ }, [fullElements]);
126
+ (0, react_1.useEffect)(() => {
127
+ setCurrentPage(1);
128
+ }, [fullElements, currentPageSize]);
129
+ const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
130
+ const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
148
131
  const tableElements = (0, react_1.useMemo)(() => {
149
132
  if (pagination) {
150
133
  return paginatedElements;
@@ -157,26 +140,16 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
157
140
  (filtrable || pagination) && (react_1.default.createElement(Table_styles_1.TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
158
141
  react_1.default.createElement(react_1.default.Fragment, null,
159
142
  filtrable && (react_1.default.createElement(Table_styles_1.HeaderSection, null,
160
- react_1.default.createElement(Filters_1.Filters, { labels: filterLabels, headers: headers, elements: initialElementsRef.current &&
161
- initialElementsRef.current.length > 0
162
- ? initialElementsRef.current
163
- : elements, fullElements: initialElementsRef.current &&
164
- initialElementsRef.current.length > 0
165
- ? initialElementsRef.current
166
- : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
143
+ react_1.default.createElement(Filters_1.Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
167
144
  pagination && (react_1.default.createElement(Table_styles_1.HeaderSection, { right: true },
168
145
  react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
169
146
  react_1.default.createElement(Table_styles_1.TableContentWrapper, { componentHeight: tableHeight },
170
147
  react_1.default.createElement(Table_styles_1.TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
171
148
  react_1.default.createElement(Table_styles_1.TableHead, null,
172
149
  react_1.default.createElement(Table_styles_1.TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort, size: header.size || 'md' }))))),
173
- react_1.default.createElement(Table_styles_1.TableBody, null, tableElements.map((item) => {
174
- return (react_1.default.createElement(Table_styles_1.TableRow, { theme: resolvedTheme, config: tableConfig, key: `table_row_${item.id}`, hover: hover, isDisabled: item.disabled, active: selectedRow === item.id, selectable: selectable, onClick: !item.disabled
175
- ? () => handleRowClick(item.id)
176
- : undefined }, tableProps.headers.map((header, index) => {
177
- return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, selected: item.marked && index === 0, isDisabled: item.disabled }));
178
- })));
179
- })))),
150
+ react_1.default.createElement(Table_styles_1.TableBody, null, tableElements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { theme: resolvedTheme, config: tableConfig, key: `table_row_${item.id}`, hover: hover, isDisabled: item.disabled, active: selectedRow === item.id, selectable: selectable, onClick: !item.disabled
151
+ ? () => handleRowClick(item.id)
152
+ : undefined }, tableProps.headers.map((header, index) => (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, selected: item.marked && index === 0, isDisabled: item.disabled }))))))))),
180
153
  noResultsMessage && (react_1.default.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } }, noResultsMessage))))));
181
154
  };
182
155
  exports.Table = Table;
package/dist/esm/components/Table/Table.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { resolveThemeWithComponentsConfig } from '../../config';
2
- import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
2
+ import React, { useCallback, useEffect, useMemo, useState } from 'react';
3
3
  import { applySort, setSortParams } from './tableHelper';
4
4
  import { wordbook } from '../../config';
5
5
  import { ThemeProvider } from 'styled-components';
@@ -12,7 +12,6 @@ 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('=====================');
16
15
  const resolvedThemeData = resolveThemeWithComponentsConfig({
17
16
  theme,
18
17
  themeVariant,
@@ -20,68 +19,55 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
20
19
  const resolvedTheme = resolvedThemeData.resolvedTheme;
21
20
  const { componentsConfig } = resolvedThemeData;
22
21
  const tableConfig = componentsConfig.table;
23
- const initialElementsRef = useRef(null);
24
- useEffect(() => {
25
- console.log('zmiana eleemnts detect', elements);
26
- if (!initialElementsRef.current &&
27
- Array.isArray(elements) &&
28
- elements.length > 0) {
29
- initialElementsRef.current = elements.slice();
30
- }
31
- setTableProps((prev) => ({
32
- ...prev,
33
- elements: Array.isArray(elements) ? elements : [],
34
- }));
35
- // eslint-disable-next-line react-hooks/exhaustive-deps
36
- }, [elements]);
37
- const checkHeaders = () => {
38
- const tableHeaders = [...headers];
22
+ const tableHeaders = useMemo(() => {
23
+ const nextHeaders = [...headers];
39
24
  if (moreActions.length > 0) {
40
- tableHeaders.push({
25
+ nextHeaders.push({
41
26
  name: 'option',
42
27
  valueSource: 'empty',
43
28
  action: true,
44
29
  size: 'sm',
45
30
  });
46
31
  }
47
- return tableHeaders;
48
- };
32
+ return nextHeaders;
33
+ }, [headers, moreActions]);
34
+ const fullElements = useMemo(() => {
35
+ return Array.isArray(elements) ? elements : [];
36
+ }, [elements]);
49
37
  const [tableProps, setTableProps] = useState({
50
- elements: elements,
51
- sort: sort,
52
- headers: checkHeaders(),
38
+ elements: fullElements,
39
+ sort,
40
+ headers: tableHeaders,
53
41
  });
54
42
  useEffect(() => {
55
- setTableProps({
56
- ...tableProps,
57
- elements: elements,
58
- });
59
- }, [elements]);
43
+ setTableProps((prev) => ({
44
+ ...prev,
45
+ elements: fullElements,
46
+ headers: tableHeaders,
47
+ }));
48
+ }, [fullElements, tableHeaders]);
60
49
  const [selectedRow, setSelectedRow] = useState('');
50
+ const [currentPage, setCurrentPage] = useState(1);
51
+ const [currentPageSize, setCurrentPageSize] = useState(pageSize || 10);
52
+ const [noResultsMessage, setNoResultsMessage] = useState(null);
53
+ const [filtersClearSignal, setFiltersClearSignal] = useState(0);
61
54
  const handleRowClick = (id) => {
62
55
  if (selectable) {
63
56
  setSelectedRow(id);
64
57
  }
65
- onRowClick && onRowClick(id);
58
+ onRowClick?.(id);
66
59
  };
67
60
  const handleHeaderCellClick = (targetValue, order) => {
68
- if (sortable) {
69
- const newSort = setSortParams(targetValue, order, tableProps.sort);
70
- setTableProps({
71
- ...tableProps,
72
- elements: applySort(newSort, tableProps.elements),
73
- sort: newSort,
74
- });
61
+ if (!sortable) {
62
+ return;
75
63
  }
64
+ const newSort = setSortParams(targetValue, order, tableProps.sort);
65
+ setTableProps((prev) => ({
66
+ ...prev,
67
+ elements: applySort(newSort, prev.elements),
68
+ sort: newSort,
69
+ }));
76
70
  };
77
- const [currentPage, setCurrentPage] = useState(1);
78
- const [currentPageSize, setCurrentPageSize] = useState(pageSize || 10);
79
- const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
80
- const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
81
- useEffect(() => {
82
- setCurrentPage(1);
83
- }, [elements, currentPageSize]);
84
- const [noResultsMessage, setNoResultsMessage] = useState(null);
85
71
  const handleApplyFilters = useCallback((filteredElements) => {
86
72
  setTableProps((prev) => ({
87
73
  ...prev,
@@ -91,24 +77,21 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
91
77
  setNoResultsMessage(filteredElements && filteredElements.length === 0
92
78
  ? wordbook.table.filterEmptyState
93
79
  : null);
94
- }, [setCurrentPage, setTableProps]);
95
- const [filtersClearSignal, setFiltersClearSignal] = useState(0);
80
+ }, []);
96
81
  const handleClearFilters = useCallback(() => {
97
82
  setFiltersClearSignal((s) => s + 1);
98
- const full = initialElementsRef.current && initialElementsRef.current.length > 0
99
- ? initialElementsRef.current
100
- : Array.isArray(elements)
101
- ? elements
102
- : [];
103
83
  setTableProps((prev) => ({
104
84
  ...prev,
105
- elements: Array.isArray(full) ? full.slice() : [],
85
+ elements: fullElements.slice(),
106
86
  }));
107
87
  setCurrentPage(1);
108
88
  setNoResultsMessage(null);
109
- }, [elements, setCurrentPage, setNoResultsMessage]);
110
- console.log('table Elements', elements);
111
- console.log('initialElementsRef', initialElementsRef.current);
89
+ }, [fullElements]);
90
+ useEffect(() => {
91
+ setCurrentPage(1);
92
+ }, [fullElements, currentPageSize]);
93
+ const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
94
+ const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
112
95
  const tableElements = useMemo(() => {
113
96
  if (pagination) {
114
97
  return paginatedElements;
@@ -121,25 +104,15 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
121
104
  (filtrable || pagination) && (React.createElement(TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
122
105
  React.createElement(React.Fragment, null,
123
106
  filtrable && (React.createElement(HeaderSection, null,
124
- React.createElement(Filters, { labels: filterLabels, headers: headers, elements: initialElementsRef.current &&
125
- initialElementsRef.current.length > 0
126
- ? initialElementsRef.current
127
- : elements, fullElements: initialElementsRef.current &&
128
- initialElementsRef.current.length > 0
129
- ? initialElementsRef.current
130
- : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
107
+ React.createElement(Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
131
108
  pagination && (React.createElement(HeaderSection, { right: true },
132
109
  React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
133
110
  React.createElement(TableContentWrapper, { componentHeight: tableHeight },
134
111
  React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
135
112
  React.createElement(TableHead, null,
136
113
  React.createElement(TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort, size: header.size || 'md' }))))),
137
- React.createElement(TableBody, null, tableElements.map((item) => {
138
- return (React.createElement(TableRow, { theme: resolvedTheme, config: tableConfig, key: `table_row_${item.id}`, hover: hover, isDisabled: item.disabled, active: selectedRow === item.id, selectable: selectable, onClick: !item.disabled
139
- ? () => handleRowClick(item.id)
140
- : undefined }, tableProps.headers.map((header, index) => {
141
- return (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, selected: item.marked && index === 0, isDisabled: item.disabled }));
142
- })));
143
- })))),
114
+ React.createElement(TableBody, null, tableElements.map((item) => (React.createElement(TableRow, { theme: resolvedTheme, config: tableConfig, key: `table_row_${item.id}`, hover: hover, isDisabled: item.disabled, active: selectedRow === item.id, selectable: selectable, onClick: !item.disabled
115
+ ? () => handleRowClick(item.id)
116
+ : undefined }, tableProps.headers.map((header, index) => (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, selected: item.marked && index === 0, isDisabled: item.disabled }))))))))),
144
117
  noResultsMessage && (React.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } }, noResultsMessage))))));
145
118
  };
package/dist/types/components/Table/Table.d.ts CHANGED
@@ -5,7 +5,7 @@ interface ITableProps {
5
5
  theme?: AppTheme;
6
6
  themeVariant?: ThemeName;
7
7
  headers: ITableHeaderProps[];
8
- elements: any;
8
+ elements: any[];
9
9
  moreActions?: IAction[];
10
10
  hover?: boolean;
11
11
  selectable?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "3.0.44",
3
+ "version": "3.0.45",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",