pixel-react 1.10.6 → 1.10.8
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/components/MenuOption/types.d.ts +1 -1
- package/lib/index.d.ts +2 -2
- package/lib/index.esm.js +131 -69
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +131 -69
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getAnchorElement/getAnchorElement.d.ts +1 -0
- package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/MenuOption/MenuOption.scss +4 -0
- package/src/components/MenuOption/MenuOption.stories.tsx +2 -2
- package/src/components/MenuOption/MenuOption.tsx +72 -60
- package/src/components/MenuOption/types.ts +1 -1
- package/src/components/Table/Table.scss +15 -15
- package/src/components/Table/Table.tsx +39 -41
- package/src/components/TableTree/Components/TableBody.tsx +0 -1
- package/src/components/TableTree/TableTree.scss +1 -0
- package/src/utils/getAnchorElement/getAnchorElement.ts +7 -0
- package/src/utils/getTreeDetails/getTreeDetails.stories.tsx +59 -9
- package/src/utils/getTreeDetails/getTreeDetails.ts +59 -7
@@ -1,13 +1,14 @@
|
|
1
1
|
import { useState } from 'react';
|
2
|
-
import { getTreeDetails,
|
2
|
+
import { getTreeDetails, TreeDetailsResult } from './getTreeDetails';
|
3
3
|
import React from 'react';
|
4
|
+
import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
|
4
5
|
|
5
6
|
export default {
|
6
7
|
title: 'Utils/getTreeDetails',
|
7
8
|
component: getTreeDetails,
|
8
9
|
};
|
9
10
|
|
10
|
-
const initialData:
|
11
|
+
const initialData: TreeNodeProps[] = [
|
11
12
|
{
|
12
13
|
createdBy: 'USR4705',
|
13
14
|
modifiedBy: '--',
|
@@ -65,15 +66,31 @@ const initialData: TreeNode[] = [
|
|
65
66
|
];
|
66
67
|
|
67
68
|
export const InteractivePlayground = () => {
|
68
|
-
const [data, setData] = useState<
|
69
|
-
const [newData, setNewData] = useState<
|
70
|
-
const [action, setAction] = useState<
|
69
|
+
const [data, setData] = useState<TreeNodeProps[]>(initialData);
|
70
|
+
const [newData, setNewData] = useState<TreeNodeProps[]>([]);
|
71
|
+
const [action, setAction] = useState<
|
72
|
+
| 'above'
|
73
|
+
| 'below'
|
74
|
+
| 'expand'
|
75
|
+
| 'collapse'
|
76
|
+
| 'start'
|
77
|
+
| 'addAbove'
|
78
|
+
| 'addBelow'
|
79
|
+
>('below');
|
71
80
|
const [index, setIndex] = useState<number | undefined>(undefined);
|
81
|
+
const [sourceId, setSourceId] = useState<string | undefined>(undefined); // State for sourceId
|
72
82
|
const [result, setResult] = useState<TreeDetailsResult | null>(null);
|
73
83
|
|
74
84
|
const handleGetTreeDetails = () => {
|
75
85
|
try {
|
76
|
-
|
86
|
+
// If sourceId exists, we pass it, otherwise we pass the index
|
87
|
+
const treeDetails = getTreeDetails(
|
88
|
+
action,
|
89
|
+
data,
|
90
|
+
newData,
|
91
|
+
index,
|
92
|
+
sourceId
|
93
|
+
);
|
77
94
|
setData(treeDetails.treeDataList);
|
78
95
|
setResult(treeDetails);
|
79
96
|
} catch (error) {
|
@@ -91,7 +108,16 @@ export const InteractivePlayground = () => {
|
|
91
108
|
id="action"
|
92
109
|
value={action}
|
93
110
|
onChange={(e) =>
|
94
|
-
setAction(
|
111
|
+
setAction(
|
112
|
+
e.target.value as
|
113
|
+
| 'above'
|
114
|
+
| 'below'
|
115
|
+
| 'expand'
|
116
|
+
| 'collapse'
|
117
|
+
| 'start'
|
118
|
+
| 'addAbove'
|
119
|
+
| 'addBelow'
|
120
|
+
)
|
95
121
|
}
|
96
122
|
>
|
97
123
|
<option value="above">Above</option>
|
@@ -99,10 +125,32 @@ export const InteractivePlayground = () => {
|
|
99
125
|
<option value="expand">Expand</option>
|
100
126
|
<option value="collapse">Collapse</option>
|
101
127
|
<option value="start">Start</option>
|
128
|
+
<option value="addAbove">Add Above</option>
|
129
|
+
<option value="addBelow">Add Below</option>
|
102
130
|
</select>
|
103
131
|
</div>
|
104
132
|
|
105
|
-
{
|
133
|
+
{/* Input for sourceId, if action requires it */}
|
134
|
+
{(action === 'expand' ||
|
135
|
+
action === 'collapse' ||
|
136
|
+
action === 'addAbove' ||
|
137
|
+
action === 'addBelow') && (
|
138
|
+
<div>
|
139
|
+
<label htmlFor="sourceId">
|
140
|
+
Source ID (for expand/collapse/addAbove/addBelow):
|
141
|
+
</label>
|
142
|
+
<input
|
143
|
+
type="text"
|
144
|
+
id="sourceId"
|
145
|
+
value={sourceId || ''}
|
146
|
+
onChange={(e) => setSourceId(e.target.value)}
|
147
|
+
placeholder="Enter Source ID"
|
148
|
+
/>
|
149
|
+
</div>
|
150
|
+
)}
|
151
|
+
|
152
|
+
{/* Input for index, for actions requiring index */}
|
153
|
+
{(action === 'expand' || action === 'collapse') && !sourceId && (
|
106
154
|
<div>
|
107
155
|
<label htmlFor="index">Index (for expand/collapse):</label>
|
108
156
|
<input
|
@@ -110,7 +158,9 @@ export const InteractivePlayground = () => {
|
|
110
158
|
id="index"
|
111
159
|
value={index !== undefined ? index : ''}
|
112
160
|
onChange={(e) =>
|
113
|
-
setIndex(
|
161
|
+
setIndex(
|
162
|
+
e.target.value ? parseInt(e.target.value, 10) : undefined
|
163
|
+
)
|
114
164
|
}
|
115
165
|
disabled={action !== 'expand' && action !== 'collapse'}
|
116
166
|
/>
|
@@ -11,14 +11,37 @@ export interface TreeDetailsResult {
|
|
11
11
|
}
|
12
12
|
|
13
13
|
export const getTreeDetails = (
|
14
|
-
action:
|
14
|
+
action:
|
15
|
+
| 'above'
|
16
|
+
| 'below'
|
17
|
+
| 'expand'
|
18
|
+
| 'collapse'
|
19
|
+
| 'start'
|
20
|
+
| 'addAbove'
|
21
|
+
| 'addBelow',
|
15
22
|
oldData: TreeNode[],
|
16
23
|
newData: TreeNode[],
|
17
|
-
index?: number
|
24
|
+
index?: number,
|
25
|
+
sourceId?: string
|
18
26
|
): TreeDetailsResult => {
|
19
27
|
let treeDataList: TreeNode[];
|
20
28
|
let root: TreeNode | undefined = undefined;
|
21
29
|
|
30
|
+
const findIndexByKey = (data: TreeNode[], key: string): number => {
|
31
|
+
return data.findIndex((node) => node.key === key);
|
32
|
+
};
|
33
|
+
|
34
|
+
const getIndex = (): number | undefined => {
|
35
|
+
if (sourceId) {
|
36
|
+
const indexByKey = findIndexByKey(oldData, sourceId);
|
37
|
+
if (indexByKey === -1) {
|
38
|
+
throw new Error(`Key "${sourceId}" not found in oldData.`);
|
39
|
+
}
|
40
|
+
return indexByKey;
|
41
|
+
}
|
42
|
+
return index; // Use index if sourceId is not provided
|
43
|
+
};
|
44
|
+
|
22
45
|
switch (action) {
|
23
46
|
case 'above':
|
24
47
|
treeDataList = [...newData, ...oldData].slice(0, 40);
|
@@ -28,13 +51,39 @@ export const getTreeDetails = (
|
|
28
51
|
break;
|
29
52
|
case 'expand':
|
30
53
|
case 'collapse':
|
31
|
-
|
32
|
-
|
33
|
-
} else {
|
54
|
+
const actionIndex = getIndex();
|
55
|
+
if (actionIndex === undefined) {
|
34
56
|
throw new Error(
|
35
|
-
"
|
57
|
+
"Both sourceId and index are required for 'expand' or 'collapse' actions."
|
36
58
|
);
|
37
59
|
}
|
60
|
+
treeDataList = [...oldData.slice(0, actionIndex), ...newData];
|
61
|
+
break;
|
62
|
+
case 'addAbove':
|
63
|
+
const addAboveIndex = getIndex();
|
64
|
+
if (addAboveIndex === undefined) {
|
65
|
+
throw new Error(
|
66
|
+
"Both sourceId and index are required for 'addAbove' action."
|
67
|
+
);
|
68
|
+
}
|
69
|
+
treeDataList = [
|
70
|
+
...oldData.slice(0, addAboveIndex),
|
71
|
+
...newData,
|
72
|
+
...oldData.slice(addAboveIndex),
|
73
|
+
];
|
74
|
+
break;
|
75
|
+
case 'addBelow':
|
76
|
+
const addBelowIndex = getIndex();
|
77
|
+
if (addBelowIndex === undefined) {
|
78
|
+
throw new Error(
|
79
|
+
"Both sourceId and index are required for 'addBelow' action."
|
80
|
+
);
|
81
|
+
}
|
82
|
+
treeDataList = [
|
83
|
+
...oldData.slice(0, addBelowIndex + 1),
|
84
|
+
...newData,
|
85
|
+
...oldData.slice(addBelowIndex + 1),
|
86
|
+
];
|
38
87
|
break;
|
39
88
|
case 'start':
|
40
89
|
if (!checkEmpty(newData)) {
|
@@ -53,7 +102,10 @@ export const getTreeDetails = (
|
|
53
102
|
}
|
54
103
|
|
55
104
|
const firstNode = treeDataList[0] || root!;
|
56
|
-
const lastNode = treeDataList[treeDataList.length - 1]
|
105
|
+
const lastNode = treeDataList[treeDataList.length - 1] || {
|
106
|
+
lastResource: true,
|
107
|
+
key: '',
|
108
|
+
};
|
57
109
|
|
58
110
|
return {
|
59
111
|
treeDataList,
|