pixel-react 1.10.9 → 1.10.10-0
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/AddResourceButton/AddResourceButton.d.ts +1 -1
- package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
- package/lib/components/AddResourceButton/type.d.ts +9 -0
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +62 -5
- package/lib/components/InputWithDropdown/types.d.ts +2 -0
- package/lib/components/variableSuggestionInputDropDown/OptionsDropdown.d.ts +5 -0
- package/lib/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.d.ts +4 -0
- package/lib/components/variableSuggestionInputDropDown/index.d.ts +1 -0
- package/lib/components/variableSuggestionInputDropDown/types.d.ts +150 -0
- package/lib/index.d.ts +204 -13
- package/lib/index.esm.js +136 -109
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +136 -109
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/icons/module_icon.svg +3 -0
- package/src/components/AddResourceButton/AddResourceButton.stories.tsx +32 -16
- package/src/components/AddResourceButton/AddResourceButton.tsx +2 -0
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +2 -1
- package/src/components/AddResourceButton/type.ts +9 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +1 -1
- package/src/components/AppHeader/AppHeader.scss +1 -1
- package/src/components/Editor/VariableDropdown.scss +0 -1
- package/src/components/Editor/VariableDropdown.tsx +9 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +122 -54
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +0 -1
- package/src/components/Excel/ExcelFile.stories.tsx +1 -0
- package/src/components/FileDropzone/Dropzone.tsx +2 -1
- package/src/components/FileDropzone/FileDropzone.tsx +3 -5
- package/src/components/Icon/iconList.ts +6 -4
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +6 -2
- package/src/components/InputWithDropdown/types.ts +2 -0
- package/src/components/Select/components/Dropdown.scss +1 -0
- package/src/components/TableTree/TableTree.stories.tsx +26 -12
- package/src/components/TableTree/TableTree.tsx +47 -23
- package/src/components/TableTree/data.ts +1 -1
- package/src/components/variableSuggestionInputDropDown/OptionsDropdown.tsx +51 -0
- package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.scss +18 -0
- package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.stories.tsx +155 -0
- package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.tsx +244 -0
- package/src/components/variableSuggestionInputDropDown/index.ts +1 -0
- package/src/components/variableSuggestionInputDropDown/types.ts +166 -0
- package/src/index.ts +2 -0
@@ -558,7 +558,6 @@ export function edit(state: Types.StoreState): Types.StoreState {
|
|
558
558
|
return { ...state, mode: 'edit' };
|
559
559
|
}
|
560
560
|
|
561
|
-
|
562
561
|
const canClearCell = (cell: Types.CellBase | undefined) =>
|
563
562
|
cell && !cell.readOnly;
|
564
563
|
const clearCell = (cell: Types.CellBase | undefined) => {
|
@@ -34,6 +34,7 @@ const Dropzone: FC<DroppableProps> = ({
|
|
34
34
|
'ff-file-dropzone--active': isDragActive,
|
35
35
|
'ff-file-dropzone--webservice-file': isWebServiceFile,
|
36
36
|
'ff-file-dropzone--webservice-container': isWebServiceFileDropZone,
|
37
|
+
'ff-disable-file-dropzone-wrapper': isDisable,
|
37
38
|
})}
|
38
39
|
style={{ height: height }}
|
39
40
|
>
|
@@ -88,7 +89,7 @@ const Dropzone: FC<DroppableProps> = ({
|
|
88
89
|
<Button
|
89
90
|
variant="primary"
|
90
91
|
label={buttonLabel}
|
91
|
-
className=
|
92
|
+
className="choose-file-btn"
|
92
93
|
disabled={isDisable}
|
93
94
|
>
|
94
95
|
<input
|
@@ -88,8 +88,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
88
88
|
useEffect(() => {
|
89
89
|
if (!checkEmpty(acceptedFiles) && setSelectedFile) {
|
90
90
|
setSelectedFile(acceptedFiles[0] || null);
|
91
|
-
}
|
92
|
-
}, [acceptedFiles, setSelectedFile]);
|
91
|
+
}
|
92
|
+
}, [acceptedFiles, setSelectedFile]);
|
93
93
|
|
94
94
|
const rejectedFilesList = useMemo(
|
95
95
|
() =>
|
@@ -107,9 +107,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
107
107
|
|
108
108
|
return (
|
109
109
|
<div
|
110
|
-
className={classNames('ff-file-dropzone-wrapper'
|
111
|
-
'ff-disable-file-dropzone-wrapper': isDisable,
|
112
|
-
})}
|
110
|
+
className={classNames('ff-file-dropzone-wrapper')}
|
113
111
|
style={{ width: `${width}px` }}
|
114
112
|
>
|
115
113
|
<Dropzone
|
@@ -287,8 +287,9 @@ import FileColored from '../../assets/icons/file_colored.svg?react';
|
|
287
287
|
import JiraColored from '../../assets/icons/jira_colored.svg?react';
|
288
288
|
import Screenshot from '../../assets/icons/screenshot.svg?react';
|
289
289
|
import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
|
290
|
-
import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
|
291
|
-
import SauseLabPrimaryIcon from
|
290
|
+
import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react';
|
291
|
+
import SauseLabPrimaryIcon from '../../assets/icons/sause_lab_icon.svg?react';
|
292
|
+
import ModuleIcon from '../../assets/icons/module_icon.svg?react';
|
292
293
|
|
293
294
|
import totalDefectsStatusIcon from '../../assets/icons/total_defects_status_icon.svg?react';
|
294
295
|
import openDefectsStatusIcon from '../../assets/icons/open_defects_icon.svg?react';
|
@@ -576,13 +577,14 @@ Components['file_colored'] = FileColored;
|
|
576
577
|
Components['jira_colored'] = JiraColored;
|
577
578
|
Components['screenshot'] = Screenshot;
|
578
579
|
Components['delete_filled'] = DeleteFilled;
|
579
|
-
Components['primary_calendar_icon'] = PrimaryCalendarIcon
|
580
|
-
Components['sause_lab_icon'] = SauseLabPrimaryIcon
|
580
|
+
Components['primary_calendar_icon'] = PrimaryCalendarIcon;
|
581
|
+
Components['sause_lab_icon'] = SauseLabPrimaryIcon;
|
581
582
|
|
582
583
|
Components['total_defects_status_icon'] = totalDefectsStatusIcon;
|
583
584
|
Components['open_defects_status_icon'] = openDefectsStatusIcon;
|
584
585
|
Components['closed_defects_status_icon'] = closedDefectsStatusIcon;
|
585
586
|
Components['quality_score_status_icon'] = qualityScoreStatusIcon;
|
586
587
|
Components['defect_density_status_icon'] = defectDensityStatusIcon;
|
588
|
+
Components['module_icon'] = ModuleIcon;
|
587
589
|
|
588
590
|
export default Components;
|
@@ -20,7 +20,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
|
|
20
20
|
optionsList,
|
21
21
|
selectedOption = { label: '', value: '' },
|
22
22
|
autoComplete = 'off',
|
23
|
-
onDropdownChangeHandler = () => {},
|
23
|
+
onDropdownChangeHandler = () => { },
|
24
24
|
onInputChangeHandler,
|
25
25
|
onInputBlurHandler,
|
26
26
|
onClick,
|
@@ -29,6 +29,8 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
|
|
29
29
|
optionsRequired = true,
|
30
30
|
dropdownPosition = 'right',
|
31
31
|
type = 'text',
|
32
|
+
leftDropDownPositionZindex,
|
33
|
+
rightDropDownPositionZindex
|
32
34
|
},
|
33
35
|
ref
|
34
36
|
) => {
|
@@ -58,7 +60,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
|
|
58
60
|
showBorder={false}
|
59
61
|
onChange={onDropdownChangeHandler}
|
60
62
|
disabled={disabled || !optionsRequired}
|
61
|
-
optionZIndex={
|
63
|
+
optionZIndex={leftDropDownPositionZindex}
|
62
64
|
optionsRequired={optionsRequired}
|
63
65
|
className={classNames('ff-floating-dropdown', {
|
64
66
|
'ff-floating-dropdown--disabled': !!disabled,
|
@@ -113,6 +115,8 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
|
|
113
115
|
selectedOption={selectedOption}
|
114
116
|
showLabel={false}
|
115
117
|
showBorder={false}
|
118
|
+
optionZIndex={rightDropDownPositionZindex
|
119
|
+
}
|
116
120
|
onChange={onDropdownChangeHandler}
|
117
121
|
disabled={disabled || !optionsRequired}
|
118
122
|
optionsRequired={optionsRequired}
|
@@ -4,7 +4,7 @@ import Button from '../Button';
|
|
4
4
|
import treeData from './data';
|
5
5
|
import Icon from '../Icon/Icon';
|
6
6
|
import './TableTreeStories.scss';
|
7
|
-
import React, { useState } from 'react';
|
7
|
+
import React, { ReactNode, useState } from 'react';
|
8
8
|
import AddResourceButton from '../AddResourceButton/AddResourceButton';
|
9
9
|
|
10
10
|
const meta: Meta<typeof TableTree> = {
|
@@ -37,7 +37,7 @@ const colData = [
|
|
37
37
|
menuOptions: [
|
38
38
|
{
|
39
39
|
label: 'Module',
|
40
|
-
value: '
|
40
|
+
value: 'add_module_top',
|
41
41
|
icon: 'module_icon',
|
42
42
|
disable: false,
|
43
43
|
},
|
@@ -48,32 +48,38 @@ const colData = [
|
|
48
48
|
menuOptions: [
|
49
49
|
{
|
50
50
|
label: 'Sub Module',
|
51
|
-
value: '
|
51
|
+
value: 'add_module_sibling',
|
52
52
|
icon: 'module_icon',
|
53
53
|
disable: false,
|
54
54
|
},
|
55
55
|
{
|
56
56
|
label: 'Automation Script',
|
57
|
-
value: '
|
58
|
-
icon: '
|
57
|
+
value: 'add_Automation_script_sibling',
|
58
|
+
icon: 'automation_testcase',
|
59
59
|
disable: false,
|
60
60
|
},
|
61
61
|
{
|
62
62
|
label: 'Manual Test Case',
|
63
|
-
value: '
|
64
|
-
icon: '
|
63
|
+
value: 'add_manual_test_case_sibling',
|
64
|
+
icon: 'manual_testcase',
|
65
65
|
disable: false,
|
66
66
|
},
|
67
67
|
{
|
68
68
|
label: 'Pre / Post Condition',
|
69
|
-
value: '
|
70
|
-
icon: '
|
69
|
+
value: 'add_pre_post_condition_sibling',
|
70
|
+
icon: 'pre_post_condition',
|
71
71
|
disable: false,
|
72
72
|
},
|
73
73
|
{
|
74
74
|
label: 'Authorization',
|
75
|
-
value: '
|
76
|
-
icon: '
|
75
|
+
value: 'add_authorization_sibling',
|
76
|
+
icon: 'authorization_icon',
|
77
|
+
disable: false,
|
78
|
+
},
|
79
|
+
{
|
80
|
+
label: 'Data Provider',
|
81
|
+
value: 'data_provider_sibling',
|
82
|
+
icon: 'data_provider',
|
77
83
|
disable: false,
|
78
84
|
},
|
79
85
|
],
|
@@ -83,13 +89,19 @@ const colData = [
|
|
83
89
|
menuOptions: [
|
84
90
|
{
|
85
91
|
label: 'Sub Module',
|
86
|
-
value: '
|
92
|
+
value: 'sub_module_down',
|
87
93
|
icon: 'module_icon',
|
88
94
|
disable: false,
|
89
95
|
},
|
90
96
|
],
|
91
97
|
},
|
92
98
|
]}
|
99
|
+
onMenuOptionClick={(option: {
|
100
|
+
label: string | ReactNode;
|
101
|
+
value: any;
|
102
|
+
}) => {
|
103
|
+
alert(`Option clicked: ${option.label}, Value: ${option.value}`);
|
104
|
+
}}
|
93
105
|
/>,
|
94
106
|
];
|
95
107
|
},
|
@@ -186,6 +198,7 @@ export const Default: Story = {
|
|
186
198
|
onClick: (e, data) => {
|
187
199
|
console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
|
188
200
|
},
|
201
|
+
height: 100,
|
189
202
|
},
|
190
203
|
};
|
191
204
|
|
@@ -194,6 +207,7 @@ export const ControlledCheckBox: Story = {
|
|
194
207
|
const [selected, setSelected] = useState<string[]>([]);
|
195
208
|
return (
|
196
209
|
<TableTree
|
210
|
+
height={100}
|
197
211
|
onExpand={(node, index) => {
|
198
212
|
console.log(node, index);
|
199
213
|
}}
|
@@ -4,6 +4,7 @@ import { TreeTableProps } from './types';
|
|
4
4
|
import TableHead from './Components/TableHead';
|
5
5
|
import TableBody from './Components/TableBody';
|
6
6
|
import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
|
7
|
+
import { throttle } from '../../utils/throttle/throttle';
|
7
8
|
|
8
9
|
const TreeTable: React.FC<TreeTableProps> = ({
|
9
10
|
treeData,
|
@@ -21,6 +22,14 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
21
22
|
onAddCancel = () => {},
|
22
23
|
}) => {
|
23
24
|
const observerRef = useRef<IntersectionObserver | null>(null);
|
25
|
+
const triggeredNodesRef = useRef<Set<string>>(new Set()); // Track already triggered nodes
|
26
|
+
|
27
|
+
// Throttled version of loadMore
|
28
|
+
const throttledLoadMore = useRef(
|
29
|
+
throttle((direction: string) => {
|
30
|
+
loadMore(direction);
|
31
|
+
}, 300)
|
32
|
+
).current;
|
24
33
|
|
25
34
|
useEffect(() => {
|
26
35
|
const scrollContainer = document.getElementById(
|
@@ -29,36 +38,51 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
29
38
|
const firstNode = document.getElementById('ff-table-tree-first-node');
|
30
39
|
const lastNode = document.getElementById('ff-table-tree-last-node');
|
31
40
|
|
32
|
-
// Exit early if
|
33
|
-
if (!scrollContainer || !firstNode || !lastNode || !treeData?.length)
|
41
|
+
// Exit early if essential elements or data are missing
|
42
|
+
if (!scrollContainer || !firstNode || !lastNode || !treeData?.length)
|
34
43
|
return;
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
+
|
45
|
+
const isLastResourceAbove = treeData[0]?.lastResource;
|
46
|
+
const isLastResourceBelow = treeData[treeData.length - 1]?.lastResource;
|
47
|
+
|
48
|
+
if (isLastResourceAbove && isLastResourceBelow) return;
|
49
|
+
|
50
|
+
const observerCallback = (entries: IntersectionObserverEntry[]) => {
|
51
|
+
entries.forEach((entry) => {
|
52
|
+
const nodeId = entry.target.id;
|
53
|
+
const direction =
|
54
|
+
nodeId === 'ff-table-tree-last-node' ? 'below' : 'above';
|
55
|
+
|
56
|
+
if (entry.isIntersecting) {
|
57
|
+
if (
|
58
|
+
!triggeredNodesRef.current.has(nodeId) &&
|
59
|
+
((direction === 'above' && !isLastResourceAbove) ||
|
60
|
+
(direction === 'below' && !isLastResourceBelow))
|
61
|
+
) {
|
62
|
+
triggeredNodesRef.current.add(nodeId);
|
63
|
+
throttledLoadMore(direction);
|
44
64
|
}
|
45
|
-
}
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
65
|
+
} else {
|
66
|
+
// Remove node from triggered set when it goes out of view
|
67
|
+
triggeredNodesRef.current.delete(nodeId);
|
68
|
+
}
|
69
|
+
});
|
70
|
+
};
|
71
|
+
|
72
|
+
observerRef.current = new IntersectionObserver(observerCallback, {
|
73
|
+
root: scrollContainer,
|
74
|
+
rootMargin: '8px',
|
75
|
+
threshold: 0.1,
|
76
|
+
});
|
53
77
|
|
54
|
-
observerRef.current.observe(firstNode);
|
55
|
-
observerRef.current.observe(lastNode);
|
78
|
+
if (!isLastResourceAbove) observerRef.current.observe(firstNode);
|
79
|
+
if (!isLastResourceBelow) observerRef.current.observe(lastNode);
|
56
80
|
|
57
81
|
return () => {
|
58
|
-
// Cleanup observer
|
59
82
|
observerRef.current?.disconnect();
|
83
|
+
throttledLoadMore.cancel();
|
60
84
|
};
|
61
|
-
}, [treeData,
|
85
|
+
}, [treeData, throttledLoadMore]);
|
62
86
|
|
63
87
|
const handleToggleExpand = useCallback(
|
64
88
|
(node: TreeNodeProps, index: number) => onExpand?.(node, index),
|
@@ -136,7 +136,7 @@ const data = [
|
|
136
136
|
container: true,
|
137
137
|
localDelete: false,
|
138
138
|
defaultEntity: false,
|
139
|
-
lastResource:
|
139
|
+
lastResource: false,
|
140
140
|
},
|
141
141
|
// Repeat similar patterns to generate 50 entries, modifying hierarchy, executionOrder, and other attributes as needed.
|
142
142
|
];
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import type { FC, ReactNode } from 'react';
|
2
|
+
import { dynamicObject, OptionsDropdownProps } from './types';
|
3
|
+
import './VariableSuggestionInputDropDown.scss';
|
4
|
+
import Typography from '../Typography';
|
5
|
+
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
6
|
+
|
7
|
+
const OptionsDropdown:FC<OptionsDropdownProps> = ({
|
8
|
+
onSelectVariable,
|
9
|
+
dropdownPosition,
|
10
|
+
filteredOptions= [],
|
11
|
+
position = 'relative',
|
12
|
+
width = '100%',
|
13
|
+
}): ReactNode => {
|
14
|
+
return (
|
15
|
+
<div
|
16
|
+
className={`ff-variable-dropdown ${position}`}
|
17
|
+
style={
|
18
|
+
dropdownPosition
|
19
|
+
? {
|
20
|
+
top: dropdownPosition.top + 30,
|
21
|
+
left: dropdownPosition.left - 30,
|
22
|
+
width,
|
23
|
+
}
|
24
|
+
: { width }
|
25
|
+
}
|
26
|
+
>
|
27
|
+
{!checkEmpty(filteredOptions)? filteredOptions?.map((option: dynamicObject): ReactNode => {
|
28
|
+
return (
|
29
|
+
<div
|
30
|
+
className="ff-variable-option"
|
31
|
+
onClick={() => onSelectVariable(option)}
|
32
|
+
key={option?.id}
|
33
|
+
>
|
34
|
+
<Typography as="span" fontSize={14}>
|
35
|
+
{option?.name}
|
36
|
+
</Typography>
|
37
|
+
</div>
|
38
|
+
);
|
39
|
+
}) : (
|
40
|
+
<div
|
41
|
+
className="ff-variable-option"
|
42
|
+
>
|
43
|
+
<Typography as='div' children='No Option' fontSize={14} />
|
44
|
+
</div>
|
45
|
+
|
46
|
+
)}
|
47
|
+
</div>
|
48
|
+
);
|
49
|
+
};
|
50
|
+
|
51
|
+
export default OptionsDropdown;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
.ff-add-variable-container {
|
2
|
+
width: 100%;
|
3
|
+
display: flex;
|
4
|
+
flex-direction: column;
|
5
|
+
gap: 8px;
|
6
|
+
position: relative;
|
7
|
+
.ff-add-variable-input {
|
8
|
+
width: 100%;
|
9
|
+
display: flex;
|
10
|
+
flex-direction: row;
|
11
|
+
align-items: center;
|
12
|
+
gap: 8px;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
.ff-variable-dropdown {
|
16
|
+
padding: 4px;
|
17
|
+
width: auto;
|
18
|
+
}
|
package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.stories.tsx
ADDED
@@ -0,0 +1,155 @@
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
2
|
+
import { Meta, StoryFn, StoryObj } from '@storybook/react';
|
3
|
+
import VariableSuggestionInputDropDown from './VariableSuggestionInputDropDown';
|
4
|
+
import { VariableSuggestionInputDropDownProps, dynamicObject } from './types';
|
5
|
+
import { variableList } from '../Editor/constants';
|
6
|
+
import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
|
7
|
+
|
8
|
+
export default {
|
9
|
+
title: 'Components/VariableSuggestionInputDropDown',
|
10
|
+
component: VariableSuggestionInputDropDown,
|
11
|
+
args: {
|
12
|
+
label: 'Add Variables',
|
13
|
+
placeholder: 'Enter text',
|
14
|
+
variableList,
|
15
|
+
dropdownWidth: '100%',
|
16
|
+
variant: 'primary',
|
17
|
+
},
|
18
|
+
parameters: {
|
19
|
+
layout: 'centered',
|
20
|
+
},
|
21
|
+
} as Meta<VariableSuggestionInputDropDownProps>;
|
22
|
+
|
23
|
+
type Story = StoryObj<typeof VariableSuggestionInputDropDown>;
|
24
|
+
|
25
|
+
const Template: StoryFn<VariableSuggestionInputDropDownProps> = (args) => {
|
26
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
27
|
+
const [inputValue, setInputValue] = useState<string>('');
|
28
|
+
const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
|
29
|
+
const [variableName, setVariableName] = useState<string>('');
|
30
|
+
const [variableValue, setVariableValue] = useState<string>('');
|
31
|
+
const [selectedVariable, setSelectedVariable] = useState<dynamicObject>({
|
32
|
+
label: 'Local Variable',
|
33
|
+
value: 'LOCAL',
|
34
|
+
});
|
35
|
+
const [hideValue, setHideValue] = useState<boolean>(false);
|
36
|
+
|
37
|
+
return (
|
38
|
+
<>
|
39
|
+
<VariableSuggestionInputDropDown
|
40
|
+
{...args}
|
41
|
+
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
42
|
+
setInputValue(event.target.value)
|
43
|
+
}
|
44
|
+
value={inputValue}
|
45
|
+
onCreateVariableClick={() => setOpenCreateVariable(true)}
|
46
|
+
ref={inputRef}
|
47
|
+
showAddVariableIcon
|
48
|
+
/>
|
49
|
+
{openCreateVariable && (
|
50
|
+
<CreateVariableSlider
|
51
|
+
isOpen={openCreateVariable}
|
52
|
+
onClose={() => setOpenCreateVariable(false)}
|
53
|
+
variableName={variableName}
|
54
|
+
value={variableValue}
|
55
|
+
hideValue={hideValue}
|
56
|
+
handleSubmit={() => {
|
57
|
+
alert('Variable Created');
|
58
|
+
}}
|
59
|
+
onHideChange={(value) => {
|
60
|
+
setHideValue(value);
|
61
|
+
}}
|
62
|
+
onNameChange={(value) => {
|
63
|
+
setVariableName(value);
|
64
|
+
}}
|
65
|
+
onValueChange={(value) => setVariableValue(value)}
|
66
|
+
onVariableTypeChange={(option) => setSelectedVariable(option)}
|
67
|
+
selectedVariableType={selectedVariable}
|
68
|
+
variableTypesList={[
|
69
|
+
{ label: 'Local Variable', value: 'LOCAL' },
|
70
|
+
{ label: 'Global Variable', value: 'GLOBAL' },
|
71
|
+
]}
|
72
|
+
/>
|
73
|
+
)}
|
74
|
+
</>
|
75
|
+
);
|
76
|
+
};
|
77
|
+
|
78
|
+
export const Default = Template.bind({});
|
79
|
+
Default.args = {
|
80
|
+
onCreateVariableClick: () => alert('Create Variable clicked'),
|
81
|
+
};
|
82
|
+
|
83
|
+
export const WithInitialValue = Template.bind({});
|
84
|
+
WithInitialValue.args = {
|
85
|
+
inputValue: 'Initial Text with $',
|
86
|
+
onCreateVariableClick: () => alert('Create Variable clicked'),
|
87
|
+
};
|
88
|
+
|
89
|
+
export const DropdownOnHash: Story = {
|
90
|
+
render: () => {
|
91
|
+
const [hashInputValue, setHashInputValue] =
|
92
|
+
useState<dynamicObject | null>();
|
93
|
+
const [value, setValue] = useState<string>('');
|
94
|
+
const testData = [
|
95
|
+
{
|
96
|
+
_id: '1',
|
97
|
+
name: 'File1.txt',
|
98
|
+
actualPath: '/documents/File1.txt',
|
99
|
+
searchKey: 'file1',
|
100
|
+
parentId: 'root',
|
101
|
+
},
|
102
|
+
{
|
103
|
+
_id: '2',
|
104
|
+
name: 'File2.doc',
|
105
|
+
actualPath: '/documents/File2.doc',
|
106
|
+
searchKey: 'file2',
|
107
|
+
parentId: 'root',
|
108
|
+
},
|
109
|
+
{
|
110
|
+
_id: '3',
|
111
|
+
name: 'Image1.png',
|
112
|
+
actualPath: '/images/Image1.png',
|
113
|
+
searchKey: 'image1',
|
114
|
+
parentId: 'folder1',
|
115
|
+
},
|
116
|
+
{
|
117
|
+
_id: '4',
|
118
|
+
name: 'Presentation.ppt',
|
119
|
+
actualPath: '/presentations/Presentation.ppt',
|
120
|
+
searchKey: 'presentation',
|
121
|
+
parentId: 'folder2',
|
122
|
+
},
|
123
|
+
{
|
124
|
+
_id: '5',
|
125
|
+
name: 'Spreadsheet.xlsx',
|
126
|
+
actualPath: '/spreadsheets/Spreadsheet.xlsx',
|
127
|
+
searchKey: 'spreadsheet',
|
128
|
+
parentId: 'folder3',
|
129
|
+
},
|
130
|
+
{
|
131
|
+
_id: '6',
|
132
|
+
name: 'Code.js',
|
133
|
+
actualPath: '/projects/Code.js',
|
134
|
+
searchKey: 'code',
|
135
|
+
parentId: 'folder4',
|
136
|
+
},
|
137
|
+
];
|
138
|
+
|
139
|
+
return (
|
140
|
+
<>
|
141
|
+
<VariableSuggestionInputDropDown
|
142
|
+
label="Select Path Using #"
|
143
|
+
placeholder="Enter # to search files"
|
144
|
+
isHash
|
145
|
+
dataFiles={testData}
|
146
|
+
dropdownWidth="100%"
|
147
|
+
setHashInputValue={setHashInputValue}
|
148
|
+
hashInputValue={hashInputValue || {}}
|
149
|
+
value={value}
|
150
|
+
onChange={(e) => setValue(e.target.value)}
|
151
|
+
/>
|
152
|
+
</>
|
153
|
+
);
|
154
|
+
},
|
155
|
+
};
|