pixel-react 1.10.10-2 → 1.10.10-4
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/lib/ComponentProps/TreeNodeProps.d.ts +3 -0
- package/lib/components/AppHeader/types.d.ts +1 -0
- package/lib/components/ConnectingBranch/types.d.ts +2 -0
- package/lib/components/TableTree/Components/AddModule/AddModule.d.ts +2 -1
- package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
- package/lib/components/TableTree/Components/TableCell.d.ts +2 -2
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/addNewRow.d.ts +1 -0
- package/lib/components/TableTree/data.d.ts +34 -0
- package/lib/components/TableTree/types.d.ts +12 -12
- package/lib/index.d.ts +15 -8
- package/lib/index.esm.js +237 -134
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +237 -134
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +3 -0
- package/src/assets/icons/spinner.svg +42 -0
- package/src/components/AppHeader/AppHeader.scss +7 -1
- package/src/components/AppHeader/AppHeader.stories.tsx +1 -0
- package/src/components/AppHeader/AppHeader.tsx +8 -1
- package/src/components/AppHeader/types.ts +1 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +36 -27
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +10 -0
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +36 -23
- package/src/components/ConnectingBranch/types.ts +2 -0
- package/src/components/Select/Select.stories.tsx +34 -10
- package/src/components/Select/Select.tsx +1 -0
- package/src/components/Select/components/Dropdown.tsx +24 -21
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +19 -14
- package/src/components/TableTree/Components/AddModule/AddModule.scss +73 -1
- package/src/components/TableTree/Components/AddModule/AddModule.tsx +50 -14
- package/src/components/TableTree/Components/TableBody.tsx +2 -0
- package/src/components/TableTree/Components/TableCell.tsx +125 -75
- package/src/components/TableTree/Components/TableRow.tsx +2 -0
- package/src/components/TableTree/TableTree.scss +14 -2
- package/src/components/TableTree/TableTree.stories.tsx +26 -7
- package/src/components/TableTree/TableTree.tsx +31 -5
- package/src/components/TableTree/Utils/addNewRow.ts +3 -1
- package/src/components/TableTree/data.ts +5 -1
- package/src/components/TableTree/types.ts +13 -12
@@ -1,35 +1,71 @@
|
|
1
1
|
import { useState } from 'react';
|
2
2
|
import Icon from '../../../Icon';
|
3
3
|
import './AddModule.scss';
|
4
|
+
import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
|
5
|
+
import classNames from 'classnames';
|
4
6
|
|
5
7
|
export const AddModule = ({
|
6
8
|
onConfirm,
|
7
9
|
onCancel,
|
8
10
|
error,
|
9
11
|
value = '',
|
12
|
+
label = 'Add Script',
|
10
13
|
}: {
|
11
14
|
onConfirm?: (_text: string) => void;
|
12
15
|
onCancel?: () => void;
|
13
16
|
error?: string;
|
14
17
|
value?: string;
|
18
|
+
label?: string;
|
15
19
|
}) => {
|
16
|
-
console.log('🚀 ~ value:', value);
|
17
20
|
const [text, setText] = useState(value);
|
21
|
+
|
22
|
+
const isValueFilled = !checkEmpty(text);
|
18
23
|
return (
|
19
24
|
<>
|
20
|
-
<div className=
|
21
|
-
<
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
25
|
+
<div className={classNames('add-module-container')}>
|
26
|
+
<div
|
27
|
+
className={classNames('ff-add-module-input-container', {
|
28
|
+
'ff-add-module-input-container--float': isValueFilled,
|
29
|
+
})}
|
30
|
+
>
|
31
|
+
<label
|
32
|
+
className="ff-add-module-label-container"
|
33
|
+
htmlFor="add-module-input"
|
34
|
+
>
|
35
|
+
<span
|
36
|
+
className={classNames('ff-add-module-label', {
|
37
|
+
'ff-input-label--no-hover': !!text,
|
38
|
+
})}
|
39
|
+
>
|
40
|
+
{label}
|
41
|
+
</span>
|
42
|
+
</label>
|
43
|
+
<input
|
44
|
+
name="add-module-input"
|
45
|
+
type="text"
|
46
|
+
className="add-module-input"
|
47
|
+
onChange={(e) => setText(e.target.value)}
|
48
|
+
value={text}
|
49
|
+
/>
|
50
|
+
</div>
|
51
|
+
<div className="ff-module-icon-container">
|
52
|
+
<Icon
|
53
|
+
className="icons"
|
54
|
+
name="update_icon"
|
55
|
+
onClick={() => onConfirm && onConfirm(text)}
|
56
|
+
color="var(--label-edit-confirm-icon)"
|
57
|
+
height={18}
|
58
|
+
width={18}
|
59
|
+
/>
|
60
|
+
<Icon
|
61
|
+
className="icons"
|
62
|
+
name="close"
|
63
|
+
onClick={onCancel}
|
64
|
+
color="var(--label-edit-cancel-icon)"
|
65
|
+
height={14}
|
66
|
+
width={14}
|
67
|
+
/>
|
68
|
+
</div>
|
33
69
|
</div>
|
34
70
|
<small>{error}</small>
|
35
71
|
</>
|
@@ -14,6 +14,7 @@ const TableBody = ({
|
|
14
14
|
newNode = {},
|
15
15
|
onAddConfirm,
|
16
16
|
onAddCancel,
|
17
|
+
expanding,
|
17
18
|
}: TableBodyProps) => {
|
18
19
|
if (checkEmpty(flattenedTreeData)) {
|
19
20
|
return null;
|
@@ -35,6 +36,7 @@ const TableBody = ({
|
|
35
36
|
onCheckBoxChange={onCheckBoxChange}
|
36
37
|
onAddConfirm={onAddConfirm}
|
37
38
|
onAddCancel={onAddCancel}
|
39
|
+
isExpanding={node.key === expanding}
|
38
40
|
/>
|
39
41
|
))}
|
40
42
|
<tr id="ff-table-tree-last-node" />
|
@@ -1,11 +1,12 @@
|
|
1
|
+
import React, { useEffect } from 'react';
|
1
2
|
import { prepareData } from '../../../utils/TableCell/TableCell';
|
2
3
|
import Checkbox from '../../Checkbox';
|
3
4
|
import RadioButton from '../../RadioButton';
|
4
5
|
import { TableCellProps } from '../types';
|
5
|
-
import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
|
6
|
-
import React from 'react';
|
7
6
|
import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
|
8
7
|
import { AddModule } from './AddModule/AddModule';
|
8
|
+
import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
|
9
|
+
import Spinner from '../../../assets/icons/spinner.svg?react';
|
9
10
|
|
10
11
|
const renderSpaces = (
|
11
12
|
level: number,
|
@@ -50,83 +51,132 @@ const TableCell = React.memo(
|
|
50
51
|
onToggleExpand,
|
51
52
|
onAddConfirm,
|
52
53
|
onAddCancel,
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
54
|
+
isExpanding,
|
55
|
+
}: TableCellProps) => {
|
56
|
+
useEffect(() => {
|
57
|
+
const handleHover = (event: MouseEvent, isHovering: boolean) => {
|
58
|
+
const target = event.target as HTMLElement;
|
59
|
+
const levelClass = Array.from(target.classList).find((cls) =>
|
60
|
+
cls.startsWith('tree-table-space-block-')
|
61
|
+
);
|
62
|
+
|
63
|
+
if (levelClass) {
|
64
|
+
const level = levelClass.split('-').pop();
|
65
|
+
|
66
|
+
// Check if level is valid before selecting elements
|
67
|
+
if (level) {
|
68
|
+
const sameLevelBlocks = document.querySelectorAll(
|
69
|
+
`.tree-table-space-block-${level}`
|
70
|
+
) as NodeListOf<HTMLElement>;
|
71
|
+
|
72
|
+
sameLevelBlocks.forEach((block) => {
|
73
|
+
if (isHovering) {
|
74
|
+
block.classList.add('tree-table-hovered');
|
75
|
+
} else {
|
76
|
+
block.classList.remove('tree-table-hovered');
|
77
|
+
}
|
78
|
+
});
|
79
|
+
}
|
80
|
+
}
|
81
|
+
};
|
82
|
+
|
83
|
+
const spaceBlocks = document.querySelectorAll(
|
84
|
+
'.tree-table-space-block'
|
85
|
+
) as NodeListOf<HTMLElement>;
|
86
|
+
|
87
|
+
spaceBlocks.forEach((block) => {
|
88
|
+
block.addEventListener('mouseenter', (e) => handleHover(e, true));
|
89
|
+
block.addEventListener('mouseleave', (e) => handleHover(e, false));
|
90
|
+
});
|
91
|
+
|
92
|
+
return () => {
|
93
|
+
spaceBlocks.forEach((block) => {
|
94
|
+
block.removeEventListener('mouseenter', (e) => handleHover(e, true));
|
95
|
+
block.removeEventListener('mouseleave', (e) => handleHover(e, false));
|
96
|
+
});
|
97
|
+
};
|
98
|
+
}, []);
|
99
|
+
return (
|
100
|
+
<td
|
101
|
+
className={`ff-table-tree-td ${
|
102
|
+
col.isTree && node.container ? 'folder' : ''
|
103
|
+
}`}
|
104
|
+
>
|
105
|
+
{col.isTree &&
|
106
|
+
renderSpaces(
|
107
|
+
node.hierarchy + 1,
|
108
|
+
node.parentSiblings,
|
109
|
+
node.lastResource,
|
110
|
+
node.container
|
106
111
|
)}
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
{
|
112
|
+
<div className="tree-title-container">
|
113
|
+
{col.isTree && (
|
114
|
+
<span
|
115
|
+
className={`tree-table-space-block tree-table-space-block-${
|
116
|
+
node.hierarchy
|
117
|
+
} last-block ${
|
118
|
+
node?.expanded ? 'tree-row-expanded' : 'tree-row-collapsed'
|
119
|
+
} ${node.container ? '' : 'no-folder'}`}
|
120
|
+
>
|
121
|
+
{node.container &&
|
122
|
+
(node?.resourceCount + node?.subContainerCount > 0 ||
|
123
|
+
node.expandable) && (
|
124
|
+
<span onClick={() => onToggleExpand(node)}>
|
125
|
+
{' '}
|
126
|
+
{isExpanding ? <Spinner /> : <Arrow />}
|
127
|
+
</span>
|
128
|
+
)}
|
117
129
|
</span>
|
118
130
|
)}
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
131
|
+
<span
|
132
|
+
className={`tree-table-td-content ${
|
133
|
+
col.isTree && node.container ? 'folder' : ''
|
134
|
+
}`}
|
135
|
+
>
|
136
|
+
{!node?.isNewNode && (
|
137
|
+
<>
|
138
|
+
{col.isTree && select === 'checkbox' && (
|
139
|
+
<Checkbox
|
140
|
+
checked={node?.checked || false}
|
141
|
+
partial={node?.checked === 'partial'}
|
142
|
+
onChange={(e) => onCheckBoxChange(e, node)}
|
143
|
+
/>
|
144
|
+
)}
|
145
|
+
{col.isTree && select === 'radio' && (
|
146
|
+
<RadioButton
|
147
|
+
name={node.key}
|
148
|
+
checked={selected.includes(node.key)}
|
149
|
+
value={node.key}
|
150
|
+
onChange={(e) => onCheckBoxChange(e, node)}
|
151
|
+
/>
|
152
|
+
)}
|
153
|
+
</>
|
154
|
+
)}
|
155
|
+
{node.isNewNode && col.isTree ? (
|
156
|
+
<AddModule
|
157
|
+
onCancel={onAddCancel}
|
158
|
+
onConfirm={onAddConfirm}
|
159
|
+
error={node?.error || ''}
|
160
|
+
value={node.value}
|
161
|
+
label={node?.label || ''}
|
162
|
+
/>
|
163
|
+
) : (
|
164
|
+
<span className="tree-table-td-content-text">
|
165
|
+
{prepareData(node, col)}
|
166
|
+
</span>
|
167
|
+
)}
|
168
|
+
</span>
|
126
169
|
</div>
|
127
|
-
|
128
|
-
|
129
|
-
|
170
|
+
{col.actions && !node?.isNewNode && (
|
171
|
+
<div className={`table-tree-row-action`}>
|
172
|
+
{(() => {
|
173
|
+
return col.actions(node, treeRowRef);
|
174
|
+
})()}
|
175
|
+
</div>
|
176
|
+
)}
|
177
|
+
</td>
|
178
|
+
);
|
179
|
+
}
|
130
180
|
);
|
131
181
|
|
132
182
|
export default TableCell;
|
@@ -13,6 +13,7 @@ const TableRow = React.memo(
|
|
13
13
|
onCheckBoxChange,
|
14
14
|
onAddConfirm,
|
15
15
|
onAddCancel,
|
16
|
+
isExpanding,
|
16
17
|
}: TableRowProps) => {
|
17
18
|
const treeRowRef = useRef<HTMLTableRowElement | null>(null);
|
18
19
|
return (
|
@@ -34,6 +35,7 @@ const TableRow = React.memo(
|
|
34
35
|
onToggleExpand={onToggleExpand}
|
35
36
|
onAddConfirm={onAddConfirm}
|
36
37
|
onAddCancel={onAddCancel}
|
38
|
+
isExpanding={isExpanding}
|
37
39
|
/>
|
38
40
|
))}
|
39
41
|
</tr>
|
@@ -77,6 +77,12 @@
|
|
77
77
|
height: 13px;
|
78
78
|
}
|
79
79
|
}
|
80
|
+
|
81
|
+
/* Hover background for all elements of the same level */
|
82
|
+
&.tree-table-hovered::before,
|
83
|
+
&.tree-table-hovered::after {
|
84
|
+
background-color: var(--brand-color);
|
85
|
+
}
|
80
86
|
}
|
81
87
|
|
82
88
|
.tree-title-container {
|
@@ -153,6 +159,10 @@
|
|
153
159
|
.table-tree-row-action {
|
154
160
|
display: inline-flex;
|
155
161
|
align-items: center;
|
162
|
+
svg{
|
163
|
+
height: 14px;
|
164
|
+
width: 14px;
|
165
|
+
}
|
156
166
|
}
|
157
167
|
}
|
158
168
|
.ff-table-tree-row {
|
@@ -194,7 +204,7 @@
|
|
194
204
|
box-sizing: border-box;
|
195
205
|
|
196
206
|
&:first-child {
|
197
|
-
width:
|
207
|
+
width: 600px !important;
|
198
208
|
position: sticky;
|
199
209
|
left: 0;
|
200
210
|
padding-left: 8px;
|
@@ -227,6 +237,7 @@
|
|
227
237
|
margin-left: 4px;
|
228
238
|
}
|
229
239
|
}
|
240
|
+
|
230
241
|
.tree-table-default-content {
|
231
242
|
font-weight: 700;
|
232
243
|
}
|
@@ -255,6 +266,7 @@
|
|
255
266
|
svg {
|
256
267
|
height: 12px;
|
257
268
|
width: 12px;
|
269
|
+
transition: transform 0.3s ease;
|
258
270
|
|
259
271
|
path {
|
260
272
|
fill: var(--brand-color);
|
@@ -276,4 +288,4 @@
|
|
276
288
|
.tree-title-container {
|
277
289
|
display: inline-flex;
|
278
290
|
align-items: center;
|
279
|
-
}
|
291
|
+
}
|
@@ -6,6 +6,7 @@ import Icon from '../Icon/Icon';
|
|
6
6
|
import './TableTreeStories.scss';
|
7
7
|
import React, { ReactNode, useState } from 'react';
|
8
8
|
import AddResourceButton from '../AddResourceButton/AddResourceButton';
|
9
|
+
import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
|
9
10
|
|
10
11
|
const meta: Meta<typeof TableTree> = {
|
11
12
|
title: 'Components/Table tree',
|
@@ -19,7 +20,7 @@ const colData = [
|
|
19
20
|
{
|
20
21
|
name: 'Script Name',
|
21
22
|
accessor: 'name',
|
22
|
-
width: '
|
23
|
+
width: '600px',
|
23
24
|
isClickable: true,
|
24
25
|
actions: (row, treeRowRef) => {
|
25
26
|
console.log('🚀 ~ row:', row, treeRowRef);
|
@@ -198,18 +199,36 @@ export const Default: Story = {
|
|
198
199
|
onClick: (e, data) => {
|
199
200
|
console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
|
200
201
|
},
|
201
|
-
height: 100,
|
202
|
+
// height: 100,
|
202
203
|
},
|
203
204
|
};
|
204
205
|
|
205
206
|
export const ControlledCheckBox: Story = {
|
206
207
|
render: () => {
|
207
208
|
const [selected, setSelected] = useState<string[]>([]);
|
208
|
-
|
209
|
+
const [controlledTreeData, setControlledTreeData] = useState(treeData);
|
209
210
|
return (
|
210
211
|
<TableTree
|
211
|
-
height={100}
|
212
|
+
// height={100}
|
212
213
|
onExpand={(node, index) => {
|
214
|
+
setControlledTreeData((prevData) => {
|
215
|
+
const cloneTreeData = JSON.parse(JSON.stringify(prevData));
|
216
|
+
const toggleNodeExpandedByKey = (tree, key) => {
|
217
|
+
if (!tree) return tree;
|
218
|
+
for (let i = 0; i < tree.length; i++) {
|
219
|
+
if (tree[i].key === key) {
|
220
|
+
tree[i].expanded = !(tree[i].expanded ?? false);
|
221
|
+
return tree;
|
222
|
+
}
|
223
|
+
if (tree[i].children) {
|
224
|
+
toggleNodeExpandedByKey(tree[i].children, key);
|
225
|
+
}
|
226
|
+
}
|
227
|
+
return tree;
|
228
|
+
};
|
229
|
+
|
230
|
+
return toggleNodeExpandedByKey(cloneTreeData, node.key);
|
231
|
+
});
|
213
232
|
console.log(node, index);
|
214
233
|
}}
|
215
234
|
select="checkbox"
|
@@ -217,7 +236,7 @@ export const ControlledCheckBox: Story = {
|
|
217
236
|
setSelected(nodes);
|
218
237
|
}}
|
219
238
|
selected={selected}
|
220
|
-
treeData={
|
239
|
+
treeData={controlledTreeData}
|
221
240
|
columnsData={colData}
|
222
241
|
onClick={(e, data) => {
|
223
242
|
console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
|
@@ -239,8 +258,8 @@ export const ControlledRadio: Story = {
|
|
239
258
|
console.log(node, index);
|
240
259
|
}}
|
241
260
|
select="radio"
|
242
|
-
onChange={(
|
243
|
-
setSelected(
|
261
|
+
onChange={(e, node: TreeNodeProps) => {
|
262
|
+
setSelected([node.key]);
|
244
263
|
}}
|
245
264
|
selected={selected}
|
246
265
|
treeData={treeData}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useCallback,
|
1
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
2
2
|
import './TableTree.scss';
|
3
3
|
import { TreeTableProps } from './types';
|
4
4
|
import TableHead from './Components/TableHead';
|
@@ -17,10 +17,11 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
17
17
|
loadMore = () => {},
|
18
18
|
tableBorder,
|
19
19
|
height = 'auto',
|
20
|
-
newNode = {
|
20
|
+
newNode = {},
|
21
21
|
onAddConfirm = (_name) => {},
|
22
22
|
onAddCancel = () => {},
|
23
23
|
}) => {
|
24
|
+
const [expanding, setExpanding] = useState<string | null>(null);
|
24
25
|
const observerRef = useRef<IntersectionObserver | null>(null);
|
25
26
|
const isTriggeredAbove = useRef(false); // Track if pagination for "above" direction has been triggered
|
26
27
|
const isTriggeredBelow = useRef(false); // Track if pagination for "below" direction has been triggered
|
@@ -120,20 +121,44 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
120
121
|
};
|
121
122
|
}, [treeData, throttledLoadMore]);
|
122
123
|
|
124
|
+
useEffect(() => {
|
125
|
+
if (expanding) {
|
126
|
+
setExpanding(null);
|
127
|
+
}
|
128
|
+
}, [treeData]);
|
129
|
+
|
130
|
+
useEffect(() => {
|
131
|
+
if (expanding) {
|
132
|
+
setTimeout(() => {
|
133
|
+
if (expanding) {
|
134
|
+
setExpanding(null);
|
135
|
+
}
|
136
|
+
}, 3000);
|
137
|
+
}
|
138
|
+
}, [expanding]);
|
139
|
+
|
123
140
|
const handleToggleExpand = useCallback(
|
124
|
-
(node: TreeNodeProps, index: number) =>
|
141
|
+
(node: TreeNodeProps, index: number) => {
|
142
|
+
if (expanding) return;
|
143
|
+
setExpanding(node.key);
|
144
|
+
onExpand?.(node, index);
|
145
|
+
},
|
125
146
|
[onExpand]
|
126
147
|
);
|
127
148
|
|
128
149
|
const handleCheckBoxChange = useCallback(
|
129
150
|
(e: any, node: any) => {
|
151
|
+
if (expanding) return;
|
130
152
|
onChange?.(e, node);
|
131
153
|
},
|
132
154
|
[onChange]
|
133
155
|
);
|
134
156
|
|
135
157
|
const handleRowClick = useCallback(
|
136
|
-
(e: any, node: any) =>
|
158
|
+
(e: any, node: any) => {
|
159
|
+
if (expanding) return;
|
160
|
+
onClick?.(e, node);
|
161
|
+
},
|
137
162
|
[onClick]
|
138
163
|
);
|
139
164
|
|
@@ -162,6 +187,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
162
187
|
newNode={newNode}
|
163
188
|
onAddConfirm={onAddConfirm}
|
164
189
|
onAddCancel={onAddCancel}
|
190
|
+
expanding={expanding}
|
165
191
|
/>
|
166
192
|
</table>
|
167
193
|
</div>
|
@@ -169,4 +195,4 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
169
195
|
);
|
170
196
|
};
|
171
197
|
|
172
|
-
export default
|
198
|
+
export default TreeTable;
|
@@ -7,9 +7,10 @@ export const addNewRow = (
|
|
7
7
|
sourceId?: string;
|
8
8
|
error?: string;
|
9
9
|
value?: string;
|
10
|
+
label?: string;
|
10
11
|
}
|
11
12
|
) => {
|
12
|
-
const { sourceId, action, value = '', error = '' } = newNode;
|
13
|
+
const { sourceId, action, value = '', error = '', label } = newNode;
|
13
14
|
|
14
15
|
if (!sourceId || !action) return treeData;
|
15
16
|
|
@@ -28,6 +29,7 @@ export const addNewRow = (
|
|
28
29
|
key: 'new-node',
|
29
30
|
value,
|
30
31
|
error,
|
32
|
+
label,
|
31
33
|
};
|
32
34
|
|
33
35
|
switch (action) {
|
@@ -71,6 +71,8 @@ const data = [
|
|
71
71
|
projectId: 'PJT1006',
|
72
72
|
hierarchy: 1,
|
73
73
|
executionOrder: 2,
|
74
|
+
expanded: false,
|
75
|
+
expandable: true,
|
74
76
|
subContainerCount: 2,
|
75
77
|
resourceCount: 5,
|
76
78
|
totalSubContainerCount: 2,
|
@@ -127,6 +129,8 @@ const data = [
|
|
127
129
|
projectId: 'PJT1006',
|
128
130
|
hierarchy: 2,
|
129
131
|
executionOrder: 2,
|
132
|
+
expanded: false,
|
133
|
+
expandable: true,
|
130
134
|
subContainerCount: 0,
|
131
135
|
resourceCount: 4,
|
132
136
|
totalSubContainerCount: 0,
|
@@ -141,4 +145,4 @@ const data = [
|
|
141
145
|
// Repeat similar patterns to generate 50 entries, modifying hierarchy, executionOrder, and other attributes as needed.
|
142
146
|
];
|
143
147
|
|
144
|
-
export default data;
|
148
|
+
export default data;
|
@@ -1,6 +1,14 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
2
|
import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
|
3
3
|
|
4
|
+
interface NewNode {
|
5
|
+
sourceId?: string;
|
6
|
+
action?: 'addAbove' | 'addBelow' | 'addInside';
|
7
|
+
value?: string;
|
8
|
+
error?: string;
|
9
|
+
label?: string;
|
10
|
+
}
|
11
|
+
|
4
12
|
declare type JSX = ReactNode | JSX.Element[] | string | null;
|
5
13
|
|
6
14
|
export interface TableCellProps {
|
@@ -14,6 +22,7 @@ export interface TableCellProps {
|
|
14
22
|
index?: number;
|
15
23
|
onAddConfirm?: (_name: string) => void;
|
16
24
|
onAddCancel?: () => void;
|
25
|
+
isExpanding?: boolean;
|
17
26
|
}
|
18
27
|
|
19
28
|
export interface TableHeadProps {
|
@@ -28,14 +37,10 @@ export interface TableBodyProps {
|
|
28
37
|
onRowClick: (e: any, node: any) => void;
|
29
38
|
onToggleExpand: (node: TreeNode, _index: number) => void;
|
30
39
|
onCheckBoxChange: (e: any, node: string[] | any) => void;
|
31
|
-
newNode?:
|
32
|
-
sourceId?: string;
|
33
|
-
action?: 'addAbove' | 'addBelow' | 'addInside';
|
34
|
-
value?: string;
|
35
|
-
error?: string;
|
36
|
-
};
|
40
|
+
newNode?: NewNode;
|
37
41
|
onAddConfirm?: (_name: string) => void;
|
38
42
|
onAddCancel?: () => void;
|
43
|
+
expanding?: string | null;
|
39
44
|
}
|
40
45
|
|
41
46
|
export interface TableRowProps {
|
@@ -49,6 +54,7 @@ export interface TableRowProps {
|
|
49
54
|
index?: number;
|
50
55
|
onAddConfirm?: (_name: string) => void;
|
51
56
|
onAddCancel?: () => void;
|
57
|
+
isExpanding?: boolean;
|
52
58
|
}
|
53
59
|
|
54
60
|
export interface Column {
|
@@ -74,12 +80,7 @@ export interface TreeTableProps {
|
|
74
80
|
loadMore?: (_direction?: string) => void;
|
75
81
|
tableBorder?: string;
|
76
82
|
height?: number | string;
|
77
|
-
newNode?:
|
78
|
-
sourceId?: string;
|
79
|
-
action?: 'addAbove' | 'addBelow' | 'addInside';
|
80
|
-
value?: string;
|
81
|
-
error?: string;
|
82
|
-
};
|
83
|
+
newNode?: NewNode;
|
83
84
|
onAddConfirm?: (_name: string) => void;
|
84
85
|
onAddCancel?: () => void;
|
85
86
|
}
|