Tweaks to DataTable generics (#1968)

Adjust DataTable types.
- Make key in `cell` slot prop less strict to prevent type errors in markup.
- Resolve property path names up to one level deep for header keys.
This commit is contained in:
brunnerh 2024-05-04 20:24:39 +02:00 committed by Eric Liu
commit e49369ef02
7 changed files with 79 additions and 27 deletions

View file

@ -2,14 +2,34 @@
/**
* @generics {Row extends DataTableRow = DataTableRow} Row
* @template {DataTableRow} Row
* @typedef {Exclude<keyof Row, "id">} DataTableKey<Row=DataTableRow>
* @typedef {import('./DataTableTypes.d.ts').PropertyPath<Row>} DataTableKey<Row=DataTableRow>
* @typedef {any} DataTableValue
* @typedef {{ key: DataTableKey<Row>; empty: boolean; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader<Row=DataTableRow>
* @typedef {{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader<Row=DataTableRow>
* @typedef {{
* key: DataTableKey<Row>;
* empty: boolean;
* display?: (item: Value, row: Row) => DataTableValue;
* sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
* columnMenu?: boolean;
* width?: string;
* minWidth?: string;
* }} DataTableEmptyHeader<Row=DataTableRow>
* @typedef {{
* key: DataTableKey<Row>;
* value: DataTableValue;
* display?: (item: Value, row: Row) => DataTableValue;
* sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
* columnMenu?: boolean;
* width?: string;
* minWidth?: string;
* }} DataTableNonEmptyHeader<Row=DataTableRow>
* @typedef {DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>} DataTableHeader<Row=DataTableRow>
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId
* @typedef {{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }} DataTableCell<Row=DataTableRow>
* @typedef {{
* key: DataTableKey<Row> | (string & {});
* value: DataTableValue;
* display?: (item: Value, row: DataTableRow) => DataTableValue;
* }} DataTableCell<Row=DataTableRow>
* @slot {{ row: Row; }} expanded-row
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header
* @slot {{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }} cell

17
src/DataTable/DataTableTypes.d.ts vendored Normal file
View file

@ -0,0 +1,17 @@
type PathDepth = [never, 0, 1, 2, ...0[]];
type Join<K, P> = K extends string | number
? P extends string | number
? `${K}${"" extends P ? "" : "."}${P}`
: never
: never;
export type PropertyPath<T, D extends number = 10> = [D] extends [never]
? never
: T extends object
? {
[K in keyof T]-?: K extends string | number
? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
: never;
}[keyof T]
: "";