pixel-react 1.7.8 → 1.8.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/AllProjectsDropdown/types.d.ts +2 -0
- package/lib/components/Button/Button.d.ts +2 -2
- package/lib/components/Button/types.d.ts +17 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
- package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
- package/lib/components/ChooseFile/types.d.ts +68 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
- package/lib/components/ConnectingBranch/data.d.ts +19 -33
- package/lib/components/ConnectingBranch/types.d.ts +10 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
- package/lib/components/LabelEditTextField/types.d.ts +2 -0
- package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
- package/lib/components/Select/types.d.ts +1 -1
- package/lib/components/StatusCard/types.d.ts +2 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/data.d.ts +74 -0
- package/lib/components/TableTree/types.d.ts +4 -0
- package/lib/components/TextArea/Textarea.d.ts +1 -1
- package/lib/components/TextArea/Types.d.ts +1 -0
- package/lib/index.d.ts +176 -63
- package/lib/index.esm.js +458 -273
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +458 -272
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/validateFile/validateFile.d.ts +2 -0
- package/package.json +2 -2
- package/src/assets/Themes/BaseTheme.scss +1 -0
- package/src/assets/Themes/BlueTheme.scss +44 -44
- package/src/assets/Themes/DarkTheme.scss +1 -0
- package/src/assets/icons/failed_status_icon.svg +1 -1
- package/src/assets/icons/flaky_status_icon.svg +1 -1
- package/src/assets/icons/settings.svg +3 -0
- package/src/assets/icons/skipped_status_icon.svg +1 -1
- package/src/assets/icons/warning_status_icon.svg +1 -1
- package/src/components/AllProjectsDropdown/types.ts +2 -0
- package/src/components/AppHeader/AppHeader.scss +6 -2
- package/src/components/Button/Button.scss +12 -0
- package/src/components/Button/Button.tsx +29 -11
- package/src/components/Button/types.ts +21 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
- package/src/components/Charts/MultiRadialChart/types.ts +4 -1
- package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
- package/src/components/ChooseFile/ChooseFile.tsx +46 -0
- package/src/components/ChooseFile/types.ts +78 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
- package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
- package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
- package/src/components/ConnectingBranch/types.ts +21 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
- package/src/components/LabelEditTextField/types.ts +2 -0
- package/src/components/MachineInputField/MachineInputField.tsx +67 -70
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
- package/src/components/Select/Select.tsx +4 -4
- package/src/components/Select/types.ts +1 -1
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
- package/src/components/StatusCard/StatusCard.scss +2 -1
- package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
- package/src/components/StatusCard/StatusCard.tsx +10 -2
- package/src/components/StatusCard/types.ts +2 -0
- package/src/components/TableTree/Components/TableBody.tsx +19 -15
- package/src/components/TableTree/Components/TableCell.tsx +47 -31
- package/src/components/TableTree/Components/TableRow.tsx +4 -0
- package/src/components/TableTree/TableTree.scss +122 -109
- package/src/components/TableTree/data.ts +16 -1
- package/src/components/TableTree/types.ts +4 -0
- package/src/components/TextArea/Textarea.tsx +2 -0
- package/src/components/TextArea/Types.ts +3 -0
- package/src/index.ts +3 -0
- package/src/utils/validateFile/validateFile.stories.tsx +49 -0
- package/src/utils/validateFile/validateFile.ts +39 -0
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
@@ -15,6 +15,7 @@ import {
|
|
15
15
|
calculateSpreadsheetSize,
|
16
16
|
getCSV,
|
17
17
|
shouldHandleClipboardEvent,
|
18
|
+
isFocusedWithin,
|
18
19
|
} from './util';
|
19
20
|
|
20
21
|
import DefaultTable from './Table';
|
@@ -98,7 +99,7 @@ export type Props<CellType extends Types.CellBase> = {
|
|
98
99
|
/** Callback called when the Spreadsheet's evaluated data changes. */
|
99
100
|
onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
|
100
101
|
setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
|
101
|
-
|
102
|
+
/** Set your dynamic sheet Height*/
|
102
103
|
sheetHeight: string;
|
103
104
|
};
|
104
105
|
|
@@ -119,6 +120,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
119
120
|
HeaderRow = DefaultHeaderRow,
|
120
121
|
DataEditor = DefaultDataEditor,
|
121
122
|
DataViewer = DefaultDataViewer,
|
123
|
+
onSelect = () => {},
|
124
|
+
onActivate = () => {},
|
122
125
|
onEvaluatedDataChange = () => {},
|
123
126
|
} = props;
|
124
127
|
type State = Types.StoreState<CellType>;
|
@@ -162,6 +165,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
162
165
|
const copy = useAction(Actions.copy);
|
163
166
|
const paste = useAction(Actions.paste);
|
164
167
|
const onKeyDownAction = useAction(Actions.keyDown);
|
168
|
+
const onKeyPress = useAction(Actions.keyPress);
|
165
169
|
const onDragStart = useAction(Actions.dragStart);
|
166
170
|
const onDragEnd = useAction(Actions.dragEnd);
|
167
171
|
const setData = useAction(Actions.setData);
|
@@ -183,6 +187,23 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
183
187
|
const deleteRow = useAction(Actions.deleteRow);
|
184
188
|
const deleteColumn = useAction(Actions.deleteColumn);
|
185
189
|
|
190
|
+
// Track active
|
191
|
+
const prevActiveRef = React.useRef<Point.Point | null>(state.active);
|
192
|
+
React.useEffect(() => {
|
193
|
+
if (state.active !== prevActiveRef.current) {
|
194
|
+
if (state.active) {
|
195
|
+
onActivate(state.active);
|
196
|
+
} else {
|
197
|
+
const root = rootRef.current;
|
198
|
+
if (root && isFocusedWithin(root) && document.activeElement) {
|
199
|
+
(document.activeElement as HTMLElement).blur();
|
200
|
+
}
|
201
|
+
}
|
202
|
+
}
|
203
|
+
|
204
|
+
prevActiveRef.current = state.active;
|
205
|
+
}, [onActivate, state.active]);
|
206
|
+
|
186
207
|
const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
|
187
208
|
state.model.evaluatedData
|
188
209
|
);
|
@@ -194,6 +215,17 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
194
215
|
prevEvaluatedDataRef.current = state.model.evaluatedData;
|
195
216
|
}, [state?.model?.evaluatedData, onEvaluatedDataChange]);
|
196
217
|
|
218
|
+
const prevSelectedRef = React.useRef<Selection>(state.selected);
|
219
|
+
React.useEffect(() => {
|
220
|
+
if (!state.selected.equals(prevSelectedRef.current)) {
|
221
|
+
if (!props.selected || !state.selected.equals(props.selected)) {
|
222
|
+
onSelect(state.selected);
|
223
|
+
}
|
224
|
+
}
|
225
|
+
|
226
|
+
prevSelectedRef.current = state.selected;
|
227
|
+
}, [state.selected, onSelect, props.selected]);
|
228
|
+
|
197
229
|
// Update selection when props.selected changes
|
198
230
|
const prevSelectedPropRef = React.useRef<Selection | undefined>(
|
199
231
|
props.selected
|
@@ -446,25 +478,32 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
446
478
|
const rootNode = React.useMemo(
|
447
479
|
() => (
|
448
480
|
<div className="ff-excel">
|
449
|
-
|
450
|
-
<
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
481
|
+
<div className="ff-excel-header-hider ff-excel-header-column-hider"></div>
|
482
|
+
<div className="ff-excel-header-hider ff-excel-header-row-hider"></div>
|
483
|
+
<div className="ff-excel-toolbar-container">
|
484
|
+
<ExcelToolBar
|
485
|
+
onBold={onBold}
|
486
|
+
onItalic={onItalic}
|
487
|
+
setUnderlineType={setUnderlineType}
|
488
|
+
setColor={setColor}
|
489
|
+
setBorderType={setBorderType}
|
490
|
+
setFontSize={setFontSize}
|
491
|
+
setFontFamily={setFontFamily}
|
492
|
+
setTextAlign={setTextAlign}
|
493
|
+
setBackgroundColor={setBackgroundColor}
|
494
|
+
setFormatePainter={setFormatePainter}
|
495
|
+
/>
|
496
|
+
</div>
|
463
497
|
<div
|
464
498
|
ref={rootRef}
|
465
|
-
style={{height:sheetHeight}}
|
466
|
-
className={classNames('ff-spreadsheet', className)}
|
467
|
-
|
499
|
+
style={{ height: sheetHeight }}
|
500
|
+
className={classNames('ff-excel-spreadsheet', className)}
|
501
|
+
onKeyPress={(e) => {
|
502
|
+
onKeyPress(e);
|
503
|
+
}}
|
504
|
+
onKeyDown={(e) => {
|
505
|
+
handleKeyDown(e);
|
506
|
+
}}
|
468
507
|
onMouseMove={handleMouseMove}
|
469
508
|
>
|
470
509
|
{tableNode}
|
@@ -474,7 +513,14 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
474
513
|
</div>
|
475
514
|
</div>
|
476
515
|
),
|
477
|
-
[
|
516
|
+
[
|
517
|
+
className,
|
518
|
+
onKeyPress,
|
519
|
+
handleKeyDown,
|
520
|
+
handleMouseMove,
|
521
|
+
tableNode,
|
522
|
+
activeCellNode,
|
523
|
+
]
|
478
524
|
);
|
479
525
|
|
480
526
|
return (
|
@@ -298,6 +298,19 @@ export type SetDataAction = BaseAction<typeof SET_DATA> & {
|
|
298
298
|
};
|
299
299
|
};
|
300
300
|
|
301
|
+
export type KeyPressAction = BaseAction<typeof KEY_PRESS> & {
|
302
|
+
payload: {
|
303
|
+
event: React.KeyboardEvent;
|
304
|
+
};
|
305
|
+
};
|
306
|
+
|
307
|
+
export function keyPress(event: React.KeyboardEvent): KeyPressAction {
|
308
|
+
return {
|
309
|
+
type: KEY_PRESS,
|
310
|
+
payload: { event },
|
311
|
+
};
|
312
|
+
}
|
313
|
+
|
301
314
|
export function setData(data: Matrix<CellBase>): SetDataAction {
|
302
315
|
return {
|
303
316
|
type: SET_DATA,
|
@@ -544,6 +557,7 @@ export type Action =
|
|
544
557
|
| UnderlineTypeStyle
|
545
558
|
| FontSize
|
546
559
|
| FontFamily
|
560
|
+
| KeyPressAction
|
547
561
|
| TextAlignType
|
548
562
|
| BorderType
|
549
563
|
| ItalicStyle
|
@@ -582,6 +582,22 @@ export default function reducer(
|
|
582
582
|
return blur(state);
|
583
583
|
}
|
584
584
|
|
585
|
+
case Actions.KEY_PRESS: {
|
586
|
+
const { event } = action.payload;
|
587
|
+
|
588
|
+
if (isActiveReadOnly(state) || event.metaKey) {
|
589
|
+
return state;
|
590
|
+
}
|
591
|
+
if (state.mode === 'view' && state.active) {
|
592
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
593
|
+
if (selectedRange?.size() === 1) {
|
594
|
+
return edit(clear(state));
|
595
|
+
}
|
596
|
+
return edit(state);
|
597
|
+
}
|
598
|
+
return state;
|
599
|
+
}
|
600
|
+
|
585
601
|
case Actions.KEY_DOWN: {
|
586
602
|
const { event } = action.payload;
|
587
603
|
const handler = getKeyDownHandler(state, event);
|
@@ -123,8 +123,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
123
123
|
value: 'double_border',
|
124
124
|
label: 'Double Underline',
|
125
125
|
icon: 'double_underline',
|
126
|
-
}
|
127
|
-
{ value: 'line-through', label: 'Strikethrough', icon: 'strike_through' },
|
126
|
+
}
|
128
127
|
];
|
129
128
|
|
130
129
|
const fontFamily = [
|
@@ -415,8 +414,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
415
414
|
</div>
|
416
415
|
</Tooltip>
|
417
416
|
</div>
|
418
|
-
|
419
|
-
|
417
|
+
|
418
|
+
|
419
|
+
{/* <div className="ff-excel-toolbar-divider"></div> TODO */}
|
420
|
+
{/* <div className="ff-excel-toolbar-menu">
|
420
421
|
<Tooltip placement="top" title={'Formula'}>
|
421
422
|
<Icon
|
422
423
|
hoverEffect
|
@@ -425,7 +426,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
425
426
|
name="formula_icon"
|
426
427
|
/>
|
427
428
|
</Tooltip>
|
428
|
-
</div>
|
429
|
+
</div> TODO */}
|
429
430
|
</div>
|
430
431
|
);
|
431
432
|
};
|
@@ -252,6 +252,7 @@ import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?reac
|
|
252
252
|
import suitesIcon from '../../assets/icons/suites_icon.svg?react';
|
253
253
|
import executionsIcon from '../../assets/icons/executions_icon.svg?react';
|
254
254
|
import ImportIcon from '../../assets/icons/import_icon.svg?react';
|
255
|
+
import Settings from '../../assets/icons/settings.svg?react';
|
255
256
|
|
256
257
|
Components['success'] = ToastSuccessIcon;
|
257
258
|
Components['alert'] = Alert;
|
@@ -499,5 +500,6 @@ Components['machine_disable_icon'] = machineDisableIcon;
|
|
499
500
|
Components['executions_icon'] = executionsIcon;
|
500
501
|
Components['suites_icon'] = suitesIcon;
|
501
502
|
Components['import_icon'] = ImportIcon;
|
503
|
+
Components['settings'] = Settings
|
502
504
|
|
503
505
|
export default Components;
|
@@ -18,7 +18,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
|
|
18
18
|
error,
|
19
19
|
helperText,
|
20
20
|
optionsList,
|
21
|
-
selectedOption,
|
21
|
+
selectedOption = { label: '', value: '' },
|
22
22
|
autoComplete = 'off',
|
23
23
|
onDropdownChangeHandler = () => {},
|
24
24
|
onInputChangeHandler,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { useState } from 'react';
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
3
3
|
import LabelEditTextField from './LabelEditTextField';
|
4
4
|
import '../../assets/styles/_colors.scss';
|
@@ -155,16 +155,20 @@ export const textFieldWithHighlight: Story = {
|
|
155
155
|
};
|
156
156
|
export const openLabelEditTextField: Story = {
|
157
157
|
render: () => {
|
158
|
+
const [demoText, setDemoText] = useState('Verify The');
|
158
159
|
const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
|
159
160
|
//DEMO: we are getting that value from LabelEditTextField
|
160
|
-
|
161
|
+
setDemoText(inputValue);
|
161
162
|
console.info(
|
162
163
|
'Confirmed input value and dropdown value:',
|
163
164
|
inputValue,
|
164
165
|
dropdownValue
|
165
166
|
);
|
166
167
|
};
|
167
|
-
|
168
|
+
const handleInputChange = (newInputValue: string) => {
|
169
|
+
setDemoText(newInputValue); // Update parent state
|
170
|
+
};
|
171
|
+
console.log('demoText: ', demoText);
|
168
172
|
return (
|
169
173
|
<LabelEditTextField
|
170
174
|
label="Add Module"
|
@@ -181,6 +185,7 @@ export const openLabelEditTextField: Story = {
|
|
181
185
|
width="400px"
|
182
186
|
height="22px"
|
183
187
|
confirmAction={handleConfirmAction}
|
188
|
+
onInputChange={handleInputChange}
|
184
189
|
isOpen={true}
|
185
190
|
customError="text is too long"
|
186
191
|
customErrorCondition={demoText?.length > 10}
|
@@ -21,7 +21,7 @@ const getErrorMessage = (
|
|
21
21
|
} else if (inputValue.length < 3) {
|
22
22
|
return 'Please enter at least 3 characters.';
|
23
23
|
} else if (customErrorCondition) {
|
24
|
-
return customError ?? '';
|
24
|
+
return customError ?? 'Custom error occurred';
|
25
25
|
}
|
26
26
|
return '';
|
27
27
|
};
|
@@ -35,6 +35,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
35
35
|
customErrorCondition,
|
36
36
|
cancelIcon,
|
37
37
|
variant = 'textField',
|
38
|
+
onInputChange,
|
38
39
|
dropdownData = [],
|
39
40
|
// width,
|
40
41
|
height,
|
@@ -87,14 +88,16 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
87
88
|
setClickTimeout(timeout);
|
88
89
|
};
|
89
90
|
const handleConfirm = () => {
|
90
|
-
|
91
|
-
|
92
|
-
text
|
93
|
-
|
94
|
-
|
95
|
-
)
|
91
|
+
let errorMessage = '';
|
92
|
+
if (inputValue.length === 0 || inputValue.trim().length === 0) {
|
93
|
+
errorMessage = 'Please type any text.';
|
94
|
+
} else if (inputValue.length < 3) {
|
95
|
+
errorMessage = 'Please enter at least 3 characters.';
|
96
|
+
} else if (customErrorCondition) {
|
97
|
+
errorMessage = customError ?? 'Invalid input.';
|
98
|
+
}
|
96
99
|
|
97
|
-
if (errorMessage
|
100
|
+
if (errorMessage) {
|
98
101
|
setShowError(errorMessage);
|
99
102
|
} else {
|
100
103
|
setIsEditing(false);
|
@@ -112,9 +115,23 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
112
115
|
};
|
113
116
|
|
114
117
|
const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
+
const newValue = e.target.value;
|
119
|
+
setInputValue(newValue);
|
120
|
+
if (newValue.length === 0 || newValue.trim().length === 0) {
|
121
|
+
setShowError('Please type any text.');
|
122
|
+
} else if (newValue.length < 3) {
|
123
|
+
setShowError('Please enter at least 3 characters.');
|
124
|
+
} else if (customErrorCondition) {
|
125
|
+
setShowError(customError ?? 'Invalid input.');
|
126
|
+
} else {
|
127
|
+
setShowError('');
|
128
|
+
}
|
129
|
+
|
130
|
+
setIsTextFieldModified(newValue !== text);
|
131
|
+
|
132
|
+
if (onInputChange) {
|
133
|
+
onInputChange(newValue);
|
134
|
+
}
|
118
135
|
};
|
119
136
|
|
120
137
|
const handleBlur = (e: MouseEvent) => {
|
@@ -40,6 +40,8 @@ export interface LabelEditTextFieldTypes {
|
|
40
40
|
customErrorCondition?: boolean;
|
41
41
|
placeholder?: string;
|
42
42
|
onClick?: () => void;
|
43
|
+
/** Function called when every input character got changed */
|
44
|
+
onInputChange?: (newInputValue: string) => void;
|
43
45
|
tooltip?: {
|
44
46
|
tooltipTitle?: string;
|
45
47
|
tooltipPlacement?: string;
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { forwardRef } from 'react';
|
2
1
|
import './MachineInputField.scss';
|
3
2
|
import Typography from '../Typography';
|
4
3
|
import Icon from '../Icon';
|
@@ -6,81 +5,79 @@ import { MachineInputFieldProps, MachineType } from './types';
|
|
6
5
|
import classNames from 'classnames';
|
7
6
|
import { truncateText } from '../../utils/truncateText/truncateText';
|
8
7
|
|
9
|
-
const MachineInputField =
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
};
|
8
|
+
const MachineInputField = ({
|
9
|
+
width = '',
|
10
|
+
options = [],
|
11
|
+
runCount = 0,
|
12
|
+
className = '',
|
13
|
+
contentReverse = false,
|
14
|
+
onClick = () => {},
|
15
|
+
modalId = '',
|
16
|
+
}: MachineInputFieldProps) => {
|
17
|
+
const getIcon: Record<MachineType['type'], string> = {
|
18
|
+
local: 'local',
|
19
|
+
browserstack: 'browserstack_icon',
|
20
|
+
sauceLabs: 'sause_lab',
|
21
|
+
lambdaTest: 'lambda_icon',
|
22
|
+
mac: 'mac_icon',
|
23
|
+
android: 'android_icon',
|
24
|
+
linux: 'linux',
|
25
|
+
'google chrome': 'chrome_icon',
|
26
|
+
'mozilla firefox': 'fire_fox',
|
27
|
+
'microsoft edge': 'edge',
|
28
|
+
'internet explorer': 'internet_explorer',
|
29
|
+
safari: 'safari_icon',
|
30
|
+
opera: 'opera',
|
31
|
+
windows: 'windows',
|
32
|
+
};
|
35
33
|
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
34
|
+
return (
|
35
|
+
<div
|
36
|
+
id={modalId}
|
37
|
+
style={{ width: width }}
|
38
|
+
className={classNames('ff-machine-input-field-wrapper', className)}
|
39
|
+
onClick={() => onClick()}
|
40
|
+
>
|
41
|
+
<Typography
|
42
|
+
as="span"
|
43
|
+
color="var(--ff-machine-input-field-text-color)"
|
44
|
+
fontSize={8}
|
45
|
+
textAlign="center"
|
46
|
+
className="ff-machine-input-label"
|
42
47
|
>
|
43
|
-
|
44
|
-
|
45
|
-
color="var(--ff-machine-input-field-text-color)"
|
46
|
-
fontSize={8}
|
47
|
-
textAlign="center"
|
48
|
-
className="ff-machine-input-label"
|
49
|
-
>
|
50
|
-
Run {runCount}
|
51
|
-
</Typography>
|
48
|
+
Run {runCount}
|
49
|
+
</Typography>
|
52
50
|
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
51
|
+
<div
|
52
|
+
className={classNames('ff-machine-input-field', {
|
53
|
+
'ff-machine-input-field-reverse': contentReverse,
|
54
|
+
})}
|
55
|
+
>
|
56
|
+
{options.map(({ label, type = 'local' }) => (
|
57
|
+
<div
|
58
|
+
key={type}
|
59
|
+
className={classNames('ff-machine-icon-text-wrapper', {
|
60
|
+
'ff-machine-icon-text-wrapper-reverse': contentReverse,
|
61
|
+
})}
|
62
|
+
>
|
63
|
+
<Icon
|
64
|
+
name={getIcon[type?.toLowerCase()] || 'local'}
|
65
|
+
className="ff-machine-icon"
|
66
|
+
/>
|
67
|
+
<Typography
|
68
|
+
className={classNames('ff-machine-text', {
|
69
|
+
'ff-machine-text-reverse': contentReverse,
|
63
70
|
})}
|
71
|
+
color="var(--ff-machine-input-field-text-color)"
|
64
72
|
>
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
<Typography
|
70
|
-
className={classNames('ff-machine-text', {
|
71
|
-
'ff-machine-text-reverse': contentReverse,
|
72
|
-
})}
|
73
|
-
color="var(--ff-machine-input-field-text-color)"
|
74
|
-
>
|
75
|
-
{truncateText(label, 15)}
|
76
|
-
</Typography>
|
77
|
-
</div>
|
78
|
-
))}
|
79
|
-
</div>
|
73
|
+
{truncateText(label, 15)}
|
74
|
+
</Typography>
|
75
|
+
</div>
|
76
|
+
))}
|
80
77
|
</div>
|
81
|
-
|
82
|
-
|
83
|
-
|
78
|
+
</div>
|
79
|
+
);
|
80
|
+
};
|
84
81
|
|
85
82
|
MachineInputField.displayName = 'MachineInputField';
|
86
83
|
|
@@ -228,10 +228,10 @@ const Select: FC<SelectProps> = ({
|
|
228
228
|
as="span"
|
229
229
|
className={classNames('ff-select-labels', {
|
230
230
|
'ff-select-labels__icon': showIcon,
|
231
|
-
'ff-select-labels__active':
|
231
|
+
'ff-select-labels__active': searchedText,
|
232
232
|
})}
|
233
|
-
fontSize={
|
234
|
-
lineHeight={
|
233
|
+
fontSize={searchedText || showDropdownOptions ? 10 : 12}
|
234
|
+
lineHeight={searchedText || showDropdownOptions ? '10px' : '12px'}
|
235
235
|
required={required}
|
236
236
|
>
|
237
237
|
{label}
|
@@ -264,7 +264,7 @@ const Select: FC<SelectProps> = ({
|
|
264
264
|
onSelectBlur={onSelectBlur}
|
265
265
|
onSelectOptionSelector={onSelectOptionSelector}
|
266
266
|
heightFromTop={height}
|
267
|
-
selectedOption={
|
267
|
+
selectedOption={searchedText}
|
268
268
|
showIcon={showIcon}
|
269
269
|
/>,
|
270
270
|
document.body
|
@@ -72,12 +72,6 @@ const Branches = ({
|
|
72
72
|
machineInfo: { osVersion, iconName },
|
73
73
|
deviceInfo,
|
74
74
|
} = machineInstance as ExecutionContext;
|
75
|
-
// Helper to handle device info safely
|
76
|
-
const getDeviceOption = (platform: string, defaultType: string = '', index = 0) =>
|
77
|
-
deviceInfo?.[index]?.platform?.toLowerCase().includes(platform ?? '')
|
78
|
-
? defaultType
|
79
|
-
: undefined;
|
80
|
-
|
81
75
|
const getEnvironment = (environment: string = '') => {
|
82
76
|
if (environment.toLowerCase().includes('browserstack'))
|
83
77
|
return 'Browserstack';
|
@@ -110,11 +104,11 @@ const Branches = ({
|
|
110
104
|
const mobileOptions = [
|
111
105
|
{
|
112
106
|
label: deviceInfo?.[0]?.name,
|
113
|
-
type:
|
107
|
+
type: 'android',
|
114
108
|
},
|
115
109
|
{
|
116
110
|
label: deviceInfo?.[1]?.name,
|
117
|
-
type:
|
111
|
+
type: 'mac',
|
118
112
|
},
|
119
113
|
];
|
120
114
|
|