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.
Files changed (196) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  3. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  4. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  5. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  6. package/lib/components/AttachImage/AttachImage.d.ts +1 -6
  7. package/lib/components/AttachImage/types.d.ts +8 -0
  8. package/lib/components/Avatar/types.d.ts +9 -1
  9. package/lib/components/CreateVariable/CreateVariableSlider.d.ts +5 -0
  10. package/lib/components/CreateVariable/index.d.ts +1 -0
  11. package/lib/components/CreateVariable/types.d.ts +56 -0
  12. package/lib/components/Drawer/Types.d.ts +13 -0
  13. package/lib/components/IconButton/types.d.ts +1 -0
  14. package/lib/components/MiniModal/types.d.ts +7 -0
  15. package/lib/components/Select/components/types.d.ts +1 -0
  16. package/lib/components/Select/types.d.ts +2 -0
  17. package/lib/components/TableTree/Components/TableBody.d.ts +4 -0
  18. package/lib/components/TableTree/Components/TableCell.d.ts +4 -0
  19. package/lib/components/TableTree/Components/TableHead.d.ts +4 -0
  20. package/lib/components/TableTree/Components/TableRow.d.ts +4 -0
  21. package/lib/components/TableTree/TableTree copy.d.ts +25 -0
  22. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  23. package/lib/components/TableTree/types.d.ts +38 -5
  24. package/lib/index.d.ts +117 -7
  25. package/lib/index.esm.js +594 -324
  26. package/lib/index.esm.js.map +1 -1
  27. package/lib/index.js +594 -323
  28. package/lib/index.js.map +1 -1
  29. package/lib/tsconfig.tsbuildinfo +1 -1
  30. package/package.json +1 -1
  31. package/src/assets/icons/authorization_icon.svg +1 -0
  32. package/src/assets/icons/backward.svg +10 -0
  33. package/src/assets/icons/capture_icon.svg +6 -0
  34. package/src/assets/icons/download_file_icon.svg +2 -9
  35. package/src/assets/icons/forward.svg +3 -0
  36. package/src/assets/icons/project_status_icon.svg +10 -0
  37. package/src/assets/icons/refresh_icon.svg +4 -0
  38. package/src/assets/icons/rotate_icon.svg +10 -0
  39. package/src/assets/icons/swipe_icon.svg +9 -0
  40. package/src/assets/icons/tap_icon.svg +4 -0
  41. package/src/components/AttachImage/AttachImage.stories.tsx +2 -0
  42. package/src/components/AttachImage/AttachImage.tsx +5 -9
  43. package/src/components/AttachImage/types.ts +25 -18
  44. package/src/components/Avatar/Avatar.scss +4 -0
  45. package/src/components/Avatar/Avatar.stories.tsx +38 -18
  46. package/src/components/Avatar/Avatar.tsx +19 -3
  47. package/src/components/Avatar/types.ts +9 -1
  48. package/src/components/Charts/DonutChart/DonutChart.tsx +8 -3
  49. package/src/components/Charts/RadialChart/RadialChart.scss +4 -0
  50. package/src/components/Charts/RadialChart/RadialChart.tsx +51 -45
  51. package/src/components/CreateVariable/CreateVariableSlider.scss +18 -0
  52. package/src/components/CreateVariable/CreateVariableSlider.stories.tsx +66 -0
  53. package/src/components/CreateVariable/CreateVariableSlider.tsx +95 -0
  54. package/src/components/CreateVariable/index.ts +1 -0
  55. package/src/components/CreateVariable/types.ts +58 -0
  56. package/src/components/Drawer/Drawer.scss +1 -1
  57. package/src/components/Drawer/Drawer.stories.tsx +0 -1
  58. package/src/components/Drawer/Drawer.tsx +4 -1
  59. package/src/components/Drawer/Types.ts +13 -0
  60. package/src/components/FileDropzone/FileDropzone.scss +0 -1
  61. package/src/components/Icon/iconList.ts +16 -0
  62. package/src/components/IconButton/IconButton.scss +11 -11
  63. package/src/components/IconButton/IconButton.tsx +2 -1
  64. package/src/components/IconButton/types.ts +1 -0
  65. package/src/components/MiniModal/MiniModal.scss +0 -4
  66. package/src/components/MiniModal/MiniModal.stories.tsx +3 -2
  67. package/src/components/MiniModal/MiniModal.tsx +28 -10
  68. package/src/components/MiniModal/types.ts +7 -0
  69. package/src/components/Select/Select.scss +20 -0
  70. package/src/components/Select/Select.stories.tsx +50 -1
  71. package/src/components/Select/Select.tsx +34 -7
  72. package/src/components/Select/components/Dropdown.scss +9 -0
  73. package/src/components/Select/components/Dropdown.tsx +20 -6
  74. package/src/components/Select/components/types.ts +1 -0
  75. package/src/components/Select/types.ts +12 -2
  76. package/src/components/TableTree/Components/TableBody.tsx +35 -0
  77. package/src/components/TableTree/Components/TableCell.tsx +59 -0
  78. package/src/components/TableTree/Components/TableHead.tsx +39 -0
  79. package/src/components/TableTree/Components/TableRow.tsx +37 -0
  80. package/src/components/TableTree/TableTree.scss +8 -5
  81. package/src/components/TableTree/TableTree.tsx +16 -46
  82. package/src/components/TableTree/Utils/getAllChildIds.ts +12 -0
  83. package/src/components/TableTree/Utils/renderSpaces.ts +0 -0
  84. package/src/components/TableTree/types.ts +43 -5
  85. package/src/index.ts +2 -0
  86. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  87. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  88. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  89. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  90. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  91. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  92. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  93. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  94. package/lib/components/Button/Button.stories.d.ts +0 -13
  95. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  96. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  97. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  98. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  99. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  100. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  101. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  102. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  103. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  104. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +0 -8
  105. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  106. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  107. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  108. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  109. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  110. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  111. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  112. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  113. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  114. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  115. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  116. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  117. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  118. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  119. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  120. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  121. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  122. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  123. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  124. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  125. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  126. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  127. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  128. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  129. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  130. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  131. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  132. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  133. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  134. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  135. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  136. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  137. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  138. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  139. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  140. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  141. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  142. package/lib/components/ExcelFile/Types.d.ts +0 -129
  143. package/lib/components/ExcelFile/index.d.ts +0 -1
  144. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  145. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  146. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  147. package/lib/components/Form/Form.stories.d.ts +0 -7
  148. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  149. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  150. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  151. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  152. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  153. package/lib/components/Input/Input.stories.d.ts +0 -9
  154. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  155. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -11
  156. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  157. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  158. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  159. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  160. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  161. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  162. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -10
  163. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  164. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  165. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  166. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  167. package/lib/components/Search/Search.stories.d.ts +0 -6
  168. package/lib/components/Select/Select.stories.d.ts +0 -13
  169. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  170. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  171. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  172. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  173. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  174. package/lib/components/Table/Table.stories.d.ts +0 -13
  175. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  176. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  177. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  178. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  179. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  180. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  181. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  182. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  183. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  184. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  185. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  186. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  187. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  188. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  189. package/lib/utils/find/findAndInsert.d.ts +0 -7
  190. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  191. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  192. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  193. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  194. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  195. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
  196. /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(getValue(selectedOption, valueAccessor));
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(value);
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(getValue(selectedOption, valueAccessor));
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(getValue(option, valueAccessor));
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(getValue(selectedOption, valueAccessor));
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={searchedOption}
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(getLabel(option, labelAccessor))}
118
+ {getOptionLabel(
119
+ getLabel(option, labelAccessor),
120
+ 'iconName' in option && option['iconName']
121
+ )}
108
122
  </div>
109
123
  ))
110
124
  ) : (
@@ -13,6 +13,7 @@ export interface DropdownProps {
13
13
  selectArrowRef?: RefObject<HTMLDivElement>;
14
14
  heightFromTop: number;
15
15
  selectedOption?: Option;
16
+ showIcon?: boolean;
16
17
  }
17
18
 
18
19
  export const dropdownDefaultCSSData = {
@@ -95,9 +95,19 @@ export interface SelectProps {
95
95
  onBlur?: () => void;
96
96
 
97
97
  /*
98
- * Disable the select component input
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;