smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make table internals declarative

Browse Source
This commit is contained in:
Dolan Miu
2021-03-04 01:42:58 +00:00
parent 9327f2bfa1
commit a026e5bd1f
6 changed files with 195 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/file/table/table-properties/table-cell-margin.spec.ts
View File

@ -8,22 +8,31 @@ import { TableCellMargin } from "./table-cell-margin";
describe("TableCellMargin", () => { describe("TableCellMargin", () => {
describe("#constructor", () => { describe("#constructor", () => {
it("should throw an error if theres no child elements", () => { it("should throw an error if theres no child elements", () => {
const cellMargin = new TableCellMargin(); const cellMargin = new TableCellMargin({});
expect(() => new Formatter().format(cellMargin)).to.throw(); expect(() => new Formatter().format(cellMargin)).to.throw();
}); });
}); });
describe("#addTopMargin", () => { describe("#addTopMargin", () => {
it("should add a table cell top margin", () => { it("should add a table cell top margin", () => {
const cellMargin = new TableCellMargin(); const cellMargin = new TableCellMargin({
cellMargin.addTopMargin(1234, WidthType.DXA); top: {
value: 1234,
type: WidthType.DXA,
},
});
const tree = new Formatter().format(cellMargin); const tree = new Formatter().format(cellMargin);
expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:top": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }); expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:top": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] });
}); });
it("should add a table cell top margin using default width type", () => { it("should add a table cell top margin using default width type", () => {
const cellMargin = new TableCellMargin(); const cellMargin = new TableCellMargin({
cellMargin.addTopMargin(1234); top: {
value: 1234,
},
});
const tree = new Formatter().format(cellMargin); const tree = new Formatter().format(cellMargin);
expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:top": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }); expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:top": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] });
}); });
@ -31,15 +40,22 @@ describe("TableCellMargin", () => {
describe("#addLeftMargin", () => { describe("#addLeftMargin", () => {
it("should add a table cell left margin", () => { it("should add a table cell left margin", () => {
const cellMargin = new TableCellMargin(); const cellMargin = new TableCellMargin({
cellMargin.addLeftMargin(1234, WidthType.DXA); left: {
value: 1234,
type: WidthType.DXA,
},
});
const tree = new Formatter().format(cellMargin); const tree = new Formatter().format(cellMargin);
expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:left": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }); expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:left": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] });
}); });
it("should add a table cell left margin using default width type", () => { it("should add a table cell left margin using default width type", () => {
const cellMargin = new TableCellMargin(); const cellMargin = new TableCellMargin({
cellMargin.addLeftMargin(1234); left: {
value: 1234,
},
});
const tree = new Formatter().format(cellMargin); const tree = new Formatter().format(cellMargin);
expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:left": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }); expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:left": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] });
}); });
@ -47,15 +63,24 @@ describe("TableCellMargin", () => {
describe("#addBottomMargin", () => { describe("#addBottomMargin", () => {
it("should add a table cell bottom margin", () => { it("should add a table cell bottom margin", () => {
const cellMargin = new TableCellMargin(); const cellMargin = new TableCellMargin({
cellMargin.addBottomMargin(1234, WidthType.DXA); bottom: {
value: 1234,
type: WidthType.DXA,
},
});
const tree = new Formatter().format(cellMargin); const tree = new Formatter().format(cellMargin);
expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:bottom": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }); expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:bottom": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] });
}); });
it("should add a table cell bottom margin using default width type", () => { it("should add a table cell bottom margin using default width type", () => {
const cellMargin = new TableCellMargin(); const cellMargin = new TableCellMargin({
cellMargin.addBottomMargin(1234); bottom: {
value: 1234,
},
});
const tree = new Formatter().format(cellMargin); const tree = new Formatter().format(cellMargin);
expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:bottom": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }); expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:bottom": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] });
}); });
@ -63,15 +88,24 @@ describe("TableCellMargin", () => {
describe("#addRightMargin", () => { describe("#addRightMargin", () => {
it("should add a table cell right margin", () => { it("should add a table cell right margin", () => {
const cellMargin = new TableCellMargin(); const cellMargin = new TableCellMargin({
cellMargin.addRightMargin(1234, WidthType.DXA); right: {
value: 1234,
type: WidthType.DXA,
},
});
const tree = new Formatter().format(cellMargin); const tree = new Formatter().format(cellMargin);
expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:right": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }); expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:right": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] });
}); });
it("should add a table cell right margin using default width type", () => { it("should add a table cell right margin using default width type", () => {
const cellMargin = new TableCellMargin(); const cellMargin = new TableCellMargin({
cellMargin.addRightMargin(1234); right: {
value: 1234,
},
});
const tree = new Formatter().format(cellMargin); const tree = new Formatter().format(cellMargin);
expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:right": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }); expect(tree).to.deep.equal({ "w:tblCellMar": [{ "w:right": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] });
}); });

61
src/file/table/table-properties/table-cell-margin.ts
View File

@ -6,7 +6,23 @@ class TableCellMarginAttributes extends XmlAttributeComponent<{ readonly type: W
protected readonly xmlKeys = { value: "w:w", type: "w:type" }; protected readonly xmlKeys = { value: "w:w", type: "w:type" };
} }
interface IBaseTableCellMarginOptions {
readonly value: number;
readonly type?: WidthType;
}
class BaseTableCellMargin extends XmlComponent { class BaseTableCellMargin extends XmlComponent {
constructor(rootKey: string, options: IBaseTableCellMarginOptions) {
super(rootKey);
this.root.push(
new TableCellMarginAttributes({
type: options.type ?? WidthType.DXA,
value: options.value,
}),
);
}
public setProperties(value: number, type: WidthType = WidthType.DXA): void { public setProperties(value: number, type: WidthType = WidthType.DXA): void {
this.root.push( this.root.push(
new TableCellMarginAttributes({ new TableCellMarginAttributes({
@ -17,36 +33,31 @@ class BaseTableCellMargin extends XmlComponent {
} }
} }
export interface ITableCellMarginOptions {
readonly top?: IBaseTableCellMarginOptions;
readonly bottom?: IBaseTableCellMarginOptions;
readonly left?: IBaseTableCellMarginOptions;
readonly right?: IBaseTableCellMarginOptions;
}
export class TableCellMargin extends IgnoreIfEmptyXmlComponent { export class TableCellMargin extends IgnoreIfEmptyXmlComponent {
constructor() { constructor(options: ITableCellMarginOptions) {
super("w:tblCellMar"); super("w:tblCellMar");
}
public addTopMargin(value: number, type: WidthType = WidthType.DXA): void { if (options.bottom) {
const top = new BaseTableCellMargin("w:top"); this.root.push(new BaseTableCellMargin("w:bottom", options.bottom));
}
top.setProperties(value, type); if (options.top) {
this.root.push(top); this.root.push(new BaseTableCellMargin("w:top", options.top));
} }
public addLeftMargin(value: number, type: WidthType = WidthType.DXA): void { if (options.left) {
const left = new BaseTableCellMargin("w:left"); this.root.push(new BaseTableCellMargin("w:left", options.left));
}
left.setProperties(value, type); if (options.right) {
this.root.push(left); this.root.push(new BaseTableCellMargin("w:right", options.right));
} }
public addBottomMargin(value: number, type: WidthType = WidthType.DXA): void {
const bottom = new BaseTableCellMargin("w:bottom");
bottom.setProperties(value, type);
this.root.push(bottom);
}
public addRightMargin(value: number, type: WidthType = WidthType.DXA): void {
const right = new BaseTableCellMargin("w:right");
right.setProperties(value, type);
this.root.push(right);
} }
} }

63
src/file/table/table-properties/table-properties.spec.ts
View File

@ -11,7 +11,7 @@ import { TableProperties } from "./table-properties";
describe("TableProperties", () => { describe("TableProperties", () => {
describe("#constructor", () => { describe("#constructor", () => {
it("creates an initially empty property object", () => { it("creates an initially empty property object", () => {
const tp = new TableProperties(); const tp = new TableProperties({});
// The TableProperties is ignorable if there are no attributes, // The TableProperties is ignorable if there are no attributes,
// which results in prepForXml returning undefined, which causes // which results in prepForXml returning undefined, which causes
// the formatter to throw an error if that is the only object it // the formatter to throw an error if that is the only object it
@ -22,7 +22,12 @@ describe("TableProperties", () => {
describe("#setWidth", () => { describe("#setWidth", () => {
it("should add a table width property", () => { it("should add a table width property", () => {
const tp = new TableProperties().setWidth(1234, WidthType.DXA); const tp = new TableProperties({
width: {
size: 1234,
type: WidthType.DXA,
},
});
const tree = new Formatter().format(tp); const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({ expect(tree).to.deep.equal({
"w:tblPr": [{ "w:tblW": { _attr: { "w:type": "dxa", "w:w": 1234 } } }], "w:tblPr": [{ "w:tblW": { _attr: { "w:type": "dxa", "w:w": 1234 } } }],
@ -30,7 +35,12 @@ describe("TableProperties", () => {
}); });
it("should add a table width property with default of AUTO", () => { it("should add a table width property with default of AUTO", () => {
const tp = new TableProperties().setWidth(1234); const tp = new TableProperties({
width: {
size: 1234,
},
});
const tree = new Formatter().format(tp); const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({ expect(tree).to.deep.equal({
"w:tblPr": [{ "w:tblW": { _attr: { "w:type": "auto", "w:w": 1234 } } }], "w:tblPr": [{ "w:tblW": { _attr: { "w:type": "auto", "w:w": 1234 } } }],
@ -40,8 +50,10 @@ describe("TableProperties", () => {
describe("#setLayout", () => { describe("#setLayout", () => {
it("sets the table to fixed width layout", () => { it("sets the table to fixed width layout", () => {
const tp = new TableProperties(); const tp = new TableProperties({
tp.setLayout(TableLayoutType.FIXED); layout: TableLayoutType.FIXED,
});
const tree = new Formatter().format(tp); const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({ expect(tree).to.deep.equal({
"w:tblPr": [{ "w:tblLayout": { _attr: { "w:type": "fixed" } } }], "w:tblPr": [{ "w:tblLayout": { _attr: { "w:type": "fixed" } } }],
@ -51,8 +63,15 @@ describe("TableProperties", () => {
describe("#cellMargin", () => { describe("#cellMargin", () => {
it("adds a table cell top margin", () => { it("adds a table cell top margin", () => {
const tp = new TableProperties(); const tp = new TableProperties({
tp.CellMargin.addTopMargin(1234, WidthType.DXA); cellMargin: {
top: {
value: 1234,
type: WidthType.DXA,
},
},
});
const tree = new Formatter().format(tp); const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({ expect(tree).to.deep.equal({
"w:tblPr": [{ "w:tblCellMar": [{ "w:top": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }], "w:tblPr": [{ "w:tblCellMar": [{ "w:top": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }],
@ -60,8 +79,15 @@ describe("TableProperties", () => {
}); });
it("adds a table cell left margin", () => { it("adds a table cell left margin", () => {
const tp = new TableProperties(); const tp = new TableProperties({
tp.CellMargin.addLeftMargin(1234, WidthType.DXA); cellMargin: {
left: {
value: 1234,
type: WidthType.DXA,
},
},
});
const tree = new Formatter().format(tp); const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({ expect(tree).to.deep.equal({
"w:tblPr": [{ "w:tblCellMar": [{ "w:left": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }], "w:tblPr": [{ "w:tblCellMar": [{ "w:left": { _attr: { "w:type": "dxa", "w:w": 1234 } } }] }],
@ -71,12 +97,14 @@ describe("TableProperties", () => {
describe("#setShading", () => { describe("#setShading", () => {
it("sets the shading of the table", () => { it("sets the shading of the table", () => {
const tp = new TableProperties(); const tp = new TableProperties({
tp.setShading({ shading: {
fill: "b79c2f", fill: "b79c2f",
val: ShadingType.REVERSE_DIAGONAL_STRIPE, val: ShadingType.REVERSE_DIAGONAL_STRIPE,
color: "auto", color: "auto",
},
}); });
const tree = new Formatter().format(tp); const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({ expect(tree).to.deep.equal({
"w:tblPr": [ "w:tblPr": [
@ -95,9 +123,10 @@ describe("TableProperties", () => {
}); });
describe("#setAlignment", () => { describe("#setAlignment", () => {
it("sets the shading of the table", () => { it("sets the alignment of the table", () => {
const tp = new TableProperties(); const tp = new TableProperties({
tp.setAlignment(AlignmentType.CENTER); alignment: AlignmentType.CENTER,
});
const tree = new Formatter().format(tp); const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({ expect(tree).to.deep.equal({
"w:tblPr": [ "w:tblPr": [

67
src/file/table/table-properties/table-properties.ts
View File

@ -5,51 +5,52 @@ import { Alignment, AlignmentType } from "../../paragraph";
import { ITableShadingAttributesProperties, TableShading } from "../shading"; import { ITableShadingAttributesProperties, TableShading } from "../shading";
import { WidthType } from "../table-cell"; import { WidthType } from "../table-cell";
import { ITableBordersOptions, TableBorders } from "./table-borders"; import { ITableBordersOptions, TableBorders } from "./table-borders";
import { TableCellMargin } from "./table-cell-margin"; import { ITableCellMarginOptions, TableCellMargin } from "./table-cell-margin";
import { ITableFloatOptions, TableFloatProperties } from "./table-float-properties"; import { ITableFloatOptions, TableFloatProperties } from "./table-float-properties";
import { TableLayout, TableLayoutType } from "./table-layout"; import { TableLayout, TableLayoutType } from "./table-layout";
import { PreferredTableWidth } from "./table-width"; import { PreferredTableWidth } from "./table-width";
export class TableProperties extends IgnoreIfEmptyXmlComponent { export interface ITablePropertiesOptions {
private readonly cellMargin: TableCellMargin; readonly width?: {
readonly size: number;
readonly type?: WidthType;
};
readonly layout?: TableLayoutType;
readonly borders?: ITableBordersOptions;
readonly float?: ITableFloatOptions;
readonly shading?: ITableShadingAttributesProperties;
readonly alignment?: AlignmentType;
readonly cellMargin?: ITableCellMarginOptions;
}
constructor() { export class TableProperties extends IgnoreIfEmptyXmlComponent {
constructor(options: ITablePropertiesOptions) {
super("w:tblPr"); super("w:tblPr");
this.cellMargin = new TableCellMargin(); this.root.push(new TableCellMargin(options.cellMargin || {}));
this.root.push(this.cellMargin);
}
public setWidth(width: number, type: WidthType = WidthType.AUTO): TableProperties { if (options.borders) {
this.root.push(new PreferredTableWidth(type, width)); this.root.push(new TableBorders(options.borders));
return this; }
}
public setLayout(type: TableLayoutType): void { if (options.width) {
this.root.push(new TableLayout(type)); this.root.push(new PreferredTableWidth(options.width.type, options.width.size));
} }
public setBorder(borderOptions: ITableBordersOptions): TableProperties { if (options.float) {
this.root.push(new TableBorders(borderOptions)); this.root.push(new TableFloatProperties(options.float));
return this; }
}
public get CellMargin(): TableCellMargin { if (options.layout) {
return this.cellMargin; this.root.push(new TableLayout(options.layout));
} }
public setTableFloatProperties(tableFloatOptions: ITableFloatOptions): TableProperties { if (options.alignment) {
this.root.push(new TableFloatProperties(tableFloatOptions)); this.root.push(new Alignment(options.alignment));
return this; }
}
public setShading(attrs: ITableShadingAttributesProperties): TableProperties { if (options.shading) {
this.root.push(new TableShading(attrs)); this.root.push(new TableShading(options.shading));
}
return this;
}
public setAlignment(type: AlignmentType): void {
this.root.push(new Alignment(type));
} }
} }

2
src/file/table/table-properties/table-width.ts
View File

@ -13,7 +13,7 @@ class TableWidthAttributes extends XmlAttributeComponent<ITableWidth> {
} }
export class PreferredTableWidth extends XmlComponent { export class PreferredTableWidth extends XmlComponent {
constructor(type: WidthType, w: number) { constructor(type: WidthType = WidthType.AUTO, w: number) {
super("w:tblW"); super("w:tblW");
const width: number | string = type === WidthType.PERCENTAGE ? `${w}%` : w; const width: number | string = type === WidthType.PERCENTAGE ? `${w}%` : w;
this.root.push(new TableWidthAttributes({ type: type, w: width })); this.root.push(new TableWidthAttributes({ type: type, w: width }));

59
src/file/table/table.ts
View File

@ -39,8 +39,6 @@ export interface ITableOptions {
} }
export class Table extends XmlComponent { export class Table extends XmlComponent {
private readonly properties: TableProperties;
constructor({ constructor({
rows, rows,
width, width,
@ -52,25 +50,34 @@ export class Table extends XmlComponent {
alignment, alignment,
}: ITableOptions) { }: ITableOptions) {
super("w:tbl"); super("w:tbl");
this.properties = new TableProperties();
this.root.push(this.properties);
if (borders) { this.root.push(
this.properties.setBorder(borders); new TableProperties({
} else { borders: borders ?? {},
this.properties.setBorder({}); width: width ?? { size: 100 },
} float,
layout,
if (width) { alignment,
this.properties.setWidth(width.size, width.type); cellMargin: {
} else { bottom: {
this.properties.setWidth(100); value: bottom || 0,
} type: marginUnitType,
},
this.properties.CellMargin.addBottomMargin(bottom || 0, marginUnitType); top: {
this.properties.CellMargin.addTopMargin(top || 0, marginUnitType); value: top || 0,
this.properties.CellMargin.addLeftMargin(left || 0, marginUnitType); type: marginUnitType,
this.properties.CellMargin.addRightMargin(right || 0, marginUnitType); },
left: {
value: left || 0,
type: marginUnitType,
},
right: {
value: right || 0,
type: marginUnitType,
},
},
}),
);
this.root.push(new TableGrid(columnWidths)); this.root.push(new TableGrid(columnWidths));
@ -101,17 +108,5 @@ export class Table extends XmlComponent {
columnIndex += cell.options.columnSpan || 1; columnIndex += cell.options.columnSpan || 1;
}); });
}); });
if (float) {
this.properties.setTableFloatProperties(float);
}
if (layout) {
this.properties.setLayout(layout);
}
if (alignment) {
this.properties.setAlignment(alignment);
}
} }
} }