pixel-react 1.9.2 → 1.9.4
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/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 -222
- package/lib/components/TableTree/types.d.ts +0 -6
- package/lib/index.d.ts +15 -2
- package/lib/index.esm.js +21314 -21374
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +21319 -21378
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
- package/package.json +1 -1
- 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/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/github.svg +9 -0
- package/src/assets/icons/gitlab.svg +9 -0
- package/src/assets/icons/jenkins.svg +9 -0
- package/src/assets/icons/jira_logo.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/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/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/Icon/iconList.ts +16 -0
- 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 +17 -19
- package/src/components/TableTree/Components/TableCell.tsx +4 -7
- package/src/components/TableTree/Components/TableRow.tsx +4 -7
- package/src/components/TableTree/TableTree.stories.tsx +10 -10
- package/src/components/TableTree/TableTree.tsx +1 -1
- package/src/components/TableTree/data.ts +53 -331
- 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/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"
|
@@ -259,6 +259,13 @@ 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';
|
262
269
|
import DisableIcon from '../../assets/icons/disable_icon.svg?react';
|
263
270
|
import EnableIcon from '../../assets/icons/enable_icon.svg?react';
|
264
271
|
|
@@ -280,6 +287,7 @@ import FileColored from '../../assets/icons/file_colored.svg?react';
|
|
280
287
|
import JiraColored from '../../assets/icons/jira_colored.svg?react';
|
281
288
|
import Screenshot from '../../assets/icons/screenshot.svg?react';
|
282
289
|
import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
|
290
|
+
import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
|
283
291
|
|
284
292
|
Components['success'] = ToastSuccessIcon;
|
285
293
|
Components['alert'] = Alert;
|
@@ -534,6 +542,13 @@ Components['unfollow_icon'] = UnfollowIcon;
|
|
534
542
|
Components['external_user'] = ExternalUser;
|
535
543
|
Components['single_user'] = SingleUser;
|
536
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;
|
537
552
|
Components['disable_icon'] = DisableIcon;
|
538
553
|
Components['enable_icon'] = EnableIcon;
|
539
554
|
Components['clear_history'] = ClearHistory;
|
@@ -554,5 +569,6 @@ Components['file_colored'] = FileColored;
|
|
554
569
|
Components['jira_colored'] = JiraColored;
|
555
570
|
Components['screenshot'] = Screenshot;
|
556
571
|
Components['delete_filled'] = DeleteFilled;
|
572
|
+
Components['primary_calendar_icon'] = PrimaryCalendarIcon
|
557
573
|
|
558
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;
|