From a639bc8310058b64fc0a7a06d78297bd9225970a Mon Sep 17 00:00:00 2001 From: andys8 Date: Tue, 16 Oct 2018 00:39:01 +0200 Subject: [PATCH 1/2] [react-table] type-safe accessor functions --- types/react-table/index.d.ts | 50 ++++++++++++------------- types/react-table/react-table-tests.tsx | 18 ++++++--- 2 files changed, 38 insertions(+), 30 deletions(-) diff --git a/types/react-table/index.d.ts b/types/react-table/index.d.ts index ca7981a6f8..3eb153c671 100644 --- a/types/react-table/index.d.ts +++ b/types/react-table/index.d.ts @@ -1,22 +1,22 @@ // Type definitions for react-table 6.7 // Project: https://github.com/react-tools/react-table -// Definitions by: Roy Xue , Pavel Sakalo , Krzysztof Porębski +// Definitions by: Roy Xue , Pavel Sakalo , Krzysztof Porębski , Andy S // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import * as React from 'react'; export type ReactTableFunction = (value?: any) => void; -export type AccessorFunction = (row: object) => any; -export type Accessor = string | string[] | object | AccessorFunction; +export type AccessorFunction = (row: D) => any; +export type Accessor = string | string[] | AccessorFunction; export type Aggregator = (values: any, rows: any) => any; export type TableCellRenderer = ((data: any, column: any) => React.ReactNode) | React.ReactNode; -export type FilterRender = (params: { column: Column, filter: any, onChange: ReactTableFunction, key?: string }) => React.ReactElement; +export type FilterRender = (params: { column: Column, filter: any, onChange: ReactTableFunction, key?: string }) => React.ReactElement; export type PivotRenderer = ((cellInfo: any) => React.ReactNode) | (() => any) | string | React.ReactNode; export type ComponentPropsGetter0 = (finalState: any, rowInfo: undefined, column: undefined, instance?: any) => object | undefined; export type ComponentPropsGetterR = (finalState: any, rowInfo?: RowInfo, column?: undefined, instance?: any) => object | undefined; -export type ComponentPropsGetterC = (finalState: any, rowInfo?: undefined, column?: Column, instance?: any) => object | undefined; -export type ComponentPropsGetterRC = (finalState: any, rowInfo?: RowInfo, column?: Column, instance?: any) => object | undefined; +export type ComponentPropsGetterC = (finalState: any, rowInfo?: undefined, column?: Column, instance?: any) => object | undefined; +export type ComponentPropsGetterRC = (finalState: any, rowInfo?: RowInfo, column?: Column, instance?: any) => object | undefined; export type DefaultFilterFunction = (filter: Filter, row: any, column: any) => boolean; export type FilterFunction = (filter: Filter, rows: any[], column: any) => boolean; @@ -46,7 +46,7 @@ export interface SortingRule { desc?: true; } -export interface TableProps extends +export interface TableProps extends Partial, Partial, Partial, @@ -54,7 +54,7 @@ export interface TableProps extends Partial, Partial { /** Default: [] */ - data: any[]; + data: D[]; /** Default: false */ loading: boolean; @@ -164,7 +164,7 @@ export interface TableProps extends column: Partial; /** Array of all Available Columns */ - columns?: Column[]; + columns?: Array>; /** Expander defaults. */ expanderDefaults: Partial; @@ -180,9 +180,9 @@ export interface TableProps extends /** Control callback for functional rendering */ children: ( - state: FinalState, + state: FinalState, makeTable: () => React.ReactElement, - instance: Instance + instance: Instance ) => React.ReactNode; } @@ -548,7 +548,7 @@ export interface PivotDefaults { render: TableCellRenderer; } -export interface Column extends +export interface Column extends Partial, Partial, Partial, @@ -562,7 +562,7 @@ export interface Column extends * @example {"a": {"b": {"c": $}}} * @example (row) => row.propertyName */ - accessor?: Accessor; + accessor?: Accessor; /** * Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls @@ -598,7 +598,7 @@ export interface Column extends expander?: boolean; /** Header Groups only */ - columns?: any[]; + columns?: Array>; /** * Turns this column into a special column for specifying pivot position in your column definitions. @@ -608,12 +608,12 @@ export interface Column extends pivot?: boolean; } -export interface ColumnRenderProps { +export interface ColumnRenderProps { /** Sorted data. */ - data: any[]; + data: D[]; /** The column. */ - column: Column; + column: Column; } export interface RowRenderProps extends Partial { @@ -662,7 +662,7 @@ export interface RowInfo { original: any; } -export interface FinalState extends TableProps { +export interface FinalState extends TableProps { frozen: boolean; startRow: number; endRow: number; @@ -674,21 +674,21 @@ export interface FinalState extends TableProps { canNext: boolean; rowMinWidth: number; - allVisibleColumns: Column[]; - allDecoratedColumns: Column[]; + allVisibleColumns: Array>; + allDecoratedColumns: Array>; resolvedData: DerivedDataObject[]; sortedData: DerivedDataObject[]; headerGroups: any[]; } -export const ReactTableDefaults: TableProps; -export default class ReactTable extends React.Component> { } +export const ReactTableDefaults: TableProps; +export default class ReactTable extends React.Component>> { } -export interface Instance extends ReactTable { +export interface Instance extends ReactTable { context: any; - props: Partial; + props: Partial>; refs: any; - state: FinalState; + state: FinalState; filterColumn(...props: any[]): any; filterData(...props: any[]): any; fireFetchData(...props: any[]): any; diff --git a/types/react-table/react-table-tests.tsx b/types/react-table/react-table-tests.tsx index b8380125b3..ca63bdd67c 100644 --- a/types/react-table/react-table-tests.tsx +++ b/types/react-table/react-table-tests.tsx @@ -5,7 +5,15 @@ import * as ReactDOM from 'react-dom'; import ReactTable, { Column, FinalState, Instance } from "react-table"; import "react-table/react-table.css"; -const columns: Column[] = [ +interface Data { + firstName: string; + lastName: string; + age: number; + visits: number; + progress: number; +} + +const columns: Array> = [ { Header: "Name", columns: [ @@ -16,7 +24,7 @@ const columns: Column[] = [ { Header: "Info", columns: [ - { Header: "Age", accessor: "age" }, + { Header: "Age", accessor: (data: Data) => data.age }, { Header: "Status", accessor: "status" } ] }, @@ -29,7 +37,7 @@ const columns: Column[] = [ ]; const Component = (props: {}) => { - const data = [ + const data: Data[] = [ { firstName: "plastic", lastName: "leather", age: 1, visits: 87, progress: 53 }, { firstName: "eggs", lastName: "quartz", age: 13, visits: 78, progress: 82 }, { firstName: "wash", lastName: "wrench", age: 29, visits: 75, progress: 49 }, @@ -156,9 +164,9 @@ const Component = (props: {}) => { }} > {( - state: FinalState, + state: FinalState, makeTable: () => React.ReactChild, - instance: Instance + instance: Instance ) => { return (
Date: Sun, 28 Oct 2018 15:28:32 +0100 Subject: [PATCH 2/2] [react-table] Column Data defaults to `any` This change is due to backwards compability. Co-Authored-By: andys8 --- types/react-table/index.d.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/types/react-table/index.d.ts b/types/react-table/index.d.ts index 3eb153c671..0d03604ae9 100644 --- a/types/react-table/index.d.ts +++ b/types/react-table/index.d.ts @@ -6,17 +6,17 @@ import * as React from 'react'; export type ReactTableFunction = (value?: any) => void; -export type AccessorFunction = (row: D) => any; -export type Accessor = string | string[] | AccessorFunction; +export type AccessorFunction = (row: D) => any; +export type Accessor = string | string[] | AccessorFunction; export type Aggregator = (values: any, rows: any) => any; export type TableCellRenderer = ((data: any, column: any) => React.ReactNode) | React.ReactNode; -export type FilterRender = (params: { column: Column, filter: any, onChange: ReactTableFunction, key?: string }) => React.ReactElement; +export type FilterRender = (params: { column: Column, filter: any, onChange: ReactTableFunction, key?: string }) => React.ReactElement; export type PivotRenderer = ((cellInfo: any) => React.ReactNode) | (() => any) | string | React.ReactNode; export type ComponentPropsGetter0 = (finalState: any, rowInfo: undefined, column: undefined, instance?: any) => object | undefined; export type ComponentPropsGetterR = (finalState: any, rowInfo?: RowInfo, column?: undefined, instance?: any) => object | undefined; -export type ComponentPropsGetterC = (finalState: any, rowInfo?: undefined, column?: Column, instance?: any) => object | undefined; -export type ComponentPropsGetterRC = (finalState: any, rowInfo?: RowInfo, column?: Column, instance?: any) => object | undefined; +export type ComponentPropsGetterC = (finalState: any, rowInfo?: undefined, column?: Column, instance?: any) => object | undefined; +export type ComponentPropsGetterRC = (finalState: any, rowInfo?: RowInfo, column?: Column, instance?: any) => object | undefined; export type DefaultFilterFunction = (filter: Filter, row: any, column: any) => boolean; export type FilterFunction = (filter: Filter, rows: any[], column: any) => boolean; @@ -46,7 +46,7 @@ export interface SortingRule { desc?: true; } -export interface TableProps extends +export interface TableProps extends Partial, Partial, Partial, @@ -548,7 +548,7 @@ export interface PivotDefaults { render: TableCellRenderer; } -export interface Column extends +export interface Column extends Partial, Partial, Partial, @@ -608,7 +608,7 @@ export interface Column extends pivot?: boolean; } -export interface ColumnRenderProps { +export interface ColumnRenderProps { /** Sorted data. */ data: D[]; @@ -662,7 +662,7 @@ export interface RowInfo { original: any; } -export interface FinalState extends TableProps { +export interface FinalState extends TableProps { frozen: boolean; startRow: number; endRow: number; @@ -681,10 +681,10 @@ export interface FinalState extends TableProps { headerGroups: any[]; } -export const ReactTableDefaults: TableProps; +export const ReactTableDefaults: TableProps; export default class ReactTable extends React.Component>> { } -export interface Instance extends ReactTable { +export interface Instance extends ReactTable { context: any; props: Partial>; refs: any;