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
@@ -3,7 +3,7 @@ import { FileDropzoneProps } from './types';
|
|
3
3
|
import './FileDropzone.scss';
|
4
4
|
import Icon from '../Icon';
|
5
5
|
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
6
|
-
import { useEffect, useMemo } from 'react';
|
6
|
+
import { useEffect, useMemo, useRef } from 'react';
|
7
7
|
import Dropzone from './Dropzone';
|
8
8
|
import FilePreview from './FilePreview';
|
9
9
|
import classNames from 'classnames';
|
@@ -39,6 +39,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
39
39
|
isApiResponseError = false,
|
40
40
|
isDisable = false,
|
41
41
|
}) => {
|
42
|
+
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
42
43
|
const {
|
43
44
|
getRootProps,
|
44
45
|
getInputProps,
|
@@ -77,6 +78,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
77
78
|
[acceptedFiles, handleRemoveClick, handleReplaceClick]
|
78
79
|
);
|
79
80
|
|
81
|
+
useEffect(() => {
|
82
|
+
if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
|
83
|
+
fileInputRef.current.click();
|
84
|
+
}
|
85
|
+
}, [selectedRadioOption]);
|
86
|
+
|
80
87
|
useEffect(() => {
|
81
88
|
if (!checkEmpty(acceptedFiles) && setSelectedFile) {
|
82
89
|
setSelectedFile(acceptedFiles[0] || null);
|
@@ -98,9 +105,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
98
105
|
);
|
99
106
|
|
100
107
|
return (
|
101
|
-
<div
|
102
|
-
{'ff-
|
103
|
-
|
108
|
+
<div
|
109
|
+
className={classNames('ff-file-dropzone-wrapper', {
|
110
|
+
'ff-disable-file-dropzone-wrapper': isDisable,
|
111
|
+
})}
|
112
|
+
style={{ width: `${width}px` }}
|
113
|
+
>
|
104
114
|
<Dropzone
|
105
115
|
icon={icon}
|
106
116
|
primaryLabel={primaryLabel}
|
@@ -123,6 +133,16 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
123
133
|
isDisable={isDisable}
|
124
134
|
/>
|
125
135
|
|
136
|
+
{isWebServiceFileDropZone && (
|
137
|
+
<input
|
138
|
+
ref={fileInputRef}
|
139
|
+
type="file"
|
140
|
+
className="ff-input-ref"
|
141
|
+
onChange={handleFileChange}
|
142
|
+
accept={accept.join(',')}
|
143
|
+
/>
|
144
|
+
)}
|
145
|
+
|
126
146
|
{isWebServiceFileDropZone ? null : (
|
127
147
|
<div
|
128
148
|
className={'ff-file-details-wrapper'}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import React, { forwardRef, useImperativeHandle } from 'react';
|
2
2
|
import Form from './Form';
|
3
|
-
|
4
3
|
interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
|
5
4
|
id?: string;
|
6
5
|
onSubmit: Form.SubmitHandler<T>;
|
@@ -16,7 +15,6 @@ const Forms = <T extends Form.FieldValues>(
|
|
16
15
|
ref: React.Ref<any>
|
17
16
|
) => {
|
18
17
|
const methods = Form.useForm<T>(rest);
|
19
|
-
|
20
18
|
const { handleSubmit } = methods;
|
21
19
|
const extendedMethods = {
|
22
20
|
...methods,
|
@@ -117,6 +117,8 @@ import HideAccessIcon from '../../assets/icons/hide_access_icon.svg?react';
|
|
117
117
|
import AddLocator from '../../assets/icons/add_locator.svg?react';
|
118
118
|
import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
|
119
119
|
|
120
|
+
import IosIcon from '../../assets/icons/ios_icon.svg?react';
|
121
|
+
import HelpIcon from '../../assets/icons/help_icon.svg?react';
|
120
122
|
import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
|
121
123
|
import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
|
122
124
|
import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
|
@@ -142,6 +144,7 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
|
|
142
144
|
import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
|
143
145
|
import UpdateIcon from '../../assets/icons/update_icon.svg?react';
|
144
146
|
import AddFile from '../../assets/icons/add_file.svg?react';
|
147
|
+
import PlusRoundIcon from '../../assets/icons/plus_round_icon.svg?react';
|
145
148
|
import EyeClosed from '../../assets/icons/eye_closed.svg?react';
|
146
149
|
import AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
|
147
150
|
import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
|
@@ -192,6 +195,8 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
|
|
192
195
|
import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
|
193
196
|
import UserWarning from '../../assets/icons/user_warning.svg?react';
|
194
197
|
import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
|
198
|
+
import AiSearch from '../../assets/icons/ai_search.svg?react';
|
199
|
+
|
195
200
|
import Import from '../../assets/icons/import.svg?react';
|
196
201
|
import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
|
197
202
|
import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
|
@@ -352,6 +357,8 @@ Components['android_icon'] = AndroidIcon;
|
|
352
357
|
Components['plus_user_icon'] = PlusUserIcon;
|
353
358
|
Components['label_plus'] = LabelPlusIcon;
|
354
359
|
Components['manual_locator'] = ManualLocator;
|
360
|
+
Components['ios_icon'] = IosIcon;
|
361
|
+
Components['help_icon'] = HelpIcon;
|
355
362
|
Components['select_license'] = SwitchLicenseIcon;
|
356
363
|
Components['fireflink-logo'] = FireflinkLogo;
|
357
364
|
Components['wswb_delete_icon'] = WSWBDeleteIcon;
|
@@ -383,6 +390,7 @@ Components['notification_icon'] = NotificationIcon;
|
|
383
390
|
Components['nlp_help_icon'] = NLPHelpIcon;
|
384
391
|
Components['update_icon'] = UpdateIcon;
|
385
392
|
Components['add_file'] = AddFile;
|
393
|
+
Components['plus_round_icon'] = PlusRoundIcon;
|
386
394
|
Components['clone_icon'] = CloneIcon;
|
387
395
|
Components['move_icon'] = MoveIcon;
|
388
396
|
Components['jira'] = Jira;
|
@@ -395,6 +403,7 @@ Components['hide_access_icon'] = HideAccessIcon;
|
|
395
403
|
Components['eye_closed'] = EyeClosed;
|
396
404
|
Components['attachment_icon'] = AttachmentIcon;
|
397
405
|
Components['authorization_icon'] = AuthorizationIcon;
|
406
|
+
Components['ai_search'] = AiSearch;
|
398
407
|
|
399
408
|
Components['fireflink_platform_logo'] = FireflinkPlatform;
|
400
409
|
Components['fireflink_finder_logo'] = FireflinkFinder;
|
@@ -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;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import MenuOption from './MenuOption';
|
3
3
|
import './MenuOption.scss';
|
4
|
-
import React, { ReactNode } from 'react';
|
4
|
+
import React, { ReactNode, useRef } from 'react';
|
5
5
|
import Icon from '../Icon';
|
6
6
|
|
7
7
|
const meta: Meta<typeof MenuOption> = {
|
@@ -29,16 +29,16 @@ const meta: Meta<typeof MenuOption> = {
|
|
29
29
|
},
|
30
30
|
tooltipPlacement: {
|
31
31
|
control: {
|
32
|
-
type: '
|
33
|
-
options: ['top', 'down', 'left', 'right'],
|
32
|
+
type: 'select',
|
33
|
+
options: ['top', 'down', 'left', 'right'],
|
34
34
|
},
|
35
35
|
description: 'Placement of the tooltip relative to the button.',
|
36
36
|
defaultValue: 'top',
|
37
37
|
},
|
38
38
|
dropdownPlacement: {
|
39
39
|
control: {
|
40
|
-
type: '
|
41
|
-
options: ['top', 'down', 'left', 'right'],
|
40
|
+
type: 'select',
|
41
|
+
options: ['top', 'down', 'left', 'right'],
|
42
42
|
},
|
43
43
|
description: 'Placement of the dropdown menu relative to the button.',
|
44
44
|
defaultValue: 'down',
|
@@ -49,7 +49,15 @@ const meta: Meta<typeof MenuOption> = {
|
|
49
49
|
type Story = StoryObj<typeof MenuOption>;
|
50
50
|
|
51
51
|
const options = [
|
52
|
-
{
|
52
|
+
{
|
53
|
+
label: (
|
54
|
+
<div>
|
55
|
+
hello <Icon name="edit" />
|
56
|
+
</div>
|
57
|
+
),
|
58
|
+
value: 'opt1',
|
59
|
+
icon: 'success',
|
60
|
+
},
|
53
61
|
{ label: 'Option 2', value: 'opt2', icon: 'success' },
|
54
62
|
{
|
55
63
|
label: 'Delete',
|
@@ -59,21 +67,31 @@ const options = [
|
|
59
67
|
},
|
60
68
|
];
|
61
69
|
|
62
|
-
const handleOptionClick = (option: { label: string|ReactNode }) => {
|
70
|
+
const handleOptionClick = (option: { label: string | ReactNode }) => {
|
63
71
|
alert(`Option clicked: ${option.label}`);
|
64
72
|
};
|
65
73
|
|
66
|
-
|
67
74
|
export const ControlledMenuOption: Story = {
|
68
75
|
args: {
|
69
76
|
iconName: 'more',
|
70
77
|
labelName: 'Controlled Menu',
|
71
78
|
tooltipTitle: 'Select an option',
|
72
|
-
dropdownPlacement:
|
79
|
+
dropdownPlacement: 'top',
|
80
|
+
},
|
81
|
+
render: (args) => {
|
82
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
83
|
+
return (
|
84
|
+
<div ref={moreRef}>
|
85
|
+
<MenuOption
|
86
|
+
{...args}
|
87
|
+
options={options}
|
88
|
+
targetRef={moreRef} // Make sure targetRef is passed properly here
|
89
|
+
onOptionClick={handleOptionClick}
|
90
|
+
dropdownPlacement="left" // Dropdown placement for testing
|
91
|
+
/>
|
92
|
+
</div>
|
93
|
+
);
|
73
94
|
},
|
74
|
-
render: (args) => (
|
75
|
-
<MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
|
76
|
-
),
|
77
95
|
parameters: {
|
78
96
|
docs: {
|
79
97
|
description: {
|
@@ -84,15 +102,24 @@ export const ControlledMenuOption: Story = {
|
|
84
102
|
},
|
85
103
|
};
|
86
104
|
|
87
|
-
|
88
105
|
export const MenuOptionTop: Story = {
|
89
106
|
args: {
|
90
107
|
...ControlledMenuOption.args,
|
91
108
|
dropdownPlacement: 'top',
|
92
109
|
},
|
93
|
-
render: (args) =>
|
94
|
-
|
95
|
-
|
110
|
+
render: (args) => {
|
111
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
112
|
+
return (
|
113
|
+
<div ref={moreRef}>
|
114
|
+
<MenuOption
|
115
|
+
{...args}
|
116
|
+
options={options}
|
117
|
+
targetRef={moreRef}
|
118
|
+
onOptionClick={handleOptionClick}
|
119
|
+
/>
|
120
|
+
</div>
|
121
|
+
);
|
122
|
+
},
|
96
123
|
parameters: {
|
97
124
|
docs: {
|
98
125
|
description: {
|
@@ -102,15 +129,24 @@ export const MenuOptionTop: Story = {
|
|
102
129
|
},
|
103
130
|
};
|
104
131
|
|
105
|
-
|
106
132
|
export const MenuOptionBottom: Story = {
|
107
133
|
args: {
|
108
134
|
...ControlledMenuOption.args,
|
109
135
|
dropdownPlacement: 'down',
|
110
136
|
},
|
111
|
-
render: (args) =>
|
112
|
-
|
113
|
-
|
137
|
+
render: (args) => {
|
138
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
139
|
+
return (
|
140
|
+
<div ref={moreRef}>
|
141
|
+
<MenuOption
|
142
|
+
{...args}
|
143
|
+
options={options}
|
144
|
+
targetRef={moreRef}
|
145
|
+
onOptionClick={handleOptionClick}
|
146
|
+
/>
|
147
|
+
</div>
|
148
|
+
);
|
149
|
+
},
|
114
150
|
parameters: {
|
115
151
|
docs: {
|
116
152
|
description: {
|
@@ -120,15 +156,24 @@ export const MenuOptionBottom: Story = {
|
|
120
156
|
},
|
121
157
|
};
|
122
158
|
|
123
|
-
|
124
159
|
export const MenuOptionLeft: Story = {
|
125
160
|
args: {
|
126
161
|
...ControlledMenuOption.args,
|
127
162
|
dropdownPlacement: 'left',
|
128
163
|
},
|
129
|
-
render: (args) =>
|
130
|
-
|
131
|
-
|
164
|
+
render: (args) => {
|
165
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
166
|
+
return (
|
167
|
+
<div ref={moreRef}>
|
168
|
+
<MenuOption
|
169
|
+
{...args}
|
170
|
+
options={options}
|
171
|
+
targetRef={moreRef}
|
172
|
+
onOptionClick={handleOptionClick}
|
173
|
+
/>
|
174
|
+
</div>
|
175
|
+
);
|
176
|
+
},
|
132
177
|
parameters: {
|
133
178
|
docs: {
|
134
179
|
description: {
|
@@ -141,11 +186,21 @@ export const MenuOptionLeft: Story = {
|
|
141
186
|
export const MenuOptionRight: Story = {
|
142
187
|
args: {
|
143
188
|
...ControlledMenuOption.args,
|
144
|
-
dropdownPlacement: 'right',
|
189
|
+
dropdownPlacement: 'right', // Proper dropdown placement
|
190
|
+
},
|
191
|
+
render: (args) => {
|
192
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
193
|
+
return (
|
194
|
+
<div ref={moreRef}>
|
195
|
+
<MenuOption
|
196
|
+
{...args}
|
197
|
+
options={options}
|
198
|
+
targetRef={moreRef} // Properly pass ref to targetRef
|
199
|
+
onOptionClick={handleOptionClick}
|
200
|
+
/>
|
201
|
+
</div>
|
202
|
+
);
|
145
203
|
},
|
146
|
-
render: (args) => (
|
147
|
-
<MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
|
148
|
-
),
|
149
204
|
parameters: {
|
150
205
|
docs: {
|
151
206
|
description: {
|
@@ -31,7 +31,7 @@ const Option = ({ option, onClick }: OptionProps) => (
|
|
31
31
|
)}
|
32
32
|
<Typography
|
33
33
|
as="label"
|
34
|
-
lineHeight=
|
34
|
+
lineHeight="18px"
|
35
35
|
color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
|
36
36
|
>
|
37
37
|
{option.label}
|
@@ -74,13 +74,13 @@ const OptionCard = ({
|
|
74
74
|
};
|
75
75
|
case 'down':
|
76
76
|
return {
|
77
|
-
top: menuPosition.top +
|
77
|
+
top: menuPosition.top + 20,
|
78
78
|
left: menuPosition.left - 4,
|
79
79
|
};
|
80
80
|
case 'left':
|
81
81
|
return {
|
82
82
|
top: menuPosition.top - 4,
|
83
|
-
left: menuPosition.left - optionsWidth -
|
83
|
+
left: menuPosition.left - optionsWidth - 8,
|
84
84
|
};
|
85
85
|
case 'right':
|
86
86
|
return {
|
@@ -127,7 +127,8 @@ const MenuOption = ({
|
|
127
127
|
variant = 'light',
|
128
128
|
zIndex = 99,
|
129
129
|
dropdownPlacement = 'down',
|
130
|
-
optionCardVariant
|
130
|
+
optionCardVariant,
|
131
|
+
targetRef,
|
131
132
|
}: MenuOptionProps) => {
|
132
133
|
const [isClicked, setIsClicked] = useState(false);
|
133
134
|
const menuRef = useRef<HTMLDivElement>(null);
|
@@ -136,8 +137,6 @@ const MenuOption = ({
|
|
136
137
|
left: 0,
|
137
138
|
height: 0,
|
138
139
|
right: 0,
|
139
|
-
rightSpaceAvailable: 0,
|
140
|
-
bottomSpaceAvailable: 0,
|
141
140
|
});
|
142
141
|
|
143
142
|
const closeDropDown = () => setIsClicked(false);
|
@@ -154,20 +153,17 @@ const MenuOption = ({
|
|
154
153
|
};
|
155
154
|
|
156
155
|
const calculateDims = () => {
|
157
|
-
if (
|
158
|
-
const rect =
|
156
|
+
if (targetRef?.current) {
|
157
|
+
const rect = targetRef.current.getBoundingClientRect();
|
159
158
|
|
160
159
|
setMenuPosition({
|
161
|
-
top: rect.top,
|
162
|
-
left: rect.left,
|
160
|
+
top: rect.top + window.scrollY,
|
161
|
+
left: rect.left + window.scrollX,
|
163
162
|
height: rect.height,
|
164
163
|
right: rect.right,
|
165
|
-
rightSpaceAvailable: document.body.clientWidth - rect.right,
|
166
|
-
bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
|
167
164
|
});
|
168
165
|
}
|
169
166
|
};
|
170
|
-
|
171
167
|
return (
|
172
168
|
<div className="ff-menu-option-container" ref={menuRef}>
|
173
169
|
<Tooltip title={tooltipTitle} placement={tooltipPlacement}>
|