pixel-react 1.5.5 → 1.5.7
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/.storybook/main.ts +7 -1
- package/lib/components/Charts/LineChart/types.d.ts +3 -0
- package/lib/components/DatePicker/types.d.ts +4 -0
- package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +1 -7
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +1 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
- package/lib/components/FileDropzone/types.d.ts +3 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/StateDropdown/StateDropdown.d.ts +1 -1
- package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
- package/lib/index.d.ts +52 -2
- package/lib/index.esm.js +950 -581
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +950 -580
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/dashboard_icon.svg +31 -0
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/info_user.svg +5 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/styles/_colors.scss +1 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
- package/src/components/Charts/LineChart/LineChart.scss +8 -7
- package/src/components/Charts/LineChart/LineChart.stories.tsx +170 -51
- package/src/components/Charts/LineChart/LineChart.tsx +30 -27
- package/src/components/Charts/LineChart/types.ts +22 -20
- package/src/components/DatePicker/DatePicker.scss +4 -3
- package/src/components/DatePicker/DatePicker.stories.tsx +27 -14
- package/src/components/DatePicker/DatePicker.tsx +62 -49
- package/src/components/DatePicker/types.ts +5 -0
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +8 -4
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +2 -2
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +23 -35
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +3 -12
- package/src/components/Excel/ExcelFile/ExcelFile.scss +31 -25
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +157 -47
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +5 -4
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +3 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +40 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +3 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +10 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +9 -45
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +43 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +40 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +3 -1
- package/src/components/Excel/ExcelFile.stories.tsx +42 -43
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +80 -20
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +171 -159
- package/src/components/FileDropzone/Dropzone.tsx +2 -0
- package/src/components/FileDropzone/FileDropzone.scss +1 -2
- package/src/components/FileDropzone/FileDropzone.stories.tsx +3 -0
- package/src/components/FileDropzone/FileDropzone.tsx +11 -3
- package/src/components/FileDropzone/types.ts +5 -0
- package/src/components/Icon/Icon.stories.tsx +5 -4
- package/src/components/Icon/iconList.ts +4 -0
- package/src/components/MultiSelect/MultiSelect.scss +41 -50
- package/src/components/MultiSelect/MultiSelect.tsx +48 -48
- package/src/components/Select/Select.scss +11 -1
- package/src/components/Select/Select.tsx +2 -2
- package/src/components/StateDropdown/StateDropdown.stories.tsx +5 -0
- package/src/components/StateDropdown/StateDropdown.tsx +27 -12
- package/src/components/StateDropdown/StateDropdownTypes.tsx +6 -0
- package/src/components/TableTree/TableTree.scss +17 -15
- package/src/components/TableTree/TableTree.tsx +42 -40
- package/src/index.ts +2 -0
- 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/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/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.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/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- 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/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -109,13 +109,13 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
|
|
109
109
|
setContextMenu({
|
110
110
|
open: true,
|
111
111
|
position: {
|
112
|
-
x: event.
|
113
|
-
y: event.
|
112
|
+
x: event.pageX - 50,
|
113
|
+
y: event.pageY - 260,
|
114
114
|
},
|
115
115
|
options: options,
|
116
116
|
});
|
117
117
|
},
|
118
|
-
[setContextMenu]
|
118
|
+
[setContextMenu, select, point]
|
119
119
|
);
|
120
120
|
|
121
121
|
React.useEffect(() => {
|
@@ -147,13 +147,14 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
|
|
147
147
|
>
|
148
148
|
<DataViewer
|
149
149
|
row={row}
|
150
|
+
setContextMenu={setContextMenu}
|
150
151
|
column={column}
|
151
152
|
cell={data}
|
152
153
|
evaluatedCell={evaluatedData}
|
153
154
|
setCellData={setCellData}
|
154
155
|
/>
|
155
156
|
<div
|
156
|
-
className="Selection_dot"
|
157
|
+
// className="Selection_dot" TODO
|
157
158
|
onMouseOver={handleDotOver}
|
158
159
|
onMouseDown={handleDotDown}
|
159
160
|
></div>
|
@@ -18,7 +18,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
|
|
18
18
|
}) => {
|
19
19
|
const dispatch = useDispatch();
|
20
20
|
const [width, setWidth] = React.useState(100);
|
21
|
-
|
21
|
+
const options = [
|
22
22
|
{
|
23
23
|
label: 'Add Column',
|
24
24
|
value: 'Add Column',
|
@@ -92,8 +92,8 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
|
|
92
92
|
setContextMenu({
|
93
93
|
open: true,
|
94
94
|
position: {
|
95
|
-
x: event.
|
96
|
-
y: event.
|
95
|
+
x: event.pageX - 50,
|
96
|
+
y: event.pageY - 260,
|
97
97
|
},
|
98
98
|
options: options,
|
99
99
|
});
|
@@ -10,15 +10,54 @@ export const FALSE_TEXT = 'FALSE';
|
|
10
10
|
const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
|
11
11
|
cell,
|
12
12
|
evaluatedCell,
|
13
|
+
setContextMenu,//Todo
|
13
14
|
}: Types.DataViewerProps<Cell>): React.ReactElement => {
|
15
|
+
|
14
16
|
const value = getValue(cell, evaluatedCell);
|
15
17
|
|
18
|
+
const options = [
|
19
|
+
{
|
20
|
+
label: 'Dynamic Cell One',
|
21
|
+
value: 'Dynamic Cell One',
|
22
|
+
iconName: 'plus_icon',
|
23
|
+
action: () => {
|
24
|
+
},
|
25
|
+
disable: false,
|
26
|
+
},
|
27
|
+
{
|
28
|
+
label: 'Dynamic Cell Two',
|
29
|
+
value: 'Dynamic Cell Two',
|
30
|
+
iconName: 'plus_icon',
|
31
|
+
action: () => {
|
32
|
+
},
|
33
|
+
disable: false,
|
34
|
+
},
|
35
|
+
];
|
36
|
+
|
37
|
+
const contextClick = React.useCallback(
|
38
|
+
(event: React.MouseEvent) => {
|
39
|
+
event.preventDefault();
|
40
|
+
|
41
|
+
setContextMenu({
|
42
|
+
open: true,
|
43
|
+
position: {
|
44
|
+
x: event.pageX - 50,
|
45
|
+
y: event.pageY - 260,
|
46
|
+
},
|
47
|
+
options: options,
|
48
|
+
});
|
49
|
+
},
|
50
|
+
[ setContextMenu]
|
51
|
+
);
|
52
|
+
|
16
53
|
return typeof value === 'boolean' ? (
|
17
|
-
<span
|
54
|
+
<span
|
55
|
+
className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
|
18
56
|
{convertBooleanToText(value)}
|
19
57
|
</span>
|
20
58
|
) : (
|
21
59
|
<span
|
60
|
+
onContextMenu={contextClick}
|
22
61
|
className={classNames('ff-spreadsheet-data-viewer', {
|
23
62
|
'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value),
|
24
63
|
})}
|
@@ -17,7 +17,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
|
|
17
17
|
}) => {
|
18
18
|
const [height, setHeight] = React.useState(0);
|
19
19
|
|
20
|
-
|
20
|
+
const options = [
|
21
21
|
{
|
22
22
|
label: 'Add Row',
|
23
23
|
value: 'Add Row',
|
@@ -86,8 +86,8 @@ const RowIndicator: Types.RowIndicatorComponent = ({
|
|
86
86
|
setContextMenu({
|
87
87
|
open: true,
|
88
88
|
position: {
|
89
|
-
x: event.
|
90
|
-
y: event.
|
89
|
+
x: event.pageX - 50,
|
90
|
+
y: event.pageY - 260,
|
91
91
|
},
|
92
92
|
options: options,
|
93
93
|
});
|
@@ -1,5 +1,10 @@
|
|
1
1
|
@use '../../../../assets/styles/fonts';
|
2
2
|
|
3
|
+
.ff-excel {
|
4
|
+
display: flex;
|
5
|
+
flex-direction: column;
|
6
|
+
}
|
7
|
+
|
3
8
|
.ff-spreadsheet {
|
4
9
|
--background-color: var(--drawer-footer-bg);
|
5
10
|
--text-color: var(--text-color);
|
@@ -29,6 +34,11 @@
|
|
29
34
|
}
|
30
35
|
|
31
36
|
.ff-spreadsheet-table {
|
37
|
+
overflow: scroll;
|
38
|
+
&::-webkit-scrollbar {
|
39
|
+
height: 0px;
|
40
|
+
}
|
41
|
+
|
32
42
|
margin-top: 20px;
|
33
43
|
border-collapse: collapse;
|
34
44
|
table-layout: fixed;
|
@@ -38,7 +38,6 @@ import Copied from './Copied';
|
|
38
38
|
import './Spreadsheet.scss';
|
39
39
|
import ExcelToolBar from '../../ExcelToolBar/ExcelToolBar';
|
40
40
|
import { hasKeyDownHandler } from './reducerFunctions';
|
41
|
-
import ExcelContextMenu from '../../ExcelContextMenu/ExcelContextMenu';
|
42
41
|
|
43
42
|
/** The Spreadsheet component props */
|
44
43
|
export type Props<CellType extends Types.CellBase> = {
|
@@ -98,6 +97,7 @@ export type Props<CellType extends Types.CellBase> = {
|
|
98
97
|
onActivate?: (active: Point.Point) => void;
|
99
98
|
/** Callback called when the Spreadsheet's evaluated data changes. */
|
100
99
|
onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
|
100
|
+
setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
|
101
101
|
};
|
102
102
|
|
103
103
|
/**
|
@@ -106,12 +106,6 @@ export type Props<CellType extends Types.CellBase> = {
|
|
106
106
|
const Spreadsheet = <CellType extends Types.CellBase>(
|
107
107
|
props: Props<CellType>
|
108
108
|
): React.ReactElement => {
|
109
|
-
const [contextMenu, setContextMenu] = React.useState<Types.ContextMenuState>({
|
110
|
-
open: false,
|
111
|
-
position: { x: 0, y: 0 },
|
112
|
-
options: [{ label: '', value: '', iconName: '', action: () => {} }],
|
113
|
-
});
|
114
|
-
|
115
109
|
const {
|
116
110
|
className,
|
117
111
|
columnLabels,
|
@@ -287,30 +281,13 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
287
281
|
[mode, paste]
|
288
282
|
);
|
289
283
|
|
290
|
-
const handleClickOutside = React.useCallback(
|
291
|
-
(event: MouseEvent) => {
|
292
|
-
if (contextMenu.open) {
|
293
|
-
event.preventDefault();
|
294
|
-
event.stopPropagation();
|
295
|
-
setContextMenu({
|
296
|
-
open: false,
|
297
|
-
position: { x: 0, y: 0 },
|
298
|
-
options: [{ label: '', value: '', iconName: '', action: () => {} }],
|
299
|
-
});
|
300
|
-
}
|
301
|
-
},
|
302
|
-
[contextMenu.open]
|
303
|
-
);
|
304
|
-
|
305
284
|
const handleKeyDown = React.useCallback(
|
306
285
|
(event: React.KeyboardEvent) => {
|
307
286
|
event.persist();
|
308
287
|
if (onKeyDown) {
|
309
288
|
onKeyDown(event);
|
310
289
|
}
|
311
|
-
// Do not use event in case preventDefault() was called inside onKeyDown
|
312
290
|
if (!event.defaultPrevented) {
|
313
|
-
// Only disable default behavior if an handler exist
|
314
291
|
if (hasKeyDownHandler(state, event)) {
|
315
292
|
event.nativeEvent.preventDefault();
|
316
293
|
}
|
@@ -361,29 +338,17 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
361
338
|
document.addEventListener('cut', handleCut);
|
362
339
|
document.addEventListener('copy', handleCopy);
|
363
340
|
document.addEventListener('paste', handlePaste);
|
364
|
-
document.addEventListener('click', handleClickOutside);
|
365
341
|
|
366
342
|
return () => {
|
367
343
|
document.removeEventListener('cut', handleCut);
|
368
344
|
document.removeEventListener('copy', handleCopy);
|
369
345
|
document.removeEventListener('paste', handlePaste);
|
370
|
-
document.removeEventListener('click', handleClickOutside);
|
371
346
|
};
|
372
|
-
}, [handleCut, handleCopy, handlePaste
|
347
|
+
}, [handleCut, handleCopy, handlePaste]);
|
373
348
|
|
374
349
|
const tableNode = React.useMemo(
|
375
350
|
() => (
|
376
351
|
<Table columns={size.columns}>
|
377
|
-
{contextMenu.open && (
|
378
|
-
<ExcelContextMenu
|
379
|
-
contextMenu={contextMenu}
|
380
|
-
data={props.data}
|
381
|
-
addRowTop={addRowTop}
|
382
|
-
addColumnLeft={addColumnLeft}
|
383
|
-
deleteRow={deleteRow}
|
384
|
-
deleteColumn={deleteColumn}
|
385
|
-
/>
|
386
|
-
)}
|
387
352
|
<HeaderRow>
|
388
353
|
{<CornerIndicator />}
|
389
354
|
{range(size.columns).map((columnNumber) =>
|
@@ -391,7 +356,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
391
356
|
<ColumnIndicator
|
392
357
|
key={columnNumber}
|
393
358
|
column={columnNumber}
|
394
|
-
setContextMenu={setContextMenu}
|
359
|
+
setContextMenu={props.setContextMenu}
|
395
360
|
label={
|
396
361
|
columnNumber in columnLabels
|
397
362
|
? columnLabels[columnNumber]
|
@@ -405,7 +370,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
405
370
|
<ColumnIndicator
|
406
371
|
key={columnNumber}
|
407
372
|
column={columnNumber}
|
408
|
-
setContextMenu={setContextMenu}
|
373
|
+
setContextMenu={props.setContextMenu}
|
409
374
|
deleteColumn={deleteColumn}
|
410
375
|
addColumnLeft={addColumnLeft}
|
411
376
|
data={props.data}
|
@@ -421,7 +386,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
421
386
|
label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
|
422
387
|
row={rowNumber}
|
423
388
|
addRowTop={addRowTop}
|
424
|
-
setContextMenu={setContextMenu}
|
389
|
+
setContextMenu={props.setContextMenu}
|
425
390
|
deleteRow={deleteRow}
|
426
391
|
data={props.data}
|
427
392
|
/>
|
@@ -430,7 +395,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
430
395
|
key={rowNumber}
|
431
396
|
row={rowNumber}
|
432
397
|
addRowTop={addRowTop}
|
433
|
-
setContextMenu={setContextMenu}
|
398
|
+
setContextMenu={props.setContextMenu}
|
434
399
|
deleteRow={deleteRow}
|
435
400
|
data={props.data}
|
436
401
|
/>
|
@@ -440,7 +405,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
440
405
|
key={columnNumber}
|
441
406
|
row={rowNumber}
|
442
407
|
column={columnNumber}
|
443
|
-
setContextMenu={setContextMenu}
|
408
|
+
setContextMenu={props.setContextMenu}
|
444
409
|
// @ts-ignore
|
445
410
|
DataViewer={DataViewer}
|
446
411
|
/>
|
@@ -462,7 +427,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
462
427
|
RowIndicator,
|
463
428
|
Cell,
|
464
429
|
DataViewer,
|
465
|
-
contextMenu,
|
466
430
|
]
|
467
431
|
);
|
468
432
|
|
@@ -478,7 +442,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
478
442
|
|
479
443
|
const rootNode = React.useMemo(
|
480
444
|
() => (
|
481
|
-
|
445
|
+
<div className="ff-excel">
|
482
446
|
<ExcelToolBar
|
483
447
|
data={props.data}
|
484
448
|
onBold={onBold}
|
@@ -503,7 +467,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
503
467
|
<Selected />
|
504
468
|
<Copied />
|
505
469
|
</div>
|
506
|
-
|
470
|
+
</div>
|
507
471
|
),
|
508
472
|
[className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]
|
509
473
|
);
|
@@ -19,6 +19,7 @@ import {
|
|
19
19
|
applyColorToCells,
|
20
20
|
applyFontFamily,
|
21
21
|
applyFontSize,
|
22
|
+
applyFormatePainter,
|
22
23
|
applyItalicToCells,
|
23
24
|
applyTextAlign,
|
24
25
|
applyUnderlineToCells,
|
@@ -47,6 +48,7 @@ export const INITIAL_STATE: Types.StoreState = {
|
|
47
48
|
lastCommit: null,
|
48
49
|
selectedColumn: null,
|
49
50
|
selectedRow: null,
|
51
|
+
formattedStyle: { open: false, style: undefined },
|
50
52
|
};
|
51
53
|
|
52
54
|
export default function reducer(
|
@@ -278,9 +280,10 @@ export default function reducer(
|
|
278
280
|
}
|
279
281
|
|
280
282
|
case Actions.FORMATE_PAINTER: {
|
283
|
+
const copiedStyle = applyFormatePainter(state.model.data, state.active);
|
281
284
|
return {
|
282
285
|
...state,
|
283
|
-
|
286
|
+
formattedStyle: { open: true, style: copiedStyle },
|
284
287
|
};
|
285
288
|
}
|
286
289
|
|
@@ -573,7 +576,45 @@ export default function reducer(
|
|
573
576
|
}
|
574
577
|
|
575
578
|
case Actions.DRAG_END: {
|
576
|
-
|
579
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
580
|
+
let currentData = state.model.data;
|
581
|
+
|
582
|
+
if (!state.formattedStyle.open || !selectedRange) {
|
583
|
+
return {
|
584
|
+
...state,
|
585
|
+
dragging: false,
|
586
|
+
formattedStyle: { open: false, style: undefined },
|
587
|
+
};
|
588
|
+
}
|
589
|
+
|
590
|
+
const { start, end } = selectedRange;
|
591
|
+
|
592
|
+
let updatedData = currentData;
|
593
|
+
|
594
|
+
for (let row = start.row; row <= end.row; row++) {
|
595
|
+
for (let col = start.column; col <= end.column; col++) {
|
596
|
+
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
597
|
+
if (!currentCell) {
|
598
|
+
continue;
|
599
|
+
}
|
600
|
+
const updatedCell = {
|
601
|
+
...currentCell,
|
602
|
+
style: state.formattedStyle.style,
|
603
|
+
};
|
604
|
+
|
605
|
+
updatedData = Matrix.set(
|
606
|
+
{ row, column: col },
|
607
|
+
updatedCell,
|
608
|
+
updatedData
|
609
|
+
);
|
610
|
+
}
|
611
|
+
}
|
612
|
+
return {
|
613
|
+
...state,
|
614
|
+
dragging: false,
|
615
|
+
formattedStyle: { open: false, style: undefined },
|
616
|
+
model: new Model(state.model.createFormulaParser, updatedData),
|
617
|
+
};
|
577
618
|
}
|
578
619
|
|
579
620
|
case Actions.COMMIT: {
|
@@ -34,7 +34,8 @@ export function applyBoldToCells(
|
|
34
34
|
...currentCell,
|
35
35
|
style: {
|
36
36
|
...currentCell.style,
|
37
|
-
fontWeight:
|
37
|
+
fontWeight:
|
38
|
+
currentCell.style?.fontWeight !== 'bold' ? 'bold' : 'normal',
|
38
39
|
},
|
39
40
|
};
|
40
41
|
|
@@ -69,7 +70,8 @@ export function applyItalicToCells(
|
|
69
70
|
...currentCell,
|
70
71
|
style: {
|
71
72
|
...currentCell.style,
|
72
|
-
fontStyle:
|
73
|
+
fontStyle:
|
74
|
+
currentCell.style?.fontStyle !== 'italic' ? 'italic' : 'normal',
|
73
75
|
},
|
74
76
|
};
|
75
77
|
|
@@ -188,13 +190,19 @@ export function applyBorderToCells(
|
|
188
190
|
case 'border-all-sides':
|
189
191
|
updatedCell.style = {
|
190
192
|
...currentCell.style,
|
191
|
-
|
193
|
+
borderRight: `2px solid ${color}`,
|
194
|
+
borderLeft: `2px solid ${color}`,
|
195
|
+
borderTop: `2px solid ${color}`,
|
196
|
+
borderBottom: `2px solid ${color}`,
|
192
197
|
};
|
193
198
|
break;
|
194
199
|
case 'border-none':
|
195
200
|
updatedCell.style = {
|
196
201
|
...currentCell.style,
|
197
|
-
|
202
|
+
borderRight: `1px solid var(--toggle-strip-color)`,
|
203
|
+
borderLeft: `1px solid var(--toggle-strip-color)`,
|
204
|
+
borderTop: `1px solid var(--toggle-strip-color)`,
|
205
|
+
borderBottom: `1px solid var(--toggle-strip-color)`,
|
198
206
|
};
|
199
207
|
break;
|
200
208
|
case 'border-right':
|
@@ -274,6 +282,10 @@ export function applyUnderlineToCells(
|
|
274
282
|
value: string,
|
275
283
|
active: boolean
|
276
284
|
): Matrix.Matrix<Types.CellBase<any>> {
|
285
|
+
if (!selectedRange) {
|
286
|
+
return currentData;
|
287
|
+
}
|
288
|
+
|
277
289
|
const { start, end } = selectedRange;
|
278
290
|
|
279
291
|
let updatedData = currentData;
|
@@ -377,6 +389,10 @@ export function applyBackgroundColorToCells(
|
|
377
389
|
selectedRange: PointRange | null,
|
378
390
|
backgroundColor: string
|
379
391
|
): Matrix.Matrix<Types.CellBase<any>> {
|
392
|
+
if (!selectedRange) {
|
393
|
+
return currentData;
|
394
|
+
}
|
395
|
+
|
380
396
|
if (selectedRange) {
|
381
397
|
const { start, end } = selectedRange;
|
382
398
|
|
@@ -415,6 +431,26 @@ export function applyBackgroundColorToCells(
|
|
415
431
|
return currentData;
|
416
432
|
}
|
417
433
|
|
434
|
+
export function applyFormatePainter(
|
435
|
+
currentData: Matrix.Matrix<Types.CellBase<any>>,
|
436
|
+
activePoint: Point.Point | null
|
437
|
+
): React.CSSProperties | undefined {
|
438
|
+
if (!activePoint) {
|
439
|
+
return undefined;
|
440
|
+
}
|
441
|
+
|
442
|
+
const { row, column } = activePoint;
|
443
|
+
let updatedData = { ...currentData };
|
444
|
+
|
445
|
+
const currentCell = Matrix.get({ row, column }, updatedData);
|
446
|
+
|
447
|
+
if (currentCell && currentCell.style) {
|
448
|
+
return currentCell.style;
|
449
|
+
}
|
450
|
+
|
451
|
+
return undefined;
|
452
|
+
}
|
453
|
+
|
418
454
|
export function edit(state: Types.StoreState): Types.StoreState {
|
419
455
|
if (isActiveReadOnly(state)) {
|
420
456
|
return state;
|
@@ -593,7 +629,6 @@ export function getKeyDownHandler(
|
|
593
629
|
): KeyDownHandler | undefined {
|
594
630
|
const { key } = event;
|
595
631
|
let handlers;
|
596
|
-
// Order matters
|
597
632
|
if (state.mode === 'edit') {
|
598
633
|
if (event.shiftKey) {
|
599
634
|
handlers = editShiftKeyDownHandlers;
|
@@ -67,6 +67,7 @@ export type StoreState<Cell extends CellBase = CellBase> = {
|
|
67
67
|
lastCommit: null | CellChange<Cell>[];
|
68
68
|
selectedRow: null | number;
|
69
69
|
selectedColumn: null | number;
|
70
|
+
formattedStyle: { open: boolean; style: undefined | React.CSSProperties };
|
70
71
|
};
|
71
72
|
|
72
73
|
export type CellChange<Cell extends CellBase = CellBase> = {
|
@@ -122,6 +123,7 @@ export type DataViewerProps<Cell extends CellBase = CellBase> =
|
|
122
123
|
DataComponentProps<Cell> & {
|
123
124
|
/** Set data of the cell */
|
124
125
|
setCellData: (cell: Cell) => void;
|
126
|
+
setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
|
125
127
|
evaluatedCell: Cell | undefined;
|
126
128
|
};
|
127
129
|
|
@@ -250,4 +252,4 @@ export type CommitChanges<Cell extends CellBase = CellBase> = Array<{
|
|
250
252
|
nextCell: Cell | null;
|
251
253
|
}>;
|
252
254
|
|
253
|
-
export type CreateFormulaParser = (data: Matrix<CellBase>) =>void;
|
255
|
+
export type CreateFormulaParser = (data: Matrix<CellBase>) => void;
|
@@ -30,91 +30,91 @@ export const Default: Story = {
|
|
30
30
|
excelData: {
|
31
31
|
sheets: [
|
32
32
|
{
|
33
|
-
sheetName:
|
33
|
+
sheetName: 'Sheet1',
|
34
34
|
data: [
|
35
35
|
[
|
36
36
|
{
|
37
|
-
value:
|
37
|
+
value: 'A1',
|
38
38
|
style: {
|
39
|
-
fontSize:
|
40
|
-
fontFamily:
|
41
|
-
color:
|
42
|
-
backgroundColor:
|
39
|
+
fontSize: '12px',
|
40
|
+
fontFamily: 'Arial',
|
41
|
+
color: 'var(--drawer-footer-bg)',
|
42
|
+
backgroundColor: 'var(--text-bg-highlight)',
|
43
43
|
},
|
44
44
|
},
|
45
45
|
{
|
46
|
-
value:
|
46
|
+
value: 'SUM(A1+B1)',
|
47
47
|
// isFormula:true,
|
48
48
|
style: {
|
49
|
-
fontSize:
|
50
|
-
fontFamily:
|
51
|
-
color:
|
52
|
-
backgroundColor:
|
49
|
+
fontSize: '12px',
|
50
|
+
fontFamily: 'Arial',
|
51
|
+
color: 'var(--text-bg-highlight)',
|
52
|
+
backgroundColor: 'var(--ff-card-passed-status-bg-color)',
|
53
53
|
},
|
54
54
|
},
|
55
55
|
],
|
56
56
|
[
|
57
57
|
{
|
58
|
-
value:
|
58
|
+
value: 'A2',
|
59
59
|
style: {
|
60
|
-
fontSize:
|
61
|
-
fontFamily:
|
62
|
-
color:
|
63
|
-
backgroundColor:
|
60
|
+
fontSize: '12px',
|
61
|
+
fontFamily: 'Arial',
|
62
|
+
color: 'var(--drawer-footer-bg)',
|
63
|
+
backgroundColor: 'var(--ff-card-passed-status-bg-color)',
|
64
64
|
},
|
65
65
|
},
|
66
66
|
{
|
67
|
-
value:
|
67
|
+
value: 'B2',
|
68
68
|
style: {
|
69
|
-
fontSize:
|
70
|
-
fontFamily:
|
71
|
-
color:
|
72
|
-
backgroundColor:
|
69
|
+
fontSize: '12px',
|
70
|
+
fontFamily: 'Arial',
|
71
|
+
color: 'var(--ff-card-passed-status-bg-color)',
|
72
|
+
backgroundColor: 'var(--text-bg-highlight)',
|
73
73
|
},
|
74
74
|
},
|
75
75
|
],
|
76
76
|
],
|
77
77
|
},
|
78
78
|
{
|
79
|
-
sheetName:
|
79
|
+
sheetName: 'Sheet2',
|
80
80
|
data: [
|
81
81
|
[
|
82
82
|
{
|
83
|
-
value:
|
83
|
+
value: 'Thaneshwaran',
|
84
84
|
style: {
|
85
|
-
fontSize:
|
86
|
-
fontFamily:
|
87
|
-
color:
|
88
|
-
backgroundColor:
|
85
|
+
fontSize: '12px',
|
86
|
+
fontFamily: 'Arial',
|
87
|
+
color: 'var(--text-bg-highlight)',
|
88
|
+
backgroundColor: 'var(--tooltip-bg-color)',
|
89
89
|
},
|
90
90
|
},
|
91
91
|
{
|
92
|
-
value:
|
92
|
+
value: 'waran',
|
93
93
|
style: {
|
94
|
-
fontSize:
|
95
|
-
fontFamily:
|
96
|
-
color:
|
97
|
-
backgroundColor:
|
94
|
+
fontSize: '12px',
|
95
|
+
fontFamily: 'Arial',
|
96
|
+
color: 'var(--text-bg-highlight)',
|
97
|
+
backgroundColor: 'var(--ff-card-passed-status-bg-color)',
|
98
98
|
},
|
99
99
|
},
|
100
100
|
],
|
101
101
|
[
|
102
102
|
{
|
103
|
-
value:
|
103
|
+
value: 'Sheet',
|
104
104
|
style: {
|
105
|
-
fontSize:
|
106
|
-
fontFamily:
|
107
|
-
color:
|
108
|
-
backgroundColor:
|
105
|
+
fontSize: '12px',
|
106
|
+
fontFamily: 'Arial',
|
107
|
+
color: 'var(--drawer-footer-bg)',
|
108
|
+
backgroundColor: 'var(--ff-card-passed-status-bg-color)',
|
109
109
|
},
|
110
110
|
},
|
111
111
|
{
|
112
|
-
value:
|
112
|
+
value: 'Two',
|
113
113
|
style: {
|
114
|
-
fontSize:
|
115
|
-
fontFamily:
|
116
|
-
color:
|
117
|
-
backgroundColor:
|
114
|
+
fontSize: '12px',
|
115
|
+
fontFamily: 'Arial',
|
116
|
+
color: 'var(--ff-card-passed-status-bg-color)',
|
117
|
+
backgroundColor: 'var(--text-bg-highlight)',
|
118
118
|
},
|
119
119
|
},
|
120
120
|
],
|
@@ -154,5 +154,4 @@ export const Default: Story = {
|
|
154
154
|
},
|
155
155
|
};
|
156
156
|
|
157
|
-
|
158
157
|
export default meta;
|