pixel-react 1.8.2 → 1.8.3
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/.yarn/install-state.gz +0 -0
- package/lib/components/Input/types.d.ts +4 -0
- package/lib/components/LabelEditTextField/types.d.ts +2 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +1 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +1 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +4 -4
- package/lib/index.d.ts +8 -1
- package/lib/index.esm.js +66 -69
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +66 -69
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/formData/ConvertFormDataToObject.d.ts +1 -0
- package/lib/validations/regex.d.ts +7 -1
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +2 -1
- package/src/assets/Themes/DarkTheme.scss +9 -0
- package/src/assets/icons/test_freshers_logo.svg +8 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +9 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +4 -1
- package/src/components/Icon/Icon.stories.tsx +56 -8
- package/src/components/Icon/iconList.ts +3 -1
- package/src/components/Input/Input.stories.tsx +12 -0
- package/src/components/Input/Input.tsx +3 -1
- package/src/components/Input/types.ts +4 -0
- package/src/components/InputWithDropdown/types.ts +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.scss +4 -0
- package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +2 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +14 -10
- package/src/components/LabelEditTextField/types.ts +2 -0
- package/src/components/MachineInputField/MachineInputField.scss +5 -1
- package/src/components/MachineInputField/MachineInputField.tsx +1 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +2 -0
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +65 -57
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +1 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +2 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +1 -0
- package/src/components/SequentialConnectingBranch/types.ts +5 -1
- package/src/components/TableTree/Components/TableCell.tsx +3 -3
- package/src/components/TableTree/TableTree.scss +0 -7
- package/src/components/TableTree/TableTree.tsx +3 -22
- package/src/components/TableTree/types.ts +4 -4
- package/src/utils/formData/ConvertFormDataToObject.stories.tsx +27 -0
- package/src/utils/formData/ConvertFormDataToObject.ts +14 -0
- package/src/utils/getExtension/getExtension.stories.tsx +1 -0
- package/src/validations/regex.stories.tsx +39 -0
- package/src/validations/regex.ts +19 -0
@@ -26,6 +26,7 @@ const Branches = ({
|
|
26
26
|
addInstanceLabel = '',
|
27
27
|
scriptType = '',
|
28
28
|
projectType = '',
|
29
|
+
readOnly,
|
29
30
|
}: BranchesProps) => {
|
30
31
|
const evenRow = rowIndex % 2 === 0;
|
31
32
|
const lastMachineInstance = checkEmpty(
|
@@ -192,72 +193,79 @@ const Branches = ({
|
|
192
193
|
) as MachineType[]
|
193
194
|
}
|
194
195
|
contentReverse={!evenRow}
|
195
|
-
modalId={`${machineInstanceId}-runCount-${
|
196
|
+
modalId={`${machineInstanceId}-runCount-${
|
197
|
+
numberOfRuns - 1
|
198
|
+
}`}
|
196
199
|
onClick={() =>
|
197
200
|
onUpdateAddBrowserInstance(
|
198
201
|
`${machineInstanceId}-runCount-0`,
|
199
|
-
|
202
|
+
machineInstance as ExecutionContext
|
200
203
|
)
|
201
204
|
}
|
202
205
|
/>
|
203
206
|
</div>
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
207
|
+
{!readOnly && (
|
208
|
+
<div
|
209
|
+
className={classNames({
|
210
|
+
'ff-connecting-branch-datalist': evenRow,
|
211
|
+
'ff-connecting-branch-datalist-reverse': !evenRow,
|
212
|
+
})}
|
213
|
+
>
|
214
|
+
{hideDataSet && (
|
215
|
+
<>
|
216
|
+
<div
|
217
|
+
id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
|
218
|
+
className="ff-dataset-list-branch"
|
219
|
+
onClick={() =>
|
220
|
+
onUpdateDataSetList(
|
221
|
+
`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
|
222
|
+
{
|
223
|
+
peVariableSetId: peVariableSetId,
|
224
|
+
globalVariableSetId: globalVariableSetId,
|
225
|
+
testDataSetId: testDataSetId,
|
226
|
+
},
|
227
|
+
true,
|
228
|
+
numberOfRuns,
|
229
|
+
machineInstanceId
|
230
|
+
)
|
231
|
+
}
|
232
|
+
>
|
233
|
+
<Icon
|
234
|
+
name="datalist_icon"
|
235
|
+
className="ff-connecting-icon"
|
236
|
+
/>
|
237
|
+
<Typography
|
238
|
+
className="ff-connecting-text"
|
239
|
+
color="var(--ff-connecting-branch-color)"
|
240
|
+
>
|
241
|
+
Dataset List
|
242
|
+
</Typography>
|
243
|
+
</div>
|
244
|
+
|
245
|
+
<Icon
|
246
|
+
name="plus_icon"
|
247
|
+
className="ff-connecting-icon"
|
248
|
+
onClick={() => onAddRunBrowser(machineInstanceId)}
|
249
|
+
color="var(--ff-connecting-branch-color)"
|
250
|
+
/>
|
251
|
+
<Typography
|
252
|
+
className="ff-connecting-text"
|
253
|
+
color="var(--ff-connecting-branch-color)"
|
254
|
+
>
|
255
|
+
Run
|
256
|
+
</Typography>
|
257
|
+
</>
|
258
|
+
)}
|
259
|
+
<Icon
|
260
|
+
name="delete"
|
261
|
+
className="ff-connecting-delete-icon"
|
214
262
|
onClick={() =>
|
215
|
-
|
216
|
-
`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
|
217
|
-
{
|
218
|
-
peVariableSetId: peVariableSetId,
|
219
|
-
globalVariableSetId: globalVariableSetId,
|
220
|
-
testDataSetId: testDataSetId,
|
221
|
-
},
|
222
|
-
true,
|
223
|
-
numberOfRuns,
|
224
|
-
machineInstanceId
|
225
|
-
)
|
263
|
+
onDeleteBrowser(machineInstanceId, numberOfRuns)
|
226
264
|
}
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
/>
|
232
|
-
<Typography
|
233
|
-
className="ff-connecting-text"
|
234
|
-
color="var(--ff-connecting-branch-color)"
|
235
|
-
>
|
236
|
-
Dataset List
|
237
|
-
</Typography>
|
238
|
-
</div>
|
239
|
-
)}
|
240
|
-
<Icon
|
241
|
-
name="plus_icon"
|
242
|
-
className="ff-connecting-icon"
|
243
|
-
onClick={() => onAddRunBrowser(machineInstanceId)}
|
244
|
-
color="var(--ff-connecting-branch-color)"
|
245
|
-
/>
|
246
|
-
<Typography
|
247
|
-
className="ff-connecting-text"
|
248
|
-
color="var(--ff-connecting-branch-color)"
|
249
|
-
>
|
250
|
-
Run
|
251
|
-
</Typography>
|
252
|
-
<Icon
|
253
|
-
name="delete"
|
254
|
-
className="ff-connecting-delete-icon"
|
255
|
-
onClick={() =>
|
256
|
-
onDeleteBrowser(machineInstanceId, numberOfRuns)
|
257
|
-
}
|
258
|
-
color="var(--ff-connecting-branch-delete-color)"
|
259
|
-
/>
|
260
|
-
</div>
|
265
|
+
color="var(--ff-connecting-branch-delete-color)"
|
266
|
+
/>
|
267
|
+
</div>
|
268
|
+
)}
|
261
269
|
</div>
|
262
270
|
) : (
|
263
271
|
<div className="ff-connecting-branch-browser-button">
|
@@ -18,6 +18,7 @@ const ConnectingBranches = ({
|
|
18
18
|
addInstanceLabel = '',
|
19
19
|
scriptType = '',
|
20
20
|
projectType = 'Web',
|
21
|
+
readOnly = false
|
21
22
|
}: ConnectingBranchesProps) => {
|
22
23
|
const [machineInstance, setMachineInstance] = useState<
|
23
24
|
ExecutionContext[] | {}[]
|
@@ -66,6 +67,7 @@ const ConnectingBranches = ({
|
|
66
67
|
addInstanceLabel={addInstanceLabel}
|
67
68
|
scriptType={scriptType}
|
68
69
|
projectType={projectType}
|
70
|
+
readOnly={readOnly}
|
69
71
|
/>
|
70
72
|
</Fragment>
|
71
73
|
))}
|
@@ -8,7 +8,10 @@ export interface SequentialConnectingBranchProps {
|
|
8
8
|
machineOptionsList?: Option[];
|
9
9
|
onHandleSelect?: (option: Option) => void;
|
10
10
|
onAddBrowserInstance?: (modalId: string) => void;
|
11
|
-
onUpdateAddBrowserInstance: (
|
11
|
+
onUpdateAddBrowserInstance: (
|
12
|
+
modalId: string,
|
13
|
+
machineInstance: ExecutionContext
|
14
|
+
) => void;
|
12
15
|
onDeleteBrowserInstance?: (id: string, runCount: number) => void;
|
13
16
|
onAddRunBrowserInstance?: (machineInstanceId: string) => void;
|
14
17
|
onDeleteMachineInstance?: () => void;
|
@@ -23,6 +26,7 @@ export interface SequentialConnectingBranchProps {
|
|
23
26
|
addInstanceLabel?: string;
|
24
27
|
scriptType?: string;
|
25
28
|
projectType?: string;
|
29
|
+
readOnly?: boolean;
|
26
30
|
}
|
27
31
|
|
28
32
|
// Type for machine information
|
@@ -15,7 +15,7 @@ const renderSpaces = (
|
|
15
15
|
<span
|
16
16
|
key={i}
|
17
17
|
className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
|
18
|
-
isLast && i === level-1 ? 'last-node' : ''
|
18
|
+
isLast && i === level - 1 ? 'last-node' : ''
|
19
19
|
}`}
|
20
20
|
/>
|
21
21
|
))}
|
@@ -51,7 +51,7 @@ const TableCell = React.memo(
|
|
51
51
|
{col.isTree && select === 'checkbox' && (
|
52
52
|
<Checkbox
|
53
53
|
checked={selected.includes(node.id)}
|
54
|
-
onChange={() => onCheckBoxChange(
|
54
|
+
onChange={(e) => onCheckBoxChange(e, node)}
|
55
55
|
/>
|
56
56
|
)}
|
57
57
|
{col.isTree && select === 'radio' && (
|
@@ -59,7 +59,7 @@ const TableCell = React.memo(
|
|
59
59
|
name={node.title}
|
60
60
|
checked={selected.includes(node.id)}
|
61
61
|
value={node.id}
|
62
|
-
onChange={() => onCheckBoxChange(
|
62
|
+
onChange={(e) => onCheckBoxChange(e, node)}
|
63
63
|
/>
|
64
64
|
)}
|
65
65
|
{prepareData(node, col)}
|
@@ -199,13 +199,6 @@
|
|
199
199
|
transition: transform 0.3s ease;
|
200
200
|
}
|
201
201
|
|
202
|
-
tr:after {
|
203
|
-
content: ' ';
|
204
|
-
display: block;
|
205
|
-
visibility: hidden;
|
206
|
-
clear: both;
|
207
|
-
}
|
208
|
-
|
209
202
|
.tree-table-space-container {
|
210
203
|
display: inline-flex;
|
211
204
|
// flex-direction: row-reverse;
|
@@ -4,7 +4,6 @@ import { TreeTableProps } from './types';
|
|
4
4
|
import TableHead from './Components/TableHead';
|
5
5
|
import TableBody from './Components/TableBody';
|
6
6
|
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
|
7
|
-
import getAllChildIds from './Utils/getAllChildIds';
|
8
7
|
import functionCheck from '../../utils/functionCheck/functionCheck';
|
9
8
|
|
10
9
|
const TreeTable: React.FC<TreeTableProps> = ({
|
@@ -41,28 +40,10 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
41
40
|
);
|
42
41
|
|
43
42
|
const handleCheckBoxChange = useCallback(
|
44
|
-
(
|
45
|
-
|
46
|
-
|
47
|
-
if (type === 'radio') {
|
48
|
-
onChange?.('true', [nodeId]);
|
49
|
-
} else {
|
50
|
-
let updatedSelected = [...selected];
|
51
|
-
|
52
|
-
if (!updatedSelected.includes(nodeId)) {
|
53
|
-
const childIds = getAllChildIds(nodeId, treeData);
|
54
|
-
updatedSelected = [...new Set([...updatedSelected, ...childIds])]; // Add children
|
55
|
-
} else {
|
56
|
-
const childIds = getAllChildIds(nodeId, treeData);
|
57
|
-
updatedSelected = updatedSelected.filter(
|
58
|
-
(id) => !childIds.includes(id)
|
59
|
-
);
|
60
|
-
}
|
61
|
-
|
62
|
-
onChange?.('true', updatedSelected);
|
63
|
-
}
|
43
|
+
(e: any, node: any) => {
|
44
|
+
onChange?.(e, node);
|
64
45
|
},
|
65
|
-
[
|
46
|
+
[onChange]
|
66
47
|
);
|
67
48
|
|
68
49
|
const handleRowClick = useCallback(
|
@@ -15,7 +15,7 @@ export interface TableCellProps {
|
|
15
15
|
level: number;
|
16
16
|
selected: string[];
|
17
17
|
select: string | null;
|
18
|
-
onCheckBoxChange: (
|
18
|
+
onCheckBoxChange: (e: any, node: string[] | any) => void;
|
19
19
|
onToggleExpand: (node: any) => void;
|
20
20
|
parentSiblings: boolean[];
|
21
21
|
isLast: boolean | undefined;
|
@@ -32,7 +32,7 @@ export interface TableBodyProps {
|
|
32
32
|
select: string | null;
|
33
33
|
onRowClick: (e: any, node: any) => void;
|
34
34
|
onToggleExpand: (node: any) => void;
|
35
|
-
onCheckBoxChange: (
|
35
|
+
onCheckBoxChange: (e: any, node: string[] | any) => void;
|
36
36
|
}
|
37
37
|
|
38
38
|
export interface TableRowProps {
|
@@ -43,7 +43,7 @@ export interface TableRowProps {
|
|
43
43
|
select: string | null;
|
44
44
|
onRowClick: (e: any, node: any) => void;
|
45
45
|
onToggleExpand: (node: any) => void;
|
46
|
-
onCheckBoxChange: (
|
46
|
+
onCheckBoxChange: (e: any, node: string[] | any) => void;
|
47
47
|
parentSiblings: boolean[];
|
48
48
|
isLast: boolean | undefined;
|
49
49
|
}
|
@@ -65,7 +65,7 @@ export interface TreeTableProps {
|
|
65
65
|
columnsData: Column[];
|
66
66
|
selected?: string[];
|
67
67
|
select?: 'radio' | 'checkbox' | 'none';
|
68
|
-
onChange?: (e: any, node: string[]) => void;
|
68
|
+
onChange?: (e: any, node: string[] | any) => void;
|
69
69
|
onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
|
70
70
|
onExpand?: (_isExpanded: boolean, node: string) => void;
|
71
71
|
loadMore?: (_direction?: string) => void;
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { convertFormDataToObject } from './ConvertFormDataToObject';
|
3
|
+
|
4
|
+
export default {
|
5
|
+
title: 'Utils/convertFormDataToObject',
|
6
|
+
component: convertFormDataToObject,
|
7
|
+
};
|
8
|
+
|
9
|
+
export const Default = () => {
|
10
|
+
const formData = new FormData();
|
11
|
+
formData.append('username', 'Md Imran');
|
12
|
+
formData.append('email', 'im@xyz.com');
|
13
|
+
formData.append('age', '23');
|
14
|
+
|
15
|
+
const result = convertFormDataToObject(formData);
|
16
|
+
|
17
|
+
return (
|
18
|
+
<div>
|
19
|
+
<h3>Test convertFormDataToObject</h3>
|
20
|
+
<pre>
|
21
|
+
Convertion to an Array to show existing FormData:
|
22
|
+
{JSON.stringify(Array.from(formData.entries()), null, 2)}
|
23
|
+
</pre>
|
24
|
+
<pre>Result: {JSON.stringify(result, null, 2)}</pre>
|
25
|
+
</div>
|
26
|
+
);
|
27
|
+
};
|
@@ -0,0 +1,14 @@
|
|
1
|
+
export const convertFormDataToObject = (formData: FormData): Record<string, any> => {
|
2
|
+
const obj: Record<string, any> = {};
|
3
|
+
formData.forEach((value, key) => {
|
4
|
+
if (obj[key]) {
|
5
|
+
// If the key already exists, convert it to an array
|
6
|
+
obj[key] = Array.isArray(obj[key])
|
7
|
+
? [...obj[key], value]
|
8
|
+
: [obj[key], value];
|
9
|
+
} else {
|
10
|
+
obj[key] = value;
|
11
|
+
}
|
12
|
+
});
|
13
|
+
return obj;
|
14
|
+
};
|
@@ -46,6 +46,12 @@ import {
|
|
46
46
|
CURRENCY_GENERIC_REGEX,
|
47
47
|
LINKEDIN_PROFILE_REGEX,
|
48
48
|
TWITTER_HANDLE_REGEX,
|
49
|
+
STEP_GROUP_NAME_REGEX,
|
50
|
+
NLP_DESCRIPTION_REGEX,
|
51
|
+
FILE_NAME_REGEX,
|
52
|
+
ELEMENTS_TRAILING_SPACE_REGEX,
|
53
|
+
ELEMENTS_WHITE_SPACE_REGEX,
|
54
|
+
PARAMETER_ALPHANUMERIC_REGEX,
|
49
55
|
} from './regex';
|
50
56
|
|
51
57
|
export default {
|
@@ -287,8 +293,41 @@ export const Playground = () => {
|
|
287
293
|
regex: TWITTER_HANDLE_REGEX,
|
288
294
|
description: 'Validates Twitter handle (e.g. @username)',
|
289
295
|
},
|
296
|
+
{
|
297
|
+
name: 'STEP_GROUP_NAME_REGEX',
|
298
|
+
regex: STEP_GROUP_NAME_REGEX,
|
299
|
+
description:
|
300
|
+
'Step group name accept only ( ,) ,-,_ special characters(e.g,step-group_one(test))',
|
301
|
+
},
|
302
|
+
{
|
303
|
+
name: 'NLP_DESCRIPTION_REGEX',
|
304
|
+
regex: NLP_DESCRIPTION_REGEX,
|
305
|
+
description:
|
306
|
+
'NLP Description should allow _ and $ only (e.g ,$nlpName_test)',
|
307
|
+
},
|
308
|
+
{
|
309
|
+
name: 'FILE_NAME_REGEX',
|
310
|
+
regex: FILE_NAME_REGEX,
|
311
|
+
description: `It should include a valid file extension (e.g.,'.txt', '.jpg') without special characters like '@' or multiple dots after the extension.`,
|
312
|
+
},
|
313
|
+
{
|
314
|
+
name: 'ELEMENTS_TRAILING_SPACE_REGEX',
|
315
|
+
regex: ELEMENTS_TRAILING_SPACE_REGEX,
|
316
|
+
description: `Element Name should not have space in the initial and end.`,
|
317
|
+
},
|
318
|
+
{
|
319
|
+
name: 'ELEMENTS_WHITE_SPACE_REGEX',
|
320
|
+
regex: ELEMENTS_WHITE_SPACE_REGEX,
|
321
|
+
description: `Elements name should not have only white space.`,
|
322
|
+
},
|
323
|
+
{
|
324
|
+
name: 'PARAMETER_ALPHANUMERIC_REGEX,',
|
325
|
+
regex: PARAMETER_ALPHANUMERIC_REGEX,
|
326
|
+
description: `Parameter name should be alphanumeric.`,
|
327
|
+
},
|
290
328
|
];
|
291
329
|
|
330
|
+
|
292
331
|
const validateInput = () => {
|
293
332
|
const validator = validators.find(
|
294
333
|
(validator) => validator.name === selectedRegex
|
package/src/validations/regex.ts
CHANGED
@@ -145,6 +145,19 @@ const LINKEDIN_PROFILE_REGEX =
|
|
145
145
|
// Twitter Handle Validation
|
146
146
|
const TWITTER_HANDLE_REGEX = /^@?([a-zA-Z0-9_]{1,15})$/;
|
147
147
|
|
148
|
+
const STEP_GROUP_NAME_REGEX = /^[a-zA-Z0-9()\-_ ]+$/;
|
149
|
+
|
150
|
+
const NLP_DESCRIPTION_REGEX = /^[a-zA-Z0-9_$\s]*$/;
|
151
|
+
|
152
|
+
const FILE_NAME_REGEX = /\.([^.@]+)$/;
|
153
|
+
|
154
|
+
const ELEMENTS_TRAILING_SPACE_REGEX = /^\S.*\S$/;
|
155
|
+
|
156
|
+
const ELEMENTS_WHITE_SPACE_REGEX = /.*\S.*/;
|
157
|
+
|
158
|
+
const PARAMETER_ALPHANUMERIC_REGEX =
|
159
|
+
/^[-_A-Za-z0-9 ]*$|^[-_A-Za-z0-9 ][A-Za-z0-9 ]*[-_A-Za-z-_]$/;
|
160
|
+
|
148
161
|
export {
|
149
162
|
EMAIL_REGEX,
|
150
163
|
URL_REGEX,
|
@@ -191,4 +204,10 @@ export {
|
|
191
204
|
CURRENCY_GENERIC_REGEX,
|
192
205
|
LINKEDIN_PROFILE_REGEX,
|
193
206
|
TWITTER_HANDLE_REGEX,
|
207
|
+
STEP_GROUP_NAME_REGEX,
|
208
|
+
NLP_DESCRIPTION_REGEX,
|
209
|
+
FILE_NAME_REGEX,
|
210
|
+
ELEMENTS_TRAILING_SPACE_REGEX,
|
211
|
+
ELEMENTS_WHITE_SPACE_REGEX,
|
212
|
+
PARAMETER_ALPHANUMERIC_REGEX,
|
194
213
|
};
|