sevenhill/QOffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add QExcell cell text colors

Browse Source
This commit is contained in:
Курнат Андрей
2026-06-01 06:19:24 +03:00
parent 08fe16bdf6
commit 9c48e1d8b1
6 changed files with 51 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/data/sampleData.ts
+5
View File
@@ -69,6 +69,11 @@ export const initialState: QOfficeState = {
},
mergedCells: [{ start: "A8", end: "E8" }],
cellFormats: {
A1: { bold: true, textColor: "FFFFFF", fillColor: "0F5FAE" },
B1: { bold: true, textColor: "FFFFFF", fillColor: "0F5FAE" },
C1: { bold: true, textColor: "FFFFFF", fillColor: "0F5FAE" },
D1: { bold: true, textColor: "FFFFFF", fillColor: "0F5FAE" },
E1: { bold: true, textColor: "FFFFFF", fillColor: "0F5FAE" },
B2: { numberFormat: "# ##0.00 ₽" },
C2: { numberFormat: "# ##0.00 ₽" },
D2: { numberFormat: "# ##0.00 ₽" },
src/features/qexcell/QExcell.tsx
+27
View File
@@ -17,6 +17,7 @@ import {
Save,
Sigma,
Trash2,
Type,
Underline
} from "lucide-react";
import type { CellFormat, SheetChart, SheetChartType, Workbook } from "../../types";
@@ -48,6 +49,15 @@ const fillSwatches = [
{ color: "EADCF8", label: "Светло-фиолетовая заливка" }
];
const textColorSwatches = [
{ color: "", label: "Авто цвет текста" },
{ color: "202124", label: "Черный текст" },
{ color: "0F5FAE", label: "Синий текст" },
{ color: "0F766E", label: "Зеленый текст" },
{ color: "C2410C", label: "Красный текст" },
{ color: "7C3AED", label: "Фиолетовый текст" }
];
const numberFormatOptions = [
{ value: "", label: "Обычный" },
{ value: "0.00", label: "Число" },
@@ -85,12 +95,14 @@ function normalizedFillColor(value?: string) {
}
function normalizedCellFormat(format: CellFormat): CellFormat | undefined {
const textColor = normalizedFillColor(format.textColor);
const fillColor = normalizedFillColor(format.fillColor);
const numberFormat = format.numberFormat?.trim();
const normalized: CellFormat = {
...(format.bold ? { bold: true } : {}),
...(format.italics ? { italics: true } : {}),
...(format.underline ? { underline: true } : {}),
...(textColor ? { textColor } : {}),
...(fillColor ? { fillColor } : {}),
...(numberFormat ? { numberFormat } : {})
};
@@ -103,6 +115,7 @@ function cellInputStyle(format?: CellFormat): CSSProperties {
...(format?.bold ? { fontWeight: 700 } : {}),
...(format?.italics ? { fontStyle: "italic" } : {}),
...(format?.underline ? { textDecoration: "underline" } : {}),
...(format?.textColor ? { color: `#${format.textColor}` } : {}),
...(format?.fillColor ? { backgroundColor: `#${format.fillColor}` } : {})
};
}
@@ -462,6 +475,20 @@ export function QExcell({ workbook, onChange }: QExcellProps) {
/>
))}
</div>
<div className="fill-swatches" aria-label="Цвет текста">
<Type size={16} aria-hidden="true" />
{textColorSwatches.map((swatch) => (
<button
key={swatch.label}
className={`fill-swatch ${swatch.color ? "" : "is-empty"} ${selectedCellFormat.textColor === swatch.color || (!selectedCellFormat.textColor && !swatch.color) ? "is-active" : ""}`.trim()}
type="button"
onClick={() => updateCellFormat(selectedCell, { textColor: swatch.color })}
title={swatch.label}
aria-label={swatch.label}
style={swatch.color ? { backgroundColor: `#${swatch.color}` } : undefined}
/>
))}
</div>
</div>
<button className="compact-command" type="button" onClick={() => void chooseXlsx()}>
<FileUp size={16} />
src/io/excellOffice.test.ts
+6 -6
View File
@@ -76,7 +76,7 @@ describe("excellOffice OOXML helpers", () => {
it("сохраняет базовое форматирование ячеек XLSX в XML листа", () => {
const cellFormats = {
A1: { bold: true, fillColor: "fff2cc" },
A1: { bold: true, textColor: "0f5fae", fillColor: "fff2cc" },
B2: { italics: true, underline: true },
C3: { fillColor: "bad-color" }
};
@@ -97,7 +97,7 @@ describe("excellOffice OOXML helpers", () => {
numFmt: { numFmtId: "164", formatCode: "dd.mm.yyyy" }
},
fonts: {
font: [{}, { b: {}, i: {}, u: {} }]
font: [{}, { b: {}, i: {}, u: {}, color: { rgb: "FF0F5FAE" } }]
},
fills: {
fill: [{}, {}, { patternFill: { fgColor: { rgb: "FFFFF2CC" } } }]
@@ -108,7 +108,7 @@ describe("excellOffice OOXML helpers", () => {
}
});
expect(styleTable[1]).toEqual({ bold: true, italics: true, underline: true, fillColor: "FFF2CC", numberFormat: "dd.mm.yyyy" });
expect(styleTable[1]).toEqual({ bold: true, italics: true, underline: true, textColor: "0F5FAE", fillColor: "FFF2CC", numberFormat: "dd.mm.yyyy" });
expect(styleTable[2]).toEqual({ numberFormat: "m/d/yy" });
expect(
worksheetXmlToCellFormats(
@@ -124,7 +124,7 @@ describe("excellOffice OOXML helpers", () => {
},
styleTable
)
).toEqual({ A1: { bold: true, italics: true, underline: true, fillColor: "FFF2CC", numberFormat: "dd.mm.yyyy" } });
).toEqual({ A1: { bold: true, italics: true, underline: true, textColor: "0F5FAE", fillColor: "FFF2CC", numberFormat: "dd.mm.yyyy" } });
});
it("преобразует XML листа в модель QExcell", () => {
@@ -323,7 +323,7 @@ describe("excellOffice OOXML helpers", () => {
mergedCells: [{ start: "A1", end: "C1" }],
hyperlinks: { A1: "https://example.com/budget" },
cellFormats: {
A1: { bold: true, fillColor: "FFF2CC" },
A1: { bold: true, textColor: "0F5FAE", fillColor: "FFF2CC" },
AC20: { underline: true },
D20: { numberFormat: "dd.mm.yyyy" },
E20: { numberFormat: "0%" }
@@ -357,7 +357,7 @@ describe("excellOffice OOXML helpers", () => {
expect(imported.sheets[0].mergedCells).toEqual([{ start: "A1", end: "C1" }]);
expect(imported.sheets[0].hyperlinks).toEqual({ A1: "https://example.com/budget" });
expect(imported.sheets[0].cellFormats).toEqual({
A1: { bold: true, fillColor: "FFF2CC" },
A1: { bold: true, textColor: "0F5FAE", fillColor: "FFF2CC" },
AC20: { underline: true },
D20: { numberFormat: "dd.mm.yyyy" },
E20: { numberFormat: "0%" }
src/io/excellOffice.ts
+10 -5
View File
@@ -933,22 +933,24 @@ function cellFormatKey(format: CellFormat | undefined) {
return "";
}
return `${normalized.bold ? "1" : "0"}|${normalized.italics ? "1" : "0"}|${normalized.underline ? "1" : "0"}|${normalized.fillColor ?? ""}|${normalized.numberFormat ?? ""}`;
return `${normalized.bold ? "1" : "0"}|${normalized.italics ? "1" : "0"}|${normalized.underline ? "1" : "0"}|${normalized.textColor ?? ""}|${normalized.fillColor ?? ""}|${normalized.numberFormat ?? ""}`;
}
function fontStyleKey(format: CellFormat) {
return format.bold || format.italics || format.underline
? `${format.bold ? "1" : "0"}|${format.italics ? "1" : "0"}|${format.underline ? "1" : "0"}`
return format.bold || format.italics || format.underline || format.textColor
? `${format.bold ? "1" : "0"}|${format.italics ? "1" : "0"}|${format.underline ? "1" : "0"}|${format.textColor ?? ""}`
: "";
}
function normalizedCellFormat(format: CellFormat | undefined): CellFormat | null {
const textColor = normalizeFillColor(format?.textColor);
const fillColor = normalizeFillColor(format?.fillColor);
const numberFormat = normalizedNumberFormat(format?.numberFormat);
const normalized: CellFormat = {
...(format?.bold ? { bold: true } : {}),
...(format?.italics ? { italics: true } : {}),
...(format?.underline ? { underline: true } : {}),
...(textColor ? { textColor } : {}),
...(fillColor ? { fillColor } : {}),
...(numberFormat ? { numberFormat } : {})
};
@@ -958,11 +960,13 @@ function normalizedCellFormat(format: CellFormat | undefined): CellFormat | null
function fontXmlToCellFormat(font: unknown): CellFormat {
const record = asRecord(font);
const textColor = normalizeFillColor(String(childRecord(record, "color").rgb || ""));
return (
normalizedCellFormat({
bold: hasXmlElement(record, "b"),
italics: hasXmlElement(record, "i"),
underline: hasXmlElement(record, "u")
underline: hasXmlElement(record, "u"),
...(textColor ? { textColor } : {})
}) ?? {}
);
}
@@ -979,7 +983,8 @@ function baseFontXml() {
function formatFontXml(format: CellFormat) {
const flags = `${format.bold ? "<b/>" : ""}${format.italics ? "<i/>" : ""}${format.underline ? "<u/>" : ""}`;
return `<font>${flags}<sz val="11"/><color theme="1"/><name val="Calibri"/><family val="2"/></font>`;
const color = format.textColor ? `<color rgb="FF${format.textColor}"/>` : '<color theme="1"/>';
return `<font>${flags}<sz val="11"/>${color}<name val="Calibri"/><family val="2"/></font>`;
}
function formatFillXml(fillColor: string) {
src/types.ts
+1
View File
@@ -29,6 +29,7 @@ export interface CellFormat {
bold?: boolean;
italics?: boolean;
underline?: boolean;
textColor?: string;
fillColor?: string;
numberFormat?: string;
}