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
@@ -1,4 +1,5 @@
|
|
1
1
|
import React, { useEffect, useState, useRef } from 'react';
|
2
|
+
import ReactDOM from 'react-dom';
|
2
3
|
import { DayPicker } from 'react-day-picker';
|
3
4
|
import { formatInTimeZone } from 'date-fns-tz';
|
4
5
|
import TimePicker from './Timepicker';
|
@@ -38,6 +39,10 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
|
|
38
39
|
new Date()
|
39
40
|
);
|
40
41
|
const [view, setView] = useState<string>('days');
|
42
|
+
const [positionStyles, setPositionStyles] = useState<{
|
43
|
+
top: number | null;
|
44
|
+
left: number | null;
|
45
|
+
}>({ top: null, left: null });
|
41
46
|
|
42
47
|
const selectedDateRef = useRef<Date | undefined>(undefined);
|
43
48
|
const [startYear, setStartYear] = useState(() => {
|
@@ -83,33 +88,38 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
|
|
83
88
|
|
84
89
|
useEffect(() => {
|
85
90
|
const adjustPosition = () => {
|
86
|
-
if (containerRef.current
|
87
|
-
const
|
88
|
-
const
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
91
|
+
if (containerRef.current) {
|
92
|
+
const containerRect = containerRef.current.getBoundingClientRect();
|
93
|
+
const spacing = 8;
|
94
|
+
|
95
|
+
let top = containerRect.bottom + spacing;
|
96
|
+
let left = containerRect.left;
|
97
|
+
|
98
|
+
if (pickerRef.current) {
|
99
|
+
const pickerHeight = pickerRef.current.offsetHeight;
|
100
|
+
const pickerWidth = pickerRef.current.offsetWidth;
|
101
|
+
|
102
|
+
if (window.innerHeight - containerRect.bottom < pickerHeight) {
|
103
|
+
top = containerRect.top - pickerHeight - spacing;
|
104
|
+
}
|
105
|
+
if (window.innerWidth - containerRect.left < pickerWidth) {
|
106
|
+
left = containerRect.right - pickerWidth;
|
107
|
+
}
|
97
108
|
}
|
98
109
|
|
99
|
-
|
100
|
-
const left = relativeRect.left + window.scrollX;
|
101
|
-
|
102
|
-
pickerRef.current.style.top = `${top}px`;
|
103
|
-
pickerRef.current.style.left = `${left}px`;
|
110
|
+
setPositionStyles({ top, left });
|
104
111
|
}
|
105
112
|
};
|
106
113
|
|
107
|
-
|
108
|
-
|
114
|
+
if (isPickerOpen) {
|
115
|
+
adjustPosition();
|
116
|
+
setTimeout(() => {}, 200);
|
117
|
+
window.addEventListener('resize', () => {});
|
118
|
+
}
|
109
119
|
|
110
|
-
|
111
|
-
|
112
|
-
|
120
|
+
return () => {
|
121
|
+
window.removeEventListener('resize', adjustPosition);
|
122
|
+
};
|
113
123
|
}, [isPickerOpen]);
|
114
124
|
|
115
125
|
const calendarStyle = {
|
@@ -151,7 +161,6 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
|
|
151
161
|
};
|
152
162
|
|
153
163
|
const handleSave = () => {
|
154
|
-
console.log('selectedDate1', selectedDateRef.current);
|
155
164
|
onChange(selectedDateRef.current);
|
156
165
|
resetAndCloseDatePicker();
|
157
166
|
};
|
@@ -316,7 +325,15 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
|
|
316
325
|
'ff-custom-month--disabled': isDisabled,
|
317
326
|
})}
|
318
327
|
>
|
319
|
-
<Typography
|
328
|
+
<Typography
|
329
|
+
color={
|
330
|
+
index === selectedMonth?.getMonth()
|
331
|
+
? 'var(--primary-button-text-color)'
|
332
|
+
: undefined
|
333
|
+
}
|
334
|
+
>
|
335
|
+
{month}
|
336
|
+
</Typography>
|
320
337
|
</div>
|
321
338
|
);
|
322
339
|
})}
|
@@ -370,7 +387,15 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
|
|
370
387
|
'ff-custom-year--disabled': isDisabled,
|
371
388
|
})}
|
372
389
|
>
|
373
|
-
<Typography
|
390
|
+
<Typography
|
391
|
+
color={
|
392
|
+
year === selectedMonth?.getFullYear()
|
393
|
+
? 'var(--primary-button-text-color)'
|
394
|
+
: undefined
|
395
|
+
}
|
396
|
+
>
|
397
|
+
{year}
|
398
|
+
</Typography>
|
374
399
|
</div>
|
375
400
|
);
|
376
401
|
})}
|
@@ -427,82 +452,89 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
|
|
427
452
|
)}
|
428
453
|
</div>
|
429
454
|
|
430
|
-
{isPickerOpen &&
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
}
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
{
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
}
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
maxTime={maxTime}
|
483
|
-
onErrorChange={setTimeError}
|
484
|
-
/>
|
485
|
-
)}
|
486
|
-
</div>
|
487
|
-
{!dateOnly && (
|
488
|
-
<div className="ff-date-picker-controls">
|
489
|
-
<Button
|
490
|
-
className="ff-date-picker-button"
|
491
|
-
variant="secondary"
|
492
|
-
onClick={handleCancel}
|
493
|
-
label="Cancel"
|
494
|
-
/>
|
495
|
-
<Button
|
496
|
-
className="ff-date-picker-button"
|
497
|
-
variant="primary"
|
498
|
-
onClick={handleSave}
|
499
|
-
label="Save"
|
500
|
-
disabled={timeError}
|
455
|
+
{isPickerOpen &&
|
456
|
+
!!top &&
|
457
|
+
ReactDOM.createPortal(
|
458
|
+
<div
|
459
|
+
className="ff-date-picker-container"
|
460
|
+
ref={pickerRef}
|
461
|
+
style={{
|
462
|
+
zIndex,
|
463
|
+
top: `${positionStyles.top}px`,
|
464
|
+
left: `${positionStyles.left}px`,
|
465
|
+
}}
|
466
|
+
>
|
467
|
+
<div className="ff-calendar-container">
|
468
|
+
<DayPicker
|
469
|
+
style={calendarStyle}
|
470
|
+
className="ff-calendar"
|
471
|
+
mode="single"
|
472
|
+
selected={selectedDate}
|
473
|
+
onSelect={handleDaySelect}
|
474
|
+
month={selectedMonth}
|
475
|
+
onMonthChange={(month) => {
|
476
|
+
if (view === 'days') {
|
477
|
+
setSelectedMonth(month);
|
478
|
+
}
|
479
|
+
}}
|
480
|
+
onNextClick={handleNextClick}
|
481
|
+
onPrevClick={handlePrevClick}
|
482
|
+
disableNavigation={view === 'months'}
|
483
|
+
disabled={[
|
484
|
+
{
|
485
|
+
before: new Date(minDate ? minDate : ''),
|
486
|
+
after: new Date(maxDate ? maxDate : ''),
|
487
|
+
},
|
488
|
+
]}
|
489
|
+
timeZone={timezone}
|
490
|
+
components={{
|
491
|
+
CaptionLabel: (props) => <CustomCaption {...props} />,
|
492
|
+
PreviousMonthButton: (props) => (
|
493
|
+
<CustomPrevButton {...props} />
|
494
|
+
),
|
495
|
+
NextMonthButton: (props) => <CustomNextButton {...props} />,
|
496
|
+
...(view === 'months'
|
497
|
+
? {
|
498
|
+
MonthGrid: () => <CustomMonthGrid />,
|
499
|
+
}
|
500
|
+
: {}),
|
501
|
+
...(view === 'years'
|
502
|
+
? {
|
503
|
+
MonthGrid: () => <CustomYearGrid />,
|
504
|
+
}
|
505
|
+
: {}),
|
506
|
+
}}
|
501
507
|
/>
|
508
|
+
{!dateOnly && (
|
509
|
+
<TimePicker
|
510
|
+
value={timeValue}
|
511
|
+
onChange={handleTimeChange}
|
512
|
+
minTime={minTime}
|
513
|
+
maxTime={maxTime}
|
514
|
+
onErrorChange={setTimeError}
|
515
|
+
/>
|
516
|
+
)}
|
502
517
|
</div>
|
503
|
-
|
504
|
-
|
505
|
-
|
518
|
+
{!dateOnly && (
|
519
|
+
<div className="ff-date-picker-controls">
|
520
|
+
<Button
|
521
|
+
className="ff-date-picker-button"
|
522
|
+
variant="secondary"
|
523
|
+
onClick={handleCancel}
|
524
|
+
label="Cancel"
|
525
|
+
/>
|
526
|
+
<Button
|
527
|
+
className="ff-date-picker-button"
|
528
|
+
variant="primary"
|
529
|
+
onClick={handleSave}
|
530
|
+
label="Save"
|
531
|
+
disabled={timeError}
|
532
|
+
/>
|
533
|
+
</div>
|
534
|
+
)}
|
535
|
+
</div>,
|
536
|
+
document.body
|
537
|
+
)}
|
506
538
|
</div>
|
507
539
|
);
|
508
540
|
};
|
@@ -18,7 +18,6 @@ const TimePicker: React.FC<TimePickerProps> = ({
|
|
18
18
|
const [period, setPeriod] = useState<string | undefined>('AM');
|
19
19
|
const [timeFieldError, setTimeFieldError] = useState<boolean>(false);
|
20
20
|
const [isPeriodDropdownOpen, setIsPeriodDropdownOpen] = useState(false);
|
21
|
-
const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
|
22
21
|
const inputRef = useRef<HTMLInputElement>(null);
|
23
22
|
const periodRef = useRef<HTMLDivElement>(null);
|
24
23
|
|
@@ -173,10 +172,6 @@ const TimePicker: React.FC<TimePickerProps> = ({
|
|
173
172
|
|
174
173
|
const togglePeriodDropdown = () => {
|
175
174
|
setIsPeriodDropdownOpen((prev) => !prev);
|
176
|
-
if (periodRef.current) {
|
177
|
-
const { top, left, height } = periodRef.current.getBoundingClientRect();
|
178
|
-
setDropdownPosition({ top: top + height, left: left });
|
179
|
-
}
|
180
175
|
};
|
181
176
|
|
182
177
|
const handlePeriodChange = (option: string) => {
|
@@ -322,14 +317,7 @@ const TimePicker: React.FC<TimePickerProps> = ({
|
|
322
317
|
</div>
|
323
318
|
|
324
319
|
{isPeriodDropdownOpen && (
|
325
|
-
<ul
|
326
|
-
className="ff-time-period-options"
|
327
|
-
style={{
|
328
|
-
top: `${dropdownPosition.top}px`,
|
329
|
-
left: `${dropdownPosition.left}px`,
|
330
|
-
}}
|
331
|
-
role="listbox"
|
332
|
-
>
|
320
|
+
<ul className="ff-time-period-options" role="listbox">
|
333
321
|
<Typography
|
334
322
|
as="li"
|
335
323
|
className="ff-option-item"
|
@@ -17,9 +17,7 @@ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
|
|
17
17
|
|
18
18
|
interface ExcelFileProps {
|
19
19
|
/** The Excel data containing sheets and their content */
|
20
|
-
excelData:
|
21
|
-
sheets: WorkSheet[];
|
22
|
-
};
|
20
|
+
excelData: WorkSheet[];
|
23
21
|
|
24
22
|
/** Optional: Provide context menu options for actions like right-click */
|
25
23
|
contextOption?: {
|
@@ -130,49 +128,57 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
130
128
|
|
131
129
|
useEffect(() => {
|
132
130
|
const payload = excelData;
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
const
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
131
|
+
if (payload) {
|
132
|
+
const sheetNames = payload.map((e) => e.sheetName);
|
133
|
+
setSheetNames(sheetNames);
|
134
|
+
|
135
|
+
if (!checkEmpty(sheetNames.length)) {
|
136
|
+
pageRef.current = sheetNames[0] ? sheetNames[0] : ''; //Ternary is required, must use ''
|
137
|
+
setSelectedSheet({
|
138
|
+
name: sheetNames[0] ? sheetNames[0] : '', //Ternary is required, must use ''
|
139
|
+
index: 0,
|
140
|
+
});
|
141
|
+
}
|
142
|
+
const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
|
143
|
+
payload.forEach((sheet) => {
|
144
|
+
const sheetName = sheet.sheetName;
|
145
|
+
const json = sheet.data;
|
146
|
+
const maxRows = Math.max(26, json.length + 2);
|
147
|
+
const maxCols = Math.max(
|
148
|
+
26,
|
149
|
+
Math.max(...json.map((row) => row.length)) + 2
|
150
|
+
);
|
151
|
+
|
152
|
+
let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
|
153
|
+
{ length: maxRows },
|
154
|
+
() => Array.from({ length: maxCols }, () => EmptyRow)
|
155
|
+
);
|
156
|
+
|
157
|
+
json.forEach((row, rowIndex) => {
|
158
|
+
row.forEach((cell, colIndex) => {
|
159
|
+
if (rowIndex < maxRows && colIndex < maxCols) {
|
160
|
+
if (!spreadsheetData[rowIndex]) {
|
161
|
+
spreadsheetData[rowIndex] = [];
|
162
|
+
}
|
163
|
+
spreadsheetData[rowIndex][colIndex] = {
|
164
|
+
value: checkVal(cell.value),
|
165
|
+
style: convertStyleToFrontend(cell?.styles), //TODO remove 's' for Style
|
166
|
+
type: true,
|
167
|
+
};
|
158
168
|
}
|
159
|
-
|
160
|
-
value: checkVal(cell.value),
|
161
|
-
style: convertStyleToFrontend(cell?.style),
|
162
|
-
type: true,
|
163
|
-
};
|
164
|
-
}
|
169
|
+
});
|
165
170
|
});
|
166
|
-
});
|
167
171
|
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
172
|
+
newWorksheetsData[sheetName] = spreadsheetData;
|
173
|
+
});
|
174
|
+
setWorksheetsData(newWorksheetsData);
|
175
|
+
const firstSheetName = Object.keys(newWorksheetsData)[0];
|
176
|
+
if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
|
177
|
+
setSelectedSheetData(newWorksheetsData[firstSheetName]);
|
178
|
+
}
|
174
179
|
}
|
175
|
-
}, []);
|
180
|
+
}, [excelData]);
|
181
|
+
|
176
182
|
const handleSave = React.useCallback(
|
177
183
|
(event: KeyboardEvent) => {
|
178
184
|
if (event.ctrlKey && event.key === 's') {
|
@@ -27,111 +27,113 @@ type Story = StoryObj<typeof ExcelFile>;
|
|
27
27
|
|
28
28
|
export const Default: Story = {
|
29
29
|
args: {
|
30
|
-
excelData:
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
},
|
30
|
+
excelData: [
|
31
|
+
{
|
32
|
+
sheetName: 'fireflink',
|
33
|
+
data: [
|
34
|
+
[
|
35
|
+
{
|
36
|
+
value: 'Test Sample Data 1',
|
37
|
+
styles: {
|
38
|
+
//TODO remove 's' for Style
|
39
|
+
name: 'Arial',
|
40
|
+
size: 11,
|
41
|
+
bold: true,
|
42
|
+
italic: false,
|
43
|
+
color: 'ffffff', // Sample data from backend without #
|
44
|
+
backgroundColor: '434db8', // Sample data from backend without #
|
45
|
+
borderColor: 'F2F2F2', // Sample data from backend without #
|
46
|
+
border: {
|
47
|
+
top: 'NONE',
|
48
|
+
bottom: 'NONE',
|
49
|
+
left: 'NONE',
|
50
|
+
right: 'NONE',
|
51
|
+
},
|
52
|
+
alignment: {
|
53
|
+
horizontal: 'GENERAL',
|
54
|
+
vertical: 'BOTTOM',
|
55
|
+
wrapText: false,
|
57
56
|
},
|
58
57
|
},
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
58
|
+
},
|
59
|
+
{
|
60
|
+
value: 'Test Data 2',
|
61
|
+
styles: {
|
62
|
+
//TODO remove 's' for Style
|
63
|
+
name: 'Arial',
|
64
|
+
size: 12,
|
65
|
+
bold: true,
|
66
|
+
italic: true,
|
67
|
+
color: 'EB5B00', // Sample data from backend without #
|
68
|
+
backgroundColor: '88C273', // Sample data from backend without #
|
69
|
+
borderColor: 'F2F2F2', // Sample data from backend without #
|
70
|
+
border: {
|
71
|
+
top: 'NONE',
|
72
|
+
bottom: 'NONE',
|
73
|
+
left: 'NONE',
|
74
|
+
right: 'NONE',
|
75
|
+
},
|
76
|
+
alignment: {
|
77
|
+
horizontal: 'GENERAL',
|
78
|
+
vertical: 'BOTTOM',
|
79
|
+
wrapText: false,
|
80
80
|
},
|
81
81
|
},
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
82
|
+
},
|
83
|
+
],
|
84
|
+
[
|
85
|
+
{
|
86
|
+
value: 'Test Data 3',
|
87
|
+
styles: {
|
88
|
+
//TODO remove 's' for Style
|
89
|
+
name: 'Arial',
|
90
|
+
size: 11,
|
91
|
+
bold: false,
|
92
|
+
italic: false,
|
93
|
+
color: '000000', // Sample data from backend without #
|
94
|
+
backgroundColor: 'EB5B00', // Sample data from backend without #
|
95
|
+
borderColor: 'F2F2F2', // Sample data from backend without #
|
96
|
+
border: {
|
97
|
+
top: 'NONE',
|
98
|
+
bottom: 'NONE',
|
99
|
+
left: 'NONE',
|
100
|
+
right: 'NONE',
|
101
|
+
},
|
102
|
+
alignment: {
|
103
|
+
horizontal: 'GENERAL',
|
104
|
+
vertical: 'BOTTOM',
|
105
|
+
wrapText: false,
|
105
106
|
},
|
106
107
|
},
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
108
|
+
},
|
109
|
+
{
|
110
|
+
value: 'Test Sample Data 4',
|
111
|
+
styles: {
|
112
|
+
//TODO remove 's' for Style
|
113
|
+
name: 'Arial',
|
114
|
+
size: 11,
|
115
|
+
bold: false,
|
116
|
+
italic: false,
|
117
|
+
color: '3D0301', // Sample data from backend without #
|
118
|
+
backgroundColor: 'C6E7FF', // Sample data from backend without #
|
119
|
+
borderColor: 'F2F2F2', // Sample data from backend without #
|
120
|
+
border: {
|
121
|
+
top: 'THIN',
|
122
|
+
bottom: 'THIN',
|
123
|
+
left: 'THIN',
|
124
|
+
right: 'THIN',
|
125
|
+
},
|
126
|
+
alignment: {
|
127
|
+
horizontal: 'GENERAL',
|
128
|
+
vertical: 'BOTTOM',
|
129
|
+
wrapText: false,
|
128
130
|
},
|
129
131
|
},
|
130
|
-
|
132
|
+
},
|
131
133
|
],
|
132
|
-
|
133
|
-
|
134
|
-
|
134
|
+
],
|
135
|
+
},
|
136
|
+
],
|
135
137
|
toolbar: 'show',
|
136
138
|
contextOption: {
|
137
139
|
open: true,
|