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.
Files changed (97) hide show
  1. package/.storybook/main.ts +7 -1
  2. package/lib/components/Charts/LineChart/types.d.ts +3 -0
  3. package/lib/components/DatePicker/types.d.ts +4 -0
  4. package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +1 -7
  5. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
  6. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +1 -0
  7. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
  8. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
  9. package/lib/components/FileDropzone/types.d.ts +3 -0
  10. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  11. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  12. package/lib/components/Select/Select.stories.d.ts +0 -1
  13. package/lib/components/StateDropdown/StateDropdown.d.ts +1 -1
  14. package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
  15. package/lib/index.d.ts +52 -2
  16. package/lib/index.esm.js +950 -581
  17. package/lib/index.esm.js.map +1 -1
  18. package/lib/index.js +950 -580
  19. package/lib/index.js.map +1 -1
  20. package/package.json +1 -1
  21. package/src/assets/icons/approval_pending.svg +8 -8
  22. package/src/assets/icons/configuration.svg +3 -3
  23. package/src/assets/icons/dashboard_icon.svg +31 -0
  24. package/src/assets/icons/defects.svg +8 -8
  25. package/src/assets/icons/element.svg +4 -4
  26. package/src/assets/icons/info_user.svg +5 -0
  27. package/src/assets/icons/project_element.svg +4 -4
  28. package/src/assets/icons/step_group.svg +10 -10
  29. package/src/assets/icons/variable.svg +3 -3
  30. package/src/assets/styles/_colors.scss +1 -0
  31. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
  32. package/src/components/Charts/LineChart/LineChart.scss +8 -7
  33. package/src/components/Charts/LineChart/LineChart.stories.tsx +170 -51
  34. package/src/components/Charts/LineChart/LineChart.tsx +30 -27
  35. package/src/components/Charts/LineChart/types.ts +22 -20
  36. package/src/components/DatePicker/DatePicker.scss +4 -3
  37. package/src/components/DatePicker/DatePicker.stories.tsx +27 -14
  38. package/src/components/DatePicker/DatePicker.tsx +62 -49
  39. package/src/components/DatePicker/types.ts +5 -0
  40. package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +8 -4
  41. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +2 -2
  42. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +23 -35
  43. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +3 -12
  44. package/src/components/Excel/ExcelFile/ExcelFile.scss +31 -25
  45. package/src/components/Excel/ExcelFile/ExcelFile.tsx +157 -47
  46. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +5 -4
  47. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +3 -3
  48. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +40 -1
  49. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +3 -3
  50. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +10 -0
  51. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +9 -45
  52. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +43 -2
  53. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +40 -5
  54. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +3 -1
  55. package/src/components/Excel/ExcelFile.stories.tsx +42 -43
  56. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +80 -20
  57. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +171 -159
  58. package/src/components/FileDropzone/Dropzone.tsx +2 -0
  59. package/src/components/FileDropzone/FileDropzone.scss +1 -2
  60. package/src/components/FileDropzone/FileDropzone.stories.tsx +3 -0
  61. package/src/components/FileDropzone/FileDropzone.tsx +11 -3
  62. package/src/components/FileDropzone/types.ts +5 -0
  63. package/src/components/Icon/Icon.stories.tsx +5 -4
  64. package/src/components/Icon/iconList.ts +4 -0
  65. package/src/components/MultiSelect/MultiSelect.scss +41 -50
  66. package/src/components/MultiSelect/MultiSelect.tsx +48 -48
  67. package/src/components/Select/Select.scss +11 -1
  68. package/src/components/Select/Select.tsx +2 -2
  69. package/src/components/StateDropdown/StateDropdown.stories.tsx +5 -0
  70. package/src/components/StateDropdown/StateDropdown.tsx +27 -12
  71. package/src/components/StateDropdown/StateDropdownTypes.tsx +6 -0
  72. package/src/components/TableTree/TableTree.scss +17 -15
  73. package/src/components/TableTree/TableTree.tsx +42 -40
  74. package/src/index.ts +2 -0
  75. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  76. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  77. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  78. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  79. package/lib/components/AddButton/AddButton.d.ts +0 -5
  80. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  81. package/lib/components/AddButton/index.d.ts +0 -1
  82. package/lib/components/AddButton/types.d.ts +0 -4
  83. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  84. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  85. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  86. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  87. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  88. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  89. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  90. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  91. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  92. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  93. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  94. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  95. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  96. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  97. /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.clientX,
113
- y: event.clientY - 50,
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
- let options = [
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.clientX,
96
- y: event.clientY - 50,
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 className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
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
- let options = [
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.clientX,
90
- y: event.clientY,
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, handleClickOutside]);
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
- model: new Model(state.model.createFormulaParser, state.model.data),
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
- return { ...state, dragging: false };
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: 'bold',
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: 'italic',
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
- border: `2px solid ${color}`,
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
- border: `1px solid var(--toggle-strip-color)`,
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: "Sheet1",
33
+ sheetName: 'Sheet1',
34
34
  data: [
35
35
  [
36
36
  {
37
- value: "A1",
37
+ value: 'A1',
38
38
  style: {
39
- fontSize: "12px",
40
- fontFamily: "Arial",
41
- color: "var(--text-bg-highlight)",
42
- backgroundColor: "var(--tooltip-bg-color)",
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: "SUM(A1+B1)",
46
+ value: 'SUM(A1+B1)',
47
47
  // isFormula:true,
48
48
  style: {
49
- fontSize: "12px",
50
- fontFamily: "Arial",
51
- color: "var(--text-bg-highlight)",
52
- backgroundColor: "var(--brand-color)",
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: "A2",
58
+ value: 'A2',
59
59
  style: {
60
- fontSize: "12px",
61
- fontFamily: "Arial",
62
- color: "var(--drawer-footer-bg)",
63
- backgroundColor: "var(--brand-color)",
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: "B2",
67
+ value: 'B2',
68
68
  style: {
69
- fontSize: "12px",
70
- fontFamily: "Arial",
71
- color: "var(--brand-color)",
72
- backgroundColor: "var(--text-bg-highlight)",
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: "Sheet2",
79
+ sheetName: 'Sheet2',
80
80
  data: [
81
81
  [
82
82
  {
83
- value: "Thanesh",
83
+ value: 'Thaneshwaran',
84
84
  style: {
85
- fontSize: "12px",
86
- fontFamily: "Arial",
87
- color: "var(--text-bg-highlight)",
88
- backgroundColor: "var(--tooltip-bg-color)",
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: "waran",
92
+ value: 'waran',
93
93
  style: {
94
- fontSize: "12px",
95
- fontFamily: "Arial",
96
- color: "var(--text-bg-highlight)",
97
- backgroundColor: "var(--brand-color)",
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: "Sheet",
103
+ value: 'Sheet',
104
104
  style: {
105
- fontSize: "12px",
106
- fontFamily: "Arial",
107
- color: "var(--drawer-footer-bg)",
108
- backgroundColor: "var(--brand-color)",
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: "Two",
112
+ value: 'Two',
113
113
  style: {
114
- fontSize: "12px",
115
- fontFamily: "Arial",
116
- color: "var(--brand-color)",
117
- backgroundColor: "var(--text-bg-highlight)",
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;