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.
|
||||
* ```
|
||||
@@ -24,35 +48,23 @@ export abstract class Table<TRow extends object> {
|
||||
* 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
|
||||
* 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.
|
||||
* 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 "✖".
|
||||
* @param options Optional configuration. See {@link TableOptions}.
|
||||
*/
|
||||
constructor(exampleObject: TRow,
|
||||
displayNamesAndOrder?: Record<keyof TRow, string>,
|
||||
messageElement?: HTMLElement | undefined | null,
|
||||
trueSymbol: string = "✔",
|
||||
falseSymbol: string = "✖") {
|
||||
constructor(exampleObject: TRow, options: TableOptions<TRow> = {}) {
|
||||
|
||||
this.table = document.createElement("table")
|
||||
this.tableBody = document.createElement("tbody");
|
||||
|
||||
this.headers = this.createHeadersFromType(exampleObject, displayNamesAndOrder);
|
||||
this.headers = this.createHeadersFromType(exampleObject, options.displayNamesAndOrder);
|
||||
this.setHeaderRow();
|
||||
|
||||
this.table.appendChild(this.tableBody);
|
||||
|
||||
// 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.falseSymbol = falseSymbol;
|
||||
this.trueSymbol = options.trueSymbol ?? "✔";
|
||||
this.falseSymbol = options.falseSymbol ?? "✖";
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user