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.
Files changed (42) hide show
  1. package/lib/ComponentProps/TreeNodeProps.d.ts +3 -0
  2. package/lib/components/AppHeader/types.d.ts +1 -0
  3. package/lib/components/ConnectingBranch/types.d.ts +2 -0
  4. package/lib/components/TableTree/Components/AddModule/AddModule.d.ts +2 -1
  5. package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
  6. package/lib/components/TableTree/Components/TableCell.d.ts +2 -2
  7. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  8. package/lib/components/TableTree/TableTree.d.ts +2 -2
  9. package/lib/components/TableTree/Utils/addNewRow.d.ts +1 -0
  10. package/lib/components/TableTree/data.d.ts +34 -0
  11. package/lib/components/TableTree/types.d.ts +12 -12
  12. package/lib/index.d.ts +15 -8
  13. package/lib/index.esm.js +237 -134
  14. package/lib/index.esm.js.map +1 -1
  15. package/lib/index.js +237 -134
  16. package/lib/index.js.map +1 -1
  17. package/package.json +1 -1
  18. package/src/ComponentProps/TreeNodeProps.ts +3 -0
  19. package/src/assets/icons/spinner.svg +42 -0
  20. package/src/components/AppHeader/AppHeader.scss +7 -1
  21. package/src/components/AppHeader/AppHeader.stories.tsx +1 -0
  22. package/src/components/AppHeader/AppHeader.tsx +8 -1
  23. package/src/components/AppHeader/types.ts +1 -0
  24. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +36 -27
  25. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +10 -0
  26. package/src/components/ConnectingBranch/ConnectingBranch.tsx +36 -23
  27. package/src/components/ConnectingBranch/types.ts +2 -0
  28. package/src/components/Select/Select.stories.tsx +34 -10
  29. package/src/components/Select/Select.tsx +1 -0
  30. package/src/components/Select/components/Dropdown.tsx +24 -21
  31. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +19 -14
  32. package/src/components/TableTree/Components/AddModule/AddModule.scss +73 -1
  33. package/src/components/TableTree/Components/AddModule/AddModule.tsx +50 -14
  34. package/src/components/TableTree/Components/TableBody.tsx +2 -0
  35. package/src/components/TableTree/Components/TableCell.tsx +125 -75
  36. package/src/components/TableTree/Components/TableRow.tsx +2 -0
  37. package/src/components/TableTree/TableTree.scss +14 -2
  38. package/src/components/TableTree/TableTree.stories.tsx +26 -7
  39. package/src/components/TableTree/TableTree.tsx +31 -5
  40. package/src/components/TableTree/Utils/addNewRow.ts +3 -1
  41. package/src/components/TableTree/data.ts +5 -1
  42. 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="add-module-container">
21
- <input
22
- type="text"
23
- className="add-module-input"
24
- onChange={(e) => setText(e.target.value)}
25
- value={text}
26
- />
27
- <Icon
28
- className="icons"
29
- name="update_icon"
30
- onClick={() => onConfirm && onConfirm(text)}
31
- />
32
- <Icon className="icons" name="close" onClick={onCancel} />
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
- }: TableCellProps) => (
54
- <td
55
- className={`ff-table-tree-td ${
56
- col.isTree && node.container ? 'folder' : ''
57
- }`}
58
- >
59
- {col.isTree &&
60
- renderSpaces(
61
- node.hierarchy + 1,
62
- node.parentSiblings,
63
- node.lastResource,
64
- node.container
65
- )}
66
- <div className="tree-title-container">
67
- {col.isTree && (
68
- <span
69
- className={`tree-table-space-block last-block ${
70
- node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'
71
- } ${node.container ? '' : 'no-folder'}`}
72
- onClick={() => onToggleExpand(node)}
73
- >
74
- {node.container &&
75
- node?.resourceCount + node?.subContainerCount > 0 && (
76
- <span onClick={() => onToggleExpand(node)}>
77
- {' '}
78
- <Arrow />
79
- </span>
80
- )}
81
- </span>
82
- )}
83
- <span
84
- className={`tree-table-td-content ${
85
- col.isTree && node.container ? 'folder' : ''
86
- }`}
87
- >
88
- {!node?.isNewNode && (
89
- <>
90
- {col.isTree && select === 'checkbox' && (
91
- <Checkbox
92
- checked={node?.checked || false}
93
- partial={node?.checked === 'partial'}
94
- onChange={(e) => onCheckBoxChange(e, node)}
95
- />
96
- )}
97
- {col.isTree && select === 'radio' && (
98
- <RadioButton
99
- name={node.title}
100
- checked={selected.includes(node.key)}
101
- value={node.key}
102
- onChange={(e) => onCheckBoxChange(e, node)}
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
- {node.isNewNode && col.isTree ? (
108
- <AddModule
109
- onCancel={onAddCancel}
110
- onConfirm={onAddConfirm}
111
- error={node?.error || ''}
112
- value={node.value}
113
- />
114
- ) : (
115
- <span className="tree-table-td-content-text">
116
- {prepareData(node, col)}
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
- </span>
120
- </div>
121
- {col.actions && (
122
- <div className={`table-tree-row-action`}>
123
- {(() => {
124
- return col.actions(node, treeRowRef);
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
- </td>
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: 400px !important;
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: '400px',
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={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={(nodes: string[]) => {
243
- setSelected(nodes);
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, memo, useEffect, useRef } from 'react';
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 = { action: 'addInside', sourceId: 'PAG1013', value: '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) => onExpand?.(node, index),
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) => onClick?.(e, node),
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 memo(TreeTable);
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
  }