pixel-react 1.6.8 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/index.d.ts +1 -0
- package/lib/components/ConditionalDropdown/types.d.ts +145 -0
- package/lib/components/CreateVariable/types.d.ts +2 -2
- package/lib/components/DownloadClient/type.d.ts +19 -27
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- package/lib/components/LabelEditTextField/types.d.ts +1 -0
- package/lib/components/MachineInputField/types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -1
- package/lib/components/MiniModal/types.d.ts +1 -0
- package/lib/components/Modal/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.d.ts +2 -2
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/sampleData.d.ts +104 -0
- package/lib/components/NLPInput/types.d.ts +80 -0
- package/lib/components/PopUpModal/types.d.ts +2 -1
- package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
- package/lib/components/ProgressBar/index.d.ts +1 -0
- package/lib/components/ProgressBar/types.d.ts +12 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/hooks/useIntersectionObserver.d.ts +9 -0
- package/lib/index.d.ts +183 -65
- package/lib/index.esm.js +1281 -674
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1282 -674
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
- package/lib/utils/getSequentialPayload/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +20 -2
- package/src/assets/Themes/DarkTheme.scss +19 -2
- package/src/assets/icons/add_file.svg +4 -4
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/authorization.svg +4 -4
- package/src/assets/icons/depends_on_script.svg +7 -7
- package/src/assets/icons/email_group.svg +3 -3
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/import_icon.svg +4 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/labels.svg +8 -8
- package/src/assets/icons/parameters.svg +3 -3
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/pre_post_condition.svg +8 -8
- package/src/assets/icons/program_element.svg +8 -8
- package/src/assets/icons/test_data.svg +5 -5
- package/src/assets/icons/test_data_set.svg +7 -7
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/icons/variable_set.svg +5 -5
- package/src/assets/styles/_colors.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
- package/src/components/Charts/LineChart/LineChart.tsx +10 -1
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Checkbox/Checkbox.scss +3 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
- package/src/components/Checkbox/Checkbox.tsx +3 -4
- package/src/components/Chip/Chip.scss +15 -5
- package/src/components/Chip/Chip.stories.tsx +10 -1
- package/src/components/Chip/Chip.tsx +5 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/ConditionalDropdown/types.ts +160 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
- package/src/components/CreateVariable/types.ts +2 -2
- package/src/components/DownloadClient/DownloadClient.scss +51 -64
- package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
- package/src/components/DownloadClient/DownloadClient.tsx +60 -51
- package/src/components/DownloadClient/type.ts +32 -40
- package/src/components/EditTextField/EditTextField.scss +1 -1
- package/src/components/EditTextField/EditTextField.tsx +14 -20
- package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
- package/src/components/Excel/ExcelFile.stories.tsx +4 -4
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
- package/src/components/Excel/dataConversion.ts +43 -20
- package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
- package/src/components/FileDropzone/FileDropzone.tsx +24 -4
- package/src/components/Form/Forms.tsx +0 -2
- package/src/components/Icon/iconList.ts +12 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
- package/src/components/LabelEditTextField/types.ts +1 -0
- package/src/components/MachineInputField/MachineInputField.scss +1 -5
- package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
- package/src/components/MachineInputField/MachineInputField.tsx +14 -14
- package/src/components/MachineInputField/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.scss +7 -7
- package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
- package/src/components/MenuOption/MenuOption.tsx +9 -13
- package/src/components/MenuOption/types.ts +3 -2
- package/src/components/MiniModal/MiniModal.scss +0 -1
- package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
- package/src/components/MiniModal/MiniModal.tsx +3 -1
- package/src/components/MiniModal/types.ts +1 -0
- package/src/components/Modal/types.ts +1 -1
- package/src/components/MultiSelect/Dropdown.scss +3 -4
- package/src/components/MultiSelect/Dropdown.tsx +34 -7
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.tsx +3 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/NLPInput/NLPInput.scss +77 -21
- package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
- package/src/components/NLPInput/NlpInput.tsx +95 -59
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
- package/src/components/NLPInput/sampleData.ts +162 -0
- package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
- package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
- package/src/components/PopUpModal/PopUpModal.tsx +5 -4
- package/src/components/PopUpModal/types.ts +2 -1
- package/src/components/ProgressBar/ProgressBar.scss +46 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
- package/src/components/ProgressBar/ProgressBar.tsx +61 -0
- package/src/components/ProgressBar/index.ts +1 -0
- package/src/components/ProgressBar/types.ts +12 -0
- package/src/components/Search/Search.tsx +9 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/types.ts +7 -5
- package/src/components/Table/Table.scss +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -1
- package/src/components/TableTree/TableTree.stories.tsx +4 -7
- package/src/components/TableTree/TableTree.tsx +27 -181
- package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
- package/src/components/TableTree/data.ts +45 -0
- package/src/components/TableTree/types.ts +4 -4
- package/src/hooks/useIntersectionObserver.tsx +56 -0
- package/src/index.ts +4 -3
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
- package/src/components/AddVariables/AddVariables.tsx +0 -113
- package/src/components/AddVariables/index.ts +0 -1
- package/src/components/AddVariables/types.ts +0 -36
@@ -12,7 +12,7 @@ import {
|
|
12
12
|
|
13
13
|
export function applyBoldToCells(
|
14
14
|
currentData: Matrix.Matrix<Types.CellBase<any>>,
|
15
|
-
selectedRange: PointRange
|
15
|
+
selectedRange: PointRange
|
16
16
|
): Matrix.Matrix<Types.CellBase<any>> {
|
17
17
|
if (!selectedRange) {
|
18
18
|
return currentData;
|
@@ -217,10 +217,10 @@ export function applyBorderToCells(
|
|
217
217
|
case 'border-none':
|
218
218
|
updatedCell.style = {
|
219
219
|
...currentCell.style,
|
220
|
-
borderRight: `1px solid var(--
|
221
|
-
borderLeft: `1px solid var(--
|
222
|
-
borderTop: `1px solid var(--
|
223
|
-
borderBottom: `1px solid var(--
|
220
|
+
borderRight: `1px solid var(--excel-sheet-border)`,
|
221
|
+
borderLeft: `1px solid var(--excel-sheet-border)`,
|
222
|
+
borderTop: `1px solid var(--excel-sheet-border)`,
|
223
|
+
borderBottom: `1px solid var(--excel-sheet-border)`,
|
224
224
|
};
|
225
225
|
break;
|
226
226
|
case 'border-right':
|
@@ -333,8 +333,7 @@ export function applyUnderlineToCells(
|
|
333
333
|
...currentCell,
|
334
334
|
style: {
|
335
335
|
...currentCell.style,
|
336
|
-
textDecoration: 'none',
|
337
|
-
textDecorationStyle: 'solid' as TextDecorationStyle,
|
336
|
+
textDecoration: 'none solid',
|
338
337
|
},
|
339
338
|
};
|
340
339
|
} else {
|
@@ -342,11 +341,8 @@ export function applyUnderlineToCells(
|
|
342
341
|
...currentCell,
|
343
342
|
style: {
|
344
343
|
...currentCell.style,
|
345
|
-
textDecoration:
|
346
|
-
|
347
|
-
value === 'double_border'
|
348
|
-
? 'double'
|
349
|
-
: ('none' as TextDecorationStyle),
|
344
|
+
textDecoration:
|
345
|
+
value === 'double_border' ? 'underline double' : value,
|
350
346
|
},
|
351
347
|
};
|
352
348
|
}
|
@@ -480,6 +476,79 @@ export function applyFormatePainter(
|
|
480
476
|
return undefined;
|
481
477
|
}
|
482
478
|
|
479
|
+
export function dragEndFormatePainter(
|
480
|
+
currentData: Matrix.Matrix<Types.CellBase<any>>,
|
481
|
+
selectedRange: PointRange | null,
|
482
|
+
formattedStyle: Types.formattedStyle
|
483
|
+
): Matrix.Matrix<Types.CellBase<any>> {
|
484
|
+
if (!selectedRange || !formattedStyle.open) {
|
485
|
+
return currentData;
|
486
|
+
}
|
487
|
+
|
488
|
+
const { start, end } = selectedRange;
|
489
|
+
let updatedData = currentData;
|
490
|
+
|
491
|
+
for (let row = start.row; row <= end.row; row++) {
|
492
|
+
for (let col = start.column; col <= end.column; col++) {
|
493
|
+
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
494
|
+
if (!currentCell) {
|
495
|
+
continue;
|
496
|
+
}
|
497
|
+
const updatedCell = {
|
498
|
+
...currentCell,
|
499
|
+
style: formattedStyle.style,
|
500
|
+
};
|
501
|
+
updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
|
502
|
+
}
|
503
|
+
}
|
504
|
+
return updatedData;
|
505
|
+
}
|
506
|
+
|
507
|
+
export function dragEndAutoFill(
|
508
|
+
currentData: Matrix.Matrix<Types.CellBase<any>>,
|
509
|
+
selectedRange: PointRange | null,
|
510
|
+
cellValue: Types.CellBase,
|
511
|
+
activeCell: Point.Point | null
|
512
|
+
): Matrix.Matrix<Types.CellBase<any>> {
|
513
|
+
if (!selectedRange) {
|
514
|
+
return currentData;
|
515
|
+
}
|
516
|
+
const { start, end } = selectedRange;
|
517
|
+
const rowCount = start.row - end.row;
|
518
|
+
const columnCount = start.column - end.column;
|
519
|
+
let startPoint = { row: 0, column: 0 };
|
520
|
+
let endPoint = { row: 0, column: 0 };
|
521
|
+
|
522
|
+
if (rowCount > columnCount) {
|
523
|
+
startPoint = { row: activeCell?.row ?? 0, column: start.column };
|
524
|
+
endPoint = { row: activeCell?.row ?? 0, column: end.column };
|
525
|
+
} else {
|
526
|
+
startPoint = { row: start.row, column: activeCell?.column ?? 0 };
|
527
|
+
endPoint = { row: end.row, column: activeCell?.column ?? 0 };
|
528
|
+
}
|
529
|
+
|
530
|
+
let updatedData = currentData;
|
531
|
+
|
532
|
+
for (let row = startPoint.row; row <= endPoint.row; row++) {
|
533
|
+
for (let col = startPoint.column; col <= endPoint.column; col++) {
|
534
|
+
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
535
|
+
|
536
|
+
if (!currentCell) {
|
537
|
+
continue;
|
538
|
+
}
|
539
|
+
|
540
|
+
const updatedCell = {
|
541
|
+
...currentCell,
|
542
|
+
style: cellValue.style,
|
543
|
+
value: cellValue.value,
|
544
|
+
};
|
545
|
+
|
546
|
+
updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
|
547
|
+
}
|
548
|
+
}
|
549
|
+
return updatedData;
|
550
|
+
}
|
551
|
+
|
483
552
|
export function edit(state: Types.StoreState): Types.StoreState {
|
484
553
|
if (isActiveReadOnly(state)) {
|
485
554
|
return state;
|
@@ -567,8 +636,6 @@ function convertPtToPx(pt: number): string {
|
|
567
636
|
|
568
637
|
// Key Bindings
|
569
638
|
|
570
|
-
type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
|
571
|
-
|
572
639
|
type TextAlign = 'left' | 'center' | 'right';
|
573
640
|
|
574
641
|
export type KeyDownHandler = (
|
@@ -55,19 +55,30 @@ export type StoreState<Cell extends CellBase = CellBase> = {
|
|
55
55
|
copied: PointRange | null;
|
56
56
|
hasPasted: boolean;
|
57
57
|
cut: boolean;
|
58
|
+
autoFill: { open: boolean; cellValue: Cell };
|
58
59
|
active: Point | null;
|
59
60
|
mode: Mode;
|
60
|
-
rowDimensions:
|
61
|
-
columnDimensions:
|
62
|
-
number,
|
63
|
-
Pick<Dimensions, 'width' | 'left'> | undefined
|
64
|
-
>;
|
61
|
+
rowDimensions: rowDimensions;
|
62
|
+
columnDimensions: columnDimensions;
|
65
63
|
dragging: boolean;
|
66
64
|
lastChanged: Point | null;
|
67
65
|
lastCommit: null | CellChange<Cell>[];
|
68
66
|
selectedRow: null | number;
|
69
67
|
selectedColumn: null | number;
|
70
|
-
formattedStyle:
|
68
|
+
formattedStyle: formattedStyle;
|
69
|
+
};
|
70
|
+
|
71
|
+
export type rowDimensions = Record<
|
72
|
+
number,
|
73
|
+
Pick<Dimensions, 'height' | 'top'> | undefined
|
74
|
+
>;
|
75
|
+
export type columnDimensions = Record<
|
76
|
+
number,
|
77
|
+
Pick<Dimensions, 'width' | 'left'> | undefined
|
78
|
+
>;
|
79
|
+
export type formattedStyle = {
|
80
|
+
open: boolean;
|
81
|
+
style: undefined | React.CSSProperties;
|
71
82
|
};
|
72
83
|
|
73
84
|
export type CellChange<Cell extends CellBase = CellBase> = {
|
@@ -115,10 +115,10 @@ export const Default: Story = {
|
|
115
115
|
backgroundColor: 'C6E7FF', // Sample data from backend without #
|
116
116
|
borderColor: 'F2F2F2', // Sample data from backend without #
|
117
117
|
border: {
|
118
|
-
top: '
|
119
|
-
bottom: '
|
120
|
-
left: '
|
121
|
-
right: '
|
118
|
+
top: 'THIN',
|
119
|
+
bottom: 'THIN',
|
120
|
+
left: 'THIN',
|
121
|
+
right: 'THIN',
|
122
122
|
},
|
123
123
|
alignment: {
|
124
124
|
horizontal: 'GENERAL',
|
@@ -51,22 +51,27 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
51
51
|
const data = useSelector((state) => state.model.data);
|
52
52
|
const formattedStyle = useSelector((state) => state.formattedStyle.open);
|
53
53
|
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
54
|
+
// Default style to Excel
|
55
|
+
const basicStyle: React.CSSProperties = {
|
56
|
+
color: 'var(--input-hover-border-color)',
|
57
|
+
backgroundColor: 'var(--drawer-footer-bg)',
|
58
|
+
borderColor: 'var(--excel-sheet-border)',
|
59
|
+
textDecoration: 'none solid',
|
60
|
+
borderRight: `1px solid var(--excel-sheet-border)`,
|
61
|
+
borderLeft: `1px solid var(--excel-sheet-border)`,
|
62
|
+
borderTop: `1px solid var(--excel-sheet-border)`,
|
63
|
+
borderBottom: `1px solid var(--excel-sheet-border)`,
|
64
|
+
fontSize: '15px',
|
65
|
+
fontWeight: 'normal',
|
66
|
+
fontStyle: 'normal',
|
67
|
+
fontFamily: 'Times New Roman',
|
68
|
+
textAlign: 'center',
|
69
|
+
};
|
70
|
+
|
71
|
+
const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
|
61
72
|
|
62
73
|
useEffect(() => {
|
63
|
-
setCellStyle(
|
64
|
-
cell?.style || {
|
65
|
-
color: 'var(--text-color)',
|
66
|
-
backgroundColor: 'var(--drawer-footer-bg)',
|
67
|
-
borderColor: 'var(--toggle-strip-color)',
|
68
|
-
}
|
69
|
-
);
|
74
|
+
setCellStyle(cell?.style || basicStyle);
|
70
75
|
}, [cell]);
|
71
76
|
|
72
77
|
useEffect(() => {
|
@@ -79,8 +84,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
79
84
|
}, [cell]);
|
80
85
|
|
81
86
|
const styleBackend = convertStyleToBackend(cellStyle);
|
82
|
-
|
83
|
-
|
84
87
|
const [border, setBorder] = useState<string>('border-none');
|
85
88
|
const [underLine, setUnderLine] = useState<string>('underline');
|
86
89
|
const [selectedFontFamily, setSelectedFontFamily] = useState<{
|
@@ -93,7 +96,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
93
96
|
const [colorContainer, setColorPicker] = useState<ColorContainer>({
|
94
97
|
color: 'var(--error-light)',
|
95
98
|
backgroundColor: 'var(--error-light)',
|
96
|
-
borderColor: 'var(--
|
99
|
+
borderColor: 'var(--input-hover-border-color)',
|
97
100
|
});
|
98
101
|
|
99
102
|
const borderTypeIcon = [
|
@@ -124,6 +127,18 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
124
127
|
label: 'Arial',
|
125
128
|
value: 'Arial',
|
126
129
|
},
|
130
|
+
{
|
131
|
+
label: 'fantasy',
|
132
|
+
value: 'fantasy',
|
133
|
+
},
|
134
|
+
{
|
135
|
+
label: 'cursive',
|
136
|
+
value: 'cursive',
|
137
|
+
},
|
138
|
+
{
|
139
|
+
label: 'Poppins',
|
140
|
+
value: 'Poppins',
|
141
|
+
},
|
127
142
|
{
|
128
143
|
label: 'Courier New',
|
129
144
|
value: '"Courier New"',
|
@@ -283,7 +298,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
283
298
|
<Tooltip placement="top" title={'Underline Type'}>
|
284
299
|
<div className="ff-excel-toolbar-icon-underline">
|
285
300
|
<Icon
|
286
|
-
variant={
|
301
|
+
variant={
|
302
|
+
cellStyle.textDecoration === underLine ? 'dark' : 'light'
|
303
|
+
}
|
287
304
|
hoverEffect
|
288
305
|
disabled={toolbar === 'disable'}
|
289
306
|
onClick={() => setUnderlineType(data, underLine, true)}
|
@@ -308,7 +325,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
308
325
|
<div className="ff-excel-toolbar-icon">
|
309
326
|
<Tooltip placement="top" title={'Format Painter'}>
|
310
327
|
<Icon
|
311
|
-
|
328
|
+
variant={formattedStyle ? 'dark' : 'light'}
|
312
329
|
hoverEffect
|
313
330
|
disabled={toolbar === 'disable'}
|
314
331
|
onClick={() => {
|
@@ -54,7 +54,7 @@ const getTextAlignmentBack = (
|
|
54
54
|
|
55
55
|
export const getTextDecorationBack = (
|
56
56
|
textDecoration: string
|
57
|
-
): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
|
57
|
+
): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
|
58
58
|
switch (textDecoration.toLowerCase()) {
|
59
59
|
case 'solid':
|
60
60
|
return 'solid';
|
@@ -74,6 +74,40 @@ export const getTextDecorationBack = (
|
|
74
74
|
export function convertStyleToFrontend(
|
75
75
|
backendStyle: BackendStyle
|
76
76
|
): React.CSSProperties {
|
77
|
+
|
78
|
+
const { border } = backendStyle;
|
79
|
+
|
80
|
+
let borderTop = '';
|
81
|
+
let borderRight = '';
|
82
|
+
let borderBottom = '';
|
83
|
+
let borderLeft = '';
|
84
|
+
|
85
|
+
if (border.top !== 'NONE') {
|
86
|
+
borderTop =
|
87
|
+
border.top === 'THIN'
|
88
|
+
? '2px solid var(--input-hover-border-color)'
|
89
|
+
: '1px solid var(--excel-sheet-border)';
|
90
|
+
}
|
91
|
+
if (border.right !== 'NONE') {
|
92
|
+
borderRight =
|
93
|
+
border.right === 'THIN'
|
94
|
+
? '2px solid var(--input-hover-border-color)'
|
95
|
+
: '1px solid var(--excel-sheet-border)';
|
96
|
+
}
|
97
|
+
if (border.bottom !== 'NONE') {
|
98
|
+
borderBottom =
|
99
|
+
border.bottom === 'THIN'
|
100
|
+
? '2px solid var(--input-hover-border-color)'
|
101
|
+
: '1px solid var(--excel-sheet-border)';
|
102
|
+
}
|
103
|
+
if (border.left !== 'NONE') {
|
104
|
+
borderLeft =
|
105
|
+
border.left === 'THIN'
|
106
|
+
? '2px solid var(--input-hover-border-color)'
|
107
|
+
: '1px solid var(--excel-sheet-border)';
|
108
|
+
}
|
109
|
+
|
110
|
+
// Return the converted styles
|
77
111
|
return {
|
78
112
|
fontSize: `${backendStyle.size}px`,
|
79
113
|
fontFamily: backendStyle.name,
|
@@ -81,24 +115,13 @@ export function convertStyleToFrontend(
|
|
81
115
|
backgroundColor: `#${backendStyle.backgroundColor}`,
|
82
116
|
fontWeight: backendStyle.bold ? 'bold' : 'normal',
|
83
117
|
fontStyle: backendStyle.italic ? 'italic' : 'normal',
|
84
|
-
textDecoration: backendStyle.underline
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
backendStyle.border.right === 'NONE'
|
92
|
-
? 'none'
|
93
|
-
: `1px solid ${backendStyle.borderColor}`,
|
94
|
-
borderBottom:
|
95
|
-
backendStyle.border.bottom === 'NONE'
|
96
|
-
? 'none'
|
97
|
-
: `1px solid ${backendStyle.borderColor}`,
|
98
|
-
borderLeft:
|
99
|
-
backendStyle.border.left === 'NONE'
|
100
|
-
? 'none'
|
101
|
-
: `1px solid ${backendStyle.borderColor}`,
|
118
|
+
textDecoration: backendStyle.underline
|
119
|
+
? `underline ${getTextDecoration(backendStyle.underline)}`
|
120
|
+
: 'none',
|
121
|
+
borderTop: borderTop,
|
122
|
+
borderRight: borderRight,
|
123
|
+
borderBottom: borderBottom,
|
124
|
+
borderLeft: borderLeft,
|
102
125
|
textAlign: getTextAlignment(backendStyle.alignment.horizontal),
|
103
126
|
};
|
104
127
|
}
|
@@ -133,7 +156,7 @@ export const convertStyleToBackend = (
|
|
133
156
|
size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
|
134
157
|
bold: frontendStyle.fontWeight === 'bold',
|
135
158
|
italic: frontendStyle.fontStyle === 'italic',
|
136
|
-
underline:
|
159
|
+
underline: 'solid',
|
137
160
|
color: frontendStyle.color?.replace('#', '') || '000000',
|
138
161
|
backgroundColor:
|
139
162
|
frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React
|
1
|
+
import React from 'react';
|
2
2
|
import { StoryObj, Meta } from '@storybook/react';
|
3
3
|
import FileDropzone from './FileDropzone';
|
4
4
|
import Toaster from '../Toast';
|
@@ -109,7 +109,6 @@ export const WithRadioButton: Story = {
|
|
109
109
|
useState<RadioOption>();
|
110
110
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
111
111
|
|
112
|
-
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
113
112
|
|
114
113
|
const drawerArgs = {
|
115
114
|
primaryButtonProps: {
|
@@ -126,12 +125,6 @@ export const WithRadioButton: Story = {
|
|
126
125
|
},
|
127
126
|
};
|
128
127
|
|
129
|
-
useEffect(() => {
|
130
|
-
if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
|
131
|
-
fileInputRef.current.click();
|
132
|
-
}
|
133
|
-
}, [selectedRadioOption]);
|
134
|
-
|
135
128
|
const radioOptions: RadioOption[] = [
|
136
129
|
{ value: 'Test Data', label: 'Test Data' },
|
137
130
|
{ value: 'Local File', label: 'Local File' },
|
@@ -146,10 +139,11 @@ export const WithRadioButton: Story = {
|
|
146
139
|
};
|
147
140
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
148
141
|
const file = event.target.files?.[0];
|
142
|
+
|
149
143
|
if (file) {
|
150
144
|
setSelectedFile(file);
|
151
145
|
}
|
152
|
-
};
|
146
|
+
};
|
153
147
|
|
154
148
|
const handleRemoveFile = () => {
|
155
149
|
setSelectedFile(null);
|
@@ -191,15 +185,7 @@ export const WithRadioButton: Story = {
|
|
191
185
|
toastMessage={'Max 5 files can be uploaded'}
|
192
186
|
/>
|
193
187
|
)}
|
194
|
-
{selectedRadioOption?.value === 'Local File'
|
195
|
-
<input
|
196
|
-
ref={fileInputRef}
|
197
|
-
type="file"
|
198
|
-
className='ff-input-ref'
|
199
|
-
onChange={handleFileChange}
|
200
|
-
accept="image/png, image/jpeg, application/x-zip-compressed, application/zip"
|
201
|
-
/>
|
202
|
-
) : (
|
188
|
+
{selectedRadioOption?.value === 'Local File' &&
|
203
189
|
<Drawer
|
204
190
|
{...drawerArgs}
|
205
191
|
isOpen={showModal}
|
@@ -210,7 +196,7 @@ export const WithRadioButton: Story = {
|
|
210
196
|
>
|
211
197
|
<Typography>Upload TestData Files Here</Typography>
|
212
198
|
</Drawer>
|
213
|
-
|
199
|
+
}
|
214
200
|
</>
|
215
201
|
);
|
216
202
|
},
|
@@ -3,7 +3,7 @@ import { FileDropzoneProps } from './types';
|
|
3
3
|
import './FileDropzone.scss';
|
4
4
|
import Icon from '../Icon';
|
5
5
|
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
6
|
-
import { useEffect, useMemo } from 'react';
|
6
|
+
import { useEffect, useMemo, useRef } from 'react';
|
7
7
|
import Dropzone from './Dropzone';
|
8
8
|
import FilePreview from './FilePreview';
|
9
9
|
import classNames from 'classnames';
|
@@ -39,6 +39,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
39
39
|
isApiResponseError = false,
|
40
40
|
isDisable = false,
|
41
41
|
}) => {
|
42
|
+
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
42
43
|
const {
|
43
44
|
getRootProps,
|
44
45
|
getInputProps,
|
@@ -77,6 +78,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
77
78
|
[acceptedFiles, handleRemoveClick, handleReplaceClick]
|
78
79
|
);
|
79
80
|
|
81
|
+
useEffect(() => {
|
82
|
+
if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
|
83
|
+
fileInputRef.current.click();
|
84
|
+
}
|
85
|
+
}, [selectedRadioOption]);
|
86
|
+
|
80
87
|
useEffect(() => {
|
81
88
|
if (!checkEmpty(acceptedFiles) && setSelectedFile) {
|
82
89
|
setSelectedFile(acceptedFiles[0] || null);
|
@@ -98,9 +105,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
98
105
|
);
|
99
106
|
|
100
107
|
return (
|
101
|
-
<div
|
102
|
-
{'ff-
|
103
|
-
|
108
|
+
<div
|
109
|
+
className={classNames('ff-file-dropzone-wrapper', {
|
110
|
+
'ff-disable-file-dropzone-wrapper': isDisable,
|
111
|
+
})}
|
112
|
+
style={{ width: `${width}px` }}
|
113
|
+
>
|
104
114
|
<Dropzone
|
105
115
|
icon={icon}
|
106
116
|
primaryLabel={primaryLabel}
|
@@ -123,6 +133,16 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
123
133
|
isDisable={isDisable}
|
124
134
|
/>
|
125
135
|
|
136
|
+
{isWebServiceFileDropZone && (
|
137
|
+
<input
|
138
|
+
ref={fileInputRef}
|
139
|
+
type="file"
|
140
|
+
className="ff-input-ref"
|
141
|
+
onChange={handleFileChange}
|
142
|
+
accept={accept.join(',')}
|
143
|
+
/>
|
144
|
+
)}
|
145
|
+
|
126
146
|
{isWebServiceFileDropZone ? null : (
|
127
147
|
<div
|
128
148
|
className={'ff-file-details-wrapper'}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import React, { forwardRef, useImperativeHandle } from 'react';
|
2
2
|
import Form from './Form';
|
3
|
-
|
4
3
|
interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
|
5
4
|
id?: string;
|
6
5
|
onSubmit: Form.SubmitHandler<T>;
|
@@ -16,7 +15,6 @@ const Forms = <T extends Form.FieldValues>(
|
|
16
15
|
ref: React.Ref<any>
|
17
16
|
) => {
|
18
17
|
const methods = Form.useForm<T>(rest);
|
19
|
-
|
20
18
|
const { handleSubmit } = methods;
|
21
19
|
const extendedMethods = {
|
22
20
|
...methods,
|
@@ -117,6 +117,8 @@ import HideAccessIcon from '../../assets/icons/hide_access_icon.svg?react';
|
|
117
117
|
import AddLocator from '../../assets/icons/add_locator.svg?react';
|
118
118
|
import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
|
119
119
|
|
120
|
+
import IosIcon from '../../assets/icons/ios_icon.svg?react';
|
121
|
+
import HelpIcon from '../../assets/icons/help_icon.svg?react';
|
120
122
|
import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
|
121
123
|
import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
|
122
124
|
import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
|
@@ -142,6 +144,7 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
|
|
142
144
|
import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
|
143
145
|
import UpdateIcon from '../../assets/icons/update_icon.svg?react';
|
144
146
|
import AddFile from '../../assets/icons/add_file.svg?react';
|
147
|
+
import PlusRoundIcon from '../../assets/icons/plus_round_icon.svg?react';
|
145
148
|
import EyeClosed from '../../assets/icons/eye_closed.svg?react';
|
146
149
|
import AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
|
147
150
|
import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
|
@@ -192,6 +195,8 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
|
|
192
195
|
import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
|
193
196
|
import UserWarning from '../../assets/icons/user_warning.svg?react';
|
194
197
|
import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
|
198
|
+
import AiSearch from '../../assets/icons/ai_search.svg?react';
|
199
|
+
|
195
200
|
import Import from '../../assets/icons/import.svg?react';
|
196
201
|
import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
|
197
202
|
import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
|
@@ -246,6 +251,7 @@ import machineEnableIcon from '../../assets/icons/machine_enable_icon.svg?react'
|
|
246
251
|
import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?react';
|
247
252
|
import suitesIcon from '../../assets/icons/suites_icon.svg?react';
|
248
253
|
import executionsIcon from '../../assets/icons/executions_icon.svg?react';
|
254
|
+
import ImportIcon from '../../assets/icons/import_icon.svg?react';
|
249
255
|
|
250
256
|
Components['success'] = ToastSuccessIcon;
|
251
257
|
Components['alert'] = Alert;
|
@@ -351,6 +357,8 @@ Components['android_icon'] = AndroidIcon;
|
|
351
357
|
Components['plus_user_icon'] = PlusUserIcon;
|
352
358
|
Components['label_plus'] = LabelPlusIcon;
|
353
359
|
Components['manual_locator'] = ManualLocator;
|
360
|
+
Components['ios_icon'] = IosIcon;
|
361
|
+
Components['help_icon'] = HelpIcon;
|
354
362
|
Components['select_license'] = SwitchLicenseIcon;
|
355
363
|
Components['fireflink-logo'] = FireflinkLogo;
|
356
364
|
Components['wswb_delete_icon'] = WSWBDeleteIcon;
|
@@ -382,6 +390,7 @@ Components['notification_icon'] = NotificationIcon;
|
|
382
390
|
Components['nlp_help_icon'] = NLPHelpIcon;
|
383
391
|
Components['update_icon'] = UpdateIcon;
|
384
392
|
Components['add_file'] = AddFile;
|
393
|
+
Components['plus_round_icon'] = PlusRoundIcon;
|
385
394
|
Components['clone_icon'] = CloneIcon;
|
386
395
|
Components['move_icon'] = MoveIcon;
|
387
396
|
Components['jira'] = Jira;
|
@@ -394,6 +403,7 @@ Components['hide_access_icon'] = HideAccessIcon;
|
|
394
403
|
Components['eye_closed'] = EyeClosed;
|
395
404
|
Components['attachment_icon'] = AttachmentIcon;
|
396
405
|
Components['authorization_icon'] = AuthorizationIcon;
|
406
|
+
Components['ai_search'] = AiSearch;
|
397
407
|
|
398
408
|
Components['fireflink_platform_logo'] = FireflinkPlatform;
|
399
409
|
Components['fireflink_finder_logo'] = FireflinkFinder;
|
@@ -488,4 +498,6 @@ Components['machine_enable_icon'] = machineEnableIcon;
|
|
488
498
|
Components['machine_disable_icon'] = machineDisableIcon;
|
489
499
|
Components['executions_icon'] = executionsIcon;
|
490
500
|
Components['suites_icon'] = suitesIcon;
|
501
|
+
Components['import_icon'] = ImportIcon;
|
502
|
+
|
491
503
|
export default Components;
|