Refactor constructor to an options object
Introduce an exported TableOptions<TRow> type and replace the trailing positional constructor parameters (displayNamesAndOrder, messageElement, trueSymbol, falseSymbol) with a single optional options object, so call sites are order-independent and named.
This commit is contained in:
@@ -1,3 +1,27 @@
|
|||||||
|
/**
|
||||||
|
* Optional configuration for a {@link Table}.
|
||||||
|
* @template TRow The row shape; see {@link Table}.
|
||||||
|
*/
|
||||||
|
export type TableOptions<TRow extends object> = {
|
||||||
|
/**
|
||||||
|
* A object with the same properties, but all string type for the header cell values.
|
||||||
|
* Used by passing an object with the keys of {@link TRow} and the name preferred. E.g. for a user:
|
||||||
|
* ```{ id: "ID", name: "Name" }```, this makes the columns appear in the order of ID then Name.
|
||||||
|
*/
|
||||||
|
displayNamesAndOrder?: Record<keyof TRow, string>;
|
||||||
|
/**
|
||||||
|
* Used to display messages related to data output. Optional.
|
||||||
|
* Omit (undefined) to use the class provided HTMLParagraphElement.
|
||||||
|
* Pass an HTMLElement to use a custom element.
|
||||||
|
* Pass null to disable automatic message output.
|
||||||
|
*/
|
||||||
|
messageElement?: HTMLElement | null;
|
||||||
|
/** The symbol used for boolean cells that are true. Optional, default "✔". */
|
||||||
|
trueSymbol?: string;
|
||||||
|
/** The symbol used for boolean cells that are false. Optional, default "✖". */
|
||||||
|
falseSymbol?: string;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @template TRow A type that the shape of a row should be. E.g.
|
* @template TRow A type that the shape of a row should be. E.g.
|
||||||
* ```
|
* ```
|
||||||
@@ -24,35 +48,23 @@ export abstract class Table<TRow extends object> {
|
|||||||
* Constructs a table based on the parameters given.
|
* Constructs a table based on the parameters given.
|
||||||
* @param exampleObject An instance of the type to be displaying. Can be an object with default/zero values for that type
|
* @param exampleObject An instance of the type to be displaying. Can be an object with default/zero values for that type
|
||||||
* such as `0`, `""`, `false` or `true`. E.g. for a user ```{ id: 0; name: ""; }``` would be passed.
|
* such as `0`, `""`, `false` or `true`. E.g. for a user ```{ id: 0; name: ""; }``` would be passed.
|
||||||
* @param displayNamesAndOrder A object with the same properties, but all string type for the header cell values.
|
* @param options Optional configuration. See {@link TableOptions}.
|
||||||
* Used by passing an object with the keys of {@link TRow} and the name preferred. E.g. for a user:
|
|
||||||
* ```{ id: "ID", name: "Name" }```, this makes the columns appear in the order of ID then Name.
|
|
||||||
* @param messageElement Used to display messages related to data output. Optional.
|
|
||||||
* Omit (undefined) to use the class provided HTMLParagraphElement.
|
|
||||||
* Pass an HTMLElement to use a custom element.
|
|
||||||
* Pass null to disable automatic message output.
|
|
||||||
* @param trueSymbol The symbol used for boolean cells that are true. Optional, default "✔".
|
|
||||||
* @param falseSymbol The symbol used for boolean cells that are false. Optional, default "✖".
|
|
||||||
*/
|
*/
|
||||||
constructor(exampleObject: TRow,
|
constructor(exampleObject: TRow, options: TableOptions<TRow> = {}) {
|
||||||
displayNamesAndOrder?: Record<keyof TRow, string>,
|
|
||||||
messageElement?: HTMLElement | undefined | null,
|
|
||||||
trueSymbol: string = "✔",
|
|
||||||
falseSymbol: string = "✖") {
|
|
||||||
|
|
||||||
this.table = document.createElement("table")
|
this.table = document.createElement("table")
|
||||||
this.tableBody = document.createElement("tbody");
|
this.tableBody = document.createElement("tbody");
|
||||||
|
|
||||||
this.headers = this.createHeadersFromType(exampleObject, displayNamesAndOrder);
|
this.headers = this.createHeadersFromType(exampleObject, options.displayNamesAndOrder);
|
||||||
this.setHeaderRow();
|
this.setHeaderRow();
|
||||||
|
|
||||||
this.table.appendChild(this.tableBody);
|
this.table.appendChild(this.tableBody);
|
||||||
|
|
||||||
// If null it means disabled
|
// If null it means disabled
|
||||||
this.messageEl = messageElement === undefined ? document.createElement("p") : messageElement;
|
this.messageEl = options.messageElement === undefined ? document.createElement("p") : options.messageElement;
|
||||||
|
|
||||||
this.trueSymbol = trueSymbol;
|
this.trueSymbol = options.trueSymbol ?? "✔";
|
||||||
this.falseSymbol = falseSymbol;
|
this.falseSymbol = options.falseSymbol ?? "✖";
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user