mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: typing for DataTable row and cell

Browse source
This commit is contained in:
K.Kiyokawa 2021-09-14 01:33:17 +09:00 • committed by Eric Liu
commit 1827b6db3a
1 changed files with 27 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

48
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -5,8 +5,8 @@ export type DataTableKey = string;
export type DataTableValue = any; export type DataTableValue = any;
export interface DataTableEmptyHeader { export interface DataTableEmptyHeader<Row extends DataTableRow = DataTableRow> {
key: DataTableKey; key: keyof Row;
empty: boolean; empty: boolean;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
@ -15,8 +15,10 @@ export interface DataTableEmptyHeader {
minWidth?: string; minWidth?: string;
} }
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader<
key: DataTableKey; Row extends DataTableRow = DataTableRow
> {
key: keyof Row;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
@ -25,7 +27,9 @@ export interface DataTableNonEmptyHeader {
minWidth?: string; minWidth?: string;
} }
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; export type DataTableHeader<Row extends DataTableRow = DataTableRow> =
| DataTableNonEmptyHeader<Row>
| DataTableEmptyHeader<Row>;
export interface DataTableRow { export interface DataTableRow {
id: any; id: any;
@ -34,8 +38,8 @@ export interface DataTableRow {
export type DataTableRowId = any; export type DataTableRowId = any;
export interface DataTableCell { export interface DataTableCell<Row extends DataTableRow = DataTableRow> {
key: DataTableKey; key: keyof Row;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
} }
@ -47,14 +51,14 @@ type $Props = {
* Specify the data table headers * Specify the data table headers
* @default [] * @default []
*/ */
headers?: ReadonlyArray<DataTableHeader>; headers?: ReadonlyArray<DataTableHeader<Row>>;
/** /**
* Specify the rows the data table should render * Specify the rows the data table should render
* keys defined in `headers` are used for the row ids * keys defined in `headers` are used for the row ids
* @default [] * @default []
*/ */
rows?: ReadonlyArray<DataTableRow>; rows?: ReadonlyArray<Row>;
/** /**
* Set the size of the data table * Set the size of the data table
@ -183,33 +187,35 @@ type $Props = {
export type DataTableProps = Omit<$RestProps, keyof $Props> & $Props; export type DataTableProps = Omit<$RestProps, keyof $Props> & $Props;
export default class DataTable extends SvelteComponentTyped< export default class DataTable<
DataTableProps, Row extends DataTableRow = DataTableRow
> extends SvelteComponentTyped<
DataTableProps<Row>,
{ {
click: CustomEvent<{ click: CustomEvent<{
header?: DataTableHeader; header?: DataTableHeader<Row>;
row?: DataTableRow; row?: Row;
cell?: DataTableCell; cell?: DataTableCell<Row>;
}>; }>;
["click:header--expand"]: CustomEvent<{ expanded: boolean }>; ["click:header--expand"]: CustomEvent<{ expanded: boolean }>;
["click:header"]: CustomEvent<{ ["click:header"]: CustomEvent<{
header: DataTableHeader; header: DataTableHeader<Row>;
sortDirection?: "ascending" | "descending" | "none"; sortDirection?: "ascending" | "descending" | "none";
}>; }>;
["click:header--select"]: CustomEvent<{ ["click:header--select"]: CustomEvent<{
indeterminate: boolean; indeterminate: boolean;
selected: boolean; selected: boolean;
}>; }>;
["click:row"]: CustomEvent<DataTableRow>; ["click:row"]: CustomEvent<Row>;
["mouseenter:row"]: CustomEvent<DataTableRow>; ["mouseenter:row"]: CustomEvent<Row>;
["mouseleave:row"]: CustomEvent<DataTableRow>; ["mouseleave:row"]: CustomEvent<Row>;
["click:row--expand"]: CustomEvent<{ ["click:row--expand"]: CustomEvent<{
expanded: boolean; expanded: boolean;
row: DataTableRow; row: Row;
}>; }>;
["click:row--select"]: CustomEvent<{ ["click:row--select"]: CustomEvent<{
selected: boolean; selected: boolean;
row: DataTableRow; row: Row;
}>; }>;
["click:cell"]: CustomEvent<DataTableCell>; ["click:cell"]: CustomEvent<DataTableCell>;
}, },
@ -223,7 +229,7 @@ export default class DataTable extends SvelteComponentTyped<
}; };
["cell-header"]: { header: DataTableNonEmptyHeader }; ["cell-header"]: { header: DataTableNonEmptyHeader };
description: {}; description: {};
["expanded-row"]: { row: DataTableRow }; ["expanded-row"]: { row: Row };
title: {}; title: {};
} }
> {} > {}