pixel-react 1.5.5 → 1.5.6

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 (57) hide show
  1. package/lib/components/DatePicker/types.d.ts +4 -0
  2. package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +1 -7
  3. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
  4. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +1 -0
  5. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
  6. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
  7. package/lib/components/FileDropzone/types.d.ts +3 -0
  8. package/lib/components/StateDropdown/StateDropdown.d.ts +1 -1
  9. package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
  10. package/lib/index.d.ts +49 -2
  11. package/lib/index.esm.js +899 -550
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +899 -549
  14. package/lib/index.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/assets/icons/dashboard_icon.svg +31 -0
  17. package/src/assets/styles/_colors.scss +1 -0
  18. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
  19. package/src/components/DatePicker/DatePicker.scss +4 -3
  20. package/src/components/DatePicker/DatePicker.stories.tsx +27 -14
  21. package/src/components/DatePicker/DatePicker.tsx +62 -49
  22. package/src/components/DatePicker/types.ts +5 -0
  23. package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +8 -4
  24. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +2 -2
  25. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +23 -35
  26. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +3 -12
  27. package/src/components/Excel/ExcelFile/ExcelFile.scss +31 -25
  28. package/src/components/Excel/ExcelFile/ExcelFile.tsx +157 -47
  29. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +5 -4
  30. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +3 -3
  31. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +40 -1
  32. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +3 -3
  33. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +10 -0
  34. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +9 -45
  35. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +43 -2
  36. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +40 -5
  37. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +3 -1
  38. package/src/components/Excel/ExcelFile.stories.tsx +42 -43
  39. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +80 -20
  40. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +171 -159
  41. package/src/components/FileDropzone/Dropzone.tsx +2 -0
  42. package/src/components/FileDropzone/FileDropzone.scss +1 -2
  43. package/src/components/FileDropzone/FileDropzone.stories.tsx +3 -0
  44. package/src/components/FileDropzone/FileDropzone.tsx +11 -3
  45. package/src/components/FileDropzone/types.ts +5 -0
  46. package/src/components/Icon/Icon.stories.tsx +5 -4
  47. package/src/components/Icon/iconList.ts +2 -0
  48. package/src/components/MultiSelect/MultiSelect.scss +41 -50
  49. package/src/components/MultiSelect/MultiSelect.tsx +48 -48
  50. package/src/components/Select/Select.scss +11 -1
  51. package/src/components/Select/Select.tsx +2 -2
  52. package/src/components/StateDropdown/StateDropdown.stories.tsx +5 -0
  53. package/src/components/StateDropdown/StateDropdown.tsx +27 -12
  54. package/src/components/StateDropdown/StateDropdownTypes.tsx +6 -0
  55. package/src/components/TableTree/TableTree.scss +17 -15
  56. package/src/components/TableTree/TableTree.tsx +42 -40
  57. package/src/index.ts +2 -0
@@ -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;
@@ -1,36 +1,96 @@
1
- .excel-row {
2
- height: 42px;
1
+ .ff-excel-toolbar {
2
+ display: flex;
3
+ height: 32px;
3
4
  align-items: center;
4
5
 
5
- .excel-toolbar {
6
+ .ff-excel-toolbar-divider {
7
+ width: 1px;
8
+ height: 24px;
9
+ background-color: var(--excel-toolbar-divider);
10
+ margin: 0 24px;
11
+ border-radius: 1px;
12
+ z-index: 1000;
13
+ }
14
+
15
+ .ff-excel-toolbar-font {
6
16
  display: flex;
7
- align-items: center;
8
- justify-content: start;
9
- width: 100%;
10
- gap: 10px;
17
+ gap: 8px;
18
+ justify-content: space-between;
19
+ .ff-excel-toolbar-font-family {
20
+ width: 120px;
21
+ }
22
+ .ff-excel-toolbar-font-size {
23
+ width: 56px;
24
+ }
11
25
  }
12
26
 
13
- .excel-toolbar-center {
27
+ .ff-excel-toolbar-text {
28
+ width: 100px;
29
+ height: 24px;
14
30
  display: flex;
15
- align-items: center;
16
- justify-content: space-evenly;
17
- width: 100%;
18
- gap: 10px;
19
- .menu-option {
31
+ gap: 8px;
32
+ justify-content: space-between;
33
+
34
+ .ff-excel-toolbar-icon-underline {
20
35
  display: flex;
21
- flex-direction: column;
22
36
  align-items: center;
23
- justify-content: center;
24
- cursor: pointer;
25
37
  }
26
38
  }
27
39
 
28
- .excel-toolbar-menu {
40
+ .ff-excel-toolbar-icon {
41
+ width: 88px;
42
+ height: 24px;
29
43
  display: flex;
30
- align-items: center;
44
+ gap: 8px;
45
+ justify-content: space-between;
46
+
47
+ .ff-excel-toolbar-icon-color {
48
+ width: 24px;
49
+ height: 24px;
50
+ border-radius: 4px;
51
+ position: relative;
52
+ display: flex;
53
+ flex-direction: column;
54
+ align-items: center;
55
+ &:hover {
56
+ border-radius: 4px;
57
+ background-color: var(--icon-hover-color);
58
+ }
59
+ .ff-icon-dark & {
60
+ background-color: var(--brand-color);
61
+
62
+ &.ff-icon-click:hover {
63
+ background-color: var(--primary-button-text-color);
64
+ svg path {
65
+ fill: var(--brand-color);
66
+ }
67
+ }
68
+ }
69
+ &:hover {
70
+ border-radius: 4px;
71
+ background-color: var(--icon-hover-color);
72
+ }
73
+ .ff-icon-dark & {
74
+ background-color: var(--brand-color);
75
+
76
+ &.ff-icon-click:hover {
77
+ background-color: var(--primary-button-text-color);
78
+ svg path {
79
+ fill: var(--brand-color);
80
+ }
81
+ }
82
+ }
83
+ }
31
84
  }
32
85
 
33
- .excel-toolbar-hide {
34
- display: none;
86
+ .ff-excel-toolbar-menu {
87
+ display: flex;
88
+ align-items: center;
89
+ width: 36px;
90
+ height: 24px;
91
+ .ff-excel-toolbar-menu-option {
92
+ display: flex;
93
+ align-items: center;
94
+ }
35
95
  }
36
96
  }