pixel-react 1.6.9 → 1.7.1
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/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/index.d.ts +1 -0
- package/lib/components/ConditionalDropdown/types.d.ts +145 -0
- package/lib/components/DownloadClient/type.d.ts +19 -27
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
- package/lib/components/LabelEditTextField/types.d.ts +1 -0
- package/lib/components/MachineInputField/types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -1
- package/lib/components/MiniModal/types.d.ts +1 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.d.ts +2 -2
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/sampleData.d.ts +104 -0
- package/lib/components/NLPInput/types.d.ts +80 -0
- package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
- package/lib/components/ProgressBar/index.d.ts +1 -0
- package/lib/components/ProgressBar/types.d.ts +12 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/hooks/useIntersectionObserver.d.ts +9 -0
- package/lib/index.d.ts +112 -59
- package/lib/index.esm.js +1251 -662
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1252 -662
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
- package/lib/utils/getSequentialPayload/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +20 -2
- package/src/assets/Themes/DarkTheme.scss +19 -2
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/styles/_colors.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
- package/src/components/Charts/LineChart/LineChart.tsx +10 -1
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Checkbox/Checkbox.scss +3 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
- package/src/components/Checkbox/Checkbox.tsx +3 -4
- package/src/components/Chip/Chip.scss +15 -5
- package/src/components/Chip/Chip.stories.tsx +10 -1
- package/src/components/Chip/Chip.tsx +5 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
- package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
- package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
- package/src/components/DownloadClient/DownloadClient.scss +51 -64
- package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
- package/src/components/DownloadClient/DownloadClient.tsx +60 -51
- package/src/components/DownloadClient/type.ts +32 -40
- package/src/components/EditTextField/EditTextField.scss +1 -1
- package/src/components/EditTextField/EditTextField.tsx +14 -20
- package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
- package/src/components/Excel/ExcelFile.stories.tsx +4 -4
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
- package/src/components/Excel/dataConversion.ts +43 -20
- package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
- package/src/components/FileDropzone/FileDropzone.tsx +24 -4
- package/src/components/Form/Forms.tsx +0 -2
- package/src/components/Icon/iconList.ts +9 -0
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
- package/src/components/LabelEditTextField/types.ts +1 -0
- package/src/components/MachineInputField/MachineInputField.scss +1 -5
- package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
- package/src/components/MachineInputField/MachineInputField.tsx +14 -14
- package/src/components/MachineInputField/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.scss +7 -7
- package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
- package/src/components/MenuOption/MenuOption.tsx +9 -13
- package/src/components/MenuOption/types.ts +3 -2
- package/src/components/MiniModal/MiniModal.scss +0 -1
- package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
- package/src/components/MiniModal/MiniModal.tsx +3 -1
- package/src/components/MiniModal/types.ts +1 -0
- package/src/components/MultiSelect/Dropdown.scss +3 -4
- package/src/components/MultiSelect/Dropdown.tsx +34 -7
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.tsx +3 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/NLPInput/NLPInput.scss +77 -21
- package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
- package/src/components/NLPInput/NlpInput.tsx +95 -59
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
- package/src/components/NLPInput/sampleData.ts +162 -0
- package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
- package/src/components/ProgressBar/ProgressBar.scss +46 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
- package/src/components/ProgressBar/ProgressBar.tsx +61 -0
- package/src/components/ProgressBar/index.ts +1 -0
- package/src/components/ProgressBar/types.ts +12 -0
- package/src/components/Search/Search.tsx +9 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/types.ts +7 -5
- package/src/components/Table/Table.scss +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -1
- package/src/components/TableTree/TableTree.stories.tsx +4 -7
- package/src/components/TableTree/TableTree.tsx +27 -181
- package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
- package/src/components/TableTree/data.ts +45 -0
- package/src/components/TableTree/types.ts +4 -4
- package/src/hooks/useIntersectionObserver.tsx +56 -0
- package/src/index.ts +4 -2
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/index.ts +0 -1
@@ -14,7 +14,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
|
|
14
14
|
checked: initialChecked = false,
|
15
15
|
partial = false,
|
16
16
|
onChange,
|
17
|
-
variant
|
17
|
+
variant,
|
18
18
|
}) => {
|
19
19
|
const [checked, setChecked] = useState(initialChecked);
|
20
20
|
|
@@ -35,7 +35,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
|
|
35
35
|
/>
|
36
36
|
<span
|
37
37
|
className={classNames('ff-checkbox-custom', {
|
38
|
-
'ff-checkbox-checked': checked
|
38
|
+
'ff-checkbox-checked': checked,
|
39
39
|
'ff-storybook-checkbox--partial': partial && !checked,
|
40
40
|
[`ff-checkbox--${variant}`]: variant,
|
41
41
|
[`ff-checkbox-checked--${variant}`]: checked && variant,
|
@@ -44,9 +44,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
|
|
44
44
|
{checked && (
|
45
45
|
<Icon
|
46
46
|
name="tick"
|
47
|
-
height={6}
|
48
|
-
width={8}
|
49
47
|
color="var(--primary-icon-color)"
|
48
|
+
className="ff-tick-icon"
|
50
49
|
/>
|
51
50
|
)}
|
52
51
|
</span>
|
@@ -22,19 +22,21 @@
|
|
22
22
|
padding: 1px 6px;
|
23
23
|
line-height: 15px;
|
24
24
|
border: none;
|
25
|
-
transition: transform 0.
|
26
|
-
|
25
|
+
transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out,
|
26
|
+
padding 0.4s ease-in-out;
|
27
|
+
box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
|
27
28
|
-1px -1px 2px 0px var(--ff-chip-bg) inset,
|
28
29
|
1px -1px 2px 0px var(--ff-chips-blur-color) inset,
|
30
|
+
-1px -1px 2px 0px var(--ff-chips-blur-color),
|
29
31
|
1px 1px 2px 0px var(--ff-chip-bg);
|
30
32
|
&--fullText:hover {
|
31
|
-
box-shadow: 1px 1px
|
33
|
+
box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
|
32
34
|
-1px -1px 2px 0px var(--ff-chip-bg) inset,
|
33
35
|
1px -1px 2px 0px var(--ff-chips-blur-color) inset,
|
36
|
+
-1px -1px 2px 0px var(--ff-chips-blur-color),
|
34
37
|
1px 1px 2px 0px var(--ff-chip-bg);
|
35
|
-
padding-right:
|
38
|
+
padding-right: 7px;
|
36
39
|
}
|
37
|
-
@extend .fontXs;
|
38
40
|
|
39
41
|
&--primary {
|
40
42
|
@include chip-variant-background(var(--ff-chips-fill-color));
|
@@ -68,18 +70,26 @@
|
|
68
70
|
}
|
69
71
|
&--public {
|
70
72
|
@include chip-variant-background(var(--public-chip-bg-color));
|
73
|
+
color: var(--license_header_text_color);
|
71
74
|
}
|
72
75
|
|
73
76
|
&--partial-public {
|
74
77
|
@include chip-variant-background(var(--partial-public-chip-bg-color));
|
78
|
+
color: var(--license_header_text_color);
|
75
79
|
}
|
76
80
|
|
77
81
|
&--private {
|
78
82
|
@include chip-variant-background(var(--private-chip-bg-color));
|
83
|
+
color: var(--license_header_text_color);
|
79
84
|
}
|
80
85
|
|
81
86
|
&--disabled {
|
82
87
|
@include chip-variant-background(var(--disabled-chip-bg-color));
|
88
|
+
color: var(--table-column-text-color);
|
89
|
+
}
|
90
|
+
&--count {
|
91
|
+
@include chip-variant-background(var(--impact-list-chip-bg-color));
|
92
|
+
color: var(--ff-chip-text-color);
|
83
93
|
}
|
84
94
|
}
|
85
95
|
}
|
@@ -1,8 +1,10 @@
|
|
1
|
+
import React from 'react';
|
1
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
3
|
import Chip from './Chip';
|
3
4
|
import '../../assets/styles/_colors.scss';
|
4
5
|
import './Chip.scss';
|
5
6
|
import Typography from '../Typography';
|
7
|
+
|
6
8
|
const meta: Meta<typeof Chip> = {
|
7
9
|
title: 'Components/Chip',
|
8
10
|
component: Chip,
|
@@ -111,7 +113,14 @@ export const Disabled: Story = {
|
|
111
113
|
...defaultArgs,
|
112
114
|
variant: 'disabled',
|
113
115
|
fullText: 'Sub Modules 0',
|
114
|
-
},
|
116
|
+
},
|
117
|
+
};
|
118
|
+
export const Count: Story = {
|
119
|
+
args: {
|
120
|
+
...defaultArgs,
|
121
|
+
variant: 'count',
|
122
|
+
fullText: 'Sub Modules 0',
|
123
|
+
},
|
115
124
|
};
|
116
125
|
|
117
126
|
export default meta;
|
@@ -26,7 +26,11 @@ const Chip = ({
|
|
26
26
|
{ ['ff-default-chip-style--fullText']: !!fullText }
|
27
27
|
)}
|
28
28
|
>
|
29
|
-
{labelText &&
|
29
|
+
{labelText && (
|
30
|
+
<Typography as="p" fontSize={10} fontWeight="semi-bold">
|
31
|
+
{labelText}
|
32
|
+
</Typography>
|
33
|
+
)}
|
30
34
|
</button>
|
31
35
|
</div>
|
32
36
|
);
|
@@ -10,7 +10,7 @@ export interface ChipsProps {
|
|
10
10
|
/**
|
11
11
|
* The variant of the Chip.
|
12
12
|
*/
|
13
|
-
variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled';
|
13
|
+
variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled' | 'count';
|
14
14
|
|
15
15
|
/**
|
16
16
|
* The callback function to be executed when the Chip is clicked.
|
@@ -1,13 +1,13 @@
|
|
1
1
|
import React, { useState } from 'react';
|
2
|
-
import { Meta, StoryFn } from '@storybook/react';
|
3
|
-
import
|
4
|
-
import {
|
2
|
+
import { Meta, StoryFn, StoryObj } from '@storybook/react';
|
3
|
+
import ConditionalDropdown from './ConditionalDropdown';
|
4
|
+
import { ConditionalDropdownProps, dynamicObject } from './types';
|
5
5
|
import { variableList } from '../Editor/constants';
|
6
6
|
import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
|
7
7
|
|
8
8
|
export default {
|
9
|
-
title: 'Components/
|
10
|
-
component:
|
9
|
+
title: 'Components/ConditionalDropdown',
|
10
|
+
component: ConditionalDropdown,
|
11
11
|
args: {
|
12
12
|
label: 'Add Variables',
|
13
13
|
placeholder: 'Enter text',
|
@@ -18,10 +18,11 @@ export default {
|
|
18
18
|
parameters: {
|
19
19
|
layout: 'centered',
|
20
20
|
},
|
21
|
-
} as Meta<
|
21
|
+
} as Meta<ConditionalDropdownProps>;
|
22
22
|
|
23
|
-
|
24
|
-
|
23
|
+
type Story = StoryObj<typeof ConditionalDropdown>;
|
24
|
+
|
25
|
+
const Template: StoryFn<ConditionalDropdownProps> = (args) => {
|
25
26
|
const [inputValue, setInputValue] = useState<string>('');
|
26
27
|
const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
|
27
28
|
const [variableName, setVariableName] = useState<string>('');
|
@@ -34,7 +35,7 @@ const Template: StoryFn<AddVariableProps> = (args) => {
|
|
34
35
|
|
35
36
|
return (
|
36
37
|
<>
|
37
|
-
<
|
38
|
+
<ConditionalDropdown
|
38
39
|
{...args}
|
39
40
|
onChange={(value: string) => setInputValue(value)}
|
40
41
|
value={inputValue}
|
@@ -74,9 +75,73 @@ Default.args = {
|
|
74
75
|
onCreateVariableClick: () => alert('Create Variable clicked'),
|
75
76
|
};
|
76
77
|
|
77
|
-
// Customized story with pre-filled input value
|
78
78
|
export const WithInitialValue = Template.bind({});
|
79
79
|
WithInitialValue.args = {
|
80
80
|
inputValue: 'Initial Text with $',
|
81
81
|
onCreateVariableClick: () => alert('Create Variable clicked'),
|
82
82
|
};
|
83
|
+
|
84
|
+
export const DropdownOnHash: Story = {
|
85
|
+
render: () => {
|
86
|
+
const [hashInputValue, setHashInputValue] = useState<
|
87
|
+
dynamicObject | undefined
|
88
|
+
>();
|
89
|
+
const testData = [
|
90
|
+
{
|
91
|
+
_id: '1',
|
92
|
+
name: 'File1.txt',
|
93
|
+
actualPath: '/documents/File1.txt',
|
94
|
+
searchKey: 'file1',
|
95
|
+
parentId: 'root',
|
96
|
+
},
|
97
|
+
{
|
98
|
+
_id: '2',
|
99
|
+
name: 'File2.doc',
|
100
|
+
actualPath: '/documents/File2.doc',
|
101
|
+
searchKey: 'file2',
|
102
|
+
parentId: 'root',
|
103
|
+
},
|
104
|
+
{
|
105
|
+
_id: '3',
|
106
|
+
name: 'Image1.png',
|
107
|
+
actualPath: '/images/Image1.png',
|
108
|
+
searchKey: 'image1',
|
109
|
+
parentId: 'folder1',
|
110
|
+
},
|
111
|
+
{
|
112
|
+
_id: '4',
|
113
|
+
name: 'Presentation.ppt',
|
114
|
+
actualPath: '/presentations/Presentation.ppt',
|
115
|
+
searchKey: 'presentation',
|
116
|
+
parentId: 'folder2',
|
117
|
+
},
|
118
|
+
{
|
119
|
+
_id: '5',
|
120
|
+
name: 'Spreadsheet.xlsx',
|
121
|
+
actualPath: '/spreadsheets/Spreadsheet.xlsx',
|
122
|
+
searchKey: 'spreadsheet',
|
123
|
+
parentId: 'folder3',
|
124
|
+
},
|
125
|
+
{
|
126
|
+
_id: '6',
|
127
|
+
name: 'Code.js',
|
128
|
+
actualPath: '/projects/Code.js',
|
129
|
+
searchKey: 'code',
|
130
|
+
parentId: 'folder4',
|
131
|
+
},
|
132
|
+
];
|
133
|
+
|
134
|
+
return (
|
135
|
+
<>
|
136
|
+
<ConditionalDropdown
|
137
|
+
label="Select Path Using #"
|
138
|
+
placeholder="Enter # to search files"
|
139
|
+
isHash
|
140
|
+
dataFiles={testData}
|
141
|
+
dropdownWidth="auto"
|
142
|
+
setHashInputValue={setHashInputValue}
|
143
|
+
/>
|
144
|
+
</>
|
145
|
+
);
|
146
|
+
},
|
147
|
+
};
|
package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx}
RENAMED
@@ -2,25 +2,31 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
|
2
2
|
import VariableDropdown from '../Editor/VariableDropdown';
|
3
3
|
import Icon from '../Icon';
|
4
4
|
import Input from '../Input';
|
5
|
-
import {
|
6
|
-
import './
|
5
|
+
import { ConditionalDropdownProps, dynamicObject } from './types';
|
6
|
+
import './ConditionalDropdown.scss';
|
7
7
|
import React, { useState, useRef, useEffect } from 'react';
|
8
|
+
import OptionsDropdown from './OptionsDropdown';
|
8
9
|
|
9
|
-
const
|
10
|
+
const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
|
10
11
|
label = '',
|
12
|
+
hashInputValue = '',
|
13
|
+
setHashInputValue,
|
11
14
|
variableList = [],
|
12
15
|
placeholder = 'Enter text',
|
13
16
|
onChange,
|
14
17
|
onCreateVariableClick,
|
15
18
|
value = '',
|
16
19
|
dropdownWidth = 'inherit',
|
20
|
+
isHash = false,
|
21
|
+
dataFiles = [],
|
17
22
|
...props
|
18
23
|
}) => {
|
19
|
-
const [inputValue, setInputValue] = useState<string>(
|
24
|
+
const [inputValue, setInputValue] = useState<string>(value);
|
20
25
|
const [showDropdown, setShowDropdown] = useState<boolean>(false);
|
21
26
|
const [cursorPosition, setCursorPosition] = useState<number | null>(null);
|
22
27
|
const [showCreateVariableIcon, setShowCreateVariableIcon] =
|
23
28
|
useState<boolean>(false);
|
29
|
+
const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
|
24
30
|
const inputRef = useRef<HTMLInputElement>(null);
|
25
31
|
|
26
32
|
useEffect(() => {
|
@@ -31,37 +37,48 @@ const AddVariables: React.FC<AddVariableProps> = ({
|
|
31
37
|
}, [cursorPosition]);
|
32
38
|
|
33
39
|
useEffect(() => {
|
34
|
-
|
35
|
-
|
40
|
+
if (inputValue.startsWith('#') && isHash) {
|
41
|
+
const searchQuery = inputValue.slice(1).toLowerCase();
|
42
|
+
const filtered = dataFiles.filter((file) =>
|
43
|
+
file.name.toLowerCase().includes(searchQuery)
|
44
|
+
);
|
45
|
+
|
46
|
+
setFilteredOptions(filtered);
|
47
|
+
setShowDropdown(filtered.length > 0);
|
48
|
+
} else if (!isHash) {
|
49
|
+
const newPayload = replaceVariablesWithIds(inputValue);
|
50
|
+
onChange?.(newPayload);
|
51
|
+
}
|
36
52
|
}, [inputValue]);
|
37
53
|
|
38
54
|
const replaceVariablesWithIds = (input: string): string => {
|
39
55
|
return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
|
40
|
-
// Find the matching variable in the list by name
|
41
56
|
const foundVariable = variableList.find(
|
42
57
|
(varaible) => varaible.name === variableName.trim()
|
43
58
|
);
|
44
|
-
return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
|
59
|
+
return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
|
45
60
|
});
|
46
61
|
};
|
47
62
|
|
48
63
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
49
64
|
const fieldValue = event.target.value;
|
50
65
|
setInputValue(fieldValue);
|
51
|
-
|
52
|
-
// Show dropdown only if the last character typed is `$`
|
53
66
|
const cursorPos = inputRef.current?.selectionStart || 0;
|
54
67
|
const isDollarTyped = fieldValue[cursorPos - 1] === '$';
|
55
68
|
|
56
|
-
if (
|
57
|
-
setShowDropdown(
|
69
|
+
if (isHash) {
|
70
|
+
setShowDropdown(fieldValue.startsWith('#'));
|
58
71
|
} else {
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
72
|
+
if (isDollarTyped) {
|
73
|
+
setShowDropdown(true);
|
74
|
+
} else {
|
75
|
+
setShowDropdown(false);
|
76
|
+
}
|
77
|
+
if (fieldValue?.includes('$')) {
|
78
|
+
setShowCreateVariableIcon(false);
|
79
|
+
} else {
|
80
|
+
setShowCreateVariableIcon(true);
|
81
|
+
}
|
65
82
|
}
|
66
83
|
};
|
67
84
|
|
@@ -78,14 +95,18 @@ const AddVariables: React.FC<AddVariableProps> = ({
|
|
78
95
|
: 'PEV'
|
79
96
|
}_${item.name}}`;
|
80
97
|
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
98
|
+
let newValue;
|
99
|
+
if (isHash && inputValue[0] === '#') {
|
100
|
+
newValue = item.name + inputValue.slice(selectionEnd || 1);
|
101
|
+
} else {
|
102
|
+
newValue =
|
103
|
+
inputValue.slice(0, selectionStart || 0) +
|
104
|
+
dollarSyntax +
|
105
|
+
inputValue.slice(selectionEnd || 0);
|
106
|
+
}
|
107
|
+
setHashInputValue?.(item);
|
85
108
|
setInputValue(newValue);
|
86
109
|
setCursorPosition((selectionStart || 0) + dollarSyntax.length);
|
87
|
-
|
88
|
-
// Close the dropdown after inserting the variable
|
89
110
|
setShowDropdown(false);
|
90
111
|
}
|
91
112
|
};
|
@@ -104,7 +125,7 @@ const AddVariables: React.FC<AddVariableProps> = ({
|
|
104
125
|
label={label}
|
105
126
|
placeholder={placeholder}
|
106
127
|
/>
|
107
|
-
{!checkEmpty(value) && showCreateVariableIcon && (
|
128
|
+
{!checkEmpty(value) && !isHash && showCreateVariableIcon && (
|
108
129
|
<Icon
|
109
130
|
onClick={onCreateVariableClick}
|
110
131
|
name="add_variable"
|
@@ -115,15 +136,24 @@ const AddVariables: React.FC<AddVariableProps> = ({
|
|
115
136
|
)}
|
116
137
|
</div>
|
117
138
|
{showDropdown && (
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
139
|
+
isHash ? (
|
140
|
+
<OptionsDropdown
|
141
|
+
position="relative"
|
142
|
+
width={dropdownWidth}
|
143
|
+
filteredOptions={filteredOptions}
|
144
|
+
onSelectVariable={handleDropdownClick}
|
145
|
+
/>
|
146
|
+
) : (
|
147
|
+
<VariableDropdown
|
148
|
+
position="relative"
|
149
|
+
width={dropdownWidth}
|
150
|
+
optionsList={variableList}
|
151
|
+
onSelectVariable={handleDropdownClick}
|
152
|
+
/>
|
153
|
+
)
|
154
|
+
)}
|
125
155
|
</div>
|
126
156
|
);
|
127
157
|
};
|
128
158
|
|
129
|
-
export default
|
159
|
+
export default ConditionalDropdown;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import type { FC, ReactNode } from 'react';
|
2
|
+
import { dynamicObject, OptionsDropdownProps } from './types';
|
3
|
+
import './ConditionalDropdown.scss';
|
4
|
+
import Typography from '../Typography';
|
5
|
+
import classNames from 'classnames';
|
6
|
+
|
7
|
+
const OptionsDropdown:FC<OptionsDropdownProps> = ({
|
8
|
+
onSelectVariable,
|
9
|
+
dropdownPosition,
|
10
|
+
filteredOptions= [],
|
11
|
+
position = 'relative',
|
12
|
+
width = '300px',
|
13
|
+
}): ReactNode => {
|
14
|
+
return (
|
15
|
+
<div
|
16
|
+
className={classNames('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
|
+
{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
|
+
);
|
42
|
+
};
|
43
|
+
|
44
|
+
export default OptionsDropdown;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './ConditionalDropdown';
|
@@ -1,12 +1,33 @@
|
|
1
|
+
import { dropdownPositionType } from "../Editor/types";
|
2
|
+
|
1
3
|
export type dynamicObject = {
|
2
4
|
[key: string]: any;
|
3
5
|
};
|
4
6
|
|
5
|
-
export
|
7
|
+
export type TestDataObject = {
|
8
|
+
_id: string;
|
9
|
+
name: string;
|
10
|
+
actualPath: string;
|
11
|
+
searchKey: string;
|
12
|
+
parentId: string;
|
13
|
+
}
|
14
|
+
|
15
|
+
export interface ConditionalDropdownProps {
|
6
16
|
/**
|
7
17
|
* Label for the field
|
8
18
|
*/
|
9
19
|
label?: string;
|
20
|
+
|
21
|
+
/**
|
22
|
+
* Value in the input should stored in this state
|
23
|
+
*/
|
24
|
+
hashInputValue?: TestDataObject | dynamicObject;
|
25
|
+
|
26
|
+
/**
|
27
|
+
* Function storing and updating the inputValue state
|
28
|
+
*/
|
29
|
+
setHashInputValue?:(value: dynamicObject | undefined) => void;
|
30
|
+
|
10
31
|
/**
|
11
32
|
* List of variables
|
12
33
|
*/
|
@@ -20,7 +41,7 @@ export interface AddVariableProps {
|
|
20
41
|
* @param value
|
21
42
|
* @returns
|
22
43
|
*/
|
23
|
-
onChange
|
44
|
+
onChange?: (value: string) => void;
|
24
45
|
/**
|
25
46
|
* Function to handle create variable icon click
|
26
47
|
*/
|
@@ -32,11 +53,11 @@ export interface AddVariableProps {
|
|
32
53
|
/**
|
33
54
|
* Name | name of the input field
|
34
55
|
*/
|
35
|
-
name
|
56
|
+
name?: string;
|
36
57
|
/**
|
37
58
|
* value | input field value
|
38
59
|
*/
|
39
|
-
value
|
60
|
+
value?: string;
|
40
61
|
/**
|
41
62
|
* variants to set color/style of the input field
|
42
63
|
*/
|
@@ -44,7 +65,7 @@ export interface AddVariableProps {
|
|
44
65
|
/**
|
45
66
|
* type to set color/style of the input field
|
46
67
|
*/
|
47
|
-
type
|
68
|
+
type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
|
48
69
|
/**
|
49
70
|
* error | If true, error message will be displayed
|
50
71
|
*/
|
@@ -100,4 +121,40 @@ export interface AddVariableProps {
|
|
100
121
|
* isLabelRequired for the input field without label,showing placeholder
|
101
122
|
*/
|
102
123
|
isLabelRequired?: boolean;
|
124
|
+
|
125
|
+
/**
|
126
|
+
* If true, dropdown opens when '#' is entered at the first position.
|
127
|
+
*/
|
128
|
+
isHash?: boolean;
|
129
|
+
/**
|
130
|
+
* Options for the dropdown when `isHash` is true.
|
131
|
+
*/
|
132
|
+
dataFiles?: dynamicObject[];
|
103
133
|
}
|
134
|
+
|
135
|
+
export interface OptionsDropdownProps {
|
136
|
+
/**
|
137
|
+
* Position whether absoloute or relative
|
138
|
+
*/
|
139
|
+
position: 'absolute' | 'relative';
|
140
|
+
|
141
|
+
/**
|
142
|
+
* Dropdown width
|
143
|
+
*/
|
144
|
+
width: string;
|
145
|
+
|
146
|
+
/**
|
147
|
+
* chars entered to search in Input :
|
148
|
+
*/
|
149
|
+
filteredOptions?: dynamicObject[];
|
150
|
+
|
151
|
+
/**
|
152
|
+
* Function to handle click on variable
|
153
|
+
*/
|
154
|
+
onSelectVariable: (variable: object) => void;
|
155
|
+
|
156
|
+
/**
|
157
|
+
* Dropdown postion used for dropdown placement
|
158
|
+
*/
|
159
|
+
dropdownPosition?: dropdownPositionType;
|
160
|
+
}
|