wca-designsystem 1.0.87 → 1.0.88
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.
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.
|
|
2
|
+
"version": "1.0.88",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"typings": "dist/index.d.ts",
|
|
@@ -101,6 +101,7 @@
|
|
|
101
101
|
"@tanstack/react-query-persist-client": "^5.40.1",
|
|
102
102
|
"axios": "^1.7.2",
|
|
103
103
|
"dayjs": "^1.11.13",
|
|
104
|
+
"framer-motion": "^12.23.24",
|
|
104
105
|
"react-router-dom": "^6.23.1",
|
|
105
106
|
"recharts": "^2.14.1",
|
|
106
107
|
"styled-components": "^6.1.11",
|
|
@@ -5,6 +5,7 @@ import * as S from './styles';
|
|
|
5
5
|
import { theme } from '../../../styles/theme';
|
|
6
6
|
import SetaBaixo from '../../../assets/imagens/icons/SetaAbaixoALt.svg';
|
|
7
7
|
import Icone from '../../atomos/Icone';
|
|
8
|
+
import { motion, AnimatePresence } from "framer-motion";
|
|
8
9
|
|
|
9
10
|
export interface BodyTableProps<
|
|
10
11
|
T extends { id: string | number; children?: Array<T>; disabled?: boolean }
|
|
@@ -64,7 +65,6 @@ function BodyTable<
|
|
|
64
65
|
[rowSelection, setRowSelection]
|
|
65
66
|
);
|
|
66
67
|
|
|
67
|
-
|
|
68
68
|
const toggleExpandRow = useCallback((rowId: string | number) => {
|
|
69
69
|
setExpandedRows(prev => {
|
|
70
70
|
const newSet = new Set(prev);
|
|
@@ -77,6 +77,24 @@ function BodyTable<
|
|
|
77
77
|
});
|
|
78
78
|
}, []);
|
|
79
79
|
|
|
80
|
+
const orderedData = React.useMemo(() => {
|
|
81
|
+
if (!rowSelection || rowSelection.length === 0) return data;
|
|
82
|
+
|
|
83
|
+
const selecionadosIds = new Set(
|
|
84
|
+
rowSelection.map(item => item.id ?? item.id)
|
|
85
|
+
);
|
|
86
|
+
|
|
87
|
+
const selecionados = data.filter(item =>
|
|
88
|
+
selecionadosIds.has(item.id ?? item.id)
|
|
89
|
+
);
|
|
90
|
+
|
|
91
|
+
const naoSelecionados = data.filter(
|
|
92
|
+
item => !selecionadosIds.has(item.id ?? item.id)
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
return [...selecionados, ...naoSelecionados];
|
|
96
|
+
}, [data, rowSelection]);
|
|
97
|
+
|
|
80
98
|
function renderRows(
|
|
81
99
|
item: T,
|
|
82
100
|
columns: Column<T>[],
|
|
@@ -94,7 +112,13 @@ function BodyTable<
|
|
|
94
112
|
const hasChildren = item.children && item.children.length > 0;
|
|
95
113
|
|
|
96
114
|
return [
|
|
97
|
-
<tr
|
|
115
|
+
<motion.tr
|
|
116
|
+
layout
|
|
117
|
+
transition={{
|
|
118
|
+
type: "spring",
|
|
119
|
+
stiffness: 350,
|
|
120
|
+
damping: 30
|
|
121
|
+
}}
|
|
98
122
|
key={`row-${item.id}`}
|
|
99
123
|
onClick={() => {
|
|
100
124
|
if (item.disabled) return;
|
|
@@ -172,8 +196,8 @@ function BodyTable<
|
|
|
172
196
|
}
|
|
173
197
|
if (column.key === 'acoes' && acoesChildren) {
|
|
174
198
|
return (
|
|
175
|
-
<td
|
|
176
|
-
key={`acoes-${colIndex}`}
|
|
199
|
+
<td
|
|
200
|
+
key={`acoes-${colIndex}`}
|
|
177
201
|
className="acoes"
|
|
178
202
|
onClick={(e) => e.stopPropagation()}
|
|
179
203
|
>
|
|
@@ -210,7 +234,7 @@ function BodyTable<
|
|
|
210
234
|
</td>
|
|
211
235
|
);
|
|
212
236
|
})}
|
|
213
|
-
</tr>,
|
|
237
|
+
</motion.tr>,
|
|
214
238
|
...(expandedRows.has(item.id) && Array.isArray(item.children)
|
|
215
239
|
? item.children.flatMap(child =>
|
|
216
240
|
renderRows(
|
|
@@ -235,7 +259,7 @@ function BodyTable<
|
|
|
235
259
|
color={color}
|
|
236
260
|
style={{ left: `${hasSelect ? '53px' : '0px'}` }}
|
|
237
261
|
>
|
|
238
|
-
{
|
|
262
|
+
{orderedData?.flatMap(item =>
|
|
239
263
|
renderRows(
|
|
240
264
|
item,
|
|
241
265
|
columns,
|