pixel-react 1.6.2 → 1.6.5
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/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/AttachImage/AttachImage.d.ts +1 -6
- package/lib/components/AttachImage/types.d.ts +8 -0
- package/lib/components/Avatar/types.d.ts +9 -1
- package/lib/components/CreateVariable/CreateVariableSlider.d.ts +5 -0
- package/lib/components/CreateVariable/index.d.ts +1 -0
- package/lib/components/CreateVariable/types.d.ts +56 -0
- package/lib/components/Drawer/Types.d.ts +13 -0
- package/lib/components/IconButton/types.d.ts +1 -0
- package/lib/components/MiniModal/types.d.ts +7 -0
- package/lib/components/Select/components/types.d.ts +1 -0
- package/lib/components/Select/types.d.ts +2 -0
- package/lib/components/TableTree/Components/TableBody.d.ts +4 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +4 -0
- package/lib/components/TableTree/Components/TableHead.d.ts +4 -0
- package/lib/components/TableTree/Components/TableRow.d.ts +4 -0
- package/lib/components/TableTree/TableTree copy.d.ts +25 -0
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +38 -5
- package/lib/index.d.ts +117 -7
- package/lib/index.esm.js +594 -324
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +594 -323
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/icons/authorization_icon.svg +1 -0
- package/src/assets/icons/backward.svg +10 -0
- package/src/assets/icons/capture_icon.svg +6 -0
- package/src/assets/icons/download_file_icon.svg +2 -9
- package/src/assets/icons/forward.svg +3 -0
- package/src/assets/icons/project_status_icon.svg +10 -0
- package/src/assets/icons/refresh_icon.svg +4 -0
- package/src/assets/icons/rotate_icon.svg +10 -0
- package/src/assets/icons/swipe_icon.svg +9 -0
- package/src/assets/icons/tap_icon.svg +4 -0
- package/src/components/AttachImage/AttachImage.stories.tsx +2 -0
- package/src/components/AttachImage/AttachImage.tsx +5 -9
- package/src/components/AttachImage/types.ts +25 -18
- package/src/components/Avatar/Avatar.scss +4 -0
- package/src/components/Avatar/Avatar.stories.tsx +38 -18
- package/src/components/Avatar/Avatar.tsx +19 -3
- package/src/components/Avatar/types.ts +9 -1
- package/src/components/Charts/DonutChart/DonutChart.tsx +8 -3
- package/src/components/Charts/RadialChart/RadialChart.scss +4 -0
- package/src/components/Charts/RadialChart/RadialChart.tsx +51 -45
- package/src/components/CreateVariable/CreateVariableSlider.scss +18 -0
- package/src/components/CreateVariable/CreateVariableSlider.stories.tsx +66 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +95 -0
- package/src/components/CreateVariable/index.ts +1 -0
- package/src/components/CreateVariable/types.ts +58 -0
- package/src/components/Drawer/Drawer.scss +1 -1
- package/src/components/Drawer/Drawer.stories.tsx +0 -1
- package/src/components/Drawer/Drawer.tsx +4 -1
- package/src/components/Drawer/Types.ts +13 -0
- package/src/components/FileDropzone/FileDropzone.scss +0 -1
- package/src/components/Icon/iconList.ts +16 -0
- package/src/components/IconButton/IconButton.scss +11 -11
- package/src/components/IconButton/IconButton.tsx +2 -1
- package/src/components/IconButton/types.ts +1 -0
- package/src/components/MiniModal/MiniModal.scss +0 -4
- package/src/components/MiniModal/MiniModal.stories.tsx +3 -2
- package/src/components/MiniModal/MiniModal.tsx +28 -10
- package/src/components/MiniModal/types.ts +7 -0
- package/src/components/Select/Select.scss +20 -0
- package/src/components/Select/Select.stories.tsx +50 -1
- package/src/components/Select/Select.tsx +34 -7
- package/src/components/Select/components/Dropdown.scss +9 -0
- package/src/components/Select/components/Dropdown.tsx +20 -6
- package/src/components/Select/components/types.ts +1 -0
- package/src/components/Select/types.ts +12 -2
- package/src/components/TableTree/Components/TableBody.tsx +35 -0
- package/src/components/TableTree/Components/TableCell.tsx +59 -0
- package/src/components/TableTree/Components/TableHead.tsx +39 -0
- package/src/components/TableTree/Components/TableRow.tsx +37 -0
- package/src/components/TableTree/TableTree.scss +8 -5
- package/src/components/TableTree/TableTree.tsx +16 -46
- package/src/components/TableTree/Utils/getAllChildIds.ts +12 -0
- package/src/components/TableTree/Utils/renderSpaces.ts +0 -0
- package/src/components/TableTree/types.ts +43 -5
- package/src/index.ts +2 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
- package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
- package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
- package/lib/components/Button/Button.stories.d.ts +0 -13
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
- package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
- package/lib/components/Chip/Chip.stories.d.ts +0 -14
- package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
- package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
- package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
- package/lib/components/ExcelFile/Types.d.ts +0 -129
- package/lib/components/ExcelFile/index.d.ts +0 -1
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -7
- package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
- package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
- package/lib/components/Icon/Icon.stories.d.ts +0 -8
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -11
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -10
- package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
- package/lib/components/Paper/Paper.stories.d.ts +0 -11
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -13
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/Table/Table.stories.d.ts +0 -13
- package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
- package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
- package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
- package/lib/components/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
- package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
- package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
- package/lib/components/Typography/Typography.stories.d.ts +0 -10
- package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
- package/lib/utils/debounce/debounce.stories.d.ts +0 -6
- package/lib/utils/ffID/ffID.stories.d.ts +0 -6
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
- /package/lib/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.d.ts +0 -0
@@ -51,6 +51,10 @@
|
|
51
51
|
}
|
52
52
|
}
|
53
53
|
|
54
|
+
.ff-select-input-icon {
|
55
|
+
margin-left: 6px;
|
56
|
+
}
|
57
|
+
|
54
58
|
.ff-select-inputField {
|
55
59
|
@extend .fontSm;
|
56
60
|
width: calc(100% - 8px);
|
@@ -66,6 +70,15 @@
|
|
66
70
|
cursor: not-allowed;
|
67
71
|
color: var(--ff-select-border-color);
|
68
72
|
}
|
73
|
+
|
74
|
+
&__readonly {
|
75
|
+
cursor: pointer;
|
76
|
+
}
|
77
|
+
|
78
|
+
&__icon {
|
79
|
+
width: calc(100% - 36px);
|
80
|
+
padding: 4;
|
81
|
+
}
|
69
82
|
}
|
70
83
|
|
71
84
|
.ff-select-arrows-wrapper {
|
@@ -95,12 +108,17 @@
|
|
95
108
|
transition: 0.18s ease all;
|
96
109
|
border-radius: 4px;
|
97
110
|
|
111
|
+
&__icon {
|
112
|
+
left: 24px;
|
113
|
+
}
|
114
|
+
|
98
115
|
&__active {
|
99
116
|
transform: translateY(-16px);
|
100
117
|
transition: 0.18s ease all;
|
101
118
|
background-color: var(--ff-select-background-color);
|
102
119
|
padding: 0 2px;
|
103
120
|
z-index: 100000;
|
121
|
+
left: 8px;
|
104
122
|
}
|
105
123
|
}
|
106
124
|
|
@@ -120,6 +138,7 @@
|
|
120
138
|
padding: 0 2px;
|
121
139
|
line-height: 18px;
|
122
140
|
z-index: 100000;
|
141
|
+
left: 8px;
|
123
142
|
}
|
124
143
|
|
125
144
|
.ff-select-arrows-wrapper {
|
@@ -174,6 +193,7 @@
|
|
174
193
|
background-color: var(--ff-select-background-color);
|
175
194
|
padding: 0 2px;
|
176
195
|
line-height: 18px;
|
196
|
+
left: 8px;
|
177
197
|
}
|
178
198
|
}
|
179
199
|
|
@@ -1,8 +1,9 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import Select from './Select';
|
3
|
-
import { useState } from 'react';
|
3
|
+
import React,{ useState } from 'react';
|
4
4
|
import { Option } from './types';
|
5
5
|
import RadioGroup from '../RadioGroup';
|
6
|
+
import React from 'react';
|
6
7
|
|
7
8
|
const meta: Meta<typeof Select> = {
|
8
9
|
title: 'Components/Select',
|
@@ -303,4 +304,52 @@ export const updateOptionFromOutside: Story = {
|
|
303
304
|
},
|
304
305
|
};
|
305
306
|
|
307
|
+
export const IconOptionSelection: Story = {
|
308
|
+
render: () => {
|
309
|
+
const optionsList = [
|
310
|
+
{
|
311
|
+
label: 'fire-flink-LIC4900-onPrem',
|
312
|
+
value: 'fire-flink-LIC4900-onPrem',
|
313
|
+
iconName: 'local',
|
314
|
+
},
|
315
|
+
{
|
316
|
+
label: 'fire-flink-LIC3179',
|
317
|
+
value: 'fire-flink-LIC3179',
|
318
|
+
iconName: 'chrome_icon',
|
319
|
+
},
|
320
|
+
{
|
321
|
+
label: 'fire-flink-LIC4937',
|
322
|
+
value: 'fire-flink-LIC4937',
|
323
|
+
iconName: 'mac_icon',
|
324
|
+
},
|
325
|
+
{
|
326
|
+
label: 'fire-flink-LIC4999',
|
327
|
+
value: 'fire-flink-LIC4999',
|
328
|
+
iconName: 'web_icon',
|
329
|
+
},
|
330
|
+
];
|
331
|
+
|
332
|
+
const [selectedOption, setSelectedOption] = useState<Option>({
|
333
|
+
label: 'fire-flink-LIC3179',
|
334
|
+
value: 'fire-flink-LIC3179',
|
335
|
+
iconName: 'local',
|
336
|
+
});
|
337
|
+
|
338
|
+
const handleChange = (option: Option) => {
|
339
|
+
setSelectedOption(option);
|
340
|
+
};
|
341
|
+
|
342
|
+
return (
|
343
|
+
<Select
|
344
|
+
label="Option"
|
345
|
+
optionsList={optionsList}
|
346
|
+
selectedOption={selectedOption}
|
347
|
+
onChange={handleChange}
|
348
|
+
showIcon={true}
|
349
|
+
width={200}
|
350
|
+
/>
|
351
|
+
);
|
352
|
+
},
|
353
|
+
};
|
354
|
+
|
306
355
|
export default meta;
|
@@ -30,11 +30,16 @@ const Select: FC<SelectProps> = ({
|
|
30
30
|
width = '100%',
|
31
31
|
onBlur = () => {},
|
32
32
|
disableInput = false,
|
33
|
+
showIcon = false,
|
33
34
|
}) => {
|
34
35
|
const selectWidth = typeof width === 'number' ? `${width}px` : width;
|
35
36
|
|
36
37
|
const [showDropdownOptions, setShowDropdownOptions] = useState(false);
|
37
|
-
const [searchedOption, setSearchedOption] = useState<any>(
|
38
|
+
const [searchedOption, setSearchedOption] = useState<any>({
|
39
|
+
searchedText: '',
|
40
|
+
searchedIcon: '',
|
41
|
+
});
|
42
|
+
const { searchedText, searchedIcon } = searchedOption;
|
38
43
|
const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
|
39
44
|
const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
|
40
45
|
positionX: 0,
|
@@ -52,7 +57,10 @@ const Select: FC<SelectProps> = ({
|
|
52
57
|
|
53
58
|
const handleIconClick = () => {
|
54
59
|
setShowDropdownOptions(!showDropdownOptions);
|
55
|
-
setSearchedOption(
|
60
|
+
setSearchedOption({
|
61
|
+
...searchedOption,
|
62
|
+
searchedText: getValue(selectedOption, valueAccessor),
|
63
|
+
});
|
56
64
|
setSelectOptionList(optionsList);
|
57
65
|
if (!showDropdownOptions && inputRef.current) {
|
58
66
|
inputRef.current.focus();
|
@@ -71,7 +79,10 @@ const Select: FC<SelectProps> = ({
|
|
71
79
|
});
|
72
80
|
|
73
81
|
setSelectOptionList(filteredOptions);
|
74
|
-
setSearchedOption(
|
82
|
+
setSearchedOption({
|
83
|
+
...searchedOption,
|
84
|
+
searchedText: value,
|
85
|
+
});
|
75
86
|
};
|
76
87
|
|
77
88
|
const onSelectUpdatePosition = () => {
|
@@ -105,7 +116,10 @@ const Select: FC<SelectProps> = ({
|
|
105
116
|
fromBottom: 0,
|
106
117
|
width: 0,
|
107
118
|
});
|
108
|
-
setSearchedOption(
|
119
|
+
setSearchedOption({
|
120
|
+
searchedText: getValue(selectedOption, valueAccessor),
|
121
|
+
searchedIcon: selectedOption.iconName,
|
122
|
+
});
|
109
123
|
setSelectOptionList(optionsList);
|
110
124
|
onBlur();
|
111
125
|
};
|
@@ -113,7 +127,10 @@ const Select: FC<SelectProps> = ({
|
|
113
127
|
const onSelectOptionSelector = (option: Option): void => {
|
114
128
|
if (disabled) return;
|
115
129
|
onSelectBlur();
|
116
|
-
setSearchedOption(
|
130
|
+
setSearchedOption({
|
131
|
+
searchedText: getValue(selectedOption, valueAccessor),
|
132
|
+
searchedIcon: selectedOption.iconName,
|
133
|
+
});
|
117
134
|
if (onChange) {
|
118
135
|
onChange(option);
|
119
136
|
}
|
@@ -142,7 +159,10 @@ const Select: FC<SelectProps> = ({
|
|
142
159
|
}, [showDropdownOptions]);
|
143
160
|
|
144
161
|
useEffect(() => {
|
145
|
-
setSearchedOption(
|
162
|
+
setSearchedOption({
|
163
|
+
searchedText: getValue(selectedOption, valueAccessor),
|
164
|
+
searchedIcon: selectedOption.iconName,
|
165
|
+
});
|
146
166
|
}, [selectedOption]);
|
147
167
|
|
148
168
|
useEffect(() => {
|
@@ -165,15 +185,20 @@ const Select: FC<SelectProps> = ({
|
|
165
185
|
'ff-select__no_border': !showBorder,
|
166
186
|
})}
|
167
187
|
>
|
188
|
+
{showIcon && (
|
189
|
+
<Icon name={searchedIcon} className="ff-select-input-icon" />
|
190
|
+
)}
|
168
191
|
<input
|
169
192
|
type="text"
|
170
193
|
ref={inputRef}
|
171
194
|
id="select-input-element"
|
172
195
|
className={classNames('ff-select-inputField', {
|
173
196
|
'ff-select-inputField__disabled': disabled,
|
197
|
+
'ff-select-inputField__readonly': disableInput,
|
198
|
+
'ff-select-inputField__icon': showIcon,
|
174
199
|
})}
|
175
200
|
onFocus={handleFocus}
|
176
|
-
value={
|
201
|
+
value={searchedText}
|
177
202
|
autoCorrect="off"
|
178
203
|
autoComplete="off"
|
179
204
|
spellCheck="false"
|
@@ -202,6 +227,7 @@ const Select: FC<SelectProps> = ({
|
|
202
227
|
<Typography
|
203
228
|
as="span"
|
204
229
|
className={classNames('ff-select-labels', {
|
230
|
+
'ff-select-labels__icon': showIcon,
|
205
231
|
'ff-select-labels__active': searchedOption,
|
206
232
|
})}
|
207
233
|
fontSize={searchedOption || showDropdownOptions ? 8 : 12}
|
@@ -239,6 +265,7 @@ const Select: FC<SelectProps> = ({
|
|
239
265
|
onSelectOptionSelector={onSelectOptionSelector}
|
240
266
|
heightFromTop={height}
|
241
267
|
selectedOption={searchedOption}
|
268
|
+
showIcon={showIcon}
|
242
269
|
/>,
|
243
270
|
document.body
|
244
271
|
)}
|
@@ -35,6 +35,15 @@
|
|
35
35
|
text-overflow: ellipsis;
|
36
36
|
overflow: hidden;
|
37
37
|
|
38
|
+
.ff-select-dropdown-icon-container {
|
39
|
+
display: flex;
|
40
|
+
align-items: center;
|
41
|
+
|
42
|
+
&__icon {
|
43
|
+
margin-right: 4px;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
38
47
|
&__selected,
|
39
48
|
&:hover {
|
40
49
|
background-color: var(--ff-select-option-hover-color);
|
@@ -11,6 +11,7 @@ import {
|
|
11
11
|
getValue,
|
12
12
|
} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
|
13
13
|
import useClickOutside from '../../../hooks/useClickOutside';
|
14
|
+
import Icon from '../../Icon';
|
14
15
|
|
15
16
|
const Dropdown: FC<DropdownProps> = ({
|
16
17
|
options = [],
|
@@ -24,6 +25,7 @@ const Dropdown: FC<DropdownProps> = ({
|
|
24
25
|
heightFromTop,
|
25
26
|
selectedOption,
|
26
27
|
valueAccessor,
|
28
|
+
showIcon = false,
|
27
29
|
}) => {
|
28
30
|
const themeContext = useContext(ThemeContext);
|
29
31
|
const currentTheme = themeContext?.currentTheme;
|
@@ -51,21 +53,21 @@ const Dropdown: FC<DropdownProps> = ({
|
|
51
53
|
return {
|
52
54
|
left: positionX,
|
53
55
|
top: positionY + heightFromTop,
|
54
|
-
width: width + 30,
|
56
|
+
width: showIcon ? width + 56 : width + 30,
|
55
57
|
zIndex: optionZIndex,
|
56
|
-
marginLeft: '-2px',
|
58
|
+
marginLeft: showIcon ? '-29px' : '-2px',
|
57
59
|
};
|
58
60
|
}
|
59
61
|
return {
|
60
62
|
zIndex: optionZIndex,
|
61
63
|
left: positionX,
|
62
|
-
width: width + 30,
|
64
|
+
width: showIcon ? width + 56 : width + 30,
|
63
65
|
top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
|
64
|
-
marginLeft: '-2px',
|
66
|
+
marginLeft: showIcon ? '-29px' : '-2px',
|
65
67
|
};
|
66
68
|
};
|
67
69
|
|
68
|
-
const getOptionLabel = (label: any) => {
|
70
|
+
const getOptionLabel = (label: any, icon: string) => {
|
69
71
|
if (React.isValidElement(label)) {
|
70
72
|
return label;
|
71
73
|
}
|
@@ -74,7 +76,16 @@ const Dropdown: FC<DropdownProps> = ({
|
|
74
76
|
as="div"
|
75
77
|
lineHeight="30px"
|
76
78
|
color="var(--ff-select-text-color)"
|
79
|
+
className={classNames({
|
80
|
+
'ff-select-dropdown-icon-container': showIcon,
|
81
|
+
})}
|
77
82
|
>
|
83
|
+
{showIcon && (
|
84
|
+
<Icon
|
85
|
+
name={icon}
|
86
|
+
className="ff-select-dropdown-icon-container__icon"
|
87
|
+
/>
|
88
|
+
)}
|
78
89
|
{label}
|
79
90
|
</Typography>
|
80
91
|
);
|
@@ -104,7 +115,10 @@ const Dropdown: FC<DropdownProps> = ({
|
|
104
115
|
onSelectOptionSelector(option);
|
105
116
|
}}
|
106
117
|
>
|
107
|
-
{getOptionLabel(
|
118
|
+
{getOptionLabel(
|
119
|
+
getLabel(option, labelAccessor),
|
120
|
+
'iconName' in option && option['iconName']
|
121
|
+
)}
|
108
122
|
</div>
|
109
123
|
))
|
110
124
|
) : (
|
@@ -95,9 +95,19 @@ export interface SelectProps {
|
|
95
95
|
onBlur?: () => void;
|
96
96
|
|
97
97
|
/*
|
98
|
-
|
99
|
-
|
98
|
+
* Disable the select component input
|
99
|
+
*/
|
100
100
|
disableInput?: boolean;
|
101
|
+
|
102
|
+
/*
|
103
|
+
* Provide the icon for the select
|
104
|
+
*/
|
105
|
+
showIcon?: boolean;
|
106
|
+
|
107
|
+
/*
|
108
|
+
* Provide the icon name for the select
|
109
|
+
*/
|
110
|
+
iconName?: string;
|
101
111
|
}
|
102
112
|
|
103
113
|
export interface DrowdownPosition {
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { TableBodyProps } from '../types';
|
3
|
+
import TableRow from './TableRow';
|
4
|
+
|
5
|
+
const TableBody = React.memo(
|
6
|
+
({
|
7
|
+
flattenedTreeData,
|
8
|
+
columnsData,
|
9
|
+
selected,
|
10
|
+
select,
|
11
|
+
onRowClick,
|
12
|
+
onToggleExpand,
|
13
|
+
onCheckBoxChange,
|
14
|
+
}: TableBodyProps) => (
|
15
|
+
<tbody>
|
16
|
+
{flattenedTreeData.map(({ node, level }) => {
|
17
|
+
return (
|
18
|
+
<TableRow
|
19
|
+
key={node.id}
|
20
|
+
node={node}
|
21
|
+
level={level}
|
22
|
+
columnsData={columnsData}
|
23
|
+
selected={selected}
|
24
|
+
select={select}
|
25
|
+
onRowClick={onRowClick}
|
26
|
+
onToggleExpand={onToggleExpand}
|
27
|
+
onCheckBoxChange={onCheckBoxChange}
|
28
|
+
/>
|
29
|
+
);
|
30
|
+
})}
|
31
|
+
</tbody>
|
32
|
+
)
|
33
|
+
);
|
34
|
+
|
35
|
+
export default TableBody;
|
@@ -0,0 +1,59 @@
|
|
1
|
+
import { prepareData } from '../../../utils/TableCell/TableCell';
|
2
|
+
import Checkbox from '../../Checkbox';
|
3
|
+
import RadioButton from '../../RadioButton';
|
4
|
+
import { TableCellProps } from '../types';
|
5
|
+
import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
|
6
|
+
import React from 'react';
|
7
|
+
|
8
|
+
const renderSpaces = (level: number) =>
|
9
|
+
Array.from({ length: level }).map((_, i) => (
|
10
|
+
<span key={i} className="tree-table-space-block" />
|
11
|
+
));
|
12
|
+
|
13
|
+
const TableCell = React.memo(
|
14
|
+
({
|
15
|
+
col,
|
16
|
+
node,
|
17
|
+
level,
|
18
|
+
selected,
|
19
|
+
select,
|
20
|
+
onCheckBoxChange,
|
21
|
+
onToggleExpand,
|
22
|
+
}: TableCellProps) => (
|
23
|
+
<td>
|
24
|
+
{col.isTree && renderSpaces(level + 1)}
|
25
|
+
{col.isTree && (
|
26
|
+
<span
|
27
|
+
className={`tree-table-space-block last-block ${
|
28
|
+
node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
|
29
|
+
} ${node.folder ? '' : 'no-folder'}`}
|
30
|
+
onClick={() => onToggleExpand(node)}
|
31
|
+
>
|
32
|
+
{node.folder && <Arrow />}
|
33
|
+
</span>
|
34
|
+
)}
|
35
|
+
<span className="tree-table-td-content">
|
36
|
+
{col.isTree && select === 'checkbox' && (
|
37
|
+
<Checkbox
|
38
|
+
checked={selected.includes(node.id)}
|
39
|
+
onChange={() => onCheckBoxChange('checkbox', node)}
|
40
|
+
/>
|
41
|
+
)}
|
42
|
+
{col.isTree && select === 'radio' && (
|
43
|
+
<RadioButton
|
44
|
+
name={node.title}
|
45
|
+
checked={selected.includes(node.id)}
|
46
|
+
value={node.id}
|
47
|
+
onChange={() => onCheckBoxChange('radio', node)}
|
48
|
+
/>
|
49
|
+
)}
|
50
|
+
{prepareData(node, col)}
|
51
|
+
</span>
|
52
|
+
{col.actions && (
|
53
|
+
<div className="table-tree-row-action">{col.actions(node)}</div>
|
54
|
+
)}
|
55
|
+
</td>
|
56
|
+
)
|
57
|
+
);
|
58
|
+
|
59
|
+
export default TableCell;
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React, { useMemo } from 'react';
|
2
|
+
import { TableHeadProps } from '../types';
|
3
|
+
|
4
|
+
const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
|
5
|
+
const hasDefaultValues = useMemo(
|
6
|
+
() => columnsData.some(({ defaultValue }) => !!defaultValue),
|
7
|
+
[columnsData]
|
8
|
+
);
|
9
|
+
|
10
|
+
return (
|
11
|
+
<thead>
|
12
|
+
<tr>
|
13
|
+
{columnsData.map(({ name }) => (
|
14
|
+
<th key={name}>{name}</th>
|
15
|
+
))}
|
16
|
+
</tr>
|
17
|
+
{hasDefaultValues && (
|
18
|
+
<tr>
|
19
|
+
{columnsData.map(({ defaultValue, defaultActions }, index) => (
|
20
|
+
<td key={index}>
|
21
|
+
{defaultValue && (
|
22
|
+
<span className="">
|
23
|
+
{defaultValue}
|
24
|
+
{defaultActions && (
|
25
|
+
<div className="table-tree-row-action">
|
26
|
+
{defaultActions()}
|
27
|
+
</div>
|
28
|
+
)}
|
29
|
+
</span>
|
30
|
+
)}
|
31
|
+
</td>
|
32
|
+
))}
|
33
|
+
</tr>
|
34
|
+
)}
|
35
|
+
</thead>
|
36
|
+
);
|
37
|
+
});
|
38
|
+
|
39
|
+
export default TableHead;
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { TableRowProps } from '../types';
|
3
|
+
import TableCell from './TableCell';
|
4
|
+
|
5
|
+
const TableRow = React.memo(
|
6
|
+
({
|
7
|
+
node,
|
8
|
+
level,
|
9
|
+
columnsData,
|
10
|
+
selected,
|
11
|
+
select,
|
12
|
+
onRowClick,
|
13
|
+
onToggleExpand,
|
14
|
+
onCheckBoxChange,
|
15
|
+
}: TableRowProps) => (
|
16
|
+
<tr
|
17
|
+
data-level={level}
|
18
|
+
className="show"
|
19
|
+
onClick={(e) => onRowClick(e, node)}
|
20
|
+
>
|
21
|
+
{columnsData.map((col) => (
|
22
|
+
<TableCell
|
23
|
+
key={col.name}
|
24
|
+
col={col}
|
25
|
+
node={node}
|
26
|
+
level={level}
|
27
|
+
selected={selected}
|
28
|
+
select={select}
|
29
|
+
onCheckBoxChange={onCheckBoxChange}
|
30
|
+
onToggleExpand={onToggleExpand}
|
31
|
+
/>
|
32
|
+
))}
|
33
|
+
</tr>
|
34
|
+
)
|
35
|
+
);
|
36
|
+
|
37
|
+
export default TableRow;
|
@@ -1,8 +1,3 @@
|
|
1
|
-
html,
|
2
|
-
* {
|
3
|
-
font-family: 'Open Sans';
|
4
|
-
}
|
5
|
-
|
6
1
|
.tree-table-space-block {
|
7
2
|
display: inline-block;
|
8
3
|
width: 20px;
|
@@ -39,6 +34,14 @@ html,
|
|
39
34
|
.tree-table-wrap {
|
40
35
|
width: 100%;
|
41
36
|
}
|
37
|
+
thead{
|
38
|
+
position: sticky;
|
39
|
+
top: 12px;
|
40
|
+
}
|
41
|
+
|
42
|
+
tbody{
|
43
|
+
overflow: scroll;
|
44
|
+
}
|
42
45
|
|
43
46
|
.tree-table {
|
44
47
|
border: 1px solid #f1f1f1;
|