pixel-react 1.6.0 → 1.6.2
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/AppHeader/AppHeader.d.ts +1 -0
- package/lib/components/AppHeader/types.d.ts +18 -6
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MachineInputField/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
- package/lib/components/PopUpModal/types.d.ts +14 -0
- package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
- package/lib/components/TableTree/data.d.ts +36 -2
- package/lib/components/TableTree/types.d.ts +3 -4
- package/lib/index.d.ts +56 -17
- package/lib/index.esm.js +917 -552
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +917 -551
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +5 -14
- package/src/assets/Themes/DarkTheme.scss +5 -2
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/arrow_up.svg +1 -1
- 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/assets/icons/web_service_icon.svg +3 -3
- package/src/assets/styles/_fonts.scss +4 -2
- package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
- package/src/components/AppHeader/AppHeader.tsx +158 -139
- package/src/components/AppHeader/types.ts +19 -6
- package/src/components/Charts/BarChart/BarChart.scss +34 -34
- package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
- package/src/components/Charts/BarChart/BarChart.tsx +79 -55
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
- package/src/components/Charts/LineChart/LineChart.scss +13 -4
- package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
- package/src/components/Charts/LineChart/LineChart.tsx +143 -131
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
- package/src/components/Charts/PieChart/PieChart.scss +5 -3
- package/src/components/Charts/PieChart/PieChart.tsx +1 -2
- package/src/components/DatePicker/DatePicker.scss +15 -1
- package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
- package/src/components/Icon/Icons.scss +1 -1
- package/src/components/MachineInputField/MachineInputField.scss +15 -2
- package/src/components/MachineInputField/MachineInputField.tsx +17 -3
- package/src/components/MachineInputField/types.ts +1 -1
- package/src/components/PopUpModal/PopUpModal.scss +36 -0
- package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
- package/src/components/PopUpModal/PopUpModal.tsx +85 -0
- package/src/components/PopUpModal/types.ts +14 -0
- package/src/components/RadioGroup/RadioGroup.scss +7 -0
- package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
- package/src/components/RadioGroup/RadioGroup.tsx +16 -0
- package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
- package/src/components/Select/Select.tsx +2 -3
- package/src/components/Select/components/Dropdown.tsx +34 -34
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/types.ts +18 -3
- package/src/components/TableTree/TableTree.stories.tsx +145 -98
- package/src/components/TableTree/TableTree.tsx +49 -14
- package/src/components/TableTree/data.ts +32 -391
- package/src/components/TableTree/types.ts +3 -4
- package/src/index.ts +3 -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
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
|
|
2
2
|
import { MultiRadialChartProps, ChartItem, LegendType } from './types';
|
3
3
|
import './MultiRadialChart.scss';
|
4
4
|
import Typography from '../../Typography';
|
5
|
+
import { truncateText } from '../../../utils/truncateText/truncateText';
|
5
6
|
|
6
7
|
const calculateArc = (
|
7
8
|
centerX: number,
|
@@ -30,7 +31,17 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
30
31
|
legendType = 'numberLegend',
|
31
32
|
isLegendDetails = true,
|
32
33
|
}) => {
|
33
|
-
const [
|
34
|
+
const [tooltip, setTooltip] = useState<{
|
35
|
+
visible: boolean;
|
36
|
+
x: number;
|
37
|
+
y: number;
|
38
|
+
content: string;
|
39
|
+
}>({
|
40
|
+
visible: false,
|
41
|
+
x: 0,
|
42
|
+
y: 0,
|
43
|
+
content: '',
|
44
|
+
});
|
34
45
|
|
35
46
|
const totalBarValue = barValues.reduce(
|
36
47
|
(acc, status) => acc + status.value,
|
@@ -59,7 +70,11 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
59
70
|
>
|
60
71
|
{item.value}
|
61
72
|
</Typography>
|
62
|
-
<Typography
|
73
|
+
<Typography
|
74
|
+
fontSize={10}
|
75
|
+
className="ff-legend-key"
|
76
|
+
color=" var(--text-color)"
|
77
|
+
>
|
63
78
|
{item.label}
|
64
79
|
</Typography>
|
65
80
|
</div>
|
@@ -80,7 +95,12 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
80
95
|
>
|
81
96
|
<Typography fontSize={10}>{item.value}</Typography>
|
82
97
|
</span>
|
83
|
-
<Typography
|
98
|
+
<Typography
|
99
|
+
className="ff-legend-key"
|
100
|
+
color=" var(--text-color)"
|
101
|
+
>
|
102
|
+
{item.label}
|
103
|
+
</Typography>
|
84
104
|
</div>
|
85
105
|
))}
|
86
106
|
</div>
|
@@ -91,6 +111,38 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
91
111
|
}
|
92
112
|
};
|
93
113
|
|
114
|
+
const handleMouseEnter = (e: React.MouseEvent, content: string) => {
|
115
|
+
const { clientX, clientY } = e;
|
116
|
+
setTooltip({
|
117
|
+
visible: true,
|
118
|
+
x: clientX,
|
119
|
+
y: clientY,
|
120
|
+
content: content,
|
121
|
+
});
|
122
|
+
};
|
123
|
+
|
124
|
+
const handleMouseMove = (e: React.MouseEvent) => {
|
125
|
+
const { clientX, clientY } = e;
|
126
|
+
setTooltip((prev) => ({
|
127
|
+
...prev,
|
128
|
+
x: clientX,
|
129
|
+
y: clientY,
|
130
|
+
}));
|
131
|
+
};
|
132
|
+
|
133
|
+
const handleMouseLeave = () => {
|
134
|
+
setTooltip({ visible: false, x: 0, y: 0, content: '' });
|
135
|
+
};
|
136
|
+
|
137
|
+
const textData = (text: string, maxLength: number) => {
|
138
|
+
return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
|
139
|
+
};
|
140
|
+
const getArcColorFromTooltip = () => {
|
141
|
+
if (!tooltip.visible) return '';
|
142
|
+
const value = tooltip.content.split(':')[1]?.trim();
|
143
|
+
const matchingBar = barValues.find((val) => `${val.value}` === value);
|
144
|
+
return matchingBar?.arcColor || '';
|
145
|
+
};
|
94
146
|
return (
|
95
147
|
<div
|
96
148
|
className={`ff-multi-radial-chart-container ${
|
@@ -148,8 +200,14 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
148
200
|
stroke={values.arcColor}
|
149
201
|
strokeWidth={lineWidth}
|
150
202
|
strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
|
151
|
-
onMouseEnter={() =>
|
152
|
-
|
203
|
+
onMouseEnter={(e) =>
|
204
|
+
handleMouseEnter(
|
205
|
+
e,
|
206
|
+
`${values.barLabel || 'Data'}: ${values.value}`
|
207
|
+
)
|
208
|
+
}
|
209
|
+
onMouseMove={handleMouseMove}
|
210
|
+
onMouseLeave={handleMouseLeave}
|
153
211
|
style={{
|
154
212
|
pointerEvents: 'stroke',
|
155
213
|
}}
|
@@ -160,42 +218,69 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
160
218
|
<text
|
161
219
|
x="0"
|
162
220
|
y="-20"
|
163
|
-
fill={
|
164
|
-
hoveredIndex !== null ? barValues[hoveredIndex]?.arcColor : ''
|
165
|
-
}
|
221
|
+
fill={getArcColorFromTooltip()}
|
166
222
|
textAnchor="middle"
|
167
223
|
dominantBaseline="central"
|
168
224
|
>
|
169
|
-
{
|
225
|
+
{tooltip.visible ? (
|
170
226
|
<>
|
171
|
-
<tspan x="0" dy={
|
172
|
-
{
|
227
|
+
<tspan x="0" dy={10} className="ff-center-text-tooltip">
|
228
|
+
{textData(tooltip.content.split(':')[1]?.trim() || '', 5)}
|
173
229
|
</tspan>
|
174
|
-
<tspan x="0" dy={18} className="ff-center-text">
|
175
|
-
{
|
230
|
+
<tspan x="0" dy={18} className="ff-center-text-tooltip">
|
231
|
+
{textData(tooltip.content.split(':')[0] ?? '', 8)}
|
176
232
|
</tspan>
|
177
233
|
</>
|
178
234
|
) : (
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
235
|
+
<>
|
236
|
+
{labelLines.map((line, index) => {
|
237
|
+
if (index === 0) {
|
238
|
+
const [firstWord, ...restWords] = line.split(' ');
|
239
|
+
return (
|
240
|
+
<tspan key={index}>
|
241
|
+
<tspan x="0" dy="0" className="ff-center-first-text">
|
242
|
+
{firstWord}
|
243
|
+
</tspan>
|
244
|
+
<tspan x="0" dy={18} className="ff-center-text">
|
245
|
+
{restWords.join(' ')}
|
246
|
+
</tspan>
|
247
|
+
</tspan>
|
248
|
+
);
|
249
|
+
}
|
250
|
+
return (
|
251
|
+
<tspan
|
252
|
+
key={index}
|
253
|
+
x="0"
|
254
|
+
dy={index === 0 ? 0 : 18}
|
255
|
+
className="ff-center-text"
|
256
|
+
>
|
257
|
+
{line}
|
258
|
+
</tspan>
|
259
|
+
);
|
260
|
+
})}
|
261
|
+
</>
|
189
262
|
)}
|
190
263
|
</text>
|
191
264
|
</g>
|
192
265
|
</svg>
|
266
|
+
{tooltip.visible && (
|
267
|
+
<div
|
268
|
+
className="ff-multi-radial-tooltip"
|
269
|
+
style={{
|
270
|
+
top: tooltip.y + 10,
|
271
|
+
left: tooltip.x + 10,
|
272
|
+
zIndex: 1000,
|
273
|
+
}}
|
274
|
+
>
|
275
|
+
{tooltip.content}
|
276
|
+
</div>
|
277
|
+
)}
|
193
278
|
</div>
|
194
279
|
{isLegendDetails &&
|
195
280
|
renderLegend(
|
196
281
|
barValues.map((value) => ({
|
197
282
|
...value,
|
198
|
-
label: value
|
283
|
+
label: truncateText(value?.barLabel, 8),
|
199
284
|
key: value.value.toString(),
|
200
285
|
})),
|
201
286
|
legendType
|
@@ -1,3 +1,4 @@
|
|
1
|
+
@use '../../../assets/styles/fonts';
|
1
2
|
.ff-pie-chart-container {
|
2
3
|
display: flex;
|
3
4
|
flex-direction: column;
|
@@ -18,11 +19,9 @@
|
|
18
19
|
border-radius: 4px;
|
19
20
|
background-color: var(--tooltip-bg-color);
|
20
21
|
color: var(--primary-icon-color);
|
21
|
-
|
22
|
-
font-size: 14px;
|
22
|
+
@extend .fontSm;
|
23
23
|
font-weight: 400;
|
24
24
|
pointer-events: none;
|
25
|
-
opacity: 0.8;
|
26
25
|
}
|
27
26
|
|
28
27
|
.ff-pie-chart-legend {
|
@@ -35,5 +34,8 @@
|
|
35
34
|
align-items: center;
|
36
35
|
text-align: center;
|
37
36
|
}
|
37
|
+
.ff-pie-chart-legend-value {
|
38
|
+
color: var(--drawer-title-color);
|
39
|
+
}
|
38
40
|
}
|
39
41
|
}
|
@@ -119,7 +119,7 @@ const PieChart: React.FC<PieChartProps> = ({
|
|
119
119
|
fontSize={10}
|
120
120
|
fontWeight="regular"
|
121
121
|
lineHeight="18px"
|
122
|
-
className="ff-
|
122
|
+
className="ff-pie-chart-legend-value"
|
123
123
|
>
|
124
124
|
{item.label}
|
125
125
|
</Typography>
|
@@ -178,7 +178,6 @@ const PieChart: React.FC<PieChartProps> = ({
|
|
178
178
|
style={{
|
179
179
|
top: tooltipPosition.y,
|
180
180
|
left: tooltipPosition.x,
|
181
|
-
border: `2px solid ${tooltip.color}`,
|
182
181
|
}}
|
183
182
|
>
|
184
183
|
{tooltip.label} : {tooltip.value}
|
@@ -118,7 +118,7 @@
|
|
118
118
|
margin: 0 5px;
|
119
119
|
border: 1px solid var(--border-color);
|
120
120
|
background-color: var(--toggle-button-bg-color);
|
121
|
-
box-shadow: 0 -
|
121
|
+
box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);
|
122
122
|
padding: 0px;
|
123
123
|
border-radius: 30%;
|
124
124
|
cursor: pointer;
|
@@ -231,6 +231,7 @@
|
|
231
231
|
width: 100%;
|
232
232
|
text-align: center;
|
233
233
|
border-radius: 4px 0 0 4px;
|
234
|
+
font-weight: 400;
|
234
235
|
@extend .fontSm;
|
235
236
|
|
236
237
|
&::placeholder {
|
@@ -325,10 +326,23 @@
|
|
325
326
|
}
|
326
327
|
|
327
328
|
.ff-time-period-icon {
|
329
|
+
svg {
|
330
|
+
path {
|
331
|
+
fill: var(--default-icon-color);
|
332
|
+
}
|
333
|
+
}
|
328
334
|
margin-left: auto;
|
329
335
|
pointer-events: none;
|
330
336
|
}
|
331
337
|
|
338
|
+
&:hover {
|
339
|
+
svg {
|
340
|
+
path {
|
341
|
+
fill: var(--brand-color);
|
342
|
+
}
|
343
|
+
}
|
344
|
+
}
|
345
|
+
|
332
346
|
.ff-time-period-options {
|
333
347
|
position: fixed;
|
334
348
|
z-index: 100;
|
@@ -34,9 +34,7 @@ interface ExcelFileProps {
|
|
34
34
|
|
35
35
|
const ExcelFile: React.FC<ExcelFileProps> = ({
|
36
36
|
excelData,
|
37
|
-
onSave = (saveData) => {
|
38
|
-
saveData();
|
39
|
-
},
|
37
|
+
onSave = (saveData) => {saveData()},
|
40
38
|
}) => {
|
41
39
|
const [sheetNames, setSheetNames] = useState<string[]>([]);
|
42
40
|
const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
|
@@ -51,6 +49,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
51
49
|
color: 'var(--text-color)',
|
52
50
|
backgroundColor: 'var(--drawer-footer-bg)',
|
53
51
|
borderColor: 'var(--toggle-strip-color)',
|
52
|
+
textDecoration: 'none',
|
53
|
+
textDecorationStyle: 'solid',
|
54
54
|
},
|
55
55
|
};
|
56
56
|
|
@@ -128,7 +128,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
128
128
|
}
|
129
129
|
spreadsheetData[rowIndex][colIndex] = {
|
130
130
|
value: checkVal(cell.value),
|
131
|
-
style: convertStyleToFrontend(cell?.style),
|
131
|
+
style: convertStyleToFrontend(cell?.style) ,
|
132
132
|
type: true,
|
133
133
|
};
|
134
134
|
}
|
@@ -143,6 +143,23 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
143
143
|
setSelectedSheetData(newWorksheetsData[firstSheetName]);
|
144
144
|
}
|
145
145
|
}, []);
|
146
|
+
const handleSave = React.useCallback(
|
147
|
+
(event: KeyboardEvent) => {
|
148
|
+
if (event.ctrlKey && event.key === 's') {
|
149
|
+
event.preventDefault();
|
150
|
+
event.stopPropagation();
|
151
|
+
onSaveWorksheetData();
|
152
|
+
}
|
153
|
+
},
|
154
|
+
[onSave]
|
155
|
+
);
|
156
|
+
|
157
|
+
React.useEffect(() => {
|
158
|
+
document.addEventListener('keydown', handleSave);
|
159
|
+
return () => {
|
160
|
+
document.removeEventListener('keydown', handleSave);
|
161
|
+
};
|
162
|
+
}, [handleSave]);
|
146
163
|
|
147
164
|
const onSaveWorksheetData = () => {
|
148
165
|
const savedData = {
|
@@ -159,21 +176,18 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
159
176
|
}, -1);
|
160
177
|
|
161
178
|
const filteredRow = row
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
return null;
|
175
|
-
})
|
176
|
-
.filter((cell) => cell !== null);
|
179
|
+
.map((cell, index) => {
|
180
|
+
if (cell && cell.value !== null) {
|
181
|
+
return {
|
182
|
+
value: cell.value,
|
183
|
+
styles: convertStyleToBackend(cell.style ?? {}),
|
184
|
+
};
|
185
|
+
} else if (cell && cell.type || index <= lastIndex) {
|
186
|
+
return { value: '', styles: convertStyleToBackend(cell?.style ?? {}) };
|
187
|
+
}
|
188
|
+
return null;
|
189
|
+
})
|
190
|
+
.filter((cell) => cell !== null);
|
177
191
|
|
178
192
|
return filteredRow.length > 0 ? filteredRow : [];
|
179
193
|
}) || [];
|
@@ -194,7 +208,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
194
208
|
onSave(savedData);
|
195
209
|
toast.success('File saved successfully!');
|
196
210
|
};
|
197
|
-
|
211
|
+
|
198
212
|
const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
|
199
213
|
setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
|
200
214
|
onSaveWorksheetData();
|
@@ -12,7 +12,7 @@ import {
|
|
12
12
|
|
13
13
|
export function applyBoldToCells(
|
14
14
|
currentData: Matrix.Matrix<Types.CellBase<any>>,
|
15
|
-
selectedRange: PointRange
|
15
|
+
selectedRange: PointRange,
|
16
16
|
): Matrix.Matrix<Types.CellBase<any>> {
|
17
17
|
if (!selectedRange) {
|
18
18
|
return currentData;
|
@@ -21,24 +21,33 @@ export function applyBoldToCells(
|
|
21
21
|
const { start, end } = selectedRange;
|
22
22
|
|
23
23
|
let updatedData = currentData;
|
24
|
+
let anyBold = false;
|
24
25
|
|
25
26
|
for (let row = start.row; row <= end.row; row++) {
|
26
27
|
for (let col = start.column; col <= end.column; col++) {
|
27
28
|
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
29
|
+
if (!currentCell) continue;
|
28
30
|
|
29
|
-
if (
|
30
|
-
|
31
|
+
if (currentCell.style?.fontWeight === 'bold') {
|
32
|
+
anyBold = true;
|
33
|
+
break;
|
31
34
|
}
|
35
|
+
}
|
36
|
+
if (anyBold) break;
|
37
|
+
}
|
38
|
+
|
39
|
+
for (let row = start.row; row <= end.row; row++) {
|
40
|
+
for (let col = start.column; col <= end.column; col++) {
|
41
|
+
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
42
|
+
if (!currentCell) continue;
|
32
43
|
|
33
44
|
const updatedCell = {
|
34
45
|
...currentCell,
|
35
46
|
style: {
|
36
47
|
...currentCell.style,
|
37
|
-
fontWeight:
|
38
|
-
currentCell.style?.fontWeight !== 'bold' ? 'bold' : 'normal',
|
48
|
+
fontWeight: anyBold ? 'normal' : 'bold',
|
39
49
|
},
|
40
50
|
};
|
41
|
-
|
42
51
|
updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
|
43
52
|
}
|
44
53
|
}
|
@@ -57,24 +66,33 @@ export function applyItalicToCells(
|
|
57
66
|
const { start, end } = selectedRange;
|
58
67
|
|
59
68
|
let updatedData = currentData;
|
69
|
+
let anyItalic = false;
|
60
70
|
|
61
71
|
for (let row = start.row; row <= end.row; row++) {
|
62
72
|
for (let col = start.column; col <= end.column; col++) {
|
63
73
|
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
74
|
+
if (!currentCell) continue;
|
64
75
|
|
65
|
-
if (
|
66
|
-
|
76
|
+
if (currentCell.style?.fontStyle === 'italic') {
|
77
|
+
anyItalic = true;
|
78
|
+
break;
|
67
79
|
}
|
80
|
+
}
|
81
|
+
if (anyItalic) break;
|
82
|
+
}
|
83
|
+
|
84
|
+
for (let row = start.row; row <= end.row; row++) {
|
85
|
+
for (let col = start.column; col <= end.column; col++) {
|
86
|
+
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
87
|
+
if (!currentCell) continue;
|
68
88
|
|
69
89
|
const updatedCell = {
|
70
90
|
...currentCell,
|
71
91
|
style: {
|
72
92
|
...currentCell.style,
|
73
|
-
fontStyle:
|
74
|
-
currentCell.style?.fontStyle !== 'italic' ? 'italic' : 'normal',
|
93
|
+
fontStyle: anyItalic ? 'normal' : 'italic',
|
75
94
|
},
|
76
95
|
};
|
77
|
-
|
78
96
|
updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
|
79
97
|
}
|
80
98
|
}
|
@@ -289,23 +307,34 @@ export function applyUnderlineToCells(
|
|
289
307
|
const { start, end } = selectedRange;
|
290
308
|
|
291
309
|
let updatedData = currentData;
|
310
|
+
let anyUnderlined = false;
|
292
311
|
|
293
312
|
for (let row = start.row; row <= end.row; row++) {
|
294
313
|
for (let col = start.column; col <= end.column; col++) {
|
295
314
|
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
315
|
+
if (!currentCell) continue;
|
296
316
|
|
297
|
-
if (
|
298
|
-
|
317
|
+
if (currentCell.style?.textDecoration === 'underline') {
|
318
|
+
anyUnderlined = true;
|
319
|
+
break;
|
299
320
|
}
|
321
|
+
}
|
322
|
+
if (anyUnderlined) break;
|
323
|
+
}
|
324
|
+
|
325
|
+
for (let row = start.row; row <= end.row; row++) {
|
326
|
+
for (let col = start.column; col <= end.column; col++) {
|
327
|
+
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
328
|
+
if (!currentCell) continue;
|
300
329
|
|
301
330
|
let updatedCell;
|
302
|
-
if (!active) {
|
331
|
+
if (!active || anyUnderlined) {
|
303
332
|
updatedCell = {
|
304
333
|
...currentCell,
|
305
334
|
style: {
|
306
335
|
...currentCell.style,
|
307
336
|
textDecoration: 'none',
|
308
|
-
textDecorationStyle: '
|
337
|
+
textDecorationStyle: 'solid' as TextDecorationStyle,
|
309
338
|
},
|
310
339
|
};
|
311
340
|
} else {
|
@@ -7,10 +7,11 @@ import Select from '../../Select';
|
|
7
7
|
import { CellBase } from '../ExcelFile/ExcelFileComponents';
|
8
8
|
import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
|
9
9
|
import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
|
10
|
+
import useSelector from '../ExcelFile/ExcelFileComponents/use-selector';
|
11
|
+
import { convertStyleToBackend } from '../dataConversion';
|
10
12
|
|
11
13
|
interface ExcelToolBarProps {
|
12
14
|
toolbar?: 'show' | 'disable' | 'hide';
|
13
|
-
data: Matrix.Matrix<CellBase>;
|
14
15
|
onBold: (data: Matrix.Matrix<CellBase>) => void;
|
15
16
|
onItalic: (data: Matrix.Matrix<CellBase>) => void;
|
16
17
|
setUnderlineType: (
|
@@ -33,7 +34,6 @@ interface ExcelToolBarProps {
|
|
33
34
|
|
34
35
|
const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
35
36
|
toolbar = 'show',
|
36
|
-
data,
|
37
37
|
onBold,
|
38
38
|
onItalic,
|
39
39
|
setUnderlineType,
|
@@ -45,6 +45,42 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
45
45
|
setBorderType,
|
46
46
|
setFormatePainter,
|
47
47
|
}) => {
|
48
|
+
const cell = useSelector((state) =>
|
49
|
+
state.active ? Matrix.get(state.active, state.model.data) : null
|
50
|
+
);
|
51
|
+
const data = useSelector((state) => state.model.data);
|
52
|
+
const formattedStyle = useSelector((state) => state.formattedStyle.open);
|
53
|
+
|
54
|
+
const [cellStyle, setCellStyle] = useState(
|
55
|
+
cell?.style || {
|
56
|
+
color: 'var(--text-color)',
|
57
|
+
backgroundColor: 'var(--drawer-footer-bg)',
|
58
|
+
borderColor: 'var(--toggle-strip-color)',
|
59
|
+
}
|
60
|
+
);
|
61
|
+
|
62
|
+
useEffect(() => {
|
63
|
+
setCellStyle(
|
64
|
+
cell?.style || {
|
65
|
+
color: 'var(--text-color)',
|
66
|
+
backgroundColor: 'var(--drawer-footer-bg)',
|
67
|
+
borderColor: 'var(--toggle-strip-color)',
|
68
|
+
}
|
69
|
+
);
|
70
|
+
}, [cell]);
|
71
|
+
|
72
|
+
useEffect(() => {
|
73
|
+
if (
|
74
|
+
cell?.style &&
|
75
|
+
JSON.stringify(cell.style) !== JSON.stringify(cellStyle)
|
76
|
+
) {
|
77
|
+
setCellStyle(cell.style);
|
78
|
+
}
|
79
|
+
}, [cell]);
|
80
|
+
|
81
|
+
const styleBackend = convertStyleToBackend(cellStyle);
|
82
|
+
|
83
|
+
|
48
84
|
const [border, setBorder] = useState<string>('border-none');
|
49
85
|
const [underLine, setUnderLine] = useState<string>('underline');
|
50
86
|
const [selectedFontFamily, setSelectedFontFamily] = useState<{
|
@@ -167,13 +203,13 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
167
203
|
<Tooltip placement="top" title={'Font Family'}>
|
168
204
|
<div className="ff-excel-toolbar-font-family">
|
169
205
|
<Select
|
206
|
+
showLabel={false}
|
170
207
|
onChange={(e) => {
|
171
208
|
setSelectedFontFamily({ label: e.label, value: e.value });
|
172
209
|
setFontFamily(data, e.label);
|
173
210
|
}}
|
174
211
|
required={false}
|
175
212
|
optionsList={fontFamily}
|
176
|
-
label=""
|
177
213
|
selectedOption={selectedFontFamily}
|
178
214
|
/>
|
179
215
|
</div>
|
@@ -181,8 +217,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
181
217
|
<Tooltip placement="top" title={'Font Size'}>
|
182
218
|
<div className="ff-excel-toolbar-font-size">
|
183
219
|
<Select
|
220
|
+
showLabel={false}
|
184
221
|
required={false}
|
185
|
-
label=""
|
186
222
|
onChange={(e) => setFontSize(data, e.value)}
|
187
223
|
optionsList={fontSize}
|
188
224
|
selectedOption={{
|
@@ -197,6 +233,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
197
233
|
<div className="ff-excel-toolbar-icon">
|
198
234
|
<Tooltip placement="top" title={'Text Left'}>
|
199
235
|
<Icon
|
236
|
+
variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
|
200
237
|
hoverEffect
|
201
238
|
disabled={toolbar === 'disable'}
|
202
239
|
onClick={() => setTextAlign(data, 'left')}
|
@@ -205,6 +242,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
205
242
|
</Tooltip>
|
206
243
|
<Tooltip placement="top" title={'Text Center'}>
|
207
244
|
<Icon
|
245
|
+
variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
|
208
246
|
hoverEffect
|
209
247
|
disabled={toolbar === 'disable'}
|
210
248
|
onClick={() => setTextAlign(data, 'center')}
|
@@ -214,6 +252,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
214
252
|
|
215
253
|
<Tooltip placement="top" title={'Text Right'}>
|
216
254
|
<Icon
|
255
|
+
variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
|
217
256
|
hoverEffect
|
218
257
|
disabled={toolbar === 'disable'}
|
219
258
|
onClick={() => setTextAlign(data, 'right')}
|
@@ -225,6 +264,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
225
264
|
<div className="ff-excel-toolbar-text">
|
226
265
|
<Tooltip placement="top" title={'Bold'}>
|
227
266
|
<Icon
|
267
|
+
variant={styleBackend.bold ? 'dark' : 'light'}
|
228
268
|
hoverEffect
|
229
269
|
disabled={toolbar === 'disable'}
|
230
270
|
onClick={() => onBold(data)}
|
@@ -234,6 +274,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
234
274
|
<Tooltip placement="top" title={'Italic'}>
|
235
275
|
<Icon
|
236
276
|
hoverEffect
|
277
|
+
variant={styleBackend.italic ? 'dark' : 'light'}
|
237
278
|
disabled={toolbar === 'disable'}
|
238
279
|
onClick={() => onItalic(data)}
|
239
280
|
name="italic"
|
@@ -242,6 +283,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
242
283
|
<Tooltip placement="top" title={'Underline Type'}>
|
243
284
|
<div className="ff-excel-toolbar-icon-underline">
|
244
285
|
<Icon
|
286
|
+
variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
|
245
287
|
hoverEffect
|
246
288
|
disabled={toolbar === 'disable'}
|
247
289
|
onClick={() => setUnderlineType(data, underLine, true)}
|
@@ -266,6 +308,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
266
308
|
<div className="ff-excel-toolbar-icon">
|
267
309
|
<Tooltip placement="top" title={'Format Painter'}>
|
268
310
|
<Icon
|
311
|
+
variant={formattedStyle?'dark':'light'}
|
269
312
|
hoverEffect
|
270
313
|
disabled={toolbar === 'disable'}
|
271
314
|
onClick={() => {
|