pixel-react 1.5.9 → 1.6.1

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 (110) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  3. package/lib/components/AppHeader/types.d.ts +18 -6
  4. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  5. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  6. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  7. package/lib/components/FieldSet/FieldSet.d.ts +5 -0
  8. package/lib/components/FieldSet/index.d.ts +1 -0
  9. package/lib/components/FieldSet/types.d.ts +7 -0
  10. package/lib/components/FileDropzone/types.d.ts +8 -0
  11. package/lib/components/MachineInputField/types.d.ts +1 -1
  12. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  13. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  14. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  15. package/lib/components/PopUpModal/types.d.ts +14 -0
  16. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  17. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  18. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  19. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  20. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  21. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  22. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  23. package/lib/components/TableTree/TableTree.d.ts +4 -24
  24. package/lib/components/TableTree/data.d.ts +112 -273
  25. package/lib/components/TableTree/types.d.ts +28 -0
  26. package/lib/index.d.ts +149 -32
  27. package/lib/index.esm.js +1104 -742
  28. package/lib/index.esm.js.map +1 -1
  29. package/lib/index.js +1109 -742
  30. package/lib/index.js.map +1 -1
  31. package/lib/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +2 -2
  33. package/src/assets/Themes/BaseTheme.scss +5 -14
  34. package/src/assets/Themes/DarkTheme.scss +5 -2
  35. package/src/assets/icons/arrow_up.svg +1 -1
  36. package/src/assets/icons/export.svg +5 -0
  37. package/src/assets/icons/import.svg +5 -0
  38. package/src/assets/icons/info_icon.svg +4 -16
  39. package/src/assets/icons/replace_file.svg +14 -0
  40. package/src/assets/icons/web_service_icon.svg +3 -0
  41. package/src/assets/styles/_fonts.scss +4 -2
  42. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  43. package/src/components/AppHeader/AppHeader.tsx +158 -139
  44. package/src/components/AppHeader/types.ts +19 -6
  45. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  46. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  47. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  48. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  49. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  50. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  51. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  52. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  53. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  54. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  55. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  56. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  57. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  58. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  59. package/src/components/Checkbox/Checkbox.tsx +1 -7
  60. package/src/components/DatePicker/DatePicker.scss +15 -1
  61. package/src/components/DragAndDrop/DragAndDropList.tsx +5 -4
  62. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  63. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  66. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  67. package/src/components/FieldSet/FieldSet.scss +9 -0
  68. package/src/components/FieldSet/FieldSet.stories.tsx +103 -0
  69. package/src/components/FieldSet/FieldSet.tsx +29 -0
  70. package/src/components/FieldSet/index.ts +1 -0
  71. package/src/components/FieldSet/types.ts +8 -0
  72. package/src/components/FileDropzone/FileDropzone.scss +1 -1
  73. package/src/components/FileDropzone/FileDropzone.stories.tsx +15 -3
  74. package/src/components/FileDropzone/FileDropzone.tsx +5 -0
  75. package/src/components/FileDropzone/FilePreview.tsx +1 -1
  76. package/src/components/FileDropzone/types.ts +8 -0
  77. package/src/components/Icon/Icons.scss +1 -1
  78. package/src/components/Icon/iconList.ts +11 -7
  79. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  80. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  81. package/src/components/MachineInputField/types.ts +1 -1
  82. package/src/components/MultiSelect/Dropdown.tsx +7 -3
  83. package/src/components/MultiSelect/MultiSelect.stories.tsx +6 -1
  84. package/src/components/MultiSelect/MultiSelect.tsx +4 -20
  85. package/src/components/MultiSelect/MultiSelectTypes.ts +2 -0
  86. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  87. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  88. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  89. package/src/components/PopUpModal/types.ts +14 -0
  90. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  91. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  92. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  93. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  94. package/src/components/Select/Select.tsx +3 -4
  95. package/src/components/Select/components/Dropdown.tsx +34 -34
  96. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  97. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  98. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  99. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  100. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  101. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  102. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  103. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  104. package/src/components/TableTree/TableTree.scss +154 -123
  105. package/src/components/TableTree/TableTree.stories.tsx +148 -96
  106. package/src/components/TableTree/TableTree.tsx +250 -282
  107. package/src/components/TableTree/data.ts +318 -569
  108. package/src/components/TableTree/types.ts +30 -0
  109. package/src/components/Toast/Toast.tsx +1 -1
  110. package/src/index.ts +11 -0
@@ -1,307 +1,275 @@
1
- /* eslint-disable */
2
- // @ts-nocheck
3
- import React, {
4
- ReactNode,
5
- useEffect,
6
- useLayoutEffect,
7
- useRef,
8
- useState,
9
- } from 'react';
1
+ import React, { useMemo, useCallback } from 'react';
2
+ import './TableTree.scss';
10
3
  import { prepareData } from '../../utils/TableCell/TableCell';
11
- import Icon from '../Icon';
12
- import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
13
-
4
+ import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
14
5
  import Checkbox from '../Checkbox';
15
- import './TableTree.scss';
16
6
  import RadioButton from '../RadioButton';
17
- import Typography from '../Typography';
18
-
19
- import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
7
+ import { TreeTableProps } from './types';
8
+
9
+ // Helper to render spaces for levels
10
+ const renderSpaces = (level: number) =>
11
+ Array.from({ length: level }).map((_, i) => (
12
+ <span key={i} className="tree-table-space-block" />
13
+ ));
14
+
15
+ // Recursive function to get all child node IDs (including nested children)
16
+ const getAllChildIds = (nodeId: string, data: any[]): string[] => {
17
+ let result = [nodeId];
18
+
19
+ // Traverse the tree and find children based on parentId
20
+ data.forEach(({ node }) => {
21
+ if (node.parentId === nodeId) {
22
+ result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
23
+ }
24
+ });
20
25
 
21
- interface ColumnDataProps {
22
- name: string;
23
- accessor: string;
24
- width: string;
25
- isClickable?: boolean;
26
- minWidth?: string;
27
- cell?: (e: any) => JSX.Element | string | ReactNode;
28
- actions?: (e: any) => JSX.Element | string | ReactNode;
29
- }
26
+ return result;
27
+ };
30
28
 
31
- interface ObjectProps {
32
- [key: string]: any;
33
- }
29
+ // Component: TableCell
30
+ const TableCell = React.memo(
31
+ ({
32
+ col,
33
+ node,
34
+ level,
35
+ isExpanded,
36
+ selected,
37
+ select,
38
+ onCheckBoxChange,
39
+ onToggleExpand,
40
+ }: {
41
+ col: any;
42
+ node: any;
43
+ level: number;
44
+ isExpanded: boolean;
45
+ selected: string[];
46
+ select: string | null;
47
+ onCheckBoxChange: (type: string, node: any) => void;
48
+ onToggleExpand: (node: any) => void;
49
+ }) => (
50
+ <td>
51
+ {col.isTree && renderSpaces(level + 1)}
52
+ {col.isTree && (
53
+ <span
54
+ className={`tree-table-space-block last-block ${
55
+ isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
56
+ } ${node.folder ? '' : 'no-folder'}`}
57
+ onClick={() => onToggleExpand(node)}
58
+ >
59
+ {node.folder && <Arrow />}
60
+ </span>
61
+ )}
62
+ <span className="tree-table-td-content">
63
+ {col.isTree && select === 'checkbox' && (
64
+ <Checkbox
65
+ checked={selected.includes(node.id)}
66
+ onChange={() => onCheckBoxChange('checkbox', node)}
67
+ />
68
+ )}
69
+ {col.isTree && select === 'radio' && (
70
+ <RadioButton
71
+ name={node.title}
72
+ checked={selected.includes(node.id)}
73
+ value={node.id}
74
+ onChange={() => onCheckBoxChange('radio', node)}
75
+ />
76
+ )}
77
+ {prepareData(node, col)}
78
+ </span>
79
+ {col.actions && (
80
+ <div className="table-tree-row-action">{col.actions(node)}</div>
81
+ )}
82
+ </td>
83
+ )
84
+ );
85
+
86
+ // Component: TableRow
87
+ const TableRow = React.memo(
88
+ ({
89
+ node,
90
+ level,
91
+ columnsData,
92
+ isExpanded,
93
+ selected,
94
+ select,
95
+ onRowClick,
96
+ onToggleExpand,
97
+ onCheckBoxChange,
98
+ }: {
99
+ node: any;
100
+ level: number;
101
+ columnsData: any[];
102
+ isExpanded: boolean;
103
+ selected: string[];
104
+ select: string | null;
105
+ onRowClick: (e: any, node: any) => void;
106
+ onToggleExpand: (node: any) => void;
107
+ onCheckBoxChange: (type: string, node: any) => void;
108
+ }) => (
109
+ <tr
110
+ data-level={level}
111
+ className="show"
112
+ onClick={(e) => onRowClick(e, node)}
113
+ >
114
+ {columnsData.map((col) => (
115
+ <TableCell
116
+ key={col.name}
117
+ col={col}
118
+ node={node}
119
+ level={level}
120
+ isExpanded={isExpanded}
121
+ selected={selected}
122
+ select={select}
123
+ onCheckBoxChange={onCheckBoxChange}
124
+ onToggleExpand={onToggleExpand}
125
+ />
126
+ ))}
127
+ </tr>
128
+ )
129
+ );
130
+
131
+ // Component: TableHead
132
+ const TableHead = React.memo(({ columnsData }: { columnsData: any[] }) => {
133
+ const hasDefaultValues = useMemo(
134
+ () => columnsData.some(({ defaultValue }) => !!defaultValue),
135
+ [columnsData]
136
+ );
34
137
 
35
- interface TableTreeProps {
36
- select: 'checkbox' | 'radio' | 'none';
37
- columnsData: Array<ColumnDataProps>;
38
- treeData: Array<ObjectProps>;
39
- onClick?: (
40
- event: React.MouseEvent<HTMLDivElement, MouseEvent>,
41
- data: any
42
- ) => void;
43
- onChange?: (e: any, node: any) => void;
44
- selected: Array<string>;
45
- onPagination?: (node: ObjectProps) => void; // New prop for pagination
46
- }
138
+ return (
139
+ <thead>
140
+ <tr>
141
+ {columnsData.map(({ name }) => (
142
+ <th key={name}>{name}</th>
143
+ ))}
144
+ </tr>
145
+ {hasDefaultValues && (
146
+ <tr>
147
+ {columnsData.map(({ defaultValue, defaultActions }, index) => (
148
+ <td key={index}>
149
+ {defaultValue && (
150
+ <span className="">
151
+ {defaultValue}
152
+ {defaultActions && (
153
+ <div className="table-tree-row-action">
154
+ {defaultActions()}
155
+ </div>
156
+ )}
157
+ </span>
158
+ )}
159
+ </td>
160
+ ))}
161
+ </tr>
162
+ )}
163
+ </thead>
164
+ );
165
+ });
166
+
167
+ // Component: TableBody
168
+ const TableBody = React.memo(
169
+ ({
170
+ flattenedTreeData,
171
+ columnsData,
172
+ expandedNodes,
173
+ selected,
174
+ select,
175
+ onRowClick,
176
+ onToggleExpand,
177
+ onCheckBoxChange,
178
+ }: {
179
+ flattenedTreeData: any[];
180
+ columnsData: any[];
181
+ expandedNodes: string[];
182
+ selected: string[];
183
+ select: string | null;
184
+ onRowClick: (e: any, node: any) => void;
185
+ onToggleExpand: (node: any) => void;
186
+ onCheckBoxChange: (type: string, node: any) => void;
187
+ }) => (
188
+ <tbody>
189
+ {flattenedTreeData.map(({ node, level }) => {
190
+ const isExpanded = expandedNodes.includes(node.id);
191
+ return (
192
+ <TableRow
193
+ key={node.id}
194
+ node={node}
195
+ level={level}
196
+ columnsData={columnsData}
197
+ isExpanded={isExpanded}
198
+ selected={selected}
199
+ select={select}
200
+ onRowClick={onRowClick}
201
+ onToggleExpand={onToggleExpand}
202
+ onCheckBoxChange={onCheckBoxChange}
203
+ />
204
+ );
205
+ })}
206
+ </tbody>
207
+ )
208
+ );
47
209
 
48
- const TableTree = ({
49
- columnsData,
210
+ // Component: TreeTable
211
+ const TreeTable: React.FC<TreeTableProps> = ({
50
212
  treeData,
51
- select,
52
- onClick = () => {},
213
+ columnsData,
214
+ selected = [],
215
+ select = null,
53
216
  onChange,
54
- selected,
55
- onPagination,
56
- }: TableTreeProps) => {
57
- const [expandedNodes, setExpandedNodes] = useState<Set<ObjectProps>>(
58
- new Set()
217
+ onClick,
218
+ expandedNodes = [],
219
+ onExpand,
220
+ }) => {
221
+ const handleToggleExpand = useCallback(
222
+ (node: any) => onExpand?.(!expandedNodes.includes(node.id), node.id),
223
+ [expandedNodes, onExpand]
59
224
  );
60
- const triggeredPaginationNodes = useRef(new Set()); // Tracks nodes for which pagination is triggered
61
-
62
- useLayoutEffect(() => {
63
- const defaultExpanded: Set<ObjectProps> = new Set();
64
-
65
- // Recursive function to add nodes and their children to the expanded set
66
- const expandNodeRecursively = (node: ObjectProps) => {
67
- if (node.expanded) {
68
- defaultExpanded.add(node);
69
-
70
- if (node.children) {
71
- node.children.forEach((child: ObjectProps) =>
72
- expandNodeRecursively(child)
73
- );
74
- }
75
- }
76
- };
77
-
78
- treeData.forEach((node) => {
79
- expandNodeRecursively(node);
80
- });
81
-
82
- setExpandedNodes(defaultExpanded);
83
- }, [treeData]);
84
-
85
- // Function to calculate total children height
86
- const calculateTotalChildrenHeight = (node: any): number => {
87
- if (!node.children || node.children.length === 0) {
88
- return 1;
89
- }
90
- let totalHeight = 1;
91
- if (expandedNodes.has(node)) {
92
- node.children.forEach((child: any) => {
93
- totalHeight += calculateTotalChildrenHeight(child);
94
- });
95
- }
96
- return totalHeight;
97
- };
98
-
99
- const TreeNode = ({ node, level, isLast }: any) => {
100
- const nodeRef = useRef<HTMLTableRowElement | null>(null);
101
- const lastChildRef = useRef<HTMLTableRowElement | null>(null); // Ref for pagination
102
- const [nodeHeight, setNodeHeight] = useState<number>(0);
103
- const [totalChildrenHeight, setTotalChildrenHeight] = useState<number>(0);
104
225
 
105
- const isExpanded = expandedNodes.has(node);
226
+ const handleCheckBoxChange = useCallback(
227
+ (type: string, node: any) => {
228
+ const nodeId = node.id;
106
229
 
107
- useLayoutEffect(() => {
108
- if (nodeRef.current) {
109
- const observer = new ResizeObserver(() => {
110
- const currentHeight = nodeRef.current?.offsetHeight || 0;
111
- setNodeHeight(currentHeight);
230
+ if (type === 'radio') {
231
+ onChange?.([nodeId]);
232
+ } else {
233
+ let updatedSelected = [...selected];
112
234
 
113
- const childrenHeight = calculateTotalChildrenHeight(node);
114
- setTotalChildrenHeight(childrenHeight);
115
- });
116
-
117
- observer.observe(nodeRef.current);
118
-
119
- return () => {
120
- observer.disconnect();
121
- };
122
- }
123
- }, [isExpanded, node]);
124
-
125
- useEffect(() => {
126
- if (!isExpanded || !lastChildRef.current || !onPagination) return;
127
-
128
- const observer = new IntersectionObserver(
129
- (entries) => {
130
- if (
131
- entries[0].isIntersecting &&
132
- !triggeredPaginationNodes.current.has(node.key)
133
- ) {
134
- triggeredPaginationNodes.current.add(node.key); // Mark node as paginated
135
- onPagination(node); // Trigger the pagination callback
136
- }
137
- },
138
- {
139
- root: null, // Use the viewport as the root
140
- threshold: 1.0, // Trigger when fully visible
141
- }
142
- );
143
-
144
- observer.observe(lastChildRef.current);
145
-
146
- return () => observer.disconnect();
147
- }, [isExpanded, onPagination, node]);
148
-
149
- const handleToggleExpand = () => {
150
- setExpandedNodes((prev) => {
151
- const newExpandedNodes = new Set(prev);
152
- if (newExpandedNodes.has(node)) {
153
- newExpandedNodes.delete(node); // Collapse the node
235
+ if (!updatedSelected.includes(nodeId)) {
236
+ const childIds = getAllChildIds(nodeId, treeData);
237
+ updatedSelected = [...new Set([...updatedSelected, ...childIds])]; // Add children
154
238
  } else {
155
- newExpandedNodes.add(node); // Expand the node
156
- }
157
- return newExpandedNodes;
158
- });
159
- };
160
-
161
- const handleCheckBoxChange = (e, node) => {
162
- if (onChange) {
163
- onChange(e, node);
164
- }
165
- };
166
-
167
- const renderRowData = (columnsData: any) => {
168
- return columnsData.map((column: any) => {
169
- if (column.accessor === 'title') {
170
- return (
171
- <td className={`ff-title-container ${isLast ? 'ff-is-last' : ''}`}>
172
- <div className="first-div">
173
- {' '}
174
- <span className="ff-toggle-folder" onClick={handleToggleExpand}>
175
- {node.folder && (
176
- <span
177
- className={`ff-toggle-arrow-icon ${
178
- isExpanded ? 'ff-expanded' : 'ff-collapsed'
179
- }`}
180
- >
181
- <Arrow />
182
- </span>
183
- )}
184
- </span>
185
- <div
186
- className="ff-title"
187
- style={{ fontWeight: node.folder ? 600 : 400 }}
188
- onClick={(event) => onClick(event, node)}
189
- >
190
- {select === 'checkbox' && (
191
- <Checkbox
192
- checked={selected.includes(node.key)}
193
- onChange={(e) => handleCheckBoxChange(e, node)}
194
- />
195
- )}
196
- {select === 'radio' && (
197
- <RadioButton
198
- name={node.title}
199
- value={node.key}
200
- onChange={(e) => handleCheckBoxChange(e, node)}
201
- />
202
- )}
203
-
204
- <Typography className="ff-title-label" fontWeight="medium">
205
- {prepareData(node, column)}
206
- </Typography>
207
-
208
- {column.actions && (
209
- <div className="ff-title-action-container">
210
- {column.actions(node)}
211
- </div>
212
- )}
213
- </div>
214
- </div>
215
- </td>
216
- );
217
- } else if (column.accessor) {
218
- return (
219
- <td key={column.accessor} style={{ maxWidth: column.width }}>
220
- {prepareData(node, column)}
221
- </td>
239
+ const childIds = getAllChildIds(nodeId, treeData);
240
+ updatedSelected = updatedSelected.filter(
241
+ (id) => !childIds.includes(id)
222
242
  );
223
243
  }
224
- });
225
- };
226
-
227
- const renderTree = (nodes: any, level = 0) => {
228
- return nodes.map((childNode: any, index: number) => {
229
- const isChildLast = index === nodes.length - 1;
230
- const ref = isChildLast ? lastChildRef : null;
231
- return (
232
- <TreeNode
233
- key={childNode.key || index}
234
- node={childNode}
235
- level={level}
236
- isLast={isChildLast}
237
- ref={ref}
238
- />
239
- );
240
- });
241
- };
242
244
 
243
- return (
244
- <>
245
- <tr
246
- ref={nodeRef}
247
- className={`ff-node-li ${node.children ? 'ff-has-children' : ''} `}
248
- style={
249
- {
250
- '--level': level,
251
- '--node-height': `${nodeHeight}px`,
252
- '--total-children-height': `${
253
- totalChildrenHeight * nodeHeight
254
- }px`,
255
- } as React.CSSProperties
256
- }
257
- >
258
- {renderRowData(columnsData)}
259
- </tr>
260
-
261
- {isExpanded &&
262
- !checkEmpty(node?.children) &&
263
- renderTree(node.children, level + 1)}
264
- </>
265
- );
266
- };
245
+ onChange?.(updatedSelected);
246
+ }
247
+ },
248
+ [selected, treeData, onChange]
249
+ );
267
250
 
268
- const renderTree = (nodes: any, level = 0) => {
269
- return nodes.map((node: any, index: number) => {
270
- const isLast = index === nodes.length - 1;
271
- return (
272
- <TreeNode
273
- key={node.key || index}
274
- node={node}
275
- level={level}
276
- isLast={isLast}
277
- />
278
- );
279
- });
280
- };
251
+ const handleRowClick = useCallback(
252
+ (e: any, node: any) => onClick?.(e, node),
253
+ [onClick]
254
+ );
281
255
 
282
256
  return (
283
- <div className="ff-tree-container">
284
- <table>
285
- <thead>
286
- <tr>
287
- {columnsData.map((column: any, index) => (
288
- <th
289
- key={column.accessor}
290
- style={
291
- index === 0
292
- ? { minWidth: column.width }
293
- : { width: column.width }
294
- }
295
- >
296
- {column.name}
297
- </th>
298
- ))}
299
- </tr>
300
- </thead>
301
- <tbody>{renderTree(treeData)}</tbody>
257
+ <div className="tree-table-wrap">
258
+ <table className="tree-table">
259
+ <TableHead columnsData={columnsData} />
260
+ <TableBody
261
+ flattenedTreeData={treeData}
262
+ columnsData={columnsData}
263
+ expandedNodes={expandedNodes}
264
+ selected={selected}
265
+ select={select}
266
+ onRowClick={handleRowClick}
267
+ onToggleExpand={handleToggleExpand}
268
+ onCheckBoxChange={handleCheckBoxChange}
269
+ />
302
270
  </table>
303
271
  </div>
304
272
  );
305
273
  };
306
274
 
307
- export default TableTree;
275
+ export default TreeTable;