mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
fix(carbon-components-react) Updated DataTableCustomSelectionProps accordingly to the Element's props (#42128)
* Updated DataTableCustomSelectionProps accordingly to the Element's props * Added test for DataTable * Fixed test lint
This commit is contained in:
parent
7858186a9f
commit
dbfc9ddb5b
@ -2,6 +2,7 @@ import * as React from 'react';
|
||||
import {
|
||||
AccordionItem,
|
||||
DataTable,
|
||||
DataTableCustomRenderProps,
|
||||
DataTableHeader,
|
||||
DataTableRow,
|
||||
Slider,
|
||||
@ -169,6 +170,63 @@ const t4 = (
|
||||
}}
|
||||
/>
|
||||
);
|
||||
// RenderProps are compatible with sub-elements
|
||||
interface T5RowType extends DataTableRow {
|
||||
col1: number;
|
||||
col2: number;
|
||||
}
|
||||
const t5RowItems: T5RowType[] = [
|
||||
{ id: "row0", col1: 0, col2: 0},
|
||||
{ id: "row1", col1: 1, col2: 1},
|
||||
];
|
||||
const t5Headers: DataTableHeader[] = [
|
||||
{key: 'col1', header: 'First column'},
|
||||
{key: 'col2', header: 'Second column'}
|
||||
];
|
||||
const t5 = (
|
||||
<DataTable
|
||||
rows={t5RowItems}
|
||||
headers={t5Headers}
|
||||
render={(renderProps: DataTableCustomRenderProps<T5RowType>) => (
|
||||
<DataTable.TableContainer>
|
||||
<DataTable.Table {...renderProps.getTableProps()}>
|
||||
<DataTable.TableHead>
|
||||
<DataTable.TableRow>
|
||||
<DataTable.TableSelectAll
|
||||
{...renderProps.getSelectionProps()}
|
||||
/>
|
||||
{renderProps.headers.map(header => (
|
||||
<DataTable.TableHeader
|
||||
{...renderProps.getHeaderProps({ header })}
|
||||
>
|
||||
{header.header}
|
||||
</DataTable.TableHeader>
|
||||
))}
|
||||
<DataTable.TableHeader />
|
||||
</DataTable.TableRow>
|
||||
</DataTable.TableHead>
|
||||
<DataTable.TableBody>
|
||||
{renderProps.rows.map(row => (
|
||||
<React.Fragment key={row.id}>
|
||||
<DataTable.TableRow {...renderProps.getRowProps({ row })}>
|
||||
<DataTable.TableSelectRow
|
||||
{...renderProps.getSelectionProps({ row })}
|
||||
/>
|
||||
{row.cells.map(cell => (
|
||||
<DataTable.TableCell key={cell.id}>
|
||||
{cell.value}
|
||||
</DataTable.TableCell>
|
||||
))}
|
||||
<DataTable.TableCell key={`options${row.id}`} />
|
||||
</DataTable.TableRow>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</DataTable.TableBody>
|
||||
</DataTable.Table>
|
||||
</DataTable.TableContainer>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
// UIShell - Link
|
||||
interface TestCompProps {
|
||||
|
||||
@ -70,13 +70,13 @@ export interface DataTableCustomSelectionData<R extends DataTableRow = DataTable
|
||||
|
||||
export interface DataTableCustomSelectionProps<R extends DataTableRow = DataTableRow> {
|
||||
ariaLabel?: string,
|
||||
checked: R extends never ? boolean : R["isSelected"],
|
||||
checked: R extends never ? boolean : NonNullable<R["isSelected"]>,
|
||||
disabled: R extends never ? never : R["disabled"],
|
||||
id: string,
|
||||
indeterminate: R extends never ? boolean : never,
|
||||
name: string,
|
||||
onSelect(event: React.MouseEvent<HTMLElement>): void,
|
||||
radio: R extends never ? never : (Extract<DataTableProps["radio"], true> | null),
|
||||
radio?: R extends never ? never : (Extract<DataTableProps["radio"], boolean>),
|
||||
}
|
||||
|
||||
// endregion Row Types
|
||||
|
||||
Loading…
Reference in New Issue
Block a user