venice-ui 3.0.45 → 3.0.46

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 (3) hide show
  1. package/dist/cjs/components/Table/Table.js +21 -38
  2. package/dist/esm/components/Table/Table.js +21 -38
  3. package/package.json +1 -1
package/dist/cjs/components/Table/Table.js CHANGED
@@ -70,23 +70,18 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
70
70
  const fullElements = (0, react_1.useMemo)(() => {
71
71
  return Array.isArray(elements) ? elements : [];
72
72
  }, [elements]);
73
- const [tableProps, setTableProps] = (0, react_1.useState)({
74
- elements: fullElements,
75
- sort,
76
- headers: tableHeaders,
77
- });
78
- (0, react_1.useEffect)(() => {
79
- setTableProps((prev) => ({
80
- ...prev,
81
- elements: fullElements,
82
- headers: tableHeaders,
83
- }));
84
- }, [fullElements, tableHeaders]);
73
+ const [tableElementsState, setTableElementsState] = (0, react_1.useState)(fullElements);
74
+ const [tableSort, setTableSort] = (0, react_1.useState)(sort);
85
75
  const [selectedRow, setSelectedRow] = (0, react_1.useState)('');
86
76
  const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
87
77
  const [currentPageSize, setCurrentPageSize] = (0, react_1.useState)(pageSize || 10);
88
78
  const [noResultsMessage, setNoResultsMessage] = (0, react_1.useState)(null);
89
79
  const [filtersClearSignal, setFiltersClearSignal] = (0, react_1.useState)(0);
80
+ (0, react_1.useEffect)(() => {
81
+ setTableElementsState(fullElements);
82
+ setCurrentPage(1);
83
+ setNoResultsMessage(null);
84
+ }, [fullElements]);
90
85
  const handleRowClick = (id) => {
91
86
  if (selectable) {
92
87
  setSelectedRow(id);
@@ -97,18 +92,12 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
97
92
  if (!sortable) {
98
93
  return;
99
94
  }
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
- }));
95
+ const newSort = (0, tableHelper_1.setSortParams)(targetValue, order, tableSort);
96
+ setTableSort(newSort);
97
+ setTableElementsState((prev) => (0, tableHelper_1.applySort)(newSort, prev));
106
98
  };
107
99
  const handleApplyFilters = (0, react_1.useCallback)((filteredElements) => {
108
- setTableProps((prev) => ({
109
- ...prev,
110
- elements: filteredElements,
111
- }));
100
+ setTableElementsState(filteredElements);
112
101
  setCurrentPage(1);
113
102
  setNoResultsMessage(filteredElements && filteredElements.length === 0
114
103
  ? config_2.wordbook.table.filterEmptyState
@@ -116,24 +105,18 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
116
105
  }, []);
117
106
  const handleClearFilters = (0, react_1.useCallback)(() => {
118
107
  setFiltersClearSignal((s) => s + 1);
119
- setTableProps((prev) => ({
120
- ...prev,
121
- elements: fullElements.slice(),
122
- }));
108
+ setTableElementsState(fullElements.slice());
123
109
  setCurrentPage(1);
124
110
  setNoResultsMessage(null);
125
111
  }, [fullElements]);
126
112
  (0, react_1.useEffect)(() => {
127
113
  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);
131
- const tableElements = (0, react_1.useMemo)(() => {
132
- if (pagination) {
133
- return paginatedElements;
134
- }
135
- return tableProps.elements;
136
- }, [pagination, paginatedElements, tableProps.elements]);
114
+ }, [currentPageSize]);
115
+ const totalPages = Math.ceil(tableElementsState.length / currentPageSize);
116
+ const paginatedElements = (0, react_1.useMemo)(() => {
117
+ return tableElementsState.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
118
+ }, [tableElementsState, currentPage, currentPageSize]);
119
+ const visibleElements = pagination ? paginatedElements : tableElementsState;
137
120
  return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
138
121
  react_1.default.createElement(Table_styles_1.TableRoot, { theme: resolvedTheme, config: tableConfig, componentHeight: tableWrapperHeight },
139
122
  react_1.default.createElement(react_1.default.Fragment, null,
@@ -146,10 +129,10 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
146
129
  react_1.default.createElement(Table_styles_1.TableContentWrapper, { componentHeight: tableHeight },
147
130
  react_1.default.createElement(Table_styles_1.TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
148
131
  react_1.default.createElement(Table_styles_1.TableHead, null,
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' }))))),
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
132
+ react_1.default.createElement(Table_styles_1.TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableHeaders.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableSort, size: header.size || 'md' }))))),
133
+ react_1.default.createElement(Table_styles_1.TableBody, null, visibleElements.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
134
  ? () => 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 }))))))))),
135
+ : undefined }, tableHeaders.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 }))))))))),
153
136
  noResultsMessage && (react_1.default.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } }, noResultsMessage))))));
154
137
  };
155
138
  exports.Table = Table;
package/dist/esm/components/Table/Table.js CHANGED
@@ -34,23 +34,18 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
34
34
  const fullElements = useMemo(() => {
35
35
  return Array.isArray(elements) ? elements : [];
36
36
  }, [elements]);
37
- const [tableProps, setTableProps] = useState({
38
- elements: fullElements,
39
- sort,
40
- headers: tableHeaders,
41
- });
42
- useEffect(() => {
43
- setTableProps((prev) => ({
44
- ...prev,
45
- elements: fullElements,
46
- headers: tableHeaders,
47
- }));
48
- }, [fullElements, tableHeaders]);
37
+ const [tableElementsState, setTableElementsState] = useState(fullElements);
38
+ const [tableSort, setTableSort] = useState(sort);
49
39
  const [selectedRow, setSelectedRow] = useState('');
50
40
  const [currentPage, setCurrentPage] = useState(1);
51
41
  const [currentPageSize, setCurrentPageSize] = useState(pageSize || 10);
52
42
  const [noResultsMessage, setNoResultsMessage] = useState(null);
53
43
  const [filtersClearSignal, setFiltersClearSignal] = useState(0);
44
+ useEffect(() => {
45
+ setTableElementsState(fullElements);
46
+ setCurrentPage(1);
47
+ setNoResultsMessage(null);
48
+ }, [fullElements]);
54
49
  const handleRowClick = (id) => {
55
50
  if (selectable) {
56
51
  setSelectedRow(id);
@@ -61,18 +56,12 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
61
56
  if (!sortable) {
62
57
  return;
63
58
  }
64
- const newSort = setSortParams(targetValue, order, tableProps.sort);
65
- setTableProps((prev) => ({
66
- ...prev,
67
- elements: applySort(newSort, prev.elements),
68
- sort: newSort,
69
- }));
59
+ const newSort = setSortParams(targetValue, order, tableSort);
60
+ setTableSort(newSort);
61
+ setTableElementsState((prev) => applySort(newSort, prev));
70
62
  };
71
63
  const handleApplyFilters = useCallback((filteredElements) => {
72
- setTableProps((prev) => ({
73
- ...prev,
74
- elements: filteredElements,
75
- }));
64
+ setTableElementsState(filteredElements);
76
65
  setCurrentPage(1);
77
66
  setNoResultsMessage(filteredElements && filteredElements.length === 0
78
67
  ? wordbook.table.filterEmptyState
@@ -80,24 +69,18 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
80
69
  }, []);
81
70
  const handleClearFilters = useCallback(() => {
82
71
  setFiltersClearSignal((s) => s + 1);
83
- setTableProps((prev) => ({
84
- ...prev,
85
- elements: fullElements.slice(),
86
- }));
72
+ setTableElementsState(fullElements.slice());
87
73
  setCurrentPage(1);
88
74
  setNoResultsMessage(null);
89
75
  }, [fullElements]);
90
76
  useEffect(() => {
91
77
  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);
95
- const tableElements = useMemo(() => {
96
- if (pagination) {
97
- return paginatedElements;
98
- }
99
- return tableProps.elements;
100
- }, [pagination, paginatedElements, tableProps.elements]);
78
+ }, [currentPageSize]);
79
+ const totalPages = Math.ceil(tableElementsState.length / currentPageSize);
80
+ const paginatedElements = useMemo(() => {
81
+ return tableElementsState.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
82
+ }, [tableElementsState, currentPage, currentPageSize]);
83
+ const visibleElements = pagination ? paginatedElements : tableElementsState;
101
84
  return (React.createElement(ThemeProvider, { theme: resolvedTheme },
102
85
  React.createElement(TableRoot, { theme: resolvedTheme, config: tableConfig, componentHeight: tableWrapperHeight },
103
86
  React.createElement(React.Fragment, null,
@@ -110,9 +93,9 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
110
93
  React.createElement(TableContentWrapper, { componentHeight: tableHeight },
111
94
  React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
112
95
  React.createElement(TableHead, null,
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' }))))),
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
96
+ React.createElement(TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableHeaders.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableSort, size: header.size || 'md' }))))),
97
+ React.createElement(TableBody, null, visibleElements.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
98
  ? () => 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 }))))))))),
99
+ : undefined }, tableHeaders.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 }))))))))),
117
100
  noResultsMessage && (React.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } }, noResultsMessage))))));
118
101
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "3.0.45",
3
+ "version": "3.0.46",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",