pixel-react 1.6.0 → 1.6.2
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/AppHeader/AppHeader.d.ts +1 -0
- package/lib/components/AppHeader/types.d.ts +18 -6
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MachineInputField/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
- package/lib/components/PopUpModal/types.d.ts +14 -0
- package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
- package/lib/components/TableTree/data.d.ts +36 -2
- package/lib/components/TableTree/types.d.ts +3 -4
- package/lib/index.d.ts +56 -17
- package/lib/index.esm.js +917 -552
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +917 -551
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +5 -14
- package/src/assets/Themes/DarkTheme.scss +5 -2
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/arrow_up.svg +1 -1
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/assets/styles/_fonts.scss +4 -2
- package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
- package/src/components/AppHeader/AppHeader.tsx +158 -139
- package/src/components/AppHeader/types.ts +19 -6
- package/src/components/Charts/BarChart/BarChart.scss +34 -34
- package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
- package/src/components/Charts/BarChart/BarChart.tsx +79 -55
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
- package/src/components/Charts/LineChart/LineChart.scss +13 -4
- package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
- package/src/components/Charts/LineChart/LineChart.tsx +143 -131
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
- package/src/components/Charts/PieChart/PieChart.scss +5 -3
- package/src/components/Charts/PieChart/PieChart.tsx +1 -2
- package/src/components/DatePicker/DatePicker.scss +15 -1
- package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
- package/src/components/Icon/Icons.scss +1 -1
- package/src/components/MachineInputField/MachineInputField.scss +15 -2
- package/src/components/MachineInputField/MachineInputField.tsx +17 -3
- package/src/components/MachineInputField/types.ts +1 -1
- package/src/components/PopUpModal/PopUpModal.scss +36 -0
- package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
- package/src/components/PopUpModal/PopUpModal.tsx +85 -0
- package/src/components/PopUpModal/types.ts +14 -0
- package/src/components/RadioGroup/RadioGroup.scss +7 -0
- package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
- package/src/components/RadioGroup/RadioGroup.tsx +16 -0
- package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
- package/src/components/Select/Select.tsx +2 -3
- package/src/components/Select/components/Dropdown.tsx +34 -34
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/types.ts +18 -3
- package/src/components/TableTree/TableTree.stories.tsx +145 -98
- package/src/components/TableTree/TableTree.tsx +49 -14
- package/src/components/TableTree/data.ts +32 -391
- package/src/components/TableTree/types.ts +3 -4
- package/src/index.ts +3 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -13,7 +13,7 @@
|
|
13
13
|
border-radius: 4px;
|
14
14
|
display: flex;
|
15
15
|
align-items: center;
|
16
|
-
justify-content: space-
|
16
|
+
justify-content: space-between;
|
17
17
|
|
18
18
|
.ff-machine-icon-text-wrapper,
|
19
19
|
.ff-machine-icon-text-wrapper-reverse {
|
@@ -23,8 +23,21 @@
|
|
23
23
|
.ff-machine-icon {
|
24
24
|
margin-left: 4px;
|
25
25
|
}
|
26
|
+
|
27
|
+
.ff-machine-text-reverse,
|
28
|
+
.ff-machine-text {
|
29
|
+
overflow: hidden;
|
30
|
+
white-space: nowrap;
|
31
|
+
text-overflow: ellipsis;
|
32
|
+
min-width: 30px;
|
33
|
+
max-width: 70px;
|
34
|
+
}
|
35
|
+
|
36
|
+
.ff-machine-text-reverse {
|
37
|
+
direction: ltr;
|
38
|
+
}
|
26
39
|
}
|
27
|
-
|
40
|
+
|
28
41
|
.ff-machine-icon-text-wrapper-reverse {
|
29
42
|
flex-direction: row-reverse;
|
30
43
|
}
|
@@ -18,10 +18,19 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
|
|
18
18
|
ref
|
19
19
|
) => {
|
20
20
|
const getIcon: Record<MachineType['type'], string> = {
|
21
|
-
Local: '
|
21
|
+
Local: 'local',
|
22
|
+
Browserstack: 'browserstack_icon',
|
23
|
+
SauceLabs: 'sause_lab',
|
24
|
+
LambdaTest: 'lambda_icon',
|
22
25
|
mac: 'mac_icon',
|
23
26
|
android: 'android_icon',
|
27
|
+
linux: 'linux',
|
24
28
|
'Google Chrome': 'chrome_icon',
|
29
|
+
'Mozilla Firefox': 'fire_fox',
|
30
|
+
'Microsoft Edge': 'edge',
|
31
|
+
'Internet Explorer': 'internet_explorer',
|
32
|
+
Safari: 'safari_icon',
|
33
|
+
Opera: 'opera',
|
25
34
|
};
|
26
35
|
|
27
36
|
return (
|
@@ -53,9 +62,14 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
|
|
53
62
|
'ff-machine-icon-text-wrapper-reverse': contentReverse,
|
54
63
|
})}
|
55
64
|
>
|
56
|
-
<Icon
|
65
|
+
<Icon
|
66
|
+
name={getIcon[type] || 'local'}
|
67
|
+
className="ff-machine-icon"
|
68
|
+
/>
|
57
69
|
<Typography
|
58
|
-
className=
|
70
|
+
className={classNames('ff-machine-text', {
|
71
|
+
'ff-machine-text-reverse': contentReverse,
|
72
|
+
})}
|
59
73
|
color="var(--ff-machine-input-field-text-color)"
|
60
74
|
>
|
61
75
|
{label}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
.warning_modal_container {
|
2
|
+
height: 100%;
|
3
|
+
}
|
4
|
+
.warning_modal_content {
|
5
|
+
display: flex;
|
6
|
+
height: 80%;
|
7
|
+
width: 100%;
|
8
|
+
}
|
9
|
+
.warning_modal_icon {
|
10
|
+
position: relative;
|
11
|
+
bottom: 16px;
|
12
|
+
right: 4px;
|
13
|
+
}
|
14
|
+
.warning_modal_title_wrapper {
|
15
|
+
line-height: 30px;
|
16
|
+
}
|
17
|
+
.warning_modal_message_wrapper {
|
18
|
+
padding-top: 8px;
|
19
|
+
display: flex;
|
20
|
+
height: 100%;
|
21
|
+
flex-direction: column;
|
22
|
+
justify-content: space-between;
|
23
|
+
}
|
24
|
+
.warning_modal_message {
|
25
|
+
display: flex;
|
26
|
+
flex-direction: column;
|
27
|
+
line-height: 24px;
|
28
|
+
}
|
29
|
+
.warning_modal_footer_button {
|
30
|
+
height: 20%;
|
31
|
+
width: 100%;
|
32
|
+
display: flex;
|
33
|
+
align-items: flex-end;
|
34
|
+
justify-content: flex-end;
|
35
|
+
gap: 8px;
|
36
|
+
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
3
|
+
import PopUpModal from './PopUpModal';
|
4
|
+
import Button from '../Button';
|
5
|
+
|
6
|
+
const meta: Meta<typeof PopUpModal> = {
|
7
|
+
title: 'Components/PopUpModal',
|
8
|
+
component: PopUpModal,
|
9
|
+
parameters: {
|
10
|
+
layout: 'centered',
|
11
|
+
},
|
12
|
+
tags: ['autodocs'],
|
13
|
+
};
|
14
|
+
|
15
|
+
type Story = StoryObj<typeof PopUpModal>;
|
16
|
+
|
17
|
+
const defaultArgs = {
|
18
|
+
iconName:"license_warning",
|
19
|
+
titleMessage:"Warning!",
|
20
|
+
subTitleMessage:"Unsaved Changes.",
|
21
|
+
modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
|
22
|
+
footerMessage:"How do you want to proceed?",
|
23
|
+
firstButtonLabel:"Cancel",
|
24
|
+
secondButtonLabel:"Continue",
|
25
|
+
buttonVariant:"warning",
|
26
|
+
border:'1px solid var(--warning-modal-border-color)'
|
27
|
+
}
|
28
|
+
|
29
|
+
export const DefaultModal: Story = {
|
30
|
+
args: {
|
31
|
+
isOpen: true,
|
32
|
+
onClose: () => alert('Closed'),
|
33
|
+
onContinue: () => alert('Continued'),
|
34
|
+
iconName: 'license_warning',
|
35
|
+
titleMessage: 'Warning!',
|
36
|
+
subTitleMessage: 'Unsaved Changes.',
|
37
|
+
},
|
38
|
+
};
|
39
|
+
|
40
|
+
export const ControlledPopUp: Story = {
|
41
|
+
render: () => {
|
42
|
+
const [isOpen, setIsOpen] = useState(false);
|
43
|
+
const handleContinue = () => {
|
44
|
+
alert('Continued!');
|
45
|
+
setIsOpen(false);
|
46
|
+
};
|
47
|
+
return (
|
48
|
+
<>
|
49
|
+
<Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
|
50
|
+
<PopUpModal
|
51
|
+
{...defaultArgs}
|
52
|
+
isOpen={isOpen}
|
53
|
+
onClose={() => setIsOpen(false)}
|
54
|
+
onContinue={handleContinue}
|
55
|
+
/>
|
56
|
+
</>
|
57
|
+
);
|
58
|
+
},
|
59
|
+
};
|
60
|
+
|
61
|
+
export default meta;
|
@@ -0,0 +1,85 @@
|
|
1
|
+
import { FC } from 'react';
|
2
|
+
import './PopUpModal.scss';
|
3
|
+
import Modal from '../Modal';
|
4
|
+
import Icon from '../Icon';
|
5
|
+
import Typography from '../Typography';
|
6
|
+
import Button from '../Button';
|
7
|
+
import { PopUpModalProps } from './types';
|
8
|
+
|
9
|
+
const PopUpModal: FC<PopUpModalProps> = ({
|
10
|
+
isOpen,
|
11
|
+
onClose,
|
12
|
+
onContinue,
|
13
|
+
titleMessage = 'Warning!',
|
14
|
+
subTitleMessage = 'Unsaved Changes.',
|
15
|
+
iconName,
|
16
|
+
modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
|
17
|
+
footerMessage = 'How do you want to proceed?',
|
18
|
+
firstButtonLabel = 'Cancel',
|
19
|
+
secondButtonLabel = 'Continue',
|
20
|
+
buttonVariant = 'warning',
|
21
|
+
border = '1px solid var(--warning-modal-border-color)',
|
22
|
+
}) => {
|
23
|
+
return (
|
24
|
+
<Modal
|
25
|
+
overlayClassName="custom-overlay"
|
26
|
+
isOpen={isOpen}
|
27
|
+
onClose={onClose}
|
28
|
+
isHeaderDisplayed={false}
|
29
|
+
children={
|
30
|
+
<div className={'warning_modal_container'}>
|
31
|
+
<div className={'warning_modal_content'}>
|
32
|
+
<Icon
|
33
|
+
name={iconName}
|
34
|
+
className={'warning_modal_icon'}
|
35
|
+
width={94}
|
36
|
+
height={94}
|
37
|
+
/>
|
38
|
+
<div className={'warning_modal_message'}>
|
39
|
+
<Typography
|
40
|
+
fontSize={20}
|
41
|
+
fontWeight="semi-bold"
|
42
|
+
className="warning_modal_title_wrapper"
|
43
|
+
>
|
44
|
+
{' '}
|
45
|
+
<Typography
|
46
|
+
color="var(--status-button-bg-warning)"
|
47
|
+
fontSize={20}
|
48
|
+
fontWeight="semi-bold"
|
49
|
+
>
|
50
|
+
{' '}
|
51
|
+
{titleMessage}{' '}
|
52
|
+
</Typography>{' '}
|
53
|
+
{subTitleMessage}
|
54
|
+
</Typography>
|
55
|
+
<div className="warning_modal_message_wrapper">
|
56
|
+
<Typography fontSize={16}>{modalMessage}</Typography>
|
57
|
+
<Typography fontSize={16}>{footerMessage}</Typography>
|
58
|
+
</div>
|
59
|
+
</div>
|
60
|
+
</div>
|
61
|
+
<div className={'warning_modal_footer_button'}>
|
62
|
+
<Button
|
63
|
+
variant="secondary"
|
64
|
+
label={firstButtonLabel}
|
65
|
+
onClick={onClose}
|
66
|
+
/>
|
67
|
+
<Button
|
68
|
+
variant={buttonVariant || 'warning'}
|
69
|
+
label={secondButtonLabel}
|
70
|
+
onClick={onContinue}
|
71
|
+
/>
|
72
|
+
</div>
|
73
|
+
</div>
|
74
|
+
}
|
75
|
+
ariaHideApp
|
76
|
+
isFooterDisplayed={false}
|
77
|
+
customWidth="420px"
|
78
|
+
customHeight="226px"
|
79
|
+
boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
|
80
|
+
border={border}
|
81
|
+
/>
|
82
|
+
);
|
83
|
+
};
|
84
|
+
|
85
|
+
export default PopUpModal;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
export interface PopUpModalProps {
|
2
|
+
isOpen: boolean;
|
3
|
+
onClose: () => void;
|
4
|
+
onContinue?: () => void;
|
5
|
+
titleMessage:string,
|
6
|
+
subTitleMessage?:string,
|
7
|
+
iconName:string,
|
8
|
+
modalMessage:string,
|
9
|
+
footerMessage:string,
|
10
|
+
firstButtonLabel?:string,
|
11
|
+
secondButtonLabel:string,
|
12
|
+
buttonVariant:any,
|
13
|
+
border:string,
|
14
|
+
}
|
@@ -121,4 +121,30 @@ export const WithToolTipIcon: Story = {
|
|
121
121
|
},
|
122
122
|
};
|
123
123
|
|
124
|
+
export const WithLabelled: Story = {
|
125
|
+
render: () => {
|
126
|
+
const [selectedOption, setSelectedOption] = useState('restApi');
|
127
|
+
const radioOptions = [
|
128
|
+
{ value: 'restApi', label: 'RestAPI' },
|
129
|
+
{ value: 'snippets', label: 'Snippet' },
|
130
|
+
{ value: 'history', label: 'History' },
|
131
|
+
];
|
132
|
+
const handleOptionChange = (option: Option) => {
|
133
|
+
setSelectedOption(option.value);
|
134
|
+
};
|
135
|
+
return (
|
136
|
+
<RadioGroup
|
137
|
+
options={radioOptions}
|
138
|
+
onChange={handleOptionChange}
|
139
|
+
name="option"
|
140
|
+
selectedValue={selectedOption}
|
141
|
+
isAsteriskRequired
|
142
|
+
isLabel
|
143
|
+
label={'Web Services'}
|
144
|
+
classNameForLabel='ff-radio-label-wrapper'
|
145
|
+
/>
|
146
|
+
);
|
147
|
+
},
|
148
|
+
};
|
149
|
+
|
124
150
|
export default meta;
|
@@ -2,16 +2,32 @@ import React from 'react';
|
|
2
2
|
import RadioButton from '../RadioButton/RadioButton'; // Adjust the import path as necessary
|
3
3
|
import './RadioGroup.scss';
|
4
4
|
import classNames from 'classnames';
|
5
|
+
import Typography from '../Typography';
|
5
6
|
|
6
7
|
const RadioGroup: React.FC<RadioGroupProps> = ({
|
7
8
|
options,
|
8
9
|
name,
|
9
10
|
selectedValue,
|
10
11
|
onChange,
|
12
|
+
label,
|
13
|
+
isLabel = false,
|
14
|
+
isAsteriskRequired = false,
|
11
15
|
className,
|
16
|
+
classNameForLabel,
|
12
17
|
}) => {
|
13
18
|
return (
|
14
19
|
<div className={classNames('ff-radio-group', className)}>
|
20
|
+
{isLabel && (
|
21
|
+
<Typography fontWeight='semi-bold' className={classNames(classNameForLabel)}>
|
22
|
+
{' '}
|
23
|
+
{isAsteriskRequired && (
|
24
|
+
<Typography className={classNames('ff-required-asterisk')}>
|
25
|
+
*{' '}
|
26
|
+
</Typography>
|
27
|
+
)}
|
28
|
+
{label}{' '}
|
29
|
+
</Typography>
|
30
|
+
)}
|
15
31
|
{options.map((option) => (
|
16
32
|
<RadioButton
|
17
33
|
key={option.value}
|
@@ -64,9 +64,33 @@ interface RadioGroupProps {
|
|
64
64
|
*/
|
65
65
|
onChange?: (option: Option) => void;
|
66
66
|
|
67
|
+
/**
|
68
|
+
* Provides a label at starting position when the string is passed.
|
69
|
+
* Optional.
|
70
|
+
*/
|
71
|
+
label?: string,
|
72
|
+
|
73
|
+
/**
|
74
|
+
* if isLabel is true then we can display label if not then extra space is not added.
|
75
|
+
* Optional.
|
76
|
+
*/
|
77
|
+
isLabel?: boolean,
|
78
|
+
|
79
|
+
/**
|
80
|
+
* if isAsteriskRequired is true then we can display asterisk if not then extra space is not added.
|
81
|
+
* Optional.
|
82
|
+
*/
|
83
|
+
isAsteriskRequired?:boolean,
|
84
|
+
|
67
85
|
/**
|
68
86
|
* Additional class names to apply to the radio group for custom styling.
|
69
87
|
* Optional.
|
70
88
|
*/
|
71
89
|
className?: string;
|
90
|
+
|
91
|
+
/**
|
92
|
+
* Additional class names to apply to the radio group Label for custom styling.
|
93
|
+
* Optional.
|
94
|
+
*/
|
95
|
+
classNameForLabel?:string;
|
72
96
|
}
|
@@ -142,7 +142,6 @@ const Select: FC<SelectProps> = ({
|
|
142
142
|
}, [showDropdownOptions]);
|
143
143
|
|
144
144
|
useEffect(() => {
|
145
|
-
if (checkEmpty(getValue(selectedOption, valueAccessor))) return;
|
146
145
|
setSearchedOption(getValue(selectedOption, valueAccessor));
|
147
146
|
}, [selectedOption]);
|
148
147
|
|
@@ -205,8 +204,8 @@ const Select: FC<SelectProps> = ({
|
|
205
204
|
className={classNames('ff-select-labels', {
|
206
205
|
'ff-select-labels__active': searchedOption,
|
207
206
|
})}
|
208
|
-
fontSize={searchedOption
|
209
|
-
lineHeight={searchedOption
|
207
|
+
fontSize={searchedOption || showDropdownOptions ? 8 : 12}
|
208
|
+
lineHeight={searchedOption || showDropdownOptions ? '8px' : '12px'}
|
210
209
|
required={required}
|
211
210
|
>
|
212
211
|
{label}
|
@@ -51,7 +51,7 @@ const Dropdown: FC<DropdownProps> = ({
|
|
51
51
|
return {
|
52
52
|
left: positionX,
|
53
53
|
top: positionY + heightFromTop,
|
54
|
-
width: width +
|
54
|
+
width: width + 30,
|
55
55
|
zIndex: optionZIndex,
|
56
56
|
marginLeft: '-2px',
|
57
57
|
};
|
@@ -59,7 +59,7 @@ const Dropdown: FC<DropdownProps> = ({
|
|
59
59
|
return {
|
60
60
|
zIndex: optionZIndex,
|
61
61
|
left: positionX,
|
62
|
-
width: width +
|
62
|
+
width: width + 30,
|
63
63
|
top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
|
64
64
|
marginLeft: '-2px',
|
65
65
|
};
|
@@ -67,10 +67,8 @@ const Dropdown: FC<DropdownProps> = ({
|
|
67
67
|
|
68
68
|
const getOptionLabel = (label: any) => {
|
69
69
|
if (React.isValidElement(label)) {
|
70
|
-
console.log('test');
|
71
70
|
return label;
|
72
71
|
}
|
73
|
-
console.log('test112');
|
74
72
|
return (
|
75
73
|
<Typography
|
76
74
|
as="div"
|
@@ -88,37 +86,39 @@ const Dropdown: FC<DropdownProps> = ({
|
|
88
86
|
ref={optionsWrapperRef}
|
89
87
|
style={updateDropdownPosition()}
|
90
88
|
>
|
91
|
-
|
92
|
-
options
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
89
|
+
<div>
|
90
|
+
{!checkEmpty(options) ? (
|
91
|
+
options.map((option) => (
|
92
|
+
<div
|
93
|
+
className={classNames(
|
94
|
+
'ff-select-dropdown-option',
|
95
|
+
{
|
96
|
+
'ff-select-dropdown-option__selected':
|
97
|
+
getValue(option, valueAccessor) === selectedOption,
|
98
|
+
},
|
99
|
+
currentTheme
|
100
|
+
)}
|
101
|
+
key={ffid()}
|
102
|
+
onClick={() => {
|
103
|
+
if ('disable' in option && option['disable']) return;
|
104
|
+
onSelectOptionSelector(option);
|
105
|
+
}}
|
106
|
+
>
|
107
|
+
{getOptionLabel(getLabel(option, labelAccessor))}
|
108
|
+
</div>
|
109
|
+
))
|
110
|
+
) : (
|
111
|
+
<Typography
|
112
|
+
textAlign="center"
|
113
|
+
as="div"
|
114
|
+
lineHeight="32px"
|
115
|
+
color="var(--ff-select-text-color)"
|
116
|
+
className={classNames('ff-select-no-option', currentTheme)}
|
107
117
|
>
|
108
|
-
|
109
|
-
</
|
110
|
-
)
|
111
|
-
|
112
|
-
<Typography
|
113
|
-
textAlign="center"
|
114
|
-
as="div"
|
115
|
-
lineHeight="32px"
|
116
|
-
color="var(--ff-select-text-color)"
|
117
|
-
className={classNames('ff-select-no-option', currentTheme)}
|
118
|
-
>
|
119
|
-
No Results found
|
120
|
-
</Typography>
|
121
|
-
)}
|
118
|
+
No Results found
|
119
|
+
</Typography>
|
120
|
+
)}
|
121
|
+
</div>
|
122
122
|
</div>
|
123
123
|
);
|
124
124
|
};
|
@@ -93,11 +93,20 @@
|
|
93
93
|
.ff-scope-wrapper {
|
94
94
|
@include item-center;
|
95
95
|
margin-right: 12px;
|
96
|
+
|
97
|
+
.ff-scope-text {
|
98
|
+
text-transform: capitalize;
|
99
|
+
margin: 0;
|
100
|
+
}
|
96
101
|
}
|
97
102
|
|
98
103
|
.ff-datalist-wrapper {
|
99
104
|
@include item-center;
|
100
105
|
|
106
|
+
#ff-sequential-machine-datalist {
|
107
|
+
@include item-center
|
108
|
+
}
|
109
|
+
|
101
110
|
.ff-dataset-icon,
|
102
111
|
.ff-run-delete-icon,
|
103
112
|
.ff-datalist-text {
|