pixel-react 1.9.1 → 1.9.3
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/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +1 -3
- package/lib/components/Excel/Types.d.ts +1 -1
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/Table/Types.d.ts +8 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/data.d.ts +54 -262
- package/lib/components/TableTree/types.d.ts +0 -6
- package/lib/index.d.ts +18 -7
- package/lib/index.esm.js +21547 -21727
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +21554 -21733
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/indexDBStore/indexDB.d.ts +2 -2
- package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
- package/package.json +1 -2
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +55 -0
- package/src/assets/Themes/BaseTheme.scss +17 -6
- package/src/assets/Themes/BlueTheme.scss +12 -0
- package/src/assets/Themes/DarkTheme.scss +20 -6
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/azure.svg +9 -0
- package/src/assets/icons/bitbucket.svg +9 -0
- package/src/assets/icons/clear_history.svg +6 -0
- package/src/assets/icons/code.svg +4 -0
- package/src/assets/icons/code_colored.svg +4 -0
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/csharp.svg +9 -0
- package/src/assets/icons/cypress.svg +9 -0
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/delete_filled.svg +12 -0
- package/src/assets/icons/design_link.svg +7 -0
- package/src/assets/icons/disable_icon.svg +3 -0
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/enable_icon.svg +3 -0
- package/src/assets/icons/file_colored.svg +5 -0
- package/src/assets/icons/github.svg +9 -0
- package/src/assets/icons/gitlab.svg +9 -0
- package/src/assets/icons/java.svg +4 -0
- package/src/assets/icons/javascript.svg +11 -0
- package/src/assets/icons/jenkins.svg +9 -0
- package/src/assets/icons/jira_colored.svg +15 -0
- package/src/assets/icons/jira_logo.svg +9 -0
- package/src/assets/icons/mic.svg +4 -0
- package/src/assets/icons/mic_filled.svg +28 -0
- package/src/assets/icons/playwright.svg +9 -0
- package/src/assets/icons/primary_calendar_icon.svg +3 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/python.svg +19 -0
- package/src/assets/icons/regenerate.svg +4 -0
- package/src/assets/icons/right_arrow_filled_icon.svg +5 -0
- package/src/assets/icons/screenshot.svg +7 -0
- package/src/assets/icons/slack.svg +9 -0
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Button/Button.tsx +2 -0
- package/src/components/Charts/BarChart/BarChart.stories.tsx +2 -1
- package/src/components/Charts/BarChart/BarChart.tsx +6 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +7 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +5 -2
- package/src/components/Charts/MultiRadialChart/types.ts +2 -0
- package/src/components/DatePicker/DatePicker.scss +379 -632
- package/src/components/DatePicker/DatePicker.tsx +130 -98
- package/src/components/DatePicker/Timepicker.tsx +1 -13
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +48 -42
- package/src/components/Excel/ExcelFile.stories.tsx +98 -96
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +65 -28
- package/src/components/Excel/Types.ts +1 -1
- package/src/components/Excel/dataConversion.ts +8 -10
- package/src/components/Icon/iconList.ts +60 -3
- package/src/components/Table/Table.scss +44 -11
- package/src/components/Table/Table.stories.tsx +60 -1
- package/src/components/Table/Table.tsx +190 -123
- package/src/components/Table/Types.ts +8 -0
- package/src/components/TableTree/Components/TableBody.tsx +18 -20
- package/src/components/TableTree/Components/TableCell.tsx +28 -16
- package/src/components/TableTree/Components/TableRow.tsx +4 -7
- package/src/components/TableTree/TableTree.stories.tsx +10 -10
- package/src/components/TableTree/TableTree.tsx +19 -16
- package/src/components/TableTree/data.ts +53 -362
- package/src/components/TableTree/types.ts +0 -6
- package/src/components/TextArea/Textarea.scss +24 -6
- package/src/index.ts +3 -1
- package/src/utils/indexDBStore/indexDB.ts +63 -33
- package/src/utils/swapArrayItem/dragAndDropUtils.ts +11 -0
- package/lib/1fb4472b34e4fe07.css +0 -1
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- 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/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/AddVariables/AddVariables.d.ts +0 -5
- package/lib/components/AddVariables/index.d.ts +0 -1
- package/lib/components/AddVariables/types.d.ts +0 -35
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
- package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
- package/lib/components/AttachImage/AttachImage.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/BarChart/BarChart.stories.d.ts +0 -6
- 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/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/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/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- 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/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
- 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/ImportExcelStyles.d.ts +0 -24
- 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 -13
- 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 -11
- package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
- package/lib/components/NLPInput/type.d.ts +0 -70
- 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 -14
- 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/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- 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/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -123,7 +123,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
123
123
|
value: 'double_border',
|
124
124
|
label: 'Double Underline',
|
125
125
|
icon: 'double_underline',
|
126
|
-
}
|
126
|
+
},
|
127
127
|
];
|
128
128
|
|
129
129
|
const fontFamily = [
|
@@ -151,39 +151,77 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
151
151
|
label: 'Courier New',
|
152
152
|
value: '"Courier New"',
|
153
153
|
},
|
154
|
-
];
|
155
|
-
|
156
|
-
const fontSize = [
|
157
154
|
{
|
158
|
-
label: '
|
159
|
-
value: '
|
155
|
+
label: 'Verdana',
|
156
|
+
value: 'Verdana',
|
157
|
+
},
|
158
|
+
{
|
159
|
+
label: 'Tahoma',
|
160
|
+
value: 'Tahoma',
|
161
|
+
},
|
162
|
+
{
|
163
|
+
label: 'Trebuchet MS',
|
164
|
+
value: '"Trebuchet MS"',
|
165
|
+
},
|
166
|
+
{
|
167
|
+
label: 'Comic Sans MS',
|
168
|
+
value: '"Comic Sans MS"',
|
169
|
+
},
|
170
|
+
{
|
171
|
+
label: 'Impact',
|
172
|
+
value: 'Impact',
|
173
|
+
},
|
174
|
+
{
|
175
|
+
label: 'Arial Black',
|
176
|
+
value: '"Arial Black"',
|
177
|
+
},
|
178
|
+
{
|
179
|
+
label: 'Lucida Console',
|
180
|
+
value: '"Lucida Console"',
|
160
181
|
},
|
161
182
|
{
|
162
|
-
label: '
|
163
|
-
value: '
|
183
|
+
label: 'Lucida Sans Unicode',
|
184
|
+
value: '"Lucida Sans Unicode"',
|
164
185
|
},
|
165
186
|
{
|
166
|
-
label: '
|
167
|
-
value: '
|
187
|
+
label: 'Courier',
|
188
|
+
value: 'Courier',
|
168
189
|
},
|
169
190
|
{
|
170
|
-
label: '
|
171
|
-
value: '
|
191
|
+
label: 'Helvetica',
|
192
|
+
value: 'Helvetica',
|
172
193
|
},
|
173
194
|
{
|
174
|
-
label: '
|
175
|
-
value: '
|
195
|
+
label: 'Arial Rounded MT Bold',
|
196
|
+
value: '"Arial Rounded MT Bold"',
|
176
197
|
},
|
177
198
|
{
|
178
|
-
label: '
|
179
|
-
value: '
|
199
|
+
label: 'Georgia',
|
200
|
+
value: 'Georgia',
|
180
201
|
},
|
181
202
|
{
|
182
|
-
label: '
|
183
|
-
value: '
|
203
|
+
label: 'sans-serif',
|
204
|
+
value: 'sans-serif',
|
205
|
+
},
|
206
|
+
{
|
207
|
+
label: 'serif',
|
208
|
+
value: 'serif',
|
209
|
+
},
|
210
|
+
{
|
211
|
+
label: 'monospace',
|
212
|
+
value: 'monospace',
|
184
213
|
},
|
185
214
|
];
|
186
215
|
|
216
|
+
const fontSizeList = [
|
217
|
+
5, 6, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 40, 48, 56, 72,
|
218
|
+
];
|
219
|
+
|
220
|
+
const fontSize = fontSizeList.map((fontSize) => ({
|
221
|
+
label: fontSize,
|
222
|
+
value: fontSize,
|
223
|
+
}));
|
224
|
+
|
187
225
|
const getTextColor = (color: string) => {
|
188
226
|
setColorPicker((prev) => ({ ...prev, color: color }));
|
189
227
|
};
|
@@ -259,7 +297,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
259
297
|
<Tooltip placement="top" title={'Text Left'}>
|
260
298
|
<Icon
|
261
299
|
variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
|
262
|
-
hoverEffect
|
300
|
+
hoverEffect={cellStyle.textAlign === 'left' ? false : true}
|
263
301
|
disabled={toolbar === 'disable'}
|
264
302
|
onClick={() => setTextAlign(data, 'left')}
|
265
303
|
name="text_align_left"
|
@@ -268,7 +306,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
268
306
|
<Tooltip placement="top" title={'Text Center'}>
|
269
307
|
<Icon
|
270
308
|
variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
|
271
|
-
hoverEffect
|
309
|
+
hoverEffect={cellStyle.textAlign === 'center' ? false : true}
|
272
310
|
disabled={toolbar === 'disable'}
|
273
311
|
onClick={() => setTextAlign(data, 'center')}
|
274
312
|
name="text_align_center"
|
@@ -278,7 +316,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
278
316
|
<Tooltip placement="top" title={'Text Right'}>
|
279
317
|
<Icon
|
280
318
|
variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
|
281
|
-
hoverEffect
|
319
|
+
hoverEffect={cellStyle.textAlign === 'right' ? false : true}
|
282
320
|
disabled={toolbar === 'disable'}
|
283
321
|
onClick={() => setTextAlign(data, 'right')}
|
284
322
|
name="text_align_right"
|
@@ -290,7 +328,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
290
328
|
<Tooltip placement="top" title={'Bold'}>
|
291
329
|
<Icon
|
292
330
|
variant={styleBackend.bold ? 'dark' : 'light'}
|
293
|
-
hoverEffect
|
331
|
+
hoverEffect={styleBackend.bold ? false : true}
|
294
332
|
disabled={toolbar === 'disable'}
|
295
333
|
onClick={() => onBold(data)}
|
296
334
|
name="bold"
|
@@ -298,8 +336,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
298
336
|
</Tooltip>
|
299
337
|
<Tooltip placement="top" title={'Italic'}>
|
300
338
|
<Icon
|
301
|
-
hoverEffect
|
302
339
|
variant={styleBackend.italic ? 'dark' : 'light'}
|
340
|
+
hoverEffect={styleBackend.italic ? false : true}
|
303
341
|
disabled={toolbar === 'disable'}
|
304
342
|
onClick={() => onItalic(data)}
|
305
343
|
name="italic"
|
@@ -311,7 +349,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
311
349
|
variant={
|
312
350
|
cellStyle.textDecoration === underLine ? 'dark' : 'light'
|
313
351
|
}
|
314
|
-
hoverEffect
|
352
|
+
hoverEffect={
|
353
|
+
cellStyle.textDecoration === underLine ? false : true
|
354
|
+
}
|
315
355
|
disabled={toolbar === 'disable'}
|
316
356
|
onClick={() => setUnderlineType(data, underLine, true)}
|
317
357
|
name={getUnderlineIcon()}
|
@@ -324,7 +364,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
324
364
|
iconSize={12}
|
325
365
|
options={underlineTypeIcon}
|
326
366
|
tooltipPlacement="top"
|
327
|
-
variant="light"
|
328
367
|
onOptionClick={(e) => {
|
329
368
|
let selectedValue = e.value as string;
|
330
369
|
setUnderlineType(data, selectedValue, true);
|
@@ -340,7 +379,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
340
379
|
<Tooltip placement="top" title={'Format Painter'}>
|
341
380
|
<Icon
|
342
381
|
variant={formattedStyle ? 'dark' : 'light'}
|
343
|
-
hoverEffect
|
382
|
+
hoverEffect={formattedStyle ? false : true}
|
344
383
|
disabled={toolbar === 'disable'}
|
345
384
|
onClick={() => {
|
346
385
|
setFormatePainter(data);
|
@@ -403,7 +442,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
403
442
|
zIndex={1000}
|
404
443
|
options={borderTypeIcon}
|
405
444
|
tooltipPlacement="top"
|
406
|
-
variant="light"
|
407
445
|
onOptionClick={(e) => {
|
408
446
|
let selectedValue = e.value as string;
|
409
447
|
setBorderType(data, selectedValue, 'black');
|
@@ -415,7 +453,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
415
453
|
</Tooltip>
|
416
454
|
</div>
|
417
455
|
|
418
|
-
|
419
456
|
{/* <div className="ff-excel-toolbar-divider"></div> TODO */}
|
420
457
|
{/* <div className="ff-excel-toolbar-menu">
|
421
458
|
<Tooltip placement="top" title={'Formula'}>
|
@@ -74,7 +74,6 @@ export const getTextDecorationBack = (
|
|
74
74
|
export function convertStyleToFrontend(
|
75
75
|
backendStyle: BackendStyle
|
76
76
|
): React.CSSProperties {
|
77
|
-
|
78
77
|
const { border } = backendStyle;
|
79
78
|
|
80
79
|
let borderTop = '';
|
@@ -82,32 +81,31 @@ export function convertStyleToFrontend(
|
|
82
81
|
let borderBottom = '';
|
83
82
|
let borderLeft = '';
|
84
83
|
|
85
|
-
if (border.top !== '
|
84
|
+
if (border.top !== 'THIN') {
|
86
85
|
borderTop =
|
87
|
-
border.top === '
|
86
|
+
border.top === 'MEDIUM'
|
88
87
|
? '2px solid var(--input-hover-border-color)'
|
89
88
|
: '1px solid var(--excel-sheet-border)';
|
90
89
|
}
|
91
|
-
if (border.right !== '
|
90
|
+
if (border.right !== 'THIN') {
|
92
91
|
borderRight =
|
93
|
-
border.right === '
|
92
|
+
border.right === 'MEDIUM'
|
94
93
|
? '2px solid var(--input-hover-border-color)'
|
95
94
|
: '1px solid var(--excel-sheet-border)';
|
96
95
|
}
|
97
|
-
if (border.bottom !== '
|
96
|
+
if (border.bottom !== 'THIN') {
|
98
97
|
borderBottom =
|
99
|
-
border.bottom === '
|
98
|
+
border.bottom === 'MEDIUM'
|
100
99
|
? '2px solid var(--input-hover-border-color)'
|
101
100
|
: '1px solid var(--excel-sheet-border)';
|
102
101
|
}
|
103
|
-
if (border.left !== '
|
102
|
+
if (border.left !== 'THIN') {
|
104
103
|
borderLeft =
|
105
|
-
border.left === '
|
104
|
+
border.left === 'MEDIUM'
|
106
105
|
? '2px solid var(--input-hover-border-color)'
|
107
106
|
: '1px solid var(--excel-sheet-border)';
|
108
107
|
}
|
109
108
|
|
110
|
-
// Return the converted styles
|
111
109
|
return {
|
112
110
|
fontSize: `${backendStyle.size}px`,
|
113
111
|
fontFamily: backendStyle.name,
|
@@ -250,7 +250,7 @@ import variableSet from '../../assets/icons/variable_set.svg?react';
|
|
250
250
|
|
251
251
|
import machineEnableIcon from '../../assets/icons/machine_enable_icon.svg?react';
|
252
252
|
import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?react';
|
253
|
-
import suitesIcon from '../../assets/icons/suites_icon.svg?react';
|
253
|
+
import suitesIcon from '../../assets/icons/suites_icon.svg?react';
|
254
254
|
import executionsIcon from '../../assets/icons/executions_icon.svg?react';
|
255
255
|
import ImportIcon from '../../assets/icons/import_icon.svg?react';
|
256
256
|
import Settings from '../../assets/icons/settings.svg?react';
|
@@ -259,6 +259,35 @@ import ExternalUser from '../../assets/icons/external_user.svg?react';
|
|
259
259
|
import SingleUser from '../../assets/icons/single_user.svg?react';
|
260
260
|
import GroupUser from '../../assets/icons/group_user.svg?react';
|
261
261
|
import TestFreshersLogo from '../../assets/icons/test_freshers_logo.svg?react';
|
262
|
+
import Azure from '../../assets/icons/azure.svg?react';
|
263
|
+
import Bitbucket from '../../assets/icons/bitbucket.svg?react';
|
264
|
+
import Github from '../../assets/icons/github.svg?react';
|
265
|
+
import Gitlab from '../../assets/icons/gitlab.svg?react';
|
266
|
+
import Jenkins from '../../assets/icons/jenkins.svg?react';
|
267
|
+
import JiraLogo from '../../assets/icons/jira_logo.svg?react';
|
268
|
+
import Slack from '../../assets/icons/slack.svg?react';
|
269
|
+
import DisableIcon from '../../assets/icons/disable_icon.svg?react';
|
270
|
+
import EnableIcon from '../../assets/icons/enable_icon.svg?react';
|
271
|
+
|
272
|
+
import ClearHistory from '../../assets/icons/clear_history.svg?react';
|
273
|
+
import Csharp from '../../assets/icons/csharp.svg?react';
|
274
|
+
import Cypress from '../../assets/icons/cypress.svg?react';
|
275
|
+
import Java from '../../assets/icons/java.svg?react';
|
276
|
+
import JavaScript from '../../assets/icons/javascript.svg?react';
|
277
|
+
import PlayWright from '../../assets/icons/playwright.svg?react';
|
278
|
+
import Python from '../../assets/icons/python.svg?react';
|
279
|
+
import Code from '../../assets/icons/code.svg?react';
|
280
|
+
import Regenerate from '../../assets/icons/regenerate.svg?react';
|
281
|
+
import Mic from '../../assets/icons/mic.svg?react';
|
282
|
+
import MicActive from '../../assets/icons/mic_filled.svg?react';
|
283
|
+
import RightArrowFilled from '../../assets/icons/right_arrow_filled_icon.svg?react';
|
284
|
+
import CodeColored from '../../assets/icons/code_colored.svg?react';
|
285
|
+
import DesignLink from '../../assets/icons/design_link.svg?react';
|
286
|
+
import FileColored from '../../assets/icons/file_colored.svg?react';
|
287
|
+
import JiraColored from '../../assets/icons/jira_colored.svg?react';
|
288
|
+
import Screenshot from '../../assets/icons/screenshot.svg?react';
|
289
|
+
import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
|
290
|
+
import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
|
262
291
|
|
263
292
|
Components['success'] = ToastSuccessIcon;
|
264
293
|
Components['alert'] = Alert;
|
@@ -508,10 +537,38 @@ Components['executions_icon'] = executionsIcon;
|
|
508
537
|
Components['suites_icon'] = suitesIcon;
|
509
538
|
Components['import_icon'] = ImportIcon;
|
510
539
|
Components['settings'] = Settings;
|
511
|
-
Components['test_freshers_logo']=TestFreshersLogo;
|
512
|
-
Components['unfollow_icon']=UnfollowIcon
|
540
|
+
Components['test_freshers_logo'] = TestFreshersLogo;
|
541
|
+
Components['unfollow_icon'] = UnfollowIcon;
|
513
542
|
Components['external_user'] = ExternalUser;
|
514
543
|
Components['single_user'] = SingleUser;
|
515
544
|
Components['group_user'] = GroupUser;
|
545
|
+
Components['azure'] = Azure;
|
546
|
+
Components['bitbucket'] = Bitbucket;
|
547
|
+
Components['github'] = Github;
|
548
|
+
Components['gitlab'] = Gitlab;
|
549
|
+
Components['jenkins'] = Jenkins;
|
550
|
+
Components['jira_logo'] = JiraLogo;
|
551
|
+
Components['slack'] = Slack;
|
552
|
+
Components['disable_icon'] = DisableIcon;
|
553
|
+
Components['enable_icon'] = EnableIcon;
|
554
|
+
Components['clear_history'] = ClearHistory;
|
555
|
+
Components['csharp'] = Csharp;
|
556
|
+
Components['cypress'] = Cypress;
|
557
|
+
Components['java'] = Java;
|
558
|
+
Components['javascript'] = JavaScript;
|
559
|
+
Components['playwright'] = PlayWright;
|
560
|
+
Components['python'] = Python;
|
561
|
+
Components['code'] = Code;
|
562
|
+
Components['regenerate'] = Regenerate;
|
563
|
+
Components['mic'] = Mic;
|
564
|
+
Components['mic_filled'] = MicActive;
|
565
|
+
Components['right_arrow_filled_icon'] = RightArrowFilled;
|
566
|
+
Components['code_colored'] = CodeColored;
|
567
|
+
Components['design_link'] = DesignLink;
|
568
|
+
Components['file_colored'] = FileColored;
|
569
|
+
Components['jira_colored'] = JiraColored;
|
570
|
+
Components['screenshot'] = Screenshot;
|
571
|
+
Components['delete_filled'] = DeleteFilled;
|
572
|
+
Components['primary_calendar_icon'] = PrimaryCalendarIcon
|
516
573
|
|
517
574
|
export default Components;
|
@@ -1,6 +1,7 @@
|
|
1
1
|
.ff-fixed-header-table {
|
2
2
|
overflow-y: auto;
|
3
3
|
}
|
4
|
+
|
4
5
|
.ff-table-icon {
|
5
6
|
position: absolute;
|
6
7
|
top: 10px;
|
@@ -12,21 +13,25 @@
|
|
12
13
|
|
13
14
|
.ff-table {
|
14
15
|
width: 100%;
|
16
|
+
|
15
17
|
th,
|
16
18
|
td {
|
17
19
|
text-align: left;
|
18
20
|
font-size: 12px;
|
19
21
|
padding: 9px 8px;
|
20
22
|
}
|
23
|
+
|
21
24
|
thead {
|
22
25
|
tr {
|
23
26
|
th {
|
24
27
|
border-bottom: 1px solid var(--slider-table-color);
|
25
28
|
}
|
29
|
+
|
26
30
|
th {
|
27
31
|
.ff-label-checkbox-container {
|
28
32
|
display: flex;
|
29
33
|
align-items: center;
|
34
|
+
|
30
35
|
.ff-table-checkbox {
|
31
36
|
padding-right: 8px;
|
32
37
|
}
|
@@ -34,19 +39,42 @@
|
|
34
39
|
}
|
35
40
|
}
|
36
41
|
}
|
42
|
+
|
37
43
|
tbody {
|
38
44
|
tr {
|
39
45
|
.action-column {
|
40
46
|
opacity: 0;
|
41
47
|
}
|
48
|
+
|
42
49
|
.icon-container {
|
43
|
-
padding-left:
|
50
|
+
padding-left: 8px;
|
44
51
|
opacity: 0;
|
45
52
|
display: flex;
|
46
53
|
justify-content: flex-end;
|
47
54
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
48
55
|
transform: translateX(20px);
|
49
56
|
}
|
57
|
+
|
58
|
+
.ff-data-checkbox-container {
|
59
|
+
display: flex;
|
60
|
+
align-items: center;
|
61
|
+
|
62
|
+
.ff-table-checkbox {
|
63
|
+
padding-right: 8px;
|
64
|
+
}
|
65
|
+
|
66
|
+
.ff-table-drag {
|
67
|
+
opacity: 0;
|
68
|
+
transition: opacity 0.3s ease, transform 0.3s ease;
|
69
|
+
}
|
70
|
+
|
71
|
+
.ff-table-drag-icon {
|
72
|
+
opacity: 0;
|
73
|
+
transition: opacity 0.3s ease, transform 0.3s ease;
|
74
|
+
cursor: grab;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
50
78
|
&:hover {
|
51
79
|
background-color: var(--hover-color);
|
52
80
|
|
@@ -54,7 +82,13 @@
|
|
54
82
|
opacity: 1;
|
55
83
|
transform: translateX(0);
|
56
84
|
}
|
85
|
+
|
86
|
+
.ff-table-drag,
|
87
|
+
.ff-table-drag-icon {
|
88
|
+
opacity: 1;
|
89
|
+
}
|
57
90
|
}
|
91
|
+
|
58
92
|
td {
|
59
93
|
position: relative;
|
60
94
|
color: var(--table-column-text-color);
|
@@ -63,36 +97,34 @@
|
|
63
97
|
cursor: pointer;
|
64
98
|
}
|
65
99
|
}
|
66
|
-
td {
|
67
|
-
.ff-data-checkbox-container {
|
68
|
-
display: flex;
|
69
|
-
align-items: center;
|
70
|
-
.ff-table-checkbox {
|
71
|
-
padding-right: 8px;
|
72
|
-
}
|
73
|
-
}
|
74
|
-
}
|
75
100
|
}
|
76
101
|
}
|
102
|
+
|
77
103
|
.primary-bg {
|
78
104
|
background-color: var(--brand-color);
|
79
105
|
}
|
106
|
+
|
80
107
|
.secondary-bg {
|
81
108
|
background-color: var(--slider-table-color);
|
82
109
|
}
|
110
|
+
|
83
111
|
.tertiary-bg {
|
84
112
|
background-color: var(--custom-table-header-bg-color);
|
85
113
|
}
|
114
|
+
|
86
115
|
.default-bg {
|
87
116
|
background-color: transparent;
|
88
117
|
}
|
118
|
+
|
89
119
|
.default-color {
|
90
120
|
color: var(--table-header-text-color);
|
91
121
|
}
|
122
|
+
|
92
123
|
.primary-color {
|
93
124
|
color: var(--brand-color);
|
94
125
|
}
|
95
126
|
}
|
127
|
+
|
96
128
|
.border-borderRadius {
|
97
129
|
border: 1px solid var(--slider-table-color);
|
98
130
|
border-radius: 5px;
|
@@ -105,6 +137,7 @@
|
|
105
137
|
z-index: 99;
|
106
138
|
background-color: Var(--file-details-bg);
|
107
139
|
}
|
140
|
+
|
108
141
|
.no-data-content {
|
109
142
|
display: flex;
|
110
143
|
flex-direction: column;
|
@@ -115,4 +148,4 @@
|
|
115
148
|
tbody tr.disabled-row {
|
116
149
|
opacity: 0.5;
|
117
150
|
cursor: not-allowed;
|
118
|
-
}
|
151
|
+
}
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
2
2
|
import { useEffect, useState } from 'react';
|
3
3
|
import { StoryObj, Meta } from '@storybook/react';
|
4
4
|
import Table from './Table';
|
5
|
-
|
5
|
+
import { ffid } from '../../utils/ffID/ffid';
|
6
|
+
import { rearrangeDragItem } from '../../utils/swapArrayItem/dragAndDropUtils';
|
6
7
|
const meta: Meta<typeof Table> = {
|
7
8
|
title: 'Components/Table',
|
8
9
|
component: Table,
|
@@ -20,6 +21,7 @@ const defaultArgs = {
|
|
20
21
|
const sampleData = [
|
21
22
|
{
|
22
23
|
project: {
|
24
|
+
id: ffid(),
|
23
25
|
modifiedByUname: 'user4',
|
24
26
|
modifiedOn: '18-03-2024 10:47',
|
25
27
|
name: 'Test1',
|
@@ -31,6 +33,7 @@ const sampleData = [
|
|
31
33
|
},
|
32
34
|
{
|
33
35
|
project: {
|
36
|
+
id: ffid(),
|
34
37
|
modifiedByUname: 'user3',
|
35
38
|
modifiedOn: '13-03-2024 15:15',
|
36
39
|
name: 'Test2',
|
@@ -42,6 +45,7 @@ const sampleData = [
|
|
42
45
|
},
|
43
46
|
{
|
44
47
|
project: {
|
48
|
+
id: ffid(),
|
45
49
|
modifiedByUname: 'user2',
|
46
50
|
modifiedOn: '13-03-2024 15:30',
|
47
51
|
name: 'Test3',
|
@@ -53,6 +57,7 @@ const sampleData = [
|
|
53
57
|
},
|
54
58
|
{
|
55
59
|
project: {
|
60
|
+
id: ffid(),
|
56
61
|
modifiedByUname: 'user1',
|
57
62
|
modifiedOn: '18-03-2024 15:36',
|
58
63
|
name: 'Test4',
|
@@ -64,6 +69,7 @@ const sampleData = [
|
|
64
69
|
},
|
65
70
|
{
|
66
71
|
project: {
|
72
|
+
id: ffid(),
|
67
73
|
modifiedByUname: 'user4',
|
68
74
|
modifiedOn: '18-03-2024 10:47',
|
69
75
|
name: 'Test1',
|
@@ -75,6 +81,7 @@ const sampleData = [
|
|
75
81
|
},
|
76
82
|
{
|
77
83
|
project: {
|
84
|
+
id: ffid(),
|
78
85
|
modifiedByUname: 'user3',
|
79
86
|
modifiedOn: '13-03-2024 15:15',
|
80
87
|
name: 'Test2',
|
@@ -86,6 +93,7 @@ const sampleData = [
|
|
86
93
|
},
|
87
94
|
{
|
88
95
|
project: {
|
96
|
+
id: ffid(),
|
89
97
|
modifiedByUname: 'user2',
|
90
98
|
modifiedOn: '13-03-2024 15:30',
|
91
99
|
name: 'Test3',
|
@@ -97,6 +105,7 @@ const sampleData = [
|
|
97
105
|
},
|
98
106
|
{
|
99
107
|
project: {
|
108
|
+
id: ffid(),
|
100
109
|
modifiedByUname: 'user1',
|
101
110
|
modifiedOn: '18-03-2024 15:36',
|
102
111
|
name: 'Test4',
|
@@ -108,6 +117,7 @@ const sampleData = [
|
|
108
117
|
},
|
109
118
|
{
|
110
119
|
project: {
|
120
|
+
id: ffid(),
|
111
121
|
modifiedByUname: 'user4',
|
112
122
|
modifiedOn: '18-03-2024 10:47',
|
113
123
|
name: 'Test1',
|
@@ -119,6 +129,7 @@ const sampleData = [
|
|
119
129
|
},
|
120
130
|
{
|
121
131
|
project: {
|
132
|
+
id: ffid(),
|
122
133
|
modifiedByUname: 'user3',
|
123
134
|
modifiedOn: '13-03-2024 15:15',
|
124
135
|
name: 'Test2',
|
@@ -130,6 +141,7 @@ const sampleData = [
|
|
130
141
|
},
|
131
142
|
{
|
132
143
|
project: {
|
144
|
+
id: ffid(),
|
133
145
|
modifiedByUname: 'user2',
|
134
146
|
modifiedOn: '13-03-2024 15:30',
|
135
147
|
name: 'Test3',
|
@@ -141,6 +153,7 @@ const sampleData = [
|
|
141
153
|
},
|
142
154
|
{
|
143
155
|
project: {
|
156
|
+
id: ffid(),
|
144
157
|
modifiedByUname: 'user1',
|
145
158
|
modifiedOn: '18-03-2024 15:36',
|
146
159
|
name: 'Test4',
|
@@ -247,6 +260,7 @@ export const PageTable: Story = {
|
|
247
260
|
);
|
248
261
|
},
|
249
262
|
};
|
263
|
+
|
250
264
|
export const PrimaryHeader: Story = {
|
251
265
|
args: {
|
252
266
|
...defaultArgs,
|
@@ -370,4 +384,49 @@ export const TableWithNoData: Story = {
|
|
370
384
|
);
|
371
385
|
},
|
372
386
|
};
|
387
|
+
|
388
|
+
export const DragAndDropTable: Story = {
|
389
|
+
args: {
|
390
|
+
...defaultArgs,
|
391
|
+
data: sampleData.map((x) => x.project),
|
392
|
+
|
393
|
+
columns: columnsData,
|
394
|
+
tableDataTextColor: 'var(--brand-color)',
|
395
|
+
},
|
396
|
+
render: () => {
|
397
|
+
// important prerequisite tableData should have unique IDs
|
398
|
+
const [tableData, setTableData] = useState(
|
399
|
+
sampleData.map((data) => data.project)
|
400
|
+
);
|
401
|
+
useEffect(() => {
|
402
|
+
let sampleArray: any = [];
|
403
|
+
sampleData.forEach((data) => {
|
404
|
+
sampleArray.push(data.project);
|
405
|
+
});
|
406
|
+
setTableData(sampleArray);
|
407
|
+
}, []);
|
408
|
+
|
409
|
+
const handleIconClick = () => {};
|
410
|
+
|
411
|
+
const onDragEnd = (oldIndex: number, newIndex: number) => {
|
412
|
+
const updatedData = rearrangeDragItem(tableData, oldIndex, newIndex);
|
413
|
+
setTableData(updatedData);
|
414
|
+
};
|
415
|
+
return (
|
416
|
+
<>
|
417
|
+
<Table
|
418
|
+
draggable
|
419
|
+
onDragEnd={onDragEnd}
|
420
|
+
{...defaultArgs}
|
421
|
+
data={tableData}
|
422
|
+
columns={columnsData}
|
423
|
+
headerType="secondary"
|
424
|
+
noDataContent="No data found"
|
425
|
+
headerIconName={'expand_icon'}
|
426
|
+
headerIconOnClick={handleIconClick}
|
427
|
+
/>
|
428
|
+
</>
|
429
|
+
);
|
430
|
+
},
|
431
|
+
};
|
373
432
|
export default meta;
|