pixel-react 1.6.8 → 1.7.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/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/CreateVariable/types.d.ts +2 -2
- 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/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- 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/Modal/types.d.ts +1 -1
- 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/PopUpModal/types.d.ts +2 -1
- 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 +183 -65
- package/lib/index.esm.js +1281 -674
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1282 -674
- 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/add_file.svg +4 -4
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/authorization.svg +4 -4
- package/src/assets/icons/depends_on_script.svg +7 -7
- package/src/assets/icons/email_group.svg +3 -3
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/import_icon.svg +4 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/labels.svg +8 -8
- package/src/assets/icons/parameters.svg +3 -3
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/pre_post_condition.svg +8 -8
- package/src/assets/icons/program_element.svg +8 -8
- package/src/assets/icons/test_data.svg +5 -5
- package/src/assets/icons/test_data_set.svg +7 -7
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/icons/variable_set.svg +5 -5
- 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/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/ConditionalDropdown/types.ts +160 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
- package/src/components/CreateVariable/types.ts +2 -2
- 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 +12 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
- 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/Modal/types.ts +1 -1
- 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/PopUpModal/PopUpModal.stories.tsx +15 -10
- package/src/components/PopUpModal/PopUpModal.tsx +5 -4
- package/src/components/PopUpModal/types.ts +2 -1
- 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 -3
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
- package/src/components/AddVariables/AddVariables.tsx +0 -113
- package/src/components/AddVariables/index.ts +0 -1
- package/src/components/AddVariables/types.ts +0 -36
@@ -0,0 +1,159 @@
|
|
1
|
+
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
2
|
+
import VariableDropdown from '../Editor/VariableDropdown';
|
3
|
+
import Icon from '../Icon';
|
4
|
+
import Input from '../Input';
|
5
|
+
import { ConditionalDropdownProps, dynamicObject } from './types';
|
6
|
+
import './ConditionalDropdown.scss';
|
7
|
+
import React, { useState, useRef, useEffect } from 'react';
|
8
|
+
import OptionsDropdown from './OptionsDropdown';
|
9
|
+
|
10
|
+
const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
|
11
|
+
label = '',
|
12
|
+
hashInputValue = '',
|
13
|
+
setHashInputValue,
|
14
|
+
variableList = [],
|
15
|
+
placeholder = 'Enter text',
|
16
|
+
onChange,
|
17
|
+
onCreateVariableClick,
|
18
|
+
value = '',
|
19
|
+
dropdownWidth = 'inherit',
|
20
|
+
isHash = false,
|
21
|
+
dataFiles = [],
|
22
|
+
...props
|
23
|
+
}) => {
|
24
|
+
const [inputValue, setInputValue] = useState<string>('');
|
25
|
+
const [showDropdown, setShowDropdown] = useState<boolean>(false);
|
26
|
+
const [cursorPosition, setCursorPosition] = useState<number | null>(null);
|
27
|
+
const [showCreateVariableIcon, setShowCreateVariableIcon] =
|
28
|
+
useState<boolean>(false);
|
29
|
+
const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
|
30
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
31
|
+
|
32
|
+
useEffect(() => {
|
33
|
+
if (cursorPosition !== null && inputRef.current) {
|
34
|
+
inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
|
35
|
+
inputRef.current.focus();
|
36
|
+
}
|
37
|
+
}, [cursorPosition]);
|
38
|
+
|
39
|
+
useEffect(() => {
|
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
|
+
}
|
52
|
+
}, [inputValue]);
|
53
|
+
|
54
|
+
const replaceVariablesWithIds = (input: string): string => {
|
55
|
+
return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
|
56
|
+
const foundVariable = variableList.find(
|
57
|
+
(varaible) => varaible.name === variableName.trim()
|
58
|
+
);
|
59
|
+
return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
|
60
|
+
});
|
61
|
+
};
|
62
|
+
|
63
|
+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
64
|
+
const fieldValue = event.target.value;
|
65
|
+
setInputValue(fieldValue);
|
66
|
+
const cursorPos = inputRef.current?.selectionStart || 0;
|
67
|
+
const isDollarTyped = fieldValue[cursorPos - 1] === '$';
|
68
|
+
|
69
|
+
if (isHash) {
|
70
|
+
setShowDropdown(fieldValue.startsWith('#'));
|
71
|
+
} else {
|
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
|
+
}
|
82
|
+
}
|
83
|
+
};
|
84
|
+
|
85
|
+
const handleDropdownClick = (item: dynamicObject) => {
|
86
|
+
if (inputRef.current) {
|
87
|
+
const { selectionStart, selectionEnd } = inputRef.current;
|
88
|
+
const dollarSyntax = `{${
|
89
|
+
item.type === 'LOCAL'
|
90
|
+
? 'LV'
|
91
|
+
: item.type === 'GLOBAL'
|
92
|
+
? 'GV'
|
93
|
+
: item.type === 'GROUP'
|
94
|
+
? 'SG'
|
95
|
+
: 'PEV'
|
96
|
+
}_${item.name}}`;
|
97
|
+
|
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);
|
108
|
+
setInputValue(newValue);
|
109
|
+
setCursorPosition((selectionStart || 0) + dollarSyntax.length);
|
110
|
+
setShowDropdown(false);
|
111
|
+
}
|
112
|
+
};
|
113
|
+
|
114
|
+
return (
|
115
|
+
<div className="ff-add-variable-container">
|
116
|
+
<div className="ff-add-variable-input">
|
117
|
+
<Input
|
118
|
+
{...props}
|
119
|
+
name="add_variable"
|
120
|
+
ref={inputRef}
|
121
|
+
type="text"
|
122
|
+
value={inputValue}
|
123
|
+
onChange={handleChange}
|
124
|
+
variant="primary"
|
125
|
+
label={label}
|
126
|
+
placeholder={placeholder}
|
127
|
+
/>
|
128
|
+
{!checkEmpty(value) && !isHash && showCreateVariableIcon && (
|
129
|
+
<Icon
|
130
|
+
onClick={onCreateVariableClick}
|
131
|
+
name="add_variable"
|
132
|
+
width={24}
|
133
|
+
height={24}
|
134
|
+
hoverEffect
|
135
|
+
/>
|
136
|
+
)}
|
137
|
+
</div>
|
138
|
+
{showDropdown && (
|
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
|
+
)}
|
155
|
+
</div>
|
156
|
+
);
|
157
|
+
};
|
158
|
+
|
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';
|
@@ -0,0 +1,160 @@
|
|
1
|
+
import { dropdownPositionType } from "../Editor/types";
|
2
|
+
|
3
|
+
export type dynamicObject = {
|
4
|
+
[key: string]: any;
|
5
|
+
};
|
6
|
+
|
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 {
|
16
|
+
/**
|
17
|
+
* Label for the field
|
18
|
+
*/
|
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
|
+
|
31
|
+
/**
|
32
|
+
* List of variables
|
33
|
+
*/
|
34
|
+
variableList?: dynamicObject[];
|
35
|
+
/**
|
36
|
+
* Place holder for the input field
|
37
|
+
*/
|
38
|
+
placeholder?: string;
|
39
|
+
/**
|
40
|
+
* Function to handle input change
|
41
|
+
* @param value
|
42
|
+
* @returns
|
43
|
+
*/
|
44
|
+
onChange?: (value: string) => void;
|
45
|
+
/**
|
46
|
+
* Function to handle create variable icon click
|
47
|
+
*/
|
48
|
+
onCreateVariableClick?: () => void;
|
49
|
+
/**
|
50
|
+
* Width of the dropdown
|
51
|
+
*/
|
52
|
+
dropdownWidth?: string;
|
53
|
+
/**
|
54
|
+
* Name | name of the input field
|
55
|
+
*/
|
56
|
+
name?: string;
|
57
|
+
/**
|
58
|
+
* value | input field value
|
59
|
+
*/
|
60
|
+
value?: string;
|
61
|
+
/**
|
62
|
+
* variants to set color/style of the input field
|
63
|
+
*/
|
64
|
+
variant?: 'default' | 'primary';
|
65
|
+
/**
|
66
|
+
* type to set color/style of the input field
|
67
|
+
*/
|
68
|
+
type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
|
69
|
+
/**
|
70
|
+
* error | If true, error message will be displayed
|
71
|
+
*/
|
72
|
+
error?: boolean;
|
73
|
+
/**
|
74
|
+
* helperText | error, success, warning message to be shown
|
75
|
+
*/
|
76
|
+
helperText?: string;
|
77
|
+
/**
|
78
|
+
* to disable the input field
|
79
|
+
*/
|
80
|
+
disabled?: boolean;
|
81
|
+
/**
|
82
|
+
* if true, input field will be mandatory
|
83
|
+
*/
|
84
|
+
required?: boolean;
|
85
|
+
/**
|
86
|
+
* classnames to style the input field
|
87
|
+
*/
|
88
|
+
className?: string;
|
89
|
+
/**
|
90
|
+
* noBorder prop 'true' removes border of input
|
91
|
+
*/
|
92
|
+
noBorder?: boolean;
|
93
|
+
|
94
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
95
|
+
|
96
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
97
|
+
|
98
|
+
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
99
|
+
/**
|
100
|
+
* id to select the input field uniquely
|
101
|
+
*/
|
102
|
+
id?: string;
|
103
|
+
/**
|
104
|
+
* if on, suggestion popup will be displayed
|
105
|
+
*/
|
106
|
+
autoComplete?: 'on' | 'off';
|
107
|
+
/**
|
108
|
+
* minimum and maximum values for the number type input field and their functions
|
109
|
+
*/
|
110
|
+
minValue?: number;
|
111
|
+
maxValue?: number;
|
112
|
+
/**
|
113
|
+
* background of the input field prop
|
114
|
+
*/
|
115
|
+
transparentBackground?: boolean;
|
116
|
+
/**
|
117
|
+
* size for the input field
|
118
|
+
*/
|
119
|
+
size?: 'small' | 'medium';
|
120
|
+
/**
|
121
|
+
* isLabelRequired for the input field without label,showing placeholder
|
122
|
+
*/
|
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[];
|
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
|
+
}
|
@@ -57,7 +57,7 @@ const CreateVariableSlider: FC<CreateVariableProps> = ({
|
|
57
57
|
required
|
58
58
|
type="text"
|
59
59
|
name="variable name"
|
60
|
-
value={variableName}
|
60
|
+
value={variableName || ''}
|
61
61
|
onChange={(event) => onNameChange(event.target.value)}
|
62
62
|
/>
|
63
63
|
<Select
|
@@ -73,7 +73,7 @@ const CreateVariableSlider: FC<CreateVariableProps> = ({
|
|
73
73
|
required
|
74
74
|
type="text"
|
75
75
|
name="value"
|
76
|
-
value={value}
|
76
|
+
value={value || ''}
|
77
77
|
onChange={(event) => onValueChange(event.target.value)}
|
78
78
|
/>
|
79
79
|
<div className="ff-hide-value-content">
|
@@ -38,11 +38,11 @@ export interface CreateVariableProps {
|
|
38
38
|
/**
|
39
39
|
* onChange of name
|
40
40
|
*/
|
41
|
-
onNameChange: (value: string
|
41
|
+
onNameChange: (value: string) => void;
|
42
42
|
/**
|
43
43
|
* onChange of value
|
44
44
|
*/
|
45
|
-
onValueChange: (value: string
|
45
|
+
onValueChange: (value: string) => void;
|
46
46
|
/**
|
47
47
|
* Hide value
|
48
48
|
*/
|
@@ -1,80 +1,67 @@
|
|
1
|
-
@use '../../assets/styles/colors' as *;
|
2
|
-
@use '../../assets/styles/fonts';
|
3
1
|
@use '../../assets/styles/mixins' as *;
|
4
2
|
|
5
|
-
.ff-download-client-
|
6
|
-
width: 378px;
|
7
|
-
height: 217px;
|
3
|
+
.ff-download-client-wrapper {
|
8
4
|
position: absolute;
|
9
|
-
|
10
|
-
|
5
|
+
height: 181px;
|
6
|
+
width: 368px;
|
7
|
+
border: 1px solid var(--download-client-border-color);
|
8
|
+
border-radius: 4px;
|
9
|
+
box-shadow: 0px 0px 8px 0px
|
10
|
+
var(--download-client-icon-container-box-shadow-color);
|
11
11
|
|
12
|
-
.ff-download-client-
|
13
|
-
|
12
|
+
.ff-download-client-header-wrapper {
|
13
|
+
position: relative;
|
14
14
|
@include center-content;
|
15
|
-
|
16
|
-
|
17
|
-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
18
|
-
border: 1px solid var(--download-client-border-color);
|
19
|
-
margin-left: 5px;
|
15
|
+
justify-content: space-between;
|
16
|
+
background-color: var(--download-client-header-bg-color);
|
20
17
|
|
21
|
-
.ff-download-client-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
18
|
+
.ff-download-client-hollow-triangle {
|
19
|
+
position: absolute;
|
20
|
+
height: 8px;
|
21
|
+
width: 8px;
|
22
|
+
border: 1px solid var(--download-client-border-color);
|
23
|
+
top: -6px;
|
24
|
+
right: 64px;
|
25
|
+
z-index: -1;
|
26
|
+
border-radius: 2px;
|
27
|
+
transform: rotate(45deg);
|
28
|
+
}
|
30
29
|
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
position: absolute;
|
35
|
-
top: 10px;
|
36
|
-
right: 70px;
|
37
|
-
width: 10px;
|
38
|
-
height: 10px;
|
39
|
-
background-color: var(--download-client-icon-container-bg-color) ;
|
40
|
-
transform: translateY(-50%) rotate(-45deg);
|
41
|
-
z-index: -999;
|
42
|
-
border: 1px solid var(--download-client-header-bg-color);
|
43
|
-
}
|
30
|
+
.ff-download-client-header-text {
|
31
|
+
margin-left: 4px;
|
32
|
+
}
|
44
33
|
|
34
|
+
.ff-download-client-close-icon {
|
35
|
+
cursor: pointer;
|
36
|
+
margin-right: 10px;
|
45
37
|
}
|
38
|
+
}
|
46
39
|
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
margin-bottom: 8px
|
55
|
-
color: var(--popup-text-color);
|
56
|
-
.ff-download-install,
|
57
|
-
.ff-choose-os {
|
58
|
-
padding: 4px 0;
|
59
|
-
}
|
40
|
+
.ff-download-client-content-text {
|
41
|
+
width: calc(100% - 16px);
|
42
|
+
height: 132px;
|
43
|
+
background-color: #fff;
|
44
|
+
padding: 8px;
|
45
|
+
|
46
|
+
.ff-download-client-description-text {
|
47
|
+
margin-bottom: 8px
|
60
48
|
}
|
61
49
|
|
62
|
-
|
63
|
-
|
50
|
+
}
|
51
|
+
|
52
|
+
.ff-download-client-os-wrapper {
|
53
|
+
@include center-content;
|
54
|
+
gap: 24px;
|
55
|
+
|
56
|
+
.ff-os-version-wrapper {
|
64
57
|
@include center-content;
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
border: 1px solid var(--download-client-icon-container-border-color);
|
73
|
-
background-color: var(--download-client-icon-container-bg-color);
|
74
|
-
cursor: pointer;
|
75
|
-
box-shadow: 0px 0px 10px 0px
|
76
|
-
var(--download-client-icon-container-box-shadow-color);
|
77
|
-
}
|
58
|
+
height: 64px;
|
59
|
+
width: 64px;
|
60
|
+
cursor: pointer;
|
61
|
+
border-radius: 8px;
|
62
|
+
border: 1px solid var(--download-client-icon-container-border-color);
|
63
|
+
box-shadow: 0px 0px 10px 0px
|
64
|
+
var(--download-client-icon-container-box-shadow-color);
|
78
65
|
}
|
79
66
|
}
|
80
67
|
}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import DownloadClient from './DownloadClient';
|
3
|
+
import './DemoDownloadClient.scss';
|
3
4
|
|
4
5
|
const meta: Meta<typeof DownloadClient> = {
|
5
6
|
title: 'Components/DownloadClient',
|
@@ -14,12 +15,11 @@ type Story = StoryObj<typeof DownloadClient>;
|
|
14
15
|
|
15
16
|
export const Default: Story = {
|
16
17
|
args: {
|
17
|
-
onClose: () =>{},
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
left: '50px',
|
18
|
+
onClose: () => {},
|
19
|
+
top: '50%',
|
20
|
+
left: '50%',
|
21
|
+
className: 'ff-download-client-stories',
|
22
|
+
onClick: () => {},
|
23
23
|
},
|
24
24
|
};
|
25
25
|
|
@@ -6,17 +6,13 @@ import { DownloadClientProps } from './type';
|
|
6
6
|
|
7
7
|
const DownloadClient: React.FC<DownloadClientProps> = ({
|
8
8
|
onClose,
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
9
|
+
top = '100px',
|
10
|
+
left = '0px',
|
11
|
+
className,
|
12
|
+
description = 'Download and Install the fireflink client to run the script',
|
13
|
+
onClick = () => {},
|
14
|
+
optionZIndex = 10000001,
|
14
15
|
}) => {
|
15
|
-
const title = 'Download Client';
|
16
|
-
const description =
|
17
|
-
'Download and Install the fireflink client to run the script';
|
18
|
-
const chooseOSText = 'Choose OS';
|
19
|
-
|
20
16
|
useEffect(() => {
|
21
17
|
const handleCloseDownloadClient = (event: KeyboardEvent) => {
|
22
18
|
if (event.key === 'Escape') {
|
@@ -29,49 +25,62 @@ const DownloadClient: React.FC<DownloadClientProps> = ({
|
|
29
25
|
};
|
30
26
|
}, [onClose]);
|
31
27
|
|
28
|
+
const osVersion = ['windows', 'mac_icon', 'linux'];
|
29
|
+
|
32
30
|
return (
|
33
|
-
<div
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
31
|
+
<div
|
32
|
+
className={`ff-download-client-wrapper ${className}`}
|
33
|
+
style={{ top: top, left: left, zIndex: optionZIndex }}
|
34
|
+
>
|
35
|
+
<div className="ff-download-client-header-wrapper">
|
36
|
+
<div className="ff-download-client-hollow-triangle"></div>
|
37
|
+
<Typography
|
38
|
+
fontWeight="semi-bold"
|
39
|
+
lineHeight="32px"
|
40
|
+
className="ff-download-client-header-text"
|
41
|
+
>
|
42
|
+
Download client
|
43
|
+
</Typography>
|
44
|
+
<Icon
|
45
|
+
name="close"
|
46
|
+
color="var(--brand-color)"
|
47
|
+
className="ff-download-client-close-icon"
|
48
|
+
height={12}
|
49
|
+
width={12}
|
50
|
+
/>
|
51
|
+
</div>
|
52
|
+
|
53
|
+
<div className="ff-download-client-content-text">
|
54
|
+
<Typography
|
55
|
+
as="div"
|
56
|
+
color="var(--download-client-content-text-color)"
|
57
|
+
fontWeight="semi-bold"
|
58
|
+
textAlign="center"
|
59
|
+
lineHeight="26px"
|
60
|
+
>
|
61
|
+
{description}
|
62
|
+
</Typography>
|
63
|
+
<Typography
|
64
|
+
as="div"
|
65
|
+
className="ff-download-client-description-text"
|
66
|
+
textAlign="center"
|
67
|
+
fontWeight="medium"
|
68
|
+
lineHeight='26px'
|
69
|
+
>
|
70
|
+
Choose OS to Download
|
71
|
+
</Typography>
|
72
|
+
|
73
|
+
<div className="ff-download-client-os-wrapper">
|
74
|
+
{osVersion.map((os) => (
|
75
|
+
<div
|
76
|
+
className="ff-os-version-wrapper"
|
77
|
+
onClick={() => {
|
78
|
+
onClick(os === 'mac_icon' ? 'mac' : os);
|
79
|
+
}}
|
60
80
|
>
|
61
|
-
{
|
62
|
-
</
|
63
|
-
|
64
|
-
</div>
|
65
|
-
<div className="ff-download-client-actions">
|
66
|
-
<div className="ff-icons-container" onClick={onClickWindows}>
|
67
|
-
<Icon name="windows" width={32} height={38} />
|
68
|
-
</div>
|
69
|
-
<div className="ff-icons-container" onClick={onClickLinux}>
|
70
|
-
<Icon name="linux" width={32} height={38} />
|
71
|
-
</div>
|
72
|
-
<div className="ff-icons-container" onClick={onClickMac}>
|
73
|
-
<Icon name="mac_icon" width={32} height={38} />
|
74
|
-
</div>
|
81
|
+
<Icon name={os} height={36} width={36} />
|
82
|
+
</div>
|
83
|
+
))}
|
75
84
|
</div>
|
76
85
|
</div>
|
77
86
|
</div>
|