pixel-react 1.6.3 → 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/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/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/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/TableTree copy.d.ts +25 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/index.d.ts +103 -2
- package/lib/index.esm.js +549 -308
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +549 -307
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/icons/download_file_icon.svg +2 -9
- 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/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/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 +16 -0
- package/src/components/Select/Select.stories.tsx +49 -0
- package/src/components/Select/Select.tsx +33 -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/TableTree.tsx +10 -4
- package/src/components/TableTree/types.ts +1 -1
- 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
@@ -36,6 +36,9 @@ const Drawer: FC<DrawerProps> = ({
|
|
36
36
|
zIndex = 999,
|
37
37
|
secondLayerZIndex = false,
|
38
38
|
top,
|
39
|
+
height,
|
40
|
+
width,
|
41
|
+
right = 0,
|
39
42
|
}: DrawerProps) => {
|
40
43
|
const [isExpanded, setIsExpanded] = useState(false);
|
41
44
|
|
@@ -85,7 +88,7 @@ const Drawer: FC<DrawerProps> = ({
|
|
85
88
|
className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
|
86
89
|
'ff-drawer--open': isOpen,
|
87
90
|
})}
|
88
|
-
style={{ zIndex, top }}
|
91
|
+
style={{ zIndex, top, height, width, right }}
|
89
92
|
>
|
90
93
|
{showHeader && (
|
91
94
|
<div
|
@@ -141,4 +141,17 @@ export interface DrawerProps {
|
|
141
141
|
* Custom top for the drawer
|
142
142
|
*/
|
143
143
|
top?: string;
|
144
|
+
/**
|
145
|
+
* Height of the drawer
|
146
|
+
*/
|
147
|
+
height?: string;
|
148
|
+
/**
|
149
|
+
*
|
150
|
+
* width of the drawer
|
151
|
+
*/
|
152
|
+
width?: string;
|
153
|
+
/**
|
154
|
+
* Position from right
|
155
|
+
*/
|
156
|
+
right?: string | number;
|
144
157
|
}
|
@@ -35,7 +35,6 @@
|
|
35
35
|
&.popover-arrow-top {
|
36
36
|
bottom: 100%;
|
37
37
|
left: 30px;
|
38
|
-
border-width: 0 10px 10px 10px;
|
39
38
|
padding: 0 3px 0 0;
|
40
39
|
border-color: transparent transparent var(--ff-mini-modal-border)
|
41
40
|
transparent;
|
@@ -46,7 +45,6 @@
|
|
46
45
|
}
|
47
46
|
&.popover-arrow-left {
|
48
47
|
left: -15px; //align the arrow with modal for the right side modal
|
49
|
-
border-width: 10px 10px 10px 0;
|
50
48
|
border-color: transparent var(--ff-mini-modal-border) transparent
|
51
49
|
transparent;
|
52
50
|
filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
|
@@ -58,7 +56,6 @@
|
|
58
56
|
&.popover-arrow-bottom {
|
59
57
|
top: 100%;
|
60
58
|
left: 30px;
|
61
|
-
border-width: 10px 10px 0 10px;
|
62
59
|
border-color: var(--ff-mini-modal-border) transparent transparent
|
63
60
|
transparent; // Bottom part of the arrow with the correct color
|
64
61
|
filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
|
@@ -70,7 +67,6 @@
|
|
70
67
|
&.popover-arrow-right {
|
71
68
|
right: -10px;
|
72
69
|
top: 66px;
|
73
|
-
border-width: 10px 0 10px 10px;
|
74
70
|
border-color: transparent transparent transparent
|
75
71
|
var(--ff-mini-modal-border);
|
76
72
|
filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
|
@@ -55,7 +55,7 @@ const BasicModalComponent = () => {
|
|
55
55
|
isOverlay: true,
|
56
56
|
zIndexOverlay: 99,
|
57
57
|
}}
|
58
|
-
modalProperties={{ width: 300, height: 180 }}
|
58
|
+
modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
|
59
59
|
headerProps={
|
60
60
|
<>
|
61
61
|
<Typography as="p">Modal 1</Typography>
|
@@ -271,7 +271,8 @@ export const CustomModalWithArrow = () => {
|
|
271
271
|
isOverlay: true,
|
272
272
|
zIndexOverlay: 99,
|
273
273
|
}}
|
274
|
-
modalProperties={{ width: 300, height: 250 }}
|
274
|
+
modalProperties={{ width: 300, height: 250, left: 180 }}
|
275
|
+
arrowProperties={{ left: 270, size: 6 }}
|
275
276
|
arrowZIndex={1000}
|
276
277
|
headerProps={
|
277
278
|
<>
|
@@ -31,6 +31,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
31
31
|
extraLeftSpace,
|
32
32
|
isIconModel,
|
33
33
|
wrapperProperties,
|
34
|
+
arrowProperties,
|
34
35
|
arrowZIndex,
|
35
36
|
overlay,
|
36
37
|
outSideClick,
|
@@ -43,7 +44,21 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
43
44
|
});
|
44
45
|
const [isVisible, setIsVisible] = useState(false);
|
45
46
|
const modalRef = useRef<HTMLDivElement>(null);
|
47
|
+
const {
|
48
|
+
width: modalWidth,
|
49
|
+
height: modalHeight,
|
50
|
+
borderRadius: modalBorderRadius = 4,
|
51
|
+
zIndex: modalZIndex = 99,
|
52
|
+
boxShadow: modalBoxShadow,
|
53
|
+
left: modalLeft,
|
54
|
+
top: modalTop,
|
55
|
+
} = modalProperties || {};
|
46
56
|
|
57
|
+
const {
|
58
|
+
left: popOverLeft,
|
59
|
+
top: popOverTop,
|
60
|
+
size: popOverSize = 10,
|
61
|
+
} = arrowProperties || {};
|
47
62
|
// Function to calculate available space
|
48
63
|
const getAvailableSpace = (rect: Rect): AvailableSpace => {
|
49
64
|
const { top, left, bottom, right } = rect;
|
@@ -196,14 +211,6 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
196
211
|
};
|
197
212
|
}, [calculatePosition]);
|
198
213
|
|
199
|
-
const {
|
200
|
-
width: modalWidth,
|
201
|
-
height: modalHeight,
|
202
|
-
borderRadius: modalBorderRadius = 4,
|
203
|
-
zIndex: modalZIndex = 99,
|
204
|
-
boxShadow: modalBoxShadow,
|
205
|
-
} = modalProperties || {};
|
206
|
-
|
207
214
|
const {
|
208
215
|
width: wrapperWidth = 35,
|
209
216
|
zIndex: wrapperZIndex = 101,
|
@@ -234,8 +241,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
234
241
|
animatedModal: isAnimated,
|
235
242
|
})}
|
236
243
|
style={{
|
237
|
-
top: `${calculatedModalTop}px`,
|
238
|
-
left: `${calculatedModalLeft}px`,
|
244
|
+
top: `${modalTop ?? calculatedModalTop}px`,
|
245
|
+
left: `${modalLeft ?? calculatedModalLeft}px`,
|
239
246
|
}}
|
240
247
|
>
|
241
248
|
{isPopOver && (
|
@@ -251,6 +258,17 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
251
258
|
} ${getArrowClassName()}`}
|
252
259
|
style={{
|
253
260
|
zIndex: `${arrowZIndex}`,
|
261
|
+
top: `${popOverTop && popOverTop}px`,
|
262
|
+
left: `${popOverLeft && popOverLeft}px`,
|
263
|
+
borderWidth: `${
|
264
|
+
modalPosition === 'right'
|
265
|
+
? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
|
266
|
+
: modalPosition === 'top'
|
267
|
+
? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
|
268
|
+
: modalPosition === 'left'
|
269
|
+
? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
|
270
|
+
: `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
|
271
|
+
}`,
|
254
272
|
}}
|
255
273
|
/>
|
256
274
|
)}
|
@@ -5,6 +5,8 @@ interface ModalDimensions {
|
|
5
5
|
borderRadius?: number;
|
6
6
|
zIndex?: number;
|
7
7
|
boxShadow?: string;
|
8
|
+
left?: number;
|
9
|
+
top?: number;
|
8
10
|
}
|
9
11
|
export interface MiniEditModalProps {
|
10
12
|
/**
|
@@ -94,6 +96,11 @@ export interface MiniEditModalProps {
|
|
94
96
|
boxShadow?: string;
|
95
97
|
};
|
96
98
|
arrowZIndex?: number;
|
99
|
+
arrowProperties?: {
|
100
|
+
left?: number;
|
101
|
+
top?: number;
|
102
|
+
size?: number;
|
103
|
+
};
|
97
104
|
overlay?: {
|
98
105
|
isOverlay?: boolean;
|
99
106
|
zIndexOverlay?: number;
|
@@ -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);
|
@@ -70,6 +74,11 @@
|
|
70
74
|
&__readonly {
|
71
75
|
cursor: pointer;
|
72
76
|
}
|
77
|
+
|
78
|
+
&__icon {
|
79
|
+
width: calc(100% - 36px);
|
80
|
+
padding: 4;
|
81
|
+
}
|
73
82
|
}
|
74
83
|
|
75
84
|
.ff-select-arrows-wrapper {
|
@@ -99,12 +108,17 @@
|
|
99
108
|
transition: 0.18s ease all;
|
100
109
|
border-radius: 4px;
|
101
110
|
|
111
|
+
&__icon {
|
112
|
+
left: 24px;
|
113
|
+
}
|
114
|
+
|
102
115
|
&__active {
|
103
116
|
transform: translateY(-16px);
|
104
117
|
transition: 0.18s ease all;
|
105
118
|
background-color: var(--ff-select-background-color);
|
106
119
|
padding: 0 2px;
|
107
120
|
z-index: 100000;
|
121
|
+
left: 8px;
|
108
122
|
}
|
109
123
|
}
|
110
124
|
|
@@ -124,6 +138,7 @@
|
|
124
138
|
padding: 0 2px;
|
125
139
|
line-height: 18px;
|
126
140
|
z-index: 100000;
|
141
|
+
left: 8px;
|
127
142
|
}
|
128
143
|
|
129
144
|
.ff-select-arrows-wrapper {
|
@@ -178,6 +193,7 @@
|
|
178
193
|
background-color: var(--ff-select-background-color);
|
179
194
|
padding: 0 2px;
|
180
195
|
line-height: 18px;
|
196
|
+
left: 8px;
|
181
197
|
}
|
182
198
|
}
|
183
199
|
|
@@ -3,6 +3,7 @@ import Select from './Select';
|
|
3
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,6 +185,9 @@ 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}
|
@@ -172,9 +195,10 @@ const Select: FC<SelectProps> = ({
|
|
172
195
|
className={classNames('ff-select-inputField', {
|
173
196
|
'ff-select-inputField__disabled': disabled,
|
174
197
|
'ff-select-inputField__readonly': disableInput,
|
198
|
+
'ff-select-inputField__icon': showIcon,
|
175
199
|
})}
|
176
200
|
onFocus={handleFocus}
|
177
|
-
value={
|
201
|
+
value={searchedText}
|
178
202
|
autoCorrect="off"
|
179
203
|
autoComplete="off"
|
180
204
|
spellCheck="false"
|
@@ -203,6 +227,7 @@ const Select: FC<SelectProps> = ({
|
|
203
227
|
<Typography
|
204
228
|
as="span"
|
205
229
|
className={classNames('ff-select-labels', {
|
230
|
+
'ff-select-labels__icon': showIcon,
|
206
231
|
'ff-select-labels__active': searchedOption,
|
207
232
|
})}
|
208
233
|
fontSize={searchedOption || showDropdownOptions ? 8 : 12}
|
@@ -240,6 +265,7 @@ const Select: FC<SelectProps> = ({
|
|
240
265
|
onSelectOptionSelector={onSelectOptionSelector}
|
241
266
|
heightFromTop={height}
|
242
267
|
selectedOption={searchedOption}
|
268
|
+
showIcon={showIcon}
|
243
269
|
/>,
|
244
270
|
document.body
|
245
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 {
|
@@ -4,7 +4,13 @@ import { prepareData } from '../../utils/TableCell/TableCell';
|
|
4
4
|
import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
|
5
5
|
import Checkbox from '../Checkbox';
|
6
6
|
import RadioButton from '../RadioButton';
|
7
|
-
import {
|
7
|
+
import {
|
8
|
+
TableBodyProps,
|
9
|
+
TableCellProps,
|
10
|
+
TableHeadProps,
|
11
|
+
TableRowProps,
|
12
|
+
TreeTableProps,
|
13
|
+
} from './types';
|
8
14
|
|
9
15
|
// Helper to render spaces for levels
|
10
16
|
const renderSpaces = (level: number) =>
|
@@ -185,7 +191,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
185
191
|
}) => {
|
186
192
|
const handleToggleExpand = useCallback(
|
187
193
|
(node: any) => onExpand?.(true, node?.id),
|
188
|
-
[
|
194
|
+
[onExpand]
|
189
195
|
);
|
190
196
|
|
191
197
|
const handleCheckBoxChange = useCallback(
|
@@ -193,7 +199,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
193
199
|
const nodeId = node.id;
|
194
200
|
|
195
201
|
if (type === 'radio') {
|
196
|
-
onChange?.([nodeId]);
|
202
|
+
onChange?.('true', [nodeId]);
|
197
203
|
} else {
|
198
204
|
let updatedSelected = [...selected];
|
199
205
|
|
@@ -207,7 +213,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
207
213
|
);
|
208
214
|
}
|
209
215
|
|
210
|
-
onChange?.(updatedSelected);
|
216
|
+
onChange?.('true', updatedSelected);
|
211
217
|
}
|
212
218
|
},
|
213
219
|
[selected, treeData, onChange]
|
@@ -61,7 +61,7 @@ export interface TreeTableProps {
|
|
61
61
|
columnsData: Column[];
|
62
62
|
selected?: string[];
|
63
63
|
select?: 'radio' | 'checkbox' | 'none';
|
64
|
-
onChange?: (
|
64
|
+
onChange?: (e: any, node: string[]) => void;
|
65
65
|
onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
|
66
66
|
onExpand?: (_isExpanded: boolean, node: string) => void;
|
67
67
|
onPagination?: (_direction: string) => void;
|
package/src/index.ts
CHANGED
@@ -68,6 +68,7 @@ import VariableDropdown from './components/Editor/VariableDropdown';
|
|
68
68
|
import LineChart from './components/Charts/LineChart';
|
69
69
|
import DownloadClient from './components/DownloadClient/DownloadClient';
|
70
70
|
import FieldSet from './components/FieldSet';
|
71
|
+
import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
|
71
72
|
// Utils imports
|
72
73
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
73
74
|
import {
|
@@ -168,6 +169,7 @@ export {
|
|
168
169
|
DownloadClient,
|
169
170
|
FieldSet,
|
170
171
|
PopUpModal,
|
172
|
+
CreateVariableSlider,
|
171
173
|
|
172
174
|
// utils exports
|
173
175
|
checkEmpty,
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import AddButton from './AddButton';
|
3
|
-
declare const meta: Meta<typeof AddButton>;
|
4
|
-
type Story = StoryObj<typeof AddButton>;
|
5
|
-
export declare const Default: Story;
|
6
|
-
export declare const TwoArrowsButtons: Story;
|
7
|
-
export declare const ThreeArrowsButton: Story;
|
8
|
-
export default meta;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import AllProjectsDropdown from './AllProjectsDropdown';
|
3
|
-
declare const meta: Meta<typeof AllProjectsDropdown>;
|
4
|
-
type Story = StoryObj<typeof AllProjectsDropdown>;
|
5
|
-
export declare const Default: Story;
|
6
|
-
export declare const PrimaryIconButton: Story;
|
7
|
-
export default meta;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import AppHeader from './AppHeader';
|
3
|
-
declare const meta: Meta<typeof AppHeader>;
|
4
|
-
type Story = StoryObj<typeof AppHeader>;
|
5
|
-
export declare const SampleAppHeader: Story;
|
6
|
-
export declare const Controlled: Story;
|
7
|
-
export default meta;
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import AttachmentButton from './AttachmentButton';
|
3
|
-
declare const meta: Meta<typeof AttachmentButton>;
|
4
|
-
type Story = StoryObj<typeof AttachmentButton>;
|
5
|
-
export declare const Default: Story;
|
6
|
-
export declare const SmallFileLimit: Story;
|
7
|
-
export declare const LargeFileLimit: Story;
|
8
|
-
export declare const DisabledUploader: Story;
|
9
|
-
export default meta;
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import Avatar from './Avatar';
|
3
|
-
declare const meta: Meta<typeof Avatar>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof meta>;
|
6
|
-
export declare const Small: Story;
|
7
|
-
export declare const Medium: Story;
|
8
|
-
export declare const Large: Story;
|
9
|
-
export declare const CustomAvatarSize: Story;
|
10
|
-
export declare const CustomIconSize: Story;
|