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
@@ -1,3 +1,4 @@
|
|
1
|
+
import { forwardRef } from 'react';
|
1
2
|
import classNames from 'classnames';
|
2
3
|
import './InputWithDropdown.scss';
|
3
4
|
import { InputWithDropdownProps } from './types';
|
@@ -5,44 +6,101 @@ import Select from '../Select/Select';
|
|
5
6
|
import Typography from '../Typography';
|
6
7
|
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
7
8
|
|
8
|
-
const InputWithDropdown = (
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
9
|
+
const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
|
10
|
+
(
|
11
|
+
{
|
12
|
+
name = '',
|
13
|
+
label,
|
14
|
+
value,
|
15
|
+
disabled = false,
|
16
|
+
required = false,
|
17
|
+
placeholder,
|
18
|
+
error,
|
19
|
+
helperText,
|
20
|
+
optionsList,
|
21
|
+
selectedOption,
|
22
|
+
autoComplete = 'off',
|
23
|
+
onDropdownChangeHandler = () => {},
|
24
|
+
onInputChangeHandler,
|
25
|
+
onInputBlurHandler,
|
26
|
+
optionsRequired = true,
|
27
|
+
dropdownPosition = 'right',
|
28
|
+
type = 'text',
|
29
|
+
},
|
30
|
+
ref
|
31
|
+
) => {
|
32
|
+
const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
|
28
33
|
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
})}
|
34
|
-
>
|
35
|
-
<fieldset
|
36
|
-
className={classNames('ff-input-with-dropdown', {
|
37
|
-
'ff-input-with-dropdown--filled': isValueFilled,
|
38
|
-
'ff-input-with-dropdown--no-hover': isValueFilled,
|
39
|
-
'ff-input-with-dropdown--disabled': !!disabled,
|
40
|
-
'ff-input-with-dropdown--error': !!error,
|
41
|
-
[`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
|
34
|
+
return (
|
35
|
+
<div
|
36
|
+
className={classNames('ff-input-with-dropdown-container', {
|
37
|
+
'ff-input-with-dropdown-container--filled': isValueFilled,
|
42
38
|
})}
|
43
39
|
>
|
44
|
-
|
45
|
-
|
40
|
+
<fieldset
|
41
|
+
className={classNames('ff-input-with-dropdown', {
|
42
|
+
'ff-input-with-dropdown--filled': isValueFilled,
|
43
|
+
'ff-input-with-dropdown--no-hover': isValueFilled,
|
44
|
+
'ff-input-with-dropdown--disabled': !!disabled,
|
45
|
+
'ff-input-with-dropdown--error': !!error,
|
46
|
+
[`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
|
47
|
+
})}
|
48
|
+
>
|
49
|
+
{dropdownPosition === 'left' && (
|
50
|
+
<>
|
51
|
+
<Select
|
52
|
+
optionsList={optionsList}
|
53
|
+
selectedOption={selectedOption}
|
54
|
+
showLabel={false}
|
55
|
+
showBorder={false}
|
56
|
+
onChange={onDropdownChangeHandler}
|
57
|
+
disabled={disabled || !optionsRequired}
|
58
|
+
optionsRequired={optionsRequired}
|
59
|
+
className={classNames('ff-floating-dropdown', {
|
60
|
+
'ff-floating-dropdown--disabled': !!disabled,
|
61
|
+
'ff-floating-dropdown--error': !!error,
|
62
|
+
'ff-floating-dropdown--left': dropdownPosition === 'left',
|
63
|
+
})}
|
64
|
+
width={94}
|
65
|
+
height={30}
|
66
|
+
/>
|
67
|
+
<div className="seperatorline" />
|
68
|
+
</>
|
69
|
+
)}
|
70
|
+
<div className={classNames('ff-floating-label-input-container')}>
|
71
|
+
<Typography
|
72
|
+
as="label"
|
73
|
+
htmlFor={name}
|
74
|
+
className={classNames('ff-floating-label', {
|
75
|
+
'ff-floating-label--filled': isValueFilled,
|
76
|
+
'ff-floating-label--no-hover': isValueFilled,
|
77
|
+
'ff-floating-label--error': !!error,
|
78
|
+
})}
|
79
|
+
required={required}
|
80
|
+
>
|
81
|
+
{label}
|
82
|
+
</Typography>
|
83
|
+
<input
|
84
|
+
ref={ref}
|
85
|
+
name={name}
|
86
|
+
type={type}
|
87
|
+
id={name}
|
88
|
+
value={value}
|
89
|
+
onChange={onInputChangeHandler}
|
90
|
+
onBlur={onInputBlurHandler}
|
91
|
+
placeholder={placeholder}
|
92
|
+
autoComplete={autoComplete}
|
93
|
+
required={required}
|
94
|
+
disabled={disabled}
|
95
|
+
className={classNames('ff-floating-input', {
|
96
|
+
'ff-floating-input--filled': isValueFilled,
|
97
|
+
'ff-floating-input--disabled': !!disabled,
|
98
|
+
'ff-floating-input--error': !!error,
|
99
|
+
'ff-floating-input--left-dropdown': dropdownPosition === 'left',
|
100
|
+
})}
|
101
|
+
/>
|
102
|
+
</div>
|
103
|
+
{dropdownPosition === 'right' && (
|
46
104
|
<Select
|
47
105
|
optionsList={optionsList}
|
48
106
|
selectedOption={selectedOption}
|
@@ -54,69 +112,18 @@ const InputWithDropdown = ({
|
|
54
112
|
className={classNames('ff-floating-dropdown', {
|
55
113
|
'ff-floating-dropdown--disabled': !!disabled,
|
56
114
|
'ff-floating-dropdown--error': !!error,
|
57
|
-
'ff-floating-dropdown--left': dropdownPosition === 'left',
|
58
115
|
})}
|
59
|
-
width={
|
116
|
+
width={120}
|
60
117
|
height={30}
|
61
118
|
/>
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
<Typography
|
67
|
-
as="label"
|
68
|
-
htmlFor={name}
|
69
|
-
className={classNames('ff-floating-label', {
|
70
|
-
'ff-floating-label--filled': isValueFilled,
|
71
|
-
'ff-floating-label--no-hover': isValueFilled,
|
72
|
-
'ff-floating-label--error': !!error,
|
73
|
-
})}
|
74
|
-
required={required}
|
75
|
-
>
|
76
|
-
{label}
|
77
|
-
</Typography>
|
78
|
-
<input
|
79
|
-
name={name}
|
80
|
-
type={type}
|
81
|
-
id={name}
|
82
|
-
value={value}
|
83
|
-
onChange={onInputChangeHandler}
|
84
|
-
onBlur={onInputBlurHandler}
|
85
|
-
placeholder={placeholder}
|
86
|
-
autoComplete={autoComplete}
|
87
|
-
required={required}
|
88
|
-
disabled={disabled}
|
89
|
-
className={classNames('ff-floating-input', {
|
90
|
-
'ff-floating-input--filled': isValueFilled,
|
91
|
-
'ff-floating-input--disabled': !!disabled,
|
92
|
-
'ff-floating-input--error': !!error,
|
93
|
-
'ff-floating-input--left-dropdown': dropdownPosition === 'left',
|
94
|
-
})}
|
95
|
-
/>
|
96
|
-
</div>
|
97
|
-
{dropdownPosition === 'right' && (
|
98
|
-
<Select
|
99
|
-
optionsList={optionsList}
|
100
|
-
selectedOption={selectedOption}
|
101
|
-
showLabel={false}
|
102
|
-
showBorder={false}
|
103
|
-
onChange={onDropdownChangeHandler}
|
104
|
-
disabled={disabled || !optionsRequired}
|
105
|
-
optionsRequired={optionsRequired}
|
106
|
-
className={classNames('ff-floating-dropdown', {
|
107
|
-
'ff-floating-dropdown--disabled': !!disabled,
|
108
|
-
'ff-floating-dropdown--error': !!error,
|
109
|
-
})}
|
110
|
-
width={120}
|
111
|
-
height={30}
|
112
|
-
/>
|
119
|
+
)}
|
120
|
+
</fieldset>
|
121
|
+
{error && helperText && (
|
122
|
+
<span className="ff-helper-text">{helperText}</span>
|
113
123
|
)}
|
114
|
-
</
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
</div>
|
119
|
-
);
|
120
|
-
};
|
124
|
+
</div>
|
125
|
+
);
|
126
|
+
}
|
127
|
+
);
|
121
128
|
|
122
129
|
export default InputWithDropdown;
|
@@ -5,6 +5,8 @@ import Typography from '../Typography';
|
|
5
5
|
import HighlightText from '../HighlightText';
|
6
6
|
import Icon from '../Icon';
|
7
7
|
import Tooltip from '../Tooltip';
|
8
|
+
import Input from '../Input/Input';
|
9
|
+
import Select from '../Select/Select';
|
8
10
|
|
9
11
|
const getErrorMessage = (
|
10
12
|
inputValue: string,
|
@@ -25,6 +27,7 @@ const getErrorMessage = (
|
|
25
27
|
};
|
26
28
|
const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
27
29
|
label,
|
30
|
+
placeholder,
|
28
31
|
text,
|
29
32
|
highlightText,
|
30
33
|
customError,
|
@@ -33,7 +36,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
33
36
|
cancelIcon,
|
34
37
|
variant = 'textField',
|
35
38
|
dropdownData = [],
|
36
|
-
width,
|
39
|
+
// width,
|
37
40
|
height,
|
38
41
|
isOpen = false,
|
39
42
|
confirmAction,
|
@@ -47,7 +50,8 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
47
50
|
);
|
48
51
|
const [showError, setShowError] = useState('');
|
49
52
|
const [isTextFieldModified, setIsTextFieldModified] = useState(false);
|
50
|
-
const
|
53
|
+
const isThrowingError = showError && isEditing ? true : false;
|
54
|
+
|
51
55
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
52
56
|
const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
|
53
57
|
const [clickTimeout, setClickTimeout] = useState<number | null>(null);
|
@@ -105,7 +109,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
105
109
|
setIsEditing(false);
|
106
110
|
setShowError('');
|
107
111
|
setIsTextFieldModified(false);
|
108
|
-
setIsDropdownModified(false);
|
109
112
|
};
|
110
113
|
|
111
114
|
const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
@@ -114,12 +117,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
114
117
|
setShowError('');
|
115
118
|
};
|
116
119
|
|
117
|
-
const handleDropdownChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
118
|
-
setDropdownValue(e.target.value);
|
119
|
-
setIsDropdownModified(true);
|
120
|
-
setShowError('');
|
121
|
-
};
|
122
|
-
|
123
120
|
const handleBlur = (e: MouseEvent) => {
|
124
121
|
if (
|
125
122
|
containerRef.current &&
|
@@ -155,44 +152,40 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
155
152
|
}`}
|
156
153
|
style={{ height }}
|
157
154
|
>
|
158
|
-
<
|
155
|
+
<Input
|
156
|
+
name="input"
|
159
157
|
type="text"
|
158
|
+
label={label ? label : ''}
|
159
|
+
disabled={false}
|
160
|
+
error={isThrowingError}
|
161
|
+
placeholder={placeholder ? placeholder : ''}
|
160
162
|
value={inputValue}
|
161
163
|
onChange={handleTextFieldChange}
|
162
|
-
className={`
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
}
|
164
|
+
className={`
|
165
|
+
|
166
|
+
${isTextFieldModified ? 'modified' : ''}`}
|
167
|
+
/>
|
168
|
+
<Select
|
169
|
+
label={''}
|
170
|
+
optionsList={dropdownData}
|
171
|
+
selectedOption={{ value: dropdownValue, label: dropdownValue }}
|
172
|
+
onChange={(option) => setDropdownValue(option.value)}
|
169
173
|
/>
|
170
|
-
{label && <label className="ff-label">{label}</label>}
|
171
|
-
<select
|
172
|
-
value={dropdownValue}
|
173
|
-
onChange={handleDropdownChange}
|
174
|
-
className={`dropdown ${isDropdownModified ? 'modified' : ''}`}
|
175
|
-
>
|
176
|
-
{dropdownData.map((item) => (
|
177
|
-
<option key={item.id} value={item.value}>
|
178
|
-
{item.label}
|
179
|
-
</option>
|
180
|
-
))}
|
181
|
-
</select>
|
182
174
|
</div>
|
183
175
|
) : (
|
184
176
|
<div className="ff-label-text-field-without-dropdown">
|
185
|
-
<
|
177
|
+
<Input
|
178
|
+
name="input"
|
186
179
|
type="text"
|
180
|
+
label={label ? label : ''}
|
181
|
+
disabled={false}
|
182
|
+
placeholder={placeholder ? placeholder : ''}
|
187
183
|
value={inputValue}
|
188
184
|
onChange={handleTextFieldChange}
|
189
|
-
className={`
|
190
|
-
|
191
|
-
|
192
|
-
placeholder=" "
|
193
|
-
style={{ width, height }}
|
185
|
+
className={`
|
186
|
+
|
187
|
+
${isTextFieldModified ? 'modified' : ''}`}
|
194
188
|
/>
|
195
|
-
<label className="ff-textfield-label">{label}</label>
|
196
189
|
</div>
|
197
190
|
)}
|
198
191
|
<div className="ff-icon-container">
|
@@ -15,15 +15,16 @@ type Story = StoryObj<typeof MachineInputField>;
|
|
15
15
|
|
16
16
|
// Sample data for the MachineInputField
|
17
17
|
const sampleOptions: MachineType[] = [
|
18
|
-
{ label: 'Local', type: '
|
19
|
-
{ label: '
|
20
|
-
{ label: '
|
21
|
-
{ label: '
|
18
|
+
{ label: 'Local Environment', type: 'local' },
|
19
|
+
{ label: '10.100.233.23', type: 'windows' },
|
20
|
+
{ label: '121.25.333.344.2', type: 'Browserstack' },
|
21
|
+
{ label: 'iphone 17 pro max', type: 'mac' },
|
22
|
+
{ label: 'samsung galaxy s23', type: 'android' },
|
22
23
|
];
|
23
24
|
|
24
25
|
export const Primary: Story = {
|
25
26
|
args: {
|
26
|
-
width: '
|
27
|
+
width: '530px', // Example width
|
27
28
|
options: sampleOptions,
|
28
29
|
runCount: 1,
|
29
30
|
},
|
@@ -4,19 +4,18 @@ import Typography from '../Typography';
|
|
4
4
|
import Icon from '../Icon';
|
5
5
|
import { MachineInputFieldProps, MachineType } from './types';
|
6
6
|
import classNames from 'classnames';
|
7
|
+
import { truncateText } from '../../utils/truncateText/truncateText';
|
7
8
|
|
8
9
|
const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
|
9
|
-
(
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
ref
|
19
|
-
) => {
|
10
|
+
({
|
11
|
+
width = '',
|
12
|
+
options = [],
|
13
|
+
runCount = 0,
|
14
|
+
className = '',
|
15
|
+
contentReverse = false,
|
16
|
+
onClick = () => {},
|
17
|
+
modalId = '',
|
18
|
+
}) => {
|
20
19
|
const getIcon: Record<MachineType['type'], string> = {
|
21
20
|
Local: 'local',
|
22
21
|
Browserstack: 'browserstack_icon',
|
@@ -31,14 +30,15 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
|
|
31
30
|
'Internet Explorer': 'internet_explorer',
|
32
31
|
Safari: 'safari_icon',
|
33
32
|
Opera: 'opera',
|
33
|
+
windows: 'windows',
|
34
34
|
};
|
35
35
|
|
36
36
|
return (
|
37
37
|
<div
|
38
|
-
ref={
|
38
|
+
ref={modalId}
|
39
39
|
style={{ width: width }}
|
40
40
|
className={classNames('ff-machine-input-field-wrapper', className)}
|
41
|
-
onClick={onClick}
|
41
|
+
onClick={() => onClick()}
|
42
42
|
>
|
43
43
|
<Typography
|
44
44
|
as="span"
|
@@ -72,7 +72,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
|
|
72
72
|
})}
|
73
73
|
color="var(--ff-machine-input-field-text-color)"
|
74
74
|
>
|
75
|
-
{label}
|
75
|
+
{truncateText(label, 15)}
|
76
76
|
</Typography>
|
77
77
|
</div>
|
78
78
|
))}
|
@@ -45,7 +45,7 @@
|
|
45
45
|
}
|
46
46
|
|
47
47
|
.ff-option-card {
|
48
|
-
position:
|
48
|
+
position: absolute;
|
49
49
|
margin: 4px;
|
50
50
|
border: 1px solid var(--option-card-border-color);
|
51
51
|
background: var(--option-card-bg-color);
|
@@ -54,7 +54,7 @@
|
|
54
54
|
min-width: 110px;
|
55
55
|
width: max-content;
|
56
56
|
border-radius: 4px;
|
57
|
-
&--primary{
|
57
|
+
&--primary {
|
58
58
|
background: var(--brand-color);
|
59
59
|
color: var(--primary-button-text-color);
|
60
60
|
svg {
|
@@ -62,14 +62,14 @@
|
|
62
62
|
fill: var(--primary-icon-color);
|
63
63
|
}
|
64
64
|
}
|
65
|
-
:hover{
|
65
|
+
:hover {
|
66
66
|
color: var(--brand-color);
|
67
|
-
|
68
|
-
|
69
|
-
|
67
|
+
svg {
|
68
|
+
path {
|
69
|
+
fill: var(--brand-color);
|
70
|
+
}
|
70
71
|
}
|
71
72
|
}
|
72
|
-
}
|
73
73
|
}
|
74
74
|
.ff-options {
|
75
75
|
@extend .fontSm;
|