venice-ui 3.0.45 → 3.0.47
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,23 +61,6 @@ 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
|
-
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
64
|
const [source, _setSource] = (0, react_1.useState)(fullElements || []);
|
|
82
65
|
const sourceRef = (0, react_1.useRef)(source);
|
|
83
66
|
const setSource = (data) => {
|
|
@@ -147,9 +130,6 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
147
130
|
collapsible: true,
|
|
148
131
|
};
|
|
149
132
|
}
|
|
150
|
-
if (type === 'select' && h.name === 'joint_name') {
|
|
151
|
-
console.log('scope', values);
|
|
152
|
-
}
|
|
153
133
|
return {
|
|
154
134
|
label: h.name,
|
|
155
135
|
name: key,
|
|
@@ -266,7 +246,6 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
|
|
|
266
246
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
267
247
|
}));
|
|
268
248
|
}, []);
|
|
269
|
-
console.log('activeFilters', activeFilters);
|
|
270
249
|
const setTextFilter = (0, react_1.useCallback)((name, value) => {
|
|
271
250
|
const filterName = (name || '').split('__')[0];
|
|
272
251
|
setActiveFilters((prev) => ({
|
|
@@ -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 [
|
|
74
|
-
|
|
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,
|
|
101
|
-
|
|
102
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
}, [
|
|
129
|
-
const totalPages = Math.ceil(
|
|
130
|
-
const paginatedElements =
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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 },
|
|
150
|
-
react_1.default.createElement(Table_styles_1.TableBody, null,
|
|
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 },
|
|
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;
|
|
@@ -25,23 +25,6 @@ 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
|
-
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
28
|
const [source, _setSource] = useState(fullElements || []);
|
|
46
29
|
const sourceRef = useRef(source);
|
|
47
30
|
const setSource = (data) => {
|
|
@@ -111,9 +94,6 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
111
94
|
collapsible: true,
|
|
112
95
|
};
|
|
113
96
|
}
|
|
114
|
-
if (type === 'select' && h.name === 'joint_name') {
|
|
115
|
-
console.log('scope', values);
|
|
116
|
-
}
|
|
117
97
|
return {
|
|
118
98
|
label: h.name,
|
|
119
99
|
name: key,
|
|
@@ -230,7 +210,6 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
|
|
|
230
210
|
[filterName]: { ...prev[filterName], [filterParam]: value },
|
|
231
211
|
}));
|
|
232
212
|
}, []);
|
|
233
|
-
console.log('activeFilters', activeFilters);
|
|
234
213
|
const setTextFilter = useCallback((name, value) => {
|
|
235
214
|
const filterName = (name || '').split('__')[0];
|
|
236
215
|
setActiveFilters((prev) => ({
|
|
@@ -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 [
|
|
38
|
-
|
|
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,
|
|
65
|
-
|
|
66
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
}, [
|
|
93
|
-
const totalPages = Math.ceil(
|
|
94
|
-
const paginatedElements =
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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 },
|
|
114
|
-
React.createElement(TableBody, null,
|
|
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 },
|
|
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
|
};
|