pixel-react 1.4.3 → 1.4.4
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/.yarn/install-state.gz +0 -0
- package/lib/components/AddResourceButton/type.d.ts +1 -1
- package/lib/components/Drawer/Types.d.ts +4 -0
- package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +13 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +0 -13
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +29 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/engine.d.ts +3 -9
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/formula.d.ts +2 -10
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/engine/point-graph.d.ts +0 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +27 -2
- package/lib/components/Form/Forms.d.ts +4 -2
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +49 -15
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +4 -5
- package/lib/components/MultiSelect/dropdownTypes.d.ts +2 -0
- package/lib/components/RadioButton/RadioButton.d.ts +1 -0
- package/lib/components/RadioButton/radioButtonTypes.d.ts +3 -1
- package/lib/components/Select/components/types.d.ts +4 -2
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/ToggleSwitch/ToggleSwitch.d.ts +10 -0
- package/lib/components/ToggleSwitch/index.d.ts +1 -0
- package/lib/index.d.ts +109 -23
- package/lib/index.esm.js +5711 -635
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +5707 -629
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +11 -11
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +10 -0
- package/src/assets/Themes/BaseTheme.scss +17 -23
- package/src/assets/Themes/DarkTheme.scss +25 -38
- package/src/assets/icons/apk_file_type.svg +4 -0
- package/src/assets/icons/compressed_file_type.svg +4 -0
- package/src/assets/icons/csv_file_type.svg +4 -0
- package/src/assets/icons/excel_corner_menu.svg +3 -0
- package/src/assets/icons/formula_icon.svg +3 -0
- package/src/assets/icons/gif_file_type.svg +4 -0
- package/src/assets/icons/html_file_type.svg +4 -0
- package/src/assets/icons/ipk_file_type.svg +4 -0
- package/src/assets/icons/jpg_file_type.svg +4 -0
- package/src/assets/icons/json_file_type.svg +4 -0
- package/src/assets/icons/pdf_file_type.svg +4 -0
- package/src/assets/icons/png_file_type.svg +4 -0
- package/src/assets/icons/quick_run_setting_icon.svg +5 -0
- package/src/assets/icons/run_automation_scripts_icon.svg +33 -0
- package/src/assets/icons/run_manual_testcase_icon.svg +4 -0
- package/src/assets/icons/search.svg +2 -2
- package/src/assets/icons/txt_file_type.svg +4 -0
- package/src/assets/icons/xls_file_type.svg +4 -0
- package/src/assets/icons/xlsx_file_type.svg +4 -0
- package/src/assets/icons/xml_file_type.svg +4 -0
- package/src/components/AddResourceButton/AddButton.tsx +7 -7
- package/src/components/AddResourceButton/type.ts +1 -1
- package/src/components/AttachmentButton/AttachmentButton.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.stories.tsx +1 -0
- package/src/components/Button/Button.scss +22 -20
- package/src/components/Button/Button.tsx +8 -1
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +2 -2
- package/src/components/Drawer/Drawer.scss +4 -3
- package/src/components/Drawer/Drawer.tsx +14 -18
- package/src/components/Drawer/Types.ts +4 -0
- package/src/components/Editor/Editor.tsx +9 -11
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +39 -0
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +51 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +7 -8
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +35 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +44 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +8 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +45 -6
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +37 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +69 -24
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +59 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/engine.ts +18 -65
- package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/formula.ts +5 -110
- package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-graph.ts +0 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +105 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +670 -673
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +38 -2
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +0 -4
- package/src/components/FileDropzone/FileDropzone.scss +4 -2
- package/src/components/FileDropzone/FileDropzone.tsx +1 -1
- package/src/components/FileDropzone/FilePreview.tsx +3 -1
- package/src/components/Form/Form.scss +2 -0
- package/src/components/Form/Form.stories.tsx +195 -6
- package/src/components/Form/Forms.tsx +15 -8
- package/src/components/Icon/iconList.ts +46 -0
- package/src/components/IconRadioGroup/IconRadioGroup.scss +3 -0
- package/src/components/IconRadioGroup/IconRadioGroup.tsx +20 -17
- package/src/components/Input/Input.scss +14 -15
- package/src/components/Input/Input.stories.tsx +2 -1
- package/src/components/InputWithDropdown/InputWithDropdown.scss +12 -13
- package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx +3 -2
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +22 -19
- package/src/components/MenuOption/MenuOption.scss +11 -10
- package/src/components/MenuOption/MenuOption.stories.tsx +51 -232
- package/src/components/MenuOption/MenuOption.tsx +131 -52
- package/src/components/MenuOption/types.ts +55 -14
- package/src/components/MiniModal/MiniModal.stories.tsx +2 -3
- package/src/components/MultiSelect/Dropdown.tsx +11 -12
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.stories.tsx +45 -10
- package/src/components/MultiSelect/MultiSelect.tsx +29 -13
- package/src/components/MultiSelect/MultiSelectTypes.ts +7 -5
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/RadioButton/RadioButton.scss +3 -1
- package/src/components/RadioButton/RadioButton.tsx +3 -1
- package/src/components/RadioButton/radioButtonTypes.tsx +5 -1
- package/src/components/Search/Search.scss +25 -6
- package/src/components/Search/Search.tsx +45 -24
- package/src/components/Select/Select.scss +12 -12
- package/src/components/Select/Select.stories.tsx +2 -0
- package/src/components/Select/Select.tsx +11 -5
- package/src/components/Select/components/Dropdown.scss +2 -0
- package/src/components/Select/components/Dropdown.tsx +19 -4
- package/src/components/Select/components/types.ts +4 -2
- package/src/components/StatusButton/StatusButton.tsx +26 -20
- package/src/components/Table/Table.scss +1 -3
- package/src/components/Table/Table.stories.tsx +1 -0
- package/src/components/Table/Table.tsx +7 -3
- package/src/components/ToggleSwitch/ToggleSwitch.scss +59 -0
- package/src/components/ToggleSwitch/ToggleSwitch.stories.tsx +52 -0
- package/src/components/ToggleSwitch/ToggleSwitch.tsx +30 -0
- package/src/components/ToggleSwitch/index.ts +1 -0
- package/src/hooks/useFileDropzone.tsx +1 -0
- package/src/index.ts +4 -2
- package/src/components/Excel/ContextMenu/ContextMenu.scss +0 -99
- package/src/components/Excel/ContextMenu/ContextMenu.tsx +0 -103
@@ -9,6 +9,10 @@ import Typography from '../Typography';
|
|
9
9
|
import Tooltip from '../Tooltip';
|
10
10
|
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
11
11
|
import { truncateText } from '../../utils/truncateText/truncateText';
|
12
|
+
import {
|
13
|
+
getLabel,
|
14
|
+
getValue,
|
15
|
+
} from '../../utils/getSelectOptionValue/getSelectOptionValue';
|
12
16
|
|
13
17
|
const ChipElement = ({
|
14
18
|
label,
|
@@ -69,6 +73,8 @@ const MultiSelect = ({
|
|
69
73
|
className = '',
|
70
74
|
highlightedMachine = '',
|
71
75
|
onSelectButtonClick = () => {},
|
76
|
+
labelAccessor = '',
|
77
|
+
valueAccessor = '',
|
72
78
|
withSelectButton = variant === 'machines' ? true : false,
|
73
79
|
}: MultiSelectProps) => {
|
74
80
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
@@ -122,7 +128,10 @@ const MultiSelect = ({
|
|
122
128
|
const handleOptionChange = (selectedOption: Option, isChecked: boolean) => {
|
123
129
|
inputRef.current?.focus();
|
124
130
|
const updatedOptions = allOptions.map((option) =>
|
125
|
-
option
|
131
|
+
getValue(option, valueAccessor) ===
|
132
|
+
getValue(selectedOption, valueAccessor)
|
133
|
+
? { ...option, isChecked }
|
134
|
+
: option
|
126
135
|
);
|
127
136
|
|
128
137
|
setAllOptions(updatedOptions);
|
@@ -159,8 +168,8 @@ const MultiSelect = ({
|
|
159
168
|
}
|
160
169
|
|
161
170
|
const newOption = {
|
162
|
-
|
163
|
-
|
171
|
+
[labelAccessor]: searchedKeyword,
|
172
|
+
[valueAccessor]: searchedKeyword.toLowerCase(),
|
164
173
|
isChecked: true,
|
165
174
|
};
|
166
175
|
const filteredOptions = [...allOptions].filter(
|
@@ -171,7 +180,10 @@ const MultiSelect = ({
|
|
171
180
|
setSearchedKeyword('');
|
172
181
|
onChange?.([
|
173
182
|
...filteredOptions,
|
174
|
-
{
|
183
|
+
{
|
184
|
+
[labelAccessor]: searchedKeyword,
|
185
|
+
[valueAccessor]: searchedKeyword.toLocaleLowerCase(),
|
186
|
+
},
|
175
187
|
]);
|
176
188
|
setIsOpen(false);
|
177
189
|
}
|
@@ -203,7 +215,8 @@ const MultiSelect = ({
|
|
203
215
|
onSearch?.(input);
|
204
216
|
if (input.length > 2) {
|
205
217
|
const matchedOption = allOptions.find(
|
206
|
-
(option) =>
|
218
|
+
(option) =>
|
219
|
+
getLabel(option, labelAccessor)?.toLowerCase() === input.toLowerCase()
|
207
220
|
);
|
208
221
|
setDisplayIcon(!matchedOption);
|
209
222
|
} else {
|
@@ -249,13 +262,14 @@ const MultiSelect = ({
|
|
249
262
|
onSelectToggleScroll(true);
|
250
263
|
};
|
251
264
|
}, [isOpen]);
|
252
|
-
|
253
265
|
useEffect(() => {
|
254
|
-
if (options?.length > 0) {
|
266
|
+
if (options?.length > 0 && selectedOptions?.length) {
|
255
267
|
const initializeOptions = options.map((option) => ({
|
256
268
|
...option,
|
257
269
|
isChecked: selectedOptions.some(
|
258
|
-
(selectedOption) =>
|
270
|
+
(selectedOption) =>
|
271
|
+
getValue(selectedOption, valueAccessor) ===
|
272
|
+
getValue(option, valueAccessor)
|
259
273
|
),
|
260
274
|
}));
|
261
275
|
setAllOptions(initializeOptions);
|
@@ -339,6 +353,7 @@ const MultiSelect = ({
|
|
339
353
|
/>
|
340
354
|
</div>
|
341
355
|
)}
|
356
|
+
|
342
357
|
{!withSelectButton && (
|
343
358
|
<div>
|
344
359
|
<div className="ff-multiselect-chip-container">
|
@@ -349,8 +364,8 @@ const MultiSelect = ({
|
|
349
364
|
.map((option) => (
|
350
365
|
<ChipElement
|
351
366
|
zIndex={zIndex}
|
352
|
-
key={option
|
353
|
-
label={option
|
367
|
+
key={getLabel(option, labelAccessor)}
|
368
|
+
label={getLabel(option, labelAccessor) || ''}
|
354
369
|
onChipCloseClick={(e) =>
|
355
370
|
handleChipCloseClick(option, e)
|
356
371
|
}
|
@@ -362,8 +377,8 @@ const MultiSelect = ({
|
|
362
377
|
selectedOptions.map((option) => (
|
363
378
|
<ChipElement
|
364
379
|
zIndex={zIndex}
|
365
|
-
key={option
|
366
|
-
label={option
|
380
|
+
key={getLabel(option, labelAccessor)}
|
381
|
+
label={getLabel(option, labelAccessor) || ''}
|
367
382
|
onChipCloseClick={(e) =>
|
368
383
|
handleChipCloseClick(option, e)
|
369
384
|
}
|
@@ -426,7 +441,7 @@ const MultiSelect = ({
|
|
426
441
|
<Typography
|
427
442
|
children={inputError || errorMessage}
|
428
443
|
fontSize={10}
|
429
|
-
className="error
|
444
|
+
className="error-text"
|
430
445
|
/>
|
431
446
|
)}
|
432
447
|
{displayIcon && (
|
@@ -449,6 +464,7 @@ const MultiSelect = ({
|
|
449
464
|
dropdownPosition={dropdownPosition}
|
450
465
|
zIndex={zIndex}
|
451
466
|
withSelectButton={withSelectButton}
|
467
|
+
labelAccessor={labelAccessor}
|
452
468
|
/>,
|
453
469
|
document.body
|
454
470
|
)}
|
@@ -1,11 +1,9 @@
|
|
1
1
|
import { ReactElement } from 'react';
|
2
2
|
|
3
|
+
type OptionValue = any;
|
4
|
+
|
3
5
|
interface Option {
|
4
|
-
|
5
|
-
value?: string;
|
6
|
-
accessor?: string;
|
7
|
-
isChecked?: boolean;
|
8
|
-
isDisabled?: boolean;
|
6
|
+
[key: string]: OptionValue;
|
9
7
|
}
|
10
8
|
interface MultiSelectProps {
|
11
9
|
options: Option[];
|
@@ -38,6 +36,10 @@ interface MultiSelectProps {
|
|
38
36
|
|
39
37
|
/** Machine Name to be displayed */
|
40
38
|
highlightedMachine?: string | ReactElement;
|
39
|
+
|
40
|
+
labelAccessor?: string;
|
41
|
+
|
42
|
+
valueAccessor?: string;
|
41
43
|
}
|
42
44
|
|
43
45
|
export { Option, MultiSelectProps };
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
2
2
|
import './RadioButton.scss';
|
3
3
|
import classNames from 'classnames';
|
4
4
|
import Tooltip from '../Tooltip';
|
5
|
+
import Typography from '../Typography';
|
6
|
+
import RadioButtonProps from './radioButtonTypes';
|
5
7
|
|
6
8
|
const RadioButton: React.FC<RadioButtonProps> = ({
|
7
9
|
label,
|
@@ -29,7 +31,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
|
|
29
31
|
className="ff-radio-input"
|
30
32
|
/>
|
31
33
|
<span className="ff-radio-custom" />
|
32
|
-
{label}
|
34
|
+
<Typography color="var(--text-color)" children={label} />
|
33
35
|
</label>
|
34
36
|
{showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
|
35
37
|
</div>
|
@@ -1,3 +1,5 @@
|
|
1
|
+
import { ReactElement } from 'react';
|
2
|
+
|
1
3
|
/**
|
2
4
|
* Props for the RadioButton component.
|
3
5
|
*/
|
@@ -6,7 +8,7 @@ interface RadioButtonProps {
|
|
6
8
|
* The display label for the radio button.
|
7
9
|
* Optional.
|
8
10
|
*/
|
9
|
-
label?: string;
|
11
|
+
label?: string | ReactElement;
|
10
12
|
|
11
13
|
/**
|
12
14
|
* The name attribute for the radio button, used for grouping.
|
@@ -56,3 +58,5 @@ interface RadioButtonProps {
|
|
56
58
|
*/
|
57
59
|
tooltipTitle?: React.ReactNode;
|
58
60
|
}
|
61
|
+
|
62
|
+
export default RadioButtonProps;
|
@@ -4,14 +4,18 @@
|
|
4
4
|
display: flex;
|
5
5
|
align-items: center;
|
6
6
|
justify-content: space-between;
|
7
|
+
|
7
8
|
.ff-search-icon {
|
8
9
|
display: flex;
|
9
10
|
align-items: center;
|
10
11
|
justify-content: center;
|
11
12
|
cursor: pointer;
|
12
|
-
border: 1px solid var(--border-color);
|
13
13
|
border-radius: 4px;
|
14
|
-
|
14
|
+
|
15
|
+
&:hover {
|
16
|
+
background-color: var(--ff-search-field-hover-color);
|
17
|
+
}
|
18
|
+
|
15
19
|
.ff-icon-container {
|
16
20
|
svg {
|
17
21
|
path {
|
@@ -20,6 +24,7 @@
|
|
20
24
|
}
|
21
25
|
}
|
22
26
|
}
|
27
|
+
|
23
28
|
.ff-search-input {
|
24
29
|
@extend .fontXs;
|
25
30
|
border: none;
|
@@ -27,6 +32,7 @@
|
|
27
32
|
line-height: 12px;
|
28
33
|
visibility: hidden;
|
29
34
|
transition: width 0.4s ease;
|
35
|
+
|
30
36
|
&:focus {
|
31
37
|
outline: none;
|
32
38
|
border: none;
|
@@ -36,39 +42,52 @@
|
|
36
42
|
border: none;
|
37
43
|
}
|
38
44
|
}
|
45
|
+
|
39
46
|
&.disabled {
|
40
47
|
opacity: 0.5;
|
41
48
|
}
|
49
|
+
|
42
50
|
&.expanded {
|
43
51
|
border: 1px solid var(--border-color);
|
44
52
|
border-radius: 4px;
|
53
|
+
background-color: var(--ff-search-filed-bg-color);
|
54
|
+
|
55
|
+
.ff-search-icon {
|
56
|
+
&:hover {
|
57
|
+
background-color: var(--ff-search-filed-bg-color);
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
45
61
|
.ff-vertical-line {
|
46
62
|
height: 8px;
|
47
63
|
width: 1px;
|
48
|
-
position: relative;
|
49
|
-
right: 2px;
|
50
64
|
border-radius: 1px;
|
51
|
-
margin: 8px 0px;
|
52
65
|
background-color: var(--border-color);
|
53
66
|
}
|
67
|
+
|
54
68
|
.ff-search-input {
|
55
69
|
visibility: visible;
|
70
|
+
margin-left: 4px;
|
56
71
|
|
57
72
|
&::placeholder {
|
58
73
|
color: var(--ff-search-filed-placeholder-text);
|
59
74
|
}
|
60
75
|
}
|
76
|
+
|
61
77
|
.ff-search-icon {
|
62
|
-
padding: 4px;
|
63
78
|
border: none;
|
64
79
|
cursor: default;
|
80
|
+
margin-right: 4px;
|
65
81
|
}
|
82
|
+
|
66
83
|
.ff-search-clear-button {
|
67
84
|
display: grid;
|
68
85
|
place-items: center;
|
69
86
|
cursor: pointer;
|
70
87
|
width: 22px;
|
88
|
+
padding-top: 1px;
|
71
89
|
}
|
90
|
+
|
72
91
|
.ff-search-close-icon {
|
73
92
|
margin: 4px;
|
74
93
|
cursor: pointer;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useState } from 'react';
|
1
|
+
import React, { useState, useEffect, useRef } from 'react';
|
2
2
|
import classNames from 'classnames';
|
3
3
|
import './Search.scss';
|
4
4
|
import Icon from '../Icon';
|
@@ -7,6 +7,7 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
|
7
7
|
import Typography from '../Typography';
|
8
8
|
import Tooltip from '../Tooltip';
|
9
9
|
|
10
|
+
|
10
11
|
const Search = ({
|
11
12
|
placeholder = 'Search',
|
12
13
|
onSearch,
|
@@ -14,10 +15,18 @@ const Search = ({
|
|
14
15
|
width = 150,
|
15
16
|
}: SearchProps) => {
|
16
17
|
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
17
|
-
const [
|
18
|
+
const [searchValue, setSearchValue] = useState<string>('');
|
19
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
20
|
+
|
21
|
+
useEffect(() => {
|
22
|
+
if (isExpanded && inputRef.current) {
|
23
|
+
inputRef.current.focus();
|
24
|
+
}
|
25
|
+
}, [isExpanded]);
|
26
|
+
|
18
27
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
19
|
-
if (event.key === 'Enter' && !checkEmpty(
|
20
|
-
onSearch(
|
28
|
+
if (event.key === 'Enter' && !checkEmpty(searchValue)) {
|
29
|
+
onSearch(searchValue.trim());
|
21
30
|
} else if (event?.key === 'Escape') {
|
22
31
|
handleSearchClearAndClose('Close');
|
23
32
|
}
|
@@ -37,6 +46,9 @@ const Search = ({
|
|
37
46
|
if (label === 'Close') {
|
38
47
|
setIsExpanded(false);
|
39
48
|
}
|
49
|
+
if (label === 'Clear' && isExpanded && inputRef.current) {
|
50
|
+
inputRef.current.focus();
|
51
|
+
}
|
40
52
|
};
|
41
53
|
|
42
54
|
return (
|
@@ -46,11 +58,18 @@ const Search = ({
|
|
46
58
|
disabled: disabled,
|
47
59
|
})}
|
48
60
|
>
|
49
|
-
<
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
61
|
+
<div
|
62
|
+
className={classNames('ff-search-icon', { expanded: isExpanded })}
|
63
|
+
onClick={handleIconClick}
|
64
|
+
>
|
65
|
+
<Tooltip title="Search">
|
66
|
+
<Icon
|
67
|
+
name="search"
|
68
|
+
height={isExpanded ? 14 : 16}
|
69
|
+
width={isExpanded ? 14 : 16}
|
70
|
+
/>
|
71
|
+
</Tooltip>
|
72
|
+
</div>
|
54
73
|
<div
|
55
74
|
className={classNames('ff-vertical-line', {
|
56
75
|
expanded: isExpanded,
|
@@ -62,9 +81,9 @@ const Search = ({
|
|
62
81
|
style={{ width: isExpanded ? `${width}px` : '0px' }}
|
63
82
|
placeholder={placeholder}
|
64
83
|
type="text"
|
65
|
-
value={
|
84
|
+
value={searchValue}
|
66
85
|
disabled={disabled}
|
67
|
-
|
86
|
+
ref={inputRef}
|
68
87
|
onChange={(e) => {
|
69
88
|
onChange(e.target.value);
|
70
89
|
}}
|
@@ -79,25 +98,27 @@ const Search = ({
|
|
79
98
|
handleSearchClearAndClose('Clear');
|
80
99
|
}}
|
81
100
|
>
|
82
|
-
{
|
101
|
+
{searchValue !== '' && (
|
83
102
|
<Typography
|
84
|
-
children={'
|
103
|
+
children={'Clear'}
|
85
104
|
fontSize={8}
|
86
105
|
color={'var(--ff-search-filed-clear-text)'}
|
87
106
|
/>
|
88
107
|
)}
|
89
108
|
</div>
|
90
|
-
<
|
91
|
-
<
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
109
|
+
<Tooltip title="Close">
|
110
|
+
<div className="ff-search-close-icon">
|
111
|
+
<Icon
|
112
|
+
height={6}
|
113
|
+
width={6}
|
114
|
+
name="close"
|
115
|
+
hoverEffect={true}
|
116
|
+
onClick={() => {
|
117
|
+
handleSearchClearAndClose('Close');
|
118
|
+
}}
|
119
|
+
/>
|
120
|
+
</div>
|
121
|
+
</Tooltip>
|
101
122
|
</>
|
102
123
|
)}
|
103
124
|
</div>
|
@@ -38,16 +38,16 @@
|
|
38
38
|
box-sizing: border-box;
|
39
39
|
|
40
40
|
&:hover {
|
41
|
-
@include select-state-style(var(--ff-select-
|
41
|
+
@include select-state-style(var(--ff-select-brand-color));
|
42
42
|
}
|
43
43
|
|
44
|
-
.ff-select-
|
44
|
+
.ff-select-inputField {
|
45
45
|
@extend .fontSm;
|
46
46
|
width: calc(100% - 8px);
|
47
|
-
|
47
|
+
height: 100%;
|
48
|
+
padding: 0 0 0 8px;
|
48
49
|
border: none;
|
49
50
|
outline: none;
|
50
|
-
line-height: 30px;
|
51
51
|
letter-spacing: 0.5px;
|
52
52
|
z-index: 10;
|
53
53
|
background: transparent;
|
@@ -61,8 +61,7 @@
|
|
61
61
|
.ff-select-arrows-wrapper {
|
62
62
|
cursor: pointer;
|
63
63
|
height: 100%;
|
64
|
-
padding:
|
65
|
-
padding-right: 8px;
|
64
|
+
padding: 0 8px 0 0;
|
66
65
|
display: flex;
|
67
66
|
align-items: center;
|
68
67
|
|
@@ -87,28 +86,28 @@
|
|
87
86
|
border-radius: 4px;
|
88
87
|
|
89
88
|
&__active {
|
90
|
-
|
91
|
-
transform: translateY(-15px);
|
89
|
+
transform: translateY(-16px);
|
92
90
|
transition: 0.18s ease all;
|
93
91
|
background-color: var(--ff-select-background-color);
|
94
|
-
padding:
|
92
|
+
padding: 0 2px;
|
95
93
|
z-index: 100000;
|
96
94
|
}
|
97
95
|
}
|
98
96
|
|
99
97
|
&__focus {
|
100
98
|
border-color: var(--ff-select-brand-color);
|
99
|
+
|
101
100
|
&:hover {
|
102
101
|
@include select-state-style(var(--ff-select-brand-color));
|
103
102
|
}
|
104
103
|
|
105
104
|
.ff-select-labels {
|
106
105
|
@extend .font-size-8;
|
107
|
-
transform: translateY(-
|
106
|
+
transform: translateY(-16px);
|
108
107
|
transition: 0.18s ease all;
|
109
108
|
color: var(--ff-select-brand-color);
|
110
109
|
background-color: var(--ff-select-background-color);
|
111
|
-
padding:
|
110
|
+
padding: 0 2px;
|
112
111
|
line-height: 18px;
|
113
112
|
z-index: 100000;
|
114
113
|
}
|
@@ -124,6 +123,7 @@
|
|
124
123
|
|
125
124
|
&__disabled {
|
126
125
|
cursor: not-allowed;
|
126
|
+
|
127
127
|
&:hover {
|
128
128
|
@include select-state-style(var(--ff-select-border-color));
|
129
129
|
}
|
@@ -162,7 +162,7 @@
|
|
162
162
|
transition: 0.3s ease all;
|
163
163
|
color: var(--error_light);
|
164
164
|
background-color: var(--ff-select-background-color);
|
165
|
-
padding:
|
165
|
+
padding: 0 2px;
|
166
166
|
line-height: 18px;
|
167
167
|
}
|
168
168
|
}
|
@@ -25,11 +25,13 @@ export const Primary: Story = {
|
|
25
25
|
label: 'fire-flink-LIC4900-onPrem',
|
26
26
|
value: 'fire-flink-LIC4900-onPrem',
|
27
27
|
name: 'fireflink',
|
28
|
+
disable: true,
|
28
29
|
},
|
29
30
|
{
|
30
31
|
label: 'fire-flink-LIC3179',
|
31
32
|
value: 'fire-flink-LIC3179',
|
32
33
|
name: 'local',
|
34
|
+
disable: false,
|
33
35
|
},
|
34
36
|
{
|
35
37
|
label: 'fire-flink-LIC4937',
|
@@ -29,12 +29,12 @@ const Select: FC<SelectProps> = ({
|
|
29
29
|
height = 32,
|
30
30
|
width = '100%',
|
31
31
|
onBlur = () => {},
|
32
|
-
disableInput = false
|
32
|
+
disableInput = false,
|
33
33
|
}) => {
|
34
34
|
const selectWidth = typeof width === 'number' ? `${width}px` : width;
|
35
35
|
|
36
36
|
const [showDropdownOptions, setShowDropdownOptions] = useState(false);
|
37
|
-
const [searchedOption, setSearchedOption] = useState('');
|
37
|
+
const [searchedOption, setSearchedOption] = useState<any>('');
|
38
38
|
const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
|
39
39
|
const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
|
40
40
|
positionX: 0,
|
@@ -54,6 +54,9 @@ const Select: FC<SelectProps> = ({
|
|
54
54
|
setShowDropdownOptions(!showDropdownOptions);
|
55
55
|
setSearchedOption(getValue(selectedOption, valueAccessor));
|
56
56
|
setSelectOptionList(optionsList);
|
57
|
+
if (!showDropdownOptions && inputRef.current) {
|
58
|
+
inputRef.current.focus();
|
59
|
+
}
|
57
60
|
};
|
58
61
|
|
59
62
|
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
|
@@ -144,6 +147,7 @@ const Select: FC<SelectProps> = ({
|
|
144
147
|
}, [selectedOption]);
|
145
148
|
|
146
149
|
useEffect(() => {
|
150
|
+
if (checkEmpty(optionsList)) return;
|
147
151
|
setSelectOptionList(optionsList);
|
148
152
|
}, [optionsList]);
|
149
153
|
|
@@ -166,8 +170,8 @@ const Select: FC<SelectProps> = ({
|
|
166
170
|
type="text"
|
167
171
|
ref={inputRef}
|
168
172
|
id="select-input-element"
|
169
|
-
className={classNames('ff-select-
|
170
|
-
'ff-select-
|
173
|
+
className={classNames('ff-select-inputField', {
|
174
|
+
'ff-select-inputField__disabled': disabled,
|
171
175
|
})}
|
172
176
|
onFocus={handleFocus}
|
173
177
|
value={searchedOption}
|
@@ -201,7 +205,8 @@ const Select: FC<SelectProps> = ({
|
|
201
205
|
className={classNames('ff-select-labels', {
|
202
206
|
'ff-select-labels__active': searchedOption,
|
203
207
|
})}
|
204
|
-
fontSize={searchedOption &&
|
208
|
+
fontSize={searchedOption && 8}
|
209
|
+
lineHeight={searchedOption && '8px'}
|
205
210
|
required={required}
|
206
211
|
>
|
207
212
|
{label}
|
@@ -234,6 +239,7 @@ const Select: FC<SelectProps> = ({
|
|
234
239
|
onSelectBlur={onSelectBlur}
|
235
240
|
onSelectOptionSelector={onSelectOptionSelector}
|
236
241
|
heightFromTop={height}
|
242
|
+
selectedOption={searchedOption}
|
237
243
|
/>,
|
238
244
|
document.body
|
239
245
|
)}
|
@@ -13,6 +13,7 @@
|
|
13
13
|
&::-webkit-scrollbar {
|
14
14
|
width: 4px;
|
15
15
|
height: 12px;
|
16
|
+
|
16
17
|
&-thumb {
|
17
18
|
background-color: var(--ff-select-scroll-thumb-color);
|
18
19
|
border-radius: 4px;
|
@@ -34,6 +35,7 @@
|
|
34
35
|
text-overflow: ellipsis;
|
35
36
|
overflow: hidden;
|
36
37
|
|
38
|
+
&__selected,
|
37
39
|
&:hover {
|
38
40
|
background-color: var(--ff-select-option-hover-color);
|
39
41
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { useContext, useRef
|
1
|
+
import { type FC, useContext, useRef } from 'react';
|
2
2
|
import { dropdownDefaultCSSData, DropdownProps } from './types';
|
3
3
|
import './Dropdown.scss';
|
4
4
|
import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
|
@@ -6,7 +6,10 @@ import Typography from '../../Typography';
|
|
6
6
|
import { ffid } from '../../../utils/ffID/ffid';
|
7
7
|
import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
|
8
8
|
import classNames from 'classnames';
|
9
|
-
import {
|
9
|
+
import {
|
10
|
+
getLabel,
|
11
|
+
getValue,
|
12
|
+
} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
|
10
13
|
import useClickOutside from '../../../hooks/useClickOutside';
|
11
14
|
|
12
15
|
const Dropdown: FC<DropdownProps> = ({
|
@@ -19,6 +22,8 @@ const Dropdown: FC<DropdownProps> = ({
|
|
19
22
|
inputRef,
|
20
23
|
selectArrowRef,
|
21
24
|
heightFromTop,
|
25
|
+
selectedOption,
|
26
|
+
valueAccessor,
|
22
27
|
}) => {
|
23
28
|
const themeContext = useContext(ThemeContext);
|
24
29
|
const currentTheme = themeContext?.currentTheme;
|
@@ -72,9 +77,19 @@ const Dropdown: FC<DropdownProps> = ({
|
|
72
77
|
key={ffid()}
|
73
78
|
as="div"
|
74
79
|
lineHeight="30px"
|
75
|
-
className={classNames(
|
80
|
+
className={classNames(
|
81
|
+
'ff-select-dropdown-option',
|
82
|
+
{
|
83
|
+
'ff-select-dropdown-option__selected':
|
84
|
+
getValue(option, valueAccessor) === selectedOption,
|
85
|
+
},
|
86
|
+
currentTheme
|
87
|
+
)}
|
76
88
|
color="var(--ff-select-text-color)"
|
77
|
-
onClick={() =>
|
89
|
+
onClick={() => {
|
90
|
+
if ('disable' in option && option['disable']) return;
|
91
|
+
onSelectOptionSelector(option);
|
92
|
+
}}
|
78
93
|
>
|
79
94
|
{getLabel(option, labelAccessor)}
|
80
95
|
</Typography>
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { DrowdownPosition, Option } from '../types';
|
2
|
+
import { RefObject } from 'react';
|
2
3
|
|
3
4
|
export interface DropdownProps {
|
4
5
|
options: Option[];
|
@@ -8,9 +9,10 @@ export interface DropdownProps {
|
|
8
9
|
valueAccessor?: string;
|
9
10
|
onSelectBlur: () => void;
|
10
11
|
onSelectOptionSelector: (option: Option) => void;
|
11
|
-
inputRef?:
|
12
|
-
selectArrowRef?:
|
12
|
+
inputRef?: RefObject<HTMLInputElement>;
|
13
|
+
selectArrowRef?: RefObject<HTMLDivElement>;
|
13
14
|
heightFromTop: number;
|
15
|
+
selectedOption?: Option;
|
14
16
|
}
|
15
17
|
|
16
18
|
export const dropdownDefaultCSSData = {
|