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.
@@ -1,13 +1,14 @@
1
1
  import { useState } from 'react';
2
- import { getTreeDetails, TreeNode, TreeDetailsResult } from './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: TreeNode[] = [
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<TreeNode[]>(initialData);
69
- const [newData, setNewData] = useState<TreeNode[]>([]);
70
- const [action, setAction] = useState<'above' | 'below' | 'expand' | 'collapse' | 'start'>('below');
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
- const treeDetails = getTreeDetails(action, data, newData, index);
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(e.target.value as 'above' | 'below' | 'expand' | 'collapse' | 'start')
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
- {(action === 'expand' || action === 'collapse') && (
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(e.target.value ? parseInt(e.target.value, 10) : undefined)
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: 'above' | 'below' | 'expand' | 'collapse' | 'start',
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
- if (typeof index === 'number') {
32
- treeDataList = [...oldData.slice(0, index), ...newData];
33
- } else {
54
+ const actionIndex = getIndex();
55
+ if (actionIndex === undefined) {
34
56
  throw new Error(
35
- "Index is required for 'expand' or 'collapse' actions."
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,