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.
- 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/StateDropdown/StateDropdown.d.ts +1 -1
- package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
- package/lib/index.d.ts +49 -2
- package/lib/index.esm.js +899 -550
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +899 -549
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/dashboard_icon.svg +31 -0
- package/src/assets/styles/_colors.scss +1 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
- 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 +2 -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
@@ -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;
|
@@ -1,36 +1,96 @@
|
|
1
|
-
.excel-
|
2
|
-
|
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
|
-
|
8
|
-
justify-content:
|
9
|
-
|
10
|
-
|
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-
|
27
|
+
.ff-excel-toolbar-text {
|
28
|
+
width: 100px;
|
29
|
+
height: 24px;
|
14
30
|
display: flex;
|
15
|
-
|
16
|
-
justify-content: space-
|
17
|
-
|
18
|
-
|
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-
|
40
|
+
.ff-excel-toolbar-icon {
|
41
|
+
width: 88px;
|
42
|
+
height: 24px;
|
29
43
|
display: flex;
|
30
|
-
|
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-
|
34
|
-
display:
|
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
|
}
|