pixel-react 1.7.7 → 1.7.9
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/1fb4472b34e4fe07.css +1 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
- package/lib/components/Button/Button.d.ts +2 -2
- package/lib/components/Button/Button.stories.d.ts +1 -0
- package/lib/components/Button/types.d.ts +17 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -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/Drawer/Drawer.stories.d.ts +5 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
- package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
- package/lib/components/ExcelFile/Types.d.ts +129 -0
- package/lib/components/ExcelFile/index.d.ts +1 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +6 -5
- package/lib/components/Icon/Icon.stories.d.ts +1 -0
- package/lib/components/IconButton/IconButton.stories.d.ts +1 -0
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +11 -0
- package/lib/components/LabelEditTextField/types.d.ts +2 -0
- package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +1 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +2 -1
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/NLPInput/type.d.ts +70 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +2 -1
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +1 -1
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +2 -0
- package/lib/components/Select/types.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/StatusCard/types.d.ts +2 -0
- package/lib/components/Table/Table.stories.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/components/Toastify/Toastify.stories.d.ts +6 -0
- package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +174 -63
- package/lib/index.esm.js +478 -287
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +478 -286
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/ffID/ffID.stories.d.ts +1 -1
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/validateFile/validateFile.d.ts +2 -0
- package/package.json +1 -1
- 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/AppHeader/AppHeader.tsx +4 -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/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
- package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
- 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
@@ -17,6 +17,7 @@ const Textarea = ({
|
|
17
17
|
onChange,
|
18
18
|
onBlur,
|
19
19
|
onFocus,
|
20
|
+
onPaste,
|
20
21
|
rows = 4,
|
21
22
|
cols = 40,
|
22
23
|
resize = false,
|
@@ -65,6 +66,7 @@ const Textarea = ({
|
|
65
66
|
onChange={onChange}
|
66
67
|
onBlur={onBlur}
|
67
68
|
onFocus={onFocus}
|
69
|
+
onPaste={onPaste}
|
68
70
|
required={required}
|
69
71
|
rows={rows}
|
70
72
|
cols={cols}
|
@@ -49,6 +49,9 @@ export interface TextareaProps {
|
|
49
49
|
onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
|
50
50
|
|
51
51
|
onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
|
52
|
+
|
53
|
+
onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
|
54
|
+
|
52
55
|
/**
|
53
56
|
* id to select the textarea field uniquely
|
54
57
|
*/
|
package/src/index.ts
CHANGED
@@ -71,6 +71,7 @@ import FieldSet from './components/FieldSet';
|
|
71
71
|
import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
|
72
72
|
import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
|
73
73
|
import ProgressBar from './components/ProgressBar';
|
74
|
+
import ChooseFile from './components/ChooseFile/ChooseFile';
|
74
75
|
|
75
76
|
// Utils imports
|
76
77
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
@@ -184,6 +185,8 @@ export {
|
|
184
185
|
PhoneInputField,
|
185
186
|
TableWithAccordion,
|
186
187
|
ProgressBar,
|
188
|
+
ChooseFile,
|
189
|
+
|
187
190
|
// utils exports
|
188
191
|
checkEmpty,
|
189
192
|
getExtension,
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import {
|
3
|
+
validateFileExtension,
|
4
|
+
validateZipFileExtension,
|
5
|
+
} from './validateFile';
|
6
|
+
|
7
|
+
export default {
|
8
|
+
title: 'Utils/validateFile',
|
9
|
+
};
|
10
|
+
|
11
|
+
const allowedFileTypes = {
|
12
|
+
'.txt': 'text/plain',
|
13
|
+
'.zip': 'application/zip',
|
14
|
+
'.jpg': 'image/jpeg',
|
15
|
+
};
|
16
|
+
|
17
|
+
export const ValidateFileExtension = () => {
|
18
|
+
const [result, setResult] = useState<string | boolean>('');
|
19
|
+
|
20
|
+
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
21
|
+
const isValid = validateFileExtension(event, allowedFileTypes);
|
22
|
+
setResult(isValid ? 'Valid file type' : 'Invalid file type');
|
23
|
+
};
|
24
|
+
|
25
|
+
return (
|
26
|
+
<div>
|
27
|
+
<h3>Validate File Extension</h3>
|
28
|
+
<input type="file" onChange={handleFileChange} />
|
29
|
+
<p>Result: {result.toString()}</p>
|
30
|
+
</div>
|
31
|
+
);
|
32
|
+
};
|
33
|
+
|
34
|
+
export const ValidateZipFileExtension = () => {
|
35
|
+
const [result, setResult] = useState<string | boolean>('');
|
36
|
+
|
37
|
+
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
38
|
+
const isValid = validateZipFileExtension(event);
|
39
|
+
setResult(isValid ? 'Valid ZIP file' : 'Invalid ZIP file');
|
40
|
+
};
|
41
|
+
|
42
|
+
return (
|
43
|
+
<div>
|
44
|
+
<h3>Validate ZIP File Extension</h3>
|
45
|
+
<input type="file" onChange={handleFileChange} />
|
46
|
+
<p>Result: {result.toString()}</p>
|
47
|
+
</div>
|
48
|
+
);
|
49
|
+
};
|
@@ -0,0 +1,39 @@
|
|
1
|
+
export const validateFileExtension = (
|
2
|
+
file: File | React.ChangeEvent<HTMLInputElement>,
|
3
|
+
allowedFileTypes: Record<string, string>
|
4
|
+
) => {
|
5
|
+
const selectedFile =
|
6
|
+
(file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
|
7
|
+
(file as File);
|
8
|
+
const fileExtension =
|
9
|
+
'.' + selectedFile?.name?.split('.')?.pop()?.toLowerCase();
|
10
|
+
const fileType = selectedFile?.type;
|
11
|
+
if (
|
12
|
+
['.ipa', '.y4m', '.yml', '.md', '.pem', '.properties'].includes(
|
13
|
+
fileExtension
|
14
|
+
) &&
|
15
|
+
Object.keys(allowedFileTypes)?.includes(fileExtension)
|
16
|
+
) {
|
17
|
+
return true;
|
18
|
+
}
|
19
|
+
return (
|
20
|
+
allowedFileTypes[fileExtension] &&
|
21
|
+
fileType === allowedFileTypes[fileExtension]
|
22
|
+
);
|
23
|
+
};
|
24
|
+
|
25
|
+
export const validateZipFileExtension = (
|
26
|
+
file: File | React.ChangeEvent<HTMLInputElement>
|
27
|
+
) => {
|
28
|
+
const selectedFile =
|
29
|
+
(file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
|
30
|
+
(file as File);
|
31
|
+
// List of valid MIME types
|
32
|
+
const validMimeTypes = ['application/zip', 'application/x-zip-compressed'];
|
33
|
+
// Validating the file extension and MIME type
|
34
|
+
return (
|
35
|
+
selectedFile &&
|
36
|
+
validMimeTypes?.includes(selectedFile?.type) &&
|
37
|
+
selectedFile?.name?.toLowerCase()?.endsWith('.zip')
|
38
|
+
);
|
39
|
+
};
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import React, { ReactNode } from 'react';
|
2
|
-
import { ThemeContextType } from './types';
|
3
|
-
declare const ThemeContext: React.Context<ThemeContextType | undefined>;
|
4
|
-
declare const CustomThemeProvider: React.FC<{
|
5
|
-
children: ReactNode;
|
6
|
-
}>;
|
7
|
-
export { ThemeContext };
|
8
|
-
export default CustomThemeProvider;
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import React, { ReactNode } from 'react';
|
2
|
-
interface ThemeContextType {
|
3
|
-
currentTheme: string;
|
4
|
-
setCurrentTheme: React.Dispatch<React.SetStateAction<string>>;
|
5
|
-
applyTheme: (newTheme: string) => void;
|
6
|
-
}
|
7
|
-
export declare const useCustomThemeProvider: React.FC<{
|
8
|
-
children: ReactNode;
|
9
|
-
}>;
|
10
|
-
export declare const useTheme: () => ThemeContextType;
|
11
|
-
export {};
|
package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss
DELETED
@@ -1,51 +0,0 @@
|
|
1
|
-
.ff-connecting-datalist-modal-header-wrapper,
|
2
|
-
.ff-connecting-modal-child-wrapper {
|
3
|
-
width: 534px;
|
4
|
-
padding: 0 4px;
|
5
|
-
}
|
6
|
-
|
7
|
-
.ff-connecting-datalist-modal-header-wrapper {
|
8
|
-
border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
|
9
|
-
margin-bottom: 4px;
|
10
|
-
}
|
11
|
-
|
12
|
-
.ff-connecting-modal-child-wrapper {
|
13
|
-
.ff-branch-select-input-wrapper {
|
14
|
-
display: flex;
|
15
|
-
align-items: center;
|
16
|
-
gap: 8px;
|
17
|
-
|
18
|
-
.ff-select-browser {
|
19
|
-
width: 263px;
|
20
|
-
}
|
21
|
-
|
22
|
-
.ff-branch-input-wrapper {
|
23
|
-
display: flex;
|
24
|
-
align-items: flex-end;
|
25
|
-
height: 38px;
|
26
|
-
|
27
|
-
.ff-input-browser {
|
28
|
-
width: 245px;
|
29
|
-
}
|
30
|
-
}
|
31
|
-
}
|
32
|
-
}
|
33
|
-
|
34
|
-
.ff-connecting-modal-footer-wrapper {
|
35
|
-
display: flex;
|
36
|
-
align-items: center;
|
37
|
-
justify-content: space-between;
|
38
|
-
padding: 0 8px;
|
39
|
-
margin-top: 8px;
|
40
|
-
border-top: 1px solid var(--ff-connecting-branch-modal-border);
|
41
|
-
|
42
|
-
.ff-branch-toggle-wrapper,
|
43
|
-
.ff-datalist-button-wrapper {
|
44
|
-
display: flex;
|
45
|
-
gap: 8px;
|
46
|
-
}
|
47
|
-
|
48
|
-
.ff-branch-toggle-wrapper {
|
49
|
-
gap: 4px;
|
50
|
-
}
|
51
|
-
}
|
package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx
DELETED
@@ -1,107 +0,0 @@
|
|
1
|
-
import { forwardRef, RefObject } from 'react';
|
2
|
-
import MiniModal from '../../../MiniModal';
|
3
|
-
import Typography from '../../../Typography';
|
4
|
-
import './AddBrowserModal.scss';
|
5
|
-
import Select from '../../../Select';
|
6
|
-
import Button from '../../../Button';
|
7
|
-
import Toggle from '../../../Toggle';
|
8
|
-
import Input from '../../../Input/Input';
|
9
|
-
import { AddBrowserModalProps } from './types';
|
10
|
-
|
11
|
-
const AddBrowserModal = forwardRef<HTMLButtonElement, AddBrowserModalProps>(
|
12
|
-
(props, ref) => {
|
13
|
-
// TODO: WILL BE REMOVE IN THE FUTURE
|
14
|
-
const selectOptions = [
|
15
|
-
{ label: 'Execution Environment', inputName: 'number of runs' },
|
16
|
-
{ label: 'Browser', inputName: 'Browser Version' },
|
17
|
-
{ label: 'Android Device', inputName: 'os version' },
|
18
|
-
{ label: 'IOS Device', inputName: 'os version-1' },
|
19
|
-
];
|
20
|
-
|
21
|
-
const renderSelectOptions = () => (
|
22
|
-
<div>
|
23
|
-
{selectOptions.map(({ label, inputName }, index) => (
|
24
|
-
<div className="ff-branch-select-input-wrapper" key={index}>
|
25
|
-
<Select
|
26
|
-
optionsList={[]}
|
27
|
-
onChange={() => {}}
|
28
|
-
label={label}
|
29
|
-
className="ff-select-browser"
|
30
|
-
/>
|
31
|
-
<div className="ff-branch-input-wrapper">
|
32
|
-
<Input
|
33
|
-
value="0"
|
34
|
-
label="Number of Runs"
|
35
|
-
type="number"
|
36
|
-
onChange={() => {}}
|
37
|
-
name={inputName}
|
38
|
-
className="ff-input-browser"
|
39
|
-
/>
|
40
|
-
</div>
|
41
|
-
</div>
|
42
|
-
))}
|
43
|
-
</div>
|
44
|
-
);
|
45
|
-
|
46
|
-
const renderFooterContent = () => (
|
47
|
-
<div className="ff-connecting-modal-footer-wrapper">
|
48
|
-
<div className="ff-branch-toggle-wrapper">
|
49
|
-
<Typography as="span" lineHeight="32px">
|
50
|
-
Run in Headless Mode
|
51
|
-
</Typography>
|
52
|
-
<Toggle />
|
53
|
-
</div>
|
54
|
-
<div className="ff-datalist-button-wrapper">
|
55
|
-
<Button label="Cancel" variant="tertiary" />
|
56
|
-
<Button label="Update" variant="primary" />
|
57
|
-
</div>
|
58
|
-
</div>
|
59
|
-
);
|
60
|
-
|
61
|
-
return (
|
62
|
-
<div>
|
63
|
-
<MiniModal
|
64
|
-
anchorRef={ref as RefObject<HTMLButtonElement>}
|
65
|
-
headerProps={
|
66
|
-
<div className="ff-connecting-datalist-modal-header-wrapper">
|
67
|
-
<Typography
|
68
|
-
as="span"
|
69
|
-
color="var(--ff-connecting-branch-modal-header)"
|
70
|
-
fontWeight="semi-bold"
|
71
|
-
fontSize={12}
|
72
|
-
lineHeight="38px"
|
73
|
-
>
|
74
|
-
Add Browser / Device
|
75
|
-
</Typography>
|
76
|
-
</div>
|
77
|
-
}
|
78
|
-
childContent={
|
79
|
-
<div className="ff-connecting-modal-child-wrapper">
|
80
|
-
{renderSelectOptions()}
|
81
|
-
</div>
|
82
|
-
}
|
83
|
-
footerContent={renderFooterContent()}
|
84
|
-
cancelButtonProps={{
|
85
|
-
text: 'Cancel',
|
86
|
-
|
87
|
-
// TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
|
88
|
-
onClick: props.onUpdateAddBrowser,
|
89
|
-
}}
|
90
|
-
proceedButtonProps={{
|
91
|
-
text: 'Proceed',
|
92
|
-
// TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
|
93
|
-
onClick: props.onUpdateAddBrowser,
|
94
|
-
}}
|
95
|
-
modalPosition="right"
|
96
|
-
isPopOver
|
97
|
-
leftTopArrow
|
98
|
-
extraRightSpace={{ leftTopArrow: 45 }}
|
99
|
-
extraLeftSpace={{ rightAlignModal: 115 }}
|
100
|
-
{...props}
|
101
|
-
/>
|
102
|
-
</div>
|
103
|
-
);
|
104
|
-
}
|
105
|
-
);
|
106
|
-
|
107
|
-
export default AddBrowserModal;
|
package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss
DELETED
@@ -1,31 +0,0 @@
|
|
1
|
-
.ff-datalist-modal-header-wrapper,
|
2
|
-
.ff-datalist-modal-child-wrapper,
|
3
|
-
.ff-datalist-modal-footer-wrapper {
|
4
|
-
margin: 0 8px;
|
5
|
-
}
|
6
|
-
|
7
|
-
.ff-datalist-modal-header-wrapper {
|
8
|
-
width: 255px;
|
9
|
-
border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
|
10
|
-
display: flex;
|
11
|
-
align-items: center;
|
12
|
-
}
|
13
|
-
|
14
|
-
.ff-datalist-modal-child-wrapper {
|
15
|
-
.variable {
|
16
|
-
margin: 8px 0;
|
17
|
-
}
|
18
|
-
}
|
19
|
-
|
20
|
-
.ff-datalist-modal-footer-wrapper {
|
21
|
-
display: flex;
|
22
|
-
justify-content: space-between;
|
23
|
-
border-top: 1px solid var(--ff-connecting-branch-modal-border);
|
24
|
-
|
25
|
-
.datalist-button-wrapper {
|
26
|
-
display: flex;
|
27
|
-
gap: 10px;
|
28
|
-
margin-top: 4px;
|
29
|
-
justify-content: flex-end;
|
30
|
-
}
|
31
|
-
}
|
package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx
DELETED
@@ -1,85 +0,0 @@
|
|
1
|
-
import { forwardRef, RefObject } from 'react';
|
2
|
-
import MiniModal from '../../../MiniModal';
|
3
|
-
import Typography from '../../../Typography';
|
4
|
-
import './DatasetListModal.scss';
|
5
|
-
import Select from '../../../Select';
|
6
|
-
import Checkbox from '../../../Checkbox';
|
7
|
-
import Button from '../../../Button';
|
8
|
-
import { DatasetListModalProps } from './types';
|
9
|
-
|
10
|
-
const DatasetListModal = forwardRef<HTMLButtonElement, DatasetListModalProps>(
|
11
|
-
(props, ref) => {
|
12
|
-
const selectOptions = [
|
13
|
-
{ label: 'Project Environment Variable' },
|
14
|
-
{ label: 'Global Variables' },
|
15
|
-
{ label: 'Test Data Set' },
|
16
|
-
];
|
17
|
-
|
18
|
-
const renderSelectOptions = () =>
|
19
|
-
selectOptions.map(({ label }, idx) => (
|
20
|
-
<Select
|
21
|
-
key={idx}
|
22
|
-
optionsList={[]}
|
23
|
-
onChange={() => {}}
|
24
|
-
label={label}
|
25
|
-
className="variable"
|
26
|
-
/>
|
27
|
-
));
|
28
|
-
|
29
|
-
const renderFooterContent = () => (
|
30
|
-
<div className="ff-datalist-modal-footer-wrapper">
|
31
|
-
<Checkbox checked={false} label="Set as Default" />
|
32
|
-
<div className="datalist-button-wrapper">
|
33
|
-
<Button label="Cancel" variant="tertiary" />
|
34
|
-
<Button label="Update" variant="primary" />
|
35
|
-
</div>
|
36
|
-
</div>
|
37
|
-
);
|
38
|
-
|
39
|
-
return (
|
40
|
-
<div>
|
41
|
-
<MiniModal
|
42
|
-
anchorRef={ref as RefObject<HTMLButtonElement>}
|
43
|
-
headerProps={
|
44
|
-
<div className="ff-datalist-modal-header-wrapper">
|
45
|
-
<Typography
|
46
|
-
as="span"
|
47
|
-
color="var(--ff-connecting-branch-modal-header)"
|
48
|
-
fontWeight="semi-bold"
|
49
|
-
fontSize={12}
|
50
|
-
lineHeight="38px"
|
51
|
-
>
|
52
|
-
Data Sets
|
53
|
-
</Typography>
|
54
|
-
</div>
|
55
|
-
}
|
56
|
-
childContent={
|
57
|
-
<div className="ff-datalist-modal-child-wrapper">
|
58
|
-
{renderSelectOptions()}
|
59
|
-
</div>
|
60
|
-
}
|
61
|
-
footerContent={renderFooterContent()}
|
62
|
-
cancelButtonProps={{
|
63
|
-
text: 'Cancel',
|
64
|
-
|
65
|
-
// TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
|
66
|
-
onClick: props?.onUpdateDatasetList,
|
67
|
-
}}
|
68
|
-
proceedButtonProps={{
|
69
|
-
text: 'Proceed',
|
70
|
-
// TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
|
71
|
-
onClick: props?.onUpdateDatasetList,
|
72
|
-
}}
|
73
|
-
modalPosition="right"
|
74
|
-
isPopOver
|
75
|
-
leftTopArrow
|
76
|
-
extraRightSpace={{ leftTopArrow: 40 }}
|
77
|
-
extraLeftSpace={{ rightAlignModal: 110 }}
|
78
|
-
{...props}
|
79
|
-
/>
|
80
|
-
</div>
|
81
|
-
);
|
82
|
-
}
|
83
|
-
);
|
84
|
-
|
85
|
-
export default DatasetListModal;
|