pixel-react 1.6.9 → 1.7.1
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/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/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/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/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 +112 -59
- package/lib/index.esm.js +1251 -662
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1252 -662
- 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/ai_search.svg +9 -0
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/tick_icon.svg +2 -2
- 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/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
- package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
- 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 +9 -0
- 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/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/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 -2
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/index.ts +0 -1
@@ -1,6 +1,8 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import classnames from 'classnames';
|
3
3
|
import * as Types from './types';
|
4
|
+
import useSelector from './use-selector';
|
5
|
+
import { getCellDimensions } from './util';
|
4
6
|
|
5
7
|
export type Props = {
|
6
8
|
variant?: string;
|
@@ -15,7 +17,30 @@ const FloatingRect: React.FC<Props> = ({
|
|
15
17
|
hidden,
|
16
18
|
variant,
|
17
19
|
}) => {
|
20
|
+
const active = useSelector((state) => state.active);
|
21
|
+
const autoFill = useSelector((state) => state.autoFill);
|
22
|
+
const FixedVal = useSelector((state) =>
|
23
|
+
active
|
24
|
+
? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
|
25
|
+
: undefined
|
26
|
+
);
|
27
|
+
|
18
28
|
const { width, height, top, left } = dimensions || {};
|
29
|
+
|
30
|
+
let sampleHeight = FixedVal?.height ?? 0;
|
31
|
+
let sampleWidth = FixedVal?.width ?? 0;
|
32
|
+
let adjustedWidth = width;
|
33
|
+
let adjustedHeight = height;
|
34
|
+
if (autoFill.open && width && height && FixedVal) {
|
35
|
+
if (width - sampleWidth > height - sampleHeight) {
|
36
|
+
adjustedWidth = width;
|
37
|
+
adjustedHeight = FixedVal.height;
|
38
|
+
} else {
|
39
|
+
adjustedHeight = height;
|
40
|
+
adjustedWidth = FixedVal.width;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
19
44
|
return (
|
20
45
|
<div
|
21
46
|
className={classnames('ff-spreadsheet-floating-rect', {
|
@@ -23,7 +48,7 @@ const FloatingRect: React.FC<Props> = ({
|
|
23
48
|
'ff-spreadsheet-floating-rect--dragging': dragging,
|
24
49
|
'ff-spreadsheet-floating-rect--hidden': hidden,
|
25
50
|
})}
|
26
|
-
style={{ width, height, top, left }}
|
51
|
+
style={{ width: adjustedWidth, height: adjustedHeight, top, left }}
|
27
52
|
/>
|
28
53
|
);
|
29
54
|
};
|
@@ -11,7 +11,7 @@
|
|
11
11
|
--readonly-text-color: var(--toggle-strip-active);
|
12
12
|
--outline-color: var(--toggle-strip-active);
|
13
13
|
--outline-background-color: var(--overlay-bg);
|
14
|
-
--border-color: var(--
|
14
|
+
--border-color: var(--excel-sheet-border);
|
15
15
|
--header-background-color: var(--pop-up-background-blur);
|
16
16
|
--elevation: var(--brand-color);
|
17
17
|
|
@@ -50,16 +50,16 @@
|
|
50
50
|
z-index: 0;
|
51
51
|
}
|
52
52
|
|
53
|
-
.ff-spreadsheet-active-cell .
|
53
|
+
.ff-spreadsheet-active-cell .select_dot {
|
54
54
|
background-color: var(--elevation);
|
55
|
-
height:
|
56
|
-
width:
|
55
|
+
height: 10px;
|
56
|
+
width: 10px;
|
57
57
|
border-radius: 50%;
|
58
58
|
position: absolute;
|
59
|
-
|
60
|
-
|
61
|
-
bottom: -3px;
|
59
|
+
bottom: -5px;
|
60
|
+
right: -5px;
|
62
61
|
cursor: crosshair;
|
62
|
+
z-index: 1000;
|
63
63
|
}
|
64
64
|
|
65
65
|
.ff-spreadsheet-cell--readonly {
|
@@ -46,11 +46,23 @@ export const DELETE_ROW = 'DELETE_ROW';
|
|
46
46
|
export const DELETE_COLUMN = 'DELETE_COLUMN';
|
47
47
|
export const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
|
48
48
|
export const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
|
49
|
+
export const SET_AUTO_FILL = 'SET_AUTO_FILL';
|
49
50
|
|
50
51
|
export type BaseAction<T extends string> = {
|
51
52
|
type: T;
|
52
53
|
};
|
53
54
|
|
55
|
+
export type SetAutoFill = BaseAction<typeof SET_AUTO_FILL> & {
|
56
|
+
payload: { autofill: boolean };
|
57
|
+
};
|
58
|
+
|
59
|
+
export function autoFill(autofill: boolean): SetAutoFill {
|
60
|
+
return {
|
61
|
+
type: SET_AUTO_FILL,
|
62
|
+
payload: { autofill },
|
63
|
+
};
|
64
|
+
}
|
65
|
+
|
54
66
|
export type SetRowHeight = BaseAction<typeof SET_ROW_HEIGHT> & {
|
55
67
|
payload: { row: number; height: number };
|
56
68
|
};
|
@@ -545,4 +557,5 @@ export type Action =
|
|
545
557
|
| DeleteColumn
|
546
558
|
| SetRowHeight
|
547
559
|
| SetColumnPosition
|
560
|
+
| SetAutoFill
|
548
561
|
| BlurAction;
|
@@ -26,6 +26,8 @@ import {
|
|
26
26
|
blur,
|
27
27
|
clear,
|
28
28
|
commit,
|
29
|
+
dragEndAutoFill,
|
30
|
+
dragEndFormatePainter,
|
29
31
|
edit,
|
30
32
|
getKeyDownHandler,
|
31
33
|
isActiveReadOnly,
|
@@ -41,6 +43,7 @@ export const INITIAL_STATE: Types.StoreState = {
|
|
41
43
|
lastChanged: null,
|
42
44
|
hasPasted: false,
|
43
45
|
cut: false,
|
46
|
+
autoFill: { open: false, cellValue: { value: '', style: {} } },
|
44
47
|
dragging: false,
|
45
48
|
model: new Model(createFormulaParser, []),
|
46
49
|
selected: new EmptySelection(),
|
@@ -56,6 +59,23 @@ export default function reducer(
|
|
56
59
|
action: Actions.Action
|
57
60
|
): Types.StoreState {
|
58
61
|
switch (action.type) {
|
62
|
+
case Actions.SET_AUTO_FILL: {
|
63
|
+
const { autofill } = action.payload;
|
64
|
+
const activeCell = state.active;
|
65
|
+
let currentCell: Types.CellBase<any> = { value: '', style: {} };
|
66
|
+
if (activeCell) {
|
67
|
+
currentCell =
|
68
|
+
Matrix.get(
|
69
|
+
{ row: activeCell.row, column: activeCell.column },
|
70
|
+
state.model.data
|
71
|
+
) || currentCell;
|
72
|
+
}
|
73
|
+
return {
|
74
|
+
...state,
|
75
|
+
autoFill: { open: autofill, cellValue: currentCell },
|
76
|
+
};
|
77
|
+
}
|
78
|
+
|
59
79
|
case Actions.ADD_ROW_TOP: {
|
60
80
|
let { selectedRow, selectedColumn, model } = state;
|
61
81
|
if (checkEmpty(selectedRow)) {
|
@@ -610,41 +630,48 @@ export default function reducer(
|
|
610
630
|
|
611
631
|
case Actions.DRAG_END: {
|
612
632
|
const selectedRange = state.selected.toRange(state.model.data);
|
613
|
-
|
614
|
-
|
615
|
-
if (
|
633
|
+
const activeCell = state.active;
|
634
|
+
let updatedData = state.model.data;
|
635
|
+
if (state.formattedStyle.open) {
|
636
|
+
updatedData = dragEndFormatePainter(
|
637
|
+
state.model.data,
|
638
|
+
selectedRange as PointRange,
|
639
|
+
state.formattedStyle
|
640
|
+
);
|
641
|
+
}
|
642
|
+
if (state.autoFill.open) {
|
643
|
+
updatedData = dragEndAutoFill(
|
644
|
+
state.model.data,
|
645
|
+
selectedRange as PointRange,
|
646
|
+
state.autoFill.cellValue,
|
647
|
+
activeCell
|
648
|
+
);
|
649
|
+
let { start, end } = selectedRange as PointRange;
|
650
|
+
const rowCount = start.row - end.row;
|
651
|
+
const columnCount = start.column - end.column;
|
652
|
+
let startPoint = { row: 0, column: 0 };
|
653
|
+
let endPoint = { row: 0, column: 0 };
|
654
|
+
|
655
|
+
if (rowCount > columnCount) {
|
656
|
+
startPoint = { row: activeCell?.row ?? 0, column: start.column };
|
657
|
+
endPoint = { row: activeCell?.row ?? 0, column: end.column };
|
658
|
+
} else {
|
659
|
+
startPoint = { row: start.row, column: activeCell?.column ?? 0 };
|
660
|
+
endPoint = { row: end.row, column: activeCell?.column ?? 0 };
|
661
|
+
}
|
616
662
|
return {
|
617
663
|
...state,
|
618
664
|
dragging: false,
|
665
|
+
autoFill: { open: false, cellValue: { value: '', style: {} } },
|
619
666
|
formattedStyle: { open: false, style: undefined },
|
667
|
+
model: new Model(state.model.createFormulaParser, updatedData),
|
668
|
+
selected: new RangeSelection(new PointRange(startPoint, endPoint)),
|
620
669
|
};
|
621
670
|
}
|
622
|
-
|
623
|
-
const { start, end } = selectedRange;
|
624
|
-
|
625
|
-
let updatedData = currentData;
|
626
|
-
|
627
|
-
for (let row = start.row; row <= end.row; row++) {
|
628
|
-
for (let col = start.column; col <= end.column; col++) {
|
629
|
-
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
630
|
-
if (!currentCell) {
|
631
|
-
continue;
|
632
|
-
}
|
633
|
-
const updatedCell = {
|
634
|
-
...currentCell,
|
635
|
-
style: state.formattedStyle.style,
|
636
|
-
};
|
637
|
-
|
638
|
-
updatedData = Matrix.set(
|
639
|
-
{ row, column: col },
|
640
|
-
updatedCell,
|
641
|
-
updatedData
|
642
|
-
);
|
643
|
-
}
|
644
|
-
}
|
645
671
|
return {
|
646
672
|
...state,
|
647
673
|
dragging: false,
|
674
|
+
autoFill: { open: false, cellValue: { value: '', style: {} } },
|
648
675
|
formattedStyle: { open: false, style: undefined },
|
649
676
|
model: new Model(state.model.createFormulaParser, updatedData),
|
650
677
|
};
|
@@ -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
|
},
|