pixel-react 1.5.8 → 1.5.9
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 +1 -7
- package/.storybook/preview-head.html +3 -0
- package/index.scss +5 -0
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.d.ts +2 -2
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +17 -1
- package/lib/components/Excel/Types.d.ts +22 -1
- package/lib/components/Excel/dataConversion.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/index.d.ts +1 -1
- package/lib/index.esm.js +264 -56
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +264 -56
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -2
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- 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/components/Excel/ExcelFile/ExcelFile.tsx +60 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +39 -39
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +34 -28
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +0 -29
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +29 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +33 -0
- package/src/components/Excel/ExcelFile.stories.tsx +77 -67
- package/src/components/Excel/Types.ts +23 -1
- package/src/components/Excel/dataConversion.ts +173 -0
- package/src/components/Typography/Typography.scss +1 -36
- 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/src/assets/fonts/Poppins-Bold.ttf +0 -0
- package/src/assets/fonts/Poppins-Bold.woff2 +0 -0
- package/src/assets/fonts/Poppins-Medium.ttf +0 -0
- package/src/assets/fonts/Poppins-Medium.woff2 +0 -0
- package/src/assets/fonts/Poppins-Regular.ttf +0 -0
- package/src/assets/fonts/Poppins-Regular.woff2 +0 -0
- package/src/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/src/assets/fonts/Poppins-SemiBold.woff2 +0 -0
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -1,6 +1,7 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import classNames from 'classnames';
|
3
3
|
import * as Actions from './actions';
|
4
|
+
import * as Point from './point';
|
4
5
|
import * as Types from './types';
|
5
6
|
import useDispatch from './use-dispatch';
|
6
7
|
import useSelector from './use-selector';
|
@@ -15,7 +16,10 @@ const RowIndicator: Types.RowIndicatorComponent = ({
|
|
15
16
|
deleteRow,
|
16
17
|
data,
|
17
18
|
}) => {
|
18
|
-
const
|
19
|
+
const dispatch = useDispatch();
|
20
|
+
const rowHeight = useSelector(
|
21
|
+
(state) => state.rowDimensions[row]?.height || 28
|
22
|
+
);
|
19
23
|
|
20
24
|
const options = [
|
21
25
|
{
|
@@ -38,37 +42,38 @@ const RowIndicator: Types.RowIndicatorComponent = ({
|
|
38
42
|
},
|
39
43
|
];
|
40
44
|
|
41
|
-
const onMouseDown =
|
42
|
-
|
45
|
+
const onMouseDown = React.useCallback(
|
46
|
+
(event: React.MouseEvent) => {
|
47
|
+
onSelect(row, event.shiftKey);
|
43
48
|
|
44
|
-
|
45
|
-
const
|
46
|
-
setHeight(newHeight);
|
49
|
+
const startY = event.clientY;
|
50
|
+
const initialHeight = rowHeight;
|
47
51
|
|
48
|
-
const
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
52
|
+
const onMouseMove = (moveEvent: MouseEvent) => {
|
53
|
+
const newHeight = Math.max(
|
54
|
+
28,
|
55
|
+
initialHeight + (moveEvent.clientY - startY)
|
56
|
+
);
|
57
|
+
dispatch(Actions.setRowHeight(row, newHeight));
|
58
|
+
};
|
54
59
|
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
selectedSingleRow.style.height = `${newHeight}px`;
|
61
|
-
}
|
62
|
-
};
|
60
|
+
const onMouseUp = () => {
|
61
|
+
document.removeEventListener('mousemove', onMouseMove);
|
62
|
+
document.removeEventListener('mouseup', onMouseUp);
|
63
|
+
dispatch(Actions.dragEnd());
|
64
|
+
};
|
63
65
|
|
64
|
-
|
65
|
-
document.
|
66
|
-
|
67
|
-
}
|
66
|
+
document.addEventListener('mousemove', onMouseMove);
|
67
|
+
document.addEventListener('mouseup', onMouseUp);
|
68
|
+
dispatch(Actions.dragEnd());
|
69
|
+
},
|
70
|
+
[onSelect, rowHeight, row]
|
71
|
+
);
|
68
72
|
|
69
|
-
|
70
|
-
|
71
|
-
|
73
|
+
const activate = React.useCallback(
|
74
|
+
(point: Point.Point) => dispatch(Actions.activate(point)),
|
75
|
+
[dispatch]
|
76
|
+
);
|
72
77
|
|
73
78
|
const handleClick = React.useCallback(
|
74
79
|
(event: React.MouseEvent) => {
|
@@ -97,7 +102,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
|
|
97
102
|
|
98
103
|
return (
|
99
104
|
<th
|
100
|
-
style={{ height: `${
|
105
|
+
style={{ height: `${rowHeight}px`, position: 'relative' }} //Dynamic value, Inline Styling required
|
101
106
|
className={classNames('ff-spreadsheet-header', {
|
102
107
|
'ff-spreadsheet-header--selected': selected,
|
103
108
|
})}
|
@@ -108,6 +113,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
|
|
108
113
|
{label !== undefined ? label : row + 1}
|
109
114
|
<div
|
110
115
|
onMouseDown={onMouseDown}
|
116
|
+
onClick={() => activate({ row, column: -1 })}
|
111
117
|
style={{
|
112
118
|
zIndex: 'inherit',
|
113
119
|
height: '2px',
|
@@ -75,35 +75,6 @@
|
|
75
75
|
text-align: left;
|
76
76
|
box-sizing: border-box;
|
77
77
|
user-select: none;
|
78
|
-
|
79
|
-
.ff-option-card {
|
80
|
-
position: absolute;
|
81
|
-
border: 1px solid var(--option-card-border-color);
|
82
|
-
background: var(--option-card-bg-color);
|
83
|
-
border-radius: 4px;
|
84
|
-
margin: 2px;
|
85
|
-
min-height: 32px;
|
86
|
-
min-width: 111px;
|
87
|
-
z-index: 100000;
|
88
|
-
white-space: nowrap;
|
89
|
-
|
90
|
-
.ff-options {
|
91
|
-
@extend .fontSm;
|
92
|
-
cursor: pointer;
|
93
|
-
border-radius: 4px;
|
94
|
-
display: flex;
|
95
|
-
align-items: center;
|
96
|
-
padding: 8px;
|
97
|
-
line-height: 16px;
|
98
|
-
gap: 8px;
|
99
|
-
&:hover {
|
100
|
-
background-color: var(--hover-color);
|
101
|
-
}
|
102
|
-
label {
|
103
|
-
cursor: pointer;
|
104
|
-
}
|
105
|
-
}
|
106
|
-
}
|
107
78
|
}
|
108
79
|
|
109
80
|
.ff-spreadsheet-header {
|
@@ -44,11 +44,38 @@ export const ADD_ROW_TOP = 'ADD_ROW_TOP';
|
|
44
44
|
export const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
|
45
45
|
export const DELETE_ROW = 'DELETE_ROW';
|
46
46
|
export const DELETE_COLUMN = 'DELETE_COLUMN';
|
47
|
+
export const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
|
48
|
+
export const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
|
47
49
|
|
48
50
|
export type BaseAction<T extends string> = {
|
49
51
|
type: T;
|
50
52
|
};
|
51
53
|
|
54
|
+
export type SetRowHeight = BaseAction<typeof SET_ROW_HEIGHT> & {
|
55
|
+
payload: { row: number; height: number };
|
56
|
+
};
|
57
|
+
|
58
|
+
export function setRowHeight(row: number, height: number): SetRowHeight {
|
59
|
+
return {
|
60
|
+
type: SET_ROW_HEIGHT,
|
61
|
+
payload: { row, height },
|
62
|
+
};
|
63
|
+
}
|
64
|
+
|
65
|
+
export type SetColumnPosition = BaseAction<typeof SET_COLUMN_POSITION> & {
|
66
|
+
payload: { column: number; width: number };
|
67
|
+
};
|
68
|
+
|
69
|
+
export function setColumnPosition(
|
70
|
+
column: number,
|
71
|
+
width: number
|
72
|
+
): SetColumnPosition {
|
73
|
+
return {
|
74
|
+
type: SET_COLUMN_POSITION,
|
75
|
+
payload: { column, width },
|
76
|
+
};
|
77
|
+
}
|
78
|
+
|
52
79
|
export type BoldStyle = BaseAction<typeof BOLD> & {
|
53
80
|
payload: {
|
54
81
|
data: Matrix<CellBase>;
|
@@ -516,4 +543,6 @@ export type Action =
|
|
516
543
|
| AddColumnLeft
|
517
544
|
| DeleteRow
|
518
545
|
| DeleteColumn
|
546
|
+
| SetRowHeight
|
547
|
+
| SetColumnPosition
|
519
548
|
| BlurAction;
|
@@ -571,6 +571,39 @@ export default function reducer(
|
|
571
571
|
return state;
|
572
572
|
}
|
573
573
|
|
574
|
+
case Actions.SET_ROW_HEIGHT: {
|
575
|
+
const { row, height } = action.payload;
|
576
|
+
const prevDimensions = state.rowDimensions[row] || { top: 0, height: 0 };
|
577
|
+
return {
|
578
|
+
...state,
|
579
|
+
rowDimensions: {
|
580
|
+
...state.rowDimensions,
|
581
|
+
[row]: {
|
582
|
+
top: prevDimensions.top,
|
583
|
+
height,
|
584
|
+
},
|
585
|
+
},
|
586
|
+
};
|
587
|
+
}
|
588
|
+
|
589
|
+
case Actions.SET_COLUMN_POSITION: {
|
590
|
+
const { column, width } = action.payload;
|
591
|
+
const prevDimensions = state.columnDimensions[column] || {
|
592
|
+
left: 0,
|
593
|
+
width: 0,
|
594
|
+
};
|
595
|
+
return {
|
596
|
+
...state,
|
597
|
+
columnDimensions: {
|
598
|
+
...state.columnDimensions,
|
599
|
+
[column]: {
|
600
|
+
left: prevDimensions.left,
|
601
|
+
width,
|
602
|
+
},
|
603
|
+
},
|
604
|
+
};
|
605
|
+
}
|
606
|
+
|
574
607
|
case Actions.DRAG_START: {
|
575
608
|
return { ...state, dragging: true };
|
576
609
|
}
|
@@ -30,91 +30,101 @@ export const Default: Story = {
|
|
30
30
|
excelData: {
|
31
31
|
sheets: [
|
32
32
|
{
|
33
|
-
sheetName: '
|
33
|
+
sheetName: 'fireflink',
|
34
34
|
data: [
|
35
35
|
[
|
36
36
|
{
|
37
|
-
value: '
|
37
|
+
value: 'Test Sample Data 1',
|
38
38
|
style: {
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
39
|
+
name: 'Arial',
|
40
|
+
size: 11,
|
41
|
+
bold: true,
|
42
|
+
italic: false,
|
43
|
+
color: 'ffffff', // Sample data from backend without #
|
44
|
+
backgroundColor: '434db8', // Sample data from backend without #
|
45
|
+
borderColor: 'F2F2F2', // Sample data from backend without #
|
46
|
+
border: {
|
47
|
+
top: 'NONE',
|
48
|
+
bottom: 'NONE',
|
49
|
+
left: 'NONE',
|
50
|
+
right: 'NONE',
|
51
|
+
},
|
52
|
+
alignment: {
|
53
|
+
horizontal: 'GENERAL',
|
54
|
+
vertical: 'BOTTOM',
|
55
|
+
wrapText: false,
|
56
|
+
},
|
43
57
|
},
|
44
58
|
},
|
45
59
|
{
|
46
|
-
value: '
|
47
|
-
// isFormula:true,
|
60
|
+
value: 'Test Data 2',
|
48
61
|
style: {
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
62
|
+
name: 'Arial',
|
63
|
+
size: 12,
|
64
|
+
bold: true,
|
65
|
+
italic: true,
|
66
|
+
color: 'EB5B00', // Sample data from backend without #
|
67
|
+
backgroundColor: '88C273', // Sample data from backend without #
|
68
|
+
borderColor: 'F2F2F2', // Sample data from backend without #
|
69
|
+
border: {
|
70
|
+
top: 'NONE',
|
71
|
+
bottom: 'NONE',
|
72
|
+
left: 'NONE',
|
73
|
+
right: 'NONE',
|
74
|
+
},
|
75
|
+
alignment: {
|
76
|
+
horizontal: 'GENERAL',
|
77
|
+
vertical: 'BOTTOM',
|
78
|
+
wrapText: false,
|
79
|
+
},
|
53
80
|
},
|
54
81
|
},
|
55
82
|
],
|
56
83
|
[
|
57
84
|
{
|
58
|
-
value: '
|
85
|
+
value: 'Test Data 3',
|
59
86
|
style: {
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
87
|
+
name: 'Arial',
|
88
|
+
size: 11,
|
89
|
+
bold: false,
|
90
|
+
italic: false,
|
91
|
+
color: '000000', // Sample data from backend without #
|
92
|
+
backgroundColor: 'EB5B00', // Sample data from backend without #
|
93
|
+
borderColor: 'F2F2F2', // Sample data from backend without #
|
94
|
+
border: {
|
95
|
+
top: 'NONE',
|
96
|
+
bottom: 'NONE',
|
97
|
+
left: 'NONE',
|
98
|
+
right: 'NONE',
|
99
|
+
},
|
100
|
+
alignment: {
|
101
|
+
horizontal: 'GENERAL',
|
102
|
+
vertical: 'BOTTOM',
|
103
|
+
wrapText: false,
|
104
|
+
},
|
64
105
|
},
|
65
106
|
},
|
66
107
|
{
|
67
|
-
value: '
|
108
|
+
value: 'Test Sample Data 4',
|
68
109
|
style: {
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
color: 'var(--text-bg-highlight)',
|
88
|
-
backgroundColor: 'var(--tooltip-bg-color)',
|
89
|
-
},
|
90
|
-
},
|
91
|
-
{
|
92
|
-
value: 'waran',
|
93
|
-
style: {
|
94
|
-
fontSize: '12px',
|
95
|
-
fontFamily: 'Arial',
|
96
|
-
color: 'var(--text-bg-highlight)',
|
97
|
-
backgroundColor: 'var(--ff-card-passed-status-bg-color)',
|
98
|
-
},
|
99
|
-
},
|
100
|
-
],
|
101
|
-
[
|
102
|
-
{
|
103
|
-
value: 'Sheet',
|
104
|
-
style: {
|
105
|
-
fontSize: '12px',
|
106
|
-
fontFamily: 'Arial',
|
107
|
-
color: 'var(--drawer-footer-bg)',
|
108
|
-
backgroundColor: 'var(--ff-card-passed-status-bg-color)',
|
109
|
-
},
|
110
|
-
},
|
111
|
-
{
|
112
|
-
value: 'Two',
|
113
|
-
style: {
|
114
|
-
fontSize: '12px',
|
115
|
-
fontFamily: 'Arial',
|
116
|
-
color: 'var(--ff-card-passed-status-bg-color)',
|
117
|
-
backgroundColor: 'var(--text-bg-highlight)',
|
110
|
+
name: 'Arial',
|
111
|
+
size: 11,
|
112
|
+
bold: false,
|
113
|
+
italic: false,
|
114
|
+
color: '3D0301', // Sample data from backend without #
|
115
|
+
backgroundColor: 'C6E7FF', // Sample data from backend without #
|
116
|
+
borderColor: 'F2F2F2', // Sample data from backend without #
|
117
|
+
border: {
|
118
|
+
top: 'NONE',
|
119
|
+
bottom: 'NONE',
|
120
|
+
left: 'NONE',
|
121
|
+
right: 'NONE',
|
122
|
+
},
|
123
|
+
alignment: {
|
124
|
+
horizontal: 'GENERAL',
|
125
|
+
vertical: 'BOTTOM',
|
126
|
+
wrapText: false,
|
127
|
+
},
|
118
128
|
},
|
119
129
|
},
|
120
130
|
],
|
@@ -31,10 +31,32 @@ interface WorkData {
|
|
31
31
|
value: string;
|
32
32
|
|
33
33
|
/** Styling options for the cell */
|
34
|
-
style:
|
34
|
+
style: BackendStyle;
|
35
35
|
type?: boolean;
|
36
36
|
}
|
37
37
|
|
38
|
+
type BackendStyle = {
|
39
|
+
name: string;
|
40
|
+
size: number;
|
41
|
+
bold: boolean;
|
42
|
+
italic: boolean;
|
43
|
+
color: string;
|
44
|
+
backgroundColor: string;
|
45
|
+
borderColor: string;
|
46
|
+
underline:string;
|
47
|
+
border: {
|
48
|
+
top: string;
|
49
|
+
bottom: string;
|
50
|
+
left: string;
|
51
|
+
right: string;
|
52
|
+
};
|
53
|
+
alignment: {
|
54
|
+
horizontal: string;
|
55
|
+
vertical: string;
|
56
|
+
wrapText: boolean;
|
57
|
+
};
|
58
|
+
};
|
59
|
+
|
38
60
|
/** A generic type to represent a 2D matrix of any type (or undefined values) */
|
39
61
|
type Matrix<T> = (T | undefined)[][];
|
40
62
|
|
@@ -0,0 +1,173 @@
|
|
1
|
+
const getTextAlignment = (
|
2
|
+
alignment: string
|
3
|
+
): 'left' | 'right' | 'center' | 'justify' => {
|
4
|
+
switch (alignment.toLowerCase()) {
|
5
|
+
case 'left':
|
6
|
+
return 'left';
|
7
|
+
case 'right':
|
8
|
+
return 'right';
|
9
|
+
case 'center':
|
10
|
+
return 'center';
|
11
|
+
case 'justify':
|
12
|
+
return 'justify';
|
13
|
+
default:
|
14
|
+
return 'left';
|
15
|
+
}
|
16
|
+
};
|
17
|
+
|
18
|
+
const getTextDecoration = (
|
19
|
+
textDecoration: string
|
20
|
+
): 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy' => {
|
21
|
+
if (!textDecoration) {
|
22
|
+
return 'solid';
|
23
|
+
}
|
24
|
+
switch (textDecoration.toLowerCase()) {
|
25
|
+
case 'solid':
|
26
|
+
return 'solid';
|
27
|
+
case 'dotted':
|
28
|
+
return 'dotted';
|
29
|
+
case 'dashed':
|
30
|
+
return 'dashed';
|
31
|
+
case 'wavy':
|
32
|
+
return 'wavy';
|
33
|
+
default:
|
34
|
+
return 'solid';
|
35
|
+
}
|
36
|
+
};
|
37
|
+
|
38
|
+
const getTextAlignmentBack = (
|
39
|
+
alignment: 'left' | 'right' | 'center' | 'justify'
|
40
|
+
): string => {
|
41
|
+
switch (alignment) {
|
42
|
+
case 'left':
|
43
|
+
return 'left';
|
44
|
+
case 'right':
|
45
|
+
return 'right';
|
46
|
+
case 'center':
|
47
|
+
return 'center';
|
48
|
+
case 'justify':
|
49
|
+
return 'justify';
|
50
|
+
default:
|
51
|
+
return 'left';
|
52
|
+
}
|
53
|
+
};
|
54
|
+
|
55
|
+
export const getTextDecorationBack = (
|
56
|
+
textDecoration: string
|
57
|
+
): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
|
58
|
+
switch (textDecoration.toLowerCase()) {
|
59
|
+
case 'solid':
|
60
|
+
return 'solid';
|
61
|
+
case 'dotted':
|
62
|
+
return 'dotted';
|
63
|
+
case 'dashed':
|
64
|
+
return 'dashed';
|
65
|
+
case 'wavy':
|
66
|
+
return 'wavy';
|
67
|
+
case 'underline':
|
68
|
+
return 'NONE';
|
69
|
+
default:
|
70
|
+
return 'solid';
|
71
|
+
}
|
72
|
+
};
|
73
|
+
|
74
|
+
export function convertStyleToFrontend(
|
75
|
+
backendStyle: BackendStyle
|
76
|
+
): React.CSSProperties {
|
77
|
+
return {
|
78
|
+
fontSize: `${backendStyle.size}px`,
|
79
|
+
fontFamily: backendStyle.name,
|
80
|
+
color: `#${backendStyle.color}`,
|
81
|
+
backgroundColor: `#${backendStyle.backgroundColor}`,
|
82
|
+
fontWeight: backendStyle.bold ? 'bold' : 'normal',
|
83
|
+
fontStyle: backendStyle.italic ? 'italic' : 'normal',
|
84
|
+
textDecoration: backendStyle.underline ? 'underline' : 'value',
|
85
|
+
textDecorationStyle: getTextDecoration(backendStyle.underline),
|
86
|
+
borderTop:
|
87
|
+
backendStyle.border.top === 'NONE'
|
88
|
+
? 'none'
|
89
|
+
: `1px solid ${backendStyle.borderColor}`,
|
90
|
+
borderRight:
|
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}`,
|
102
|
+
textAlign: getTextAlignment(backendStyle.alignment.horizontal),
|
103
|
+
};
|
104
|
+
}
|
105
|
+
|
106
|
+
const getBorderStyle = (
|
107
|
+
border: string | undefined
|
108
|
+
): 'NONE' | 'THIN' | 'MEDIUM' | 'THICK' => {
|
109
|
+
if (!border || border === 'none') {
|
110
|
+
return 'NONE';
|
111
|
+
}
|
112
|
+
if (
|
113
|
+
border.includes('solid') ||
|
114
|
+
border.includes('dashed') ||
|
115
|
+
border.includes('dotted')
|
116
|
+
) {
|
117
|
+
if (border.includes('2px') || border.includes('thin')) {
|
118
|
+
return 'THIN';
|
119
|
+
} else if (border.includes('3px') || border.includes('medium')) {
|
120
|
+
return 'MEDIUM';
|
121
|
+
} else if (border.includes('4px') || border.includes('thick')) {
|
122
|
+
return 'THICK';
|
123
|
+
}
|
124
|
+
}
|
125
|
+
return 'THIN';
|
126
|
+
};
|
127
|
+
|
128
|
+
export const convertStyleToBackend = (
|
129
|
+
frontendStyle: React.CSSProperties
|
130
|
+
): BackendStyle => {
|
131
|
+
return {
|
132
|
+
name: frontendStyle.fontFamily || 'Arial',
|
133
|
+
size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
|
134
|
+
bold: frontendStyle.fontWeight === 'bold',
|
135
|
+
italic: frontendStyle.fontStyle === 'italic',
|
136
|
+
underline:"solid",
|
137
|
+
color: frontendStyle.color?.replace('#', '') || '000000',
|
138
|
+
backgroundColor:
|
139
|
+
frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
|
140
|
+
borderColor:
|
141
|
+
frontendStyle.borderTop &&
|
142
|
+
frontendStyle.borderTop.toString().includes('solid')
|
143
|
+
? 'F2F2F2'
|
144
|
+
: '000000',
|
145
|
+
border: {
|
146
|
+
top: getBorderStyle(
|
147
|
+
frontendStyle.borderTop ? frontendStyle.borderTop.toString() : undefined
|
148
|
+
),
|
149
|
+
right: getBorderStyle(
|
150
|
+
frontendStyle.borderRight
|
151
|
+
? frontendStyle.borderRight.toString()
|
152
|
+
: undefined
|
153
|
+
),
|
154
|
+
bottom: getBorderStyle(
|
155
|
+
frontendStyle.borderBottom
|
156
|
+
? frontendStyle.borderBottom.toString()
|
157
|
+
: undefined
|
158
|
+
),
|
159
|
+
left: getBorderStyle(
|
160
|
+
frontendStyle.borderLeft
|
161
|
+
? frontendStyle.borderLeft.toString()
|
162
|
+
: undefined
|
163
|
+
),
|
164
|
+
},
|
165
|
+
alignment: {
|
166
|
+
horizontal: getTextAlignmentBack(
|
167
|
+
frontendStyle.textAlign as 'left' | 'right' | 'center' | 'justify'
|
168
|
+
),
|
169
|
+
vertical: 'BOTTOM',
|
170
|
+
wrapText: false,
|
171
|
+
},
|
172
|
+
};
|
173
|
+
};
|
@@ -1,43 +1,8 @@
|
|
1
1
|
@mixin fontPoppins($size: 16px) {
|
2
|
-
font-family: 'Poppins';
|
2
|
+
font-family: 'Poppins', sans-serif;
|
3
3
|
font-size: $size;
|
4
4
|
}
|
5
5
|
|
6
|
-
/* poppins-latin-400-normal */
|
7
|
-
@font-face {
|
8
|
-
font-family: 'Poppins';
|
9
|
-
font-style: normal;
|
10
|
-
font-display: swap;
|
11
|
-
font-weight: 400;
|
12
|
-
src: url(@fontsource/poppins/files/poppins-latin-400-normal.woff2) format('woff2'), url(@fontsource/poppins/files/poppins-latin-400-normal.woff) format('woff');
|
13
|
-
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
14
|
-
}
|
15
|
-
|
16
|
-
|
17
|
-
// @font-face {
|
18
|
-
// font-family: 'Poppins';
|
19
|
-
// font-weight: 500;
|
20
|
-
// src:
|
21
|
-
// local('Poppins-Medium'),
|
22
|
-
// url(../../assets/fonts/Poppins-Medium.woff2) format('woff2');
|
23
|
-
// }
|
24
|
-
|
25
|
-
// @font-face {
|
26
|
-
// font-family: 'Poppins';
|
27
|
-
// font-weight: 600;
|
28
|
-
// src:
|
29
|
-
// local('Poppins-SemiBold'),
|
30
|
-
// url(../../assets/fonts/Poppins-SemiBold.woff2) format('woff2');
|
31
|
-
// }
|
32
|
-
|
33
|
-
// @font-face {
|
34
|
-
// font-family: 'Poppins';
|
35
|
-
// font-weight: 700;
|
36
|
-
// src:
|
37
|
-
// local('Poppins-Bold'),
|
38
|
-
// url(../../assets/fonts/Poppins-Bold.woff2) format('woff2');
|
39
|
-
// }
|
40
|
-
|
41
6
|
.ff-text {
|
42
7
|
@include fontPoppins();
|
43
8
|
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './AddButton';
|