From 7679d32d4c58e6b8b3c7c8a288e66fe9291de1bf Mon Sep 17 00:00:00 2001
From: Sarid Shinwari <46545508+ngrok-sarid@users.noreply.github.com>
Date: Tue, 28 May 2019 15:18:45 -0400
Subject: [PATCH] [@types/react-table] Generics for accessor and cell (#35668)

* [react-table] Generics for accessor and cell

* Update types/react-table/react-table-tests.tsx

Header name change. status -> progress for clarification

Co-Authored-By: Grzegorz Rozdzialik <voreny.gelio@gmail.com>
---
 types/react-table/index.d.ts                  | 129 +++++++++---------
 types/react-table/lib/hoc/selectTable.d.ts    |   2 +-
 types/react-table/lib/hoc/treeTable.d.ts      |   2 +-
 types/react-table/react-table-tests.tsx       |   2 +-
 types/react-table/test/select-table-tests.tsx |   2 +-
 types/react-table/test/tree-table-tests.tsx   |   2 +-
 6 files changed, 70 insertions(+), 69 deletions(-)

diff --git a/types/react-table/index.d.ts b/types/react-table/index.d.ts
index 1b4c710c36..d05f170fb5 100644
--- a/types/react-table/index.d.ts
+++ b/types/react-table/index.d.ts
@@ -4,28 +4,29 @@
 //                 Pavel Sakalo <https://github.com/psakalo>,
 //                 Krzysztof Porębski <https://github.com/Havret>,
 //                 Andy S <https://github.com/andys8>,
-//                 Grzegorz Rozdzialik <https://github.com/Gelio>
-//                 Cam Pepin <https://github.com/cpepin>
+//                 Grzegorz Rozdzialik <https://github.com/Gelio>,
+//                 Cam Pepin <https://github.com/cpepin>,
+//                 Sarid Shinwari <https://github.com/ngrok-sarid>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 import * as React from 'react';
 
 export type ReactTableFunction = (value?: any) => void;
-export type AccessorFunction<D = any> = (row: D) => any;
-export type Accessor<D = any> = string | string[] | AccessorFunction<D>;
+export type AccessorFunction<D> = (row: D) => any;
+export type Accessor<D> = keyof D | Array<(keyof D)> | AccessorFunction<D>;
 export type Aggregator = (values: any, rows: any) => any;
-export type TableCellRenderer = ((cellInfo: CellInfo, column: any) => React.ReactNode) | React.ReactNode;
-export type FilterRender = (params: { column: Column, filter: any, onChange: ReactTableFunction, key?: string }) => React.ReactElement;
-export type PivotRenderer = ((cellInfo: CellInfo) => React.ReactNode) | (() => any) | string | React.ReactNode;
+export type TableCellRenderer<D> = ((cellInfo: CellInfo<D>, column: any) => React.ReactNode) | React.ReactNode;
+export type FilterRender<D> = (params: { column: Column<D>, filter: any, onChange: ReactTableFunction, key?: string }) => React.ReactElement;
+export type PivotRenderer<D> = ((cellInfo: CellInfo<D>) => 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 ComponentPropsGetterR<D> = (finalState: any, rowInfo?: RowInfo<D>, column?: undefined, instance?: any) => object | undefined;
+export type ComponentPropsGetterC<D> = (finalState: any, rowInfo?: undefined, column?: Column<D>, instance?: any) => object | undefined;
+export type ComponentPropsGetterRC<D> = (finalState: any, rowInfo?: RowInfo<D>, column?: Column<D>, instance?: any) => object | undefined;
 
 export type DefaultFilterFunction = (filter: Filter, row: any, column: any) => boolean;
 export type FilterFunction = (filter: Filter, rows: any[], column: any) => any[];
-export type SubComponentFunction = (rowInfo: RowInfo) => React.ReactNode;
+export type SubComponentFunction<D> = (rowInfo: RowInfo<D>) => React.ReactNode;
 export type PageChangeFunction = (page: number) => void;
 export type PageSizeChangeFunction = (newPageSize: number, newPage: number) => void;
 export type SortedChangeFunction = (newSorted: SortingRule[], column: any, additive: boolean) => void;
@@ -49,12 +50,12 @@ export interface SortingRule {
     desc: boolean;
 }
 
-export interface TableProps<D = any, ResolvedData = D> extends
+export interface TableProps<D, ResolvedData = D> extends
     TextProps,
-    ComponentDecoratorProps,
+    ComponentDecoratorProps<D>,
     ControlledStateCallbackProps,
     PivotingProps,
-    ControlledStateOverrideProps,
+    ControlledStateOverrideProps<D>,
     ComponentProps {
     /** Default: [] */
     data: D[];
@@ -166,7 +167,7 @@ export interface TableProps<D = any, ResolvedData = D> extends
     style: object;
 
     /** Global Column Defaults */
-    column: Partial<GlobalColumn>;
+    column: Partial<GlobalColumn<D>>;
 
     /** Array of all Available Columns */
     columns?: Array<Column<ResolvedData>>;
@@ -175,7 +176,7 @@ export interface TableProps<D = any, ResolvedData = D> extends
     expanderDefaults: Partial<ExpanderDefaults>;
 
     /** Privot defaults. */
-    pivotDefaults: Partial<PivotDefaults>;
+    pivotDefaults: Partial<PivotDefaults<D>>;
 
     /** The content rendered inside of a padding row */
     PadRowComponent: () => React.ReactNode;
@@ -191,7 +192,7 @@ export interface TableProps<D = any, ResolvedData = D> extends
     ) => React.ReactNode;
 }
 
-export interface ControlledStateOverrideProps {
+export interface ControlledStateOverrideProps<D> {
     /** Default: undefined */
     page: number | undefined;
 
@@ -217,7 +218,7 @@ export interface ControlledStateOverrideProps {
     expanded: {};
 
     /** Sub component */
-    SubComponent: SubComponentFunction;
+    SubComponent: SubComponentFunction<D>;
 }
 
 export interface PivotingProps {
@@ -303,27 +304,27 @@ export interface ControlledStateCallbackProps {
     onResizedChange: ResizedChangeFunction;
 }
 
-export interface ComponentDecoratorProps {
-    getProps: ComponentPropsGetterRC | ComponentPropsGetterC | ComponentPropsGetter0;
+export interface ComponentDecoratorProps<D> {
+    getProps: ComponentPropsGetterRC<D> | ComponentPropsGetterC<D> | ComponentPropsGetter0;
     getTableProps: ComponentPropsGetter0;
     getTheadGroupProps: ComponentPropsGetter0;
     getTheadGroupTrProps: ComponentPropsGetter0;
-    getTheadGroupThProps: ComponentPropsGetterC;
+    getTheadGroupThProps: ComponentPropsGetterC<D>;
     getTheadProps: ComponentPropsGetter0;
     getTheadTrProps: ComponentPropsGetter0;
-    getTheadThProps: ComponentPropsGetterC;
+    getTheadThProps: ComponentPropsGetterC<D>;
     getTheadFilterProps: ComponentPropsGetter0;
     getTheadFilterTrProps: ComponentPropsGetter0;
-    getTheadFilterThProps: ComponentPropsGetterC;
+    getTheadFilterThProps: ComponentPropsGetterC<D>;
     getTbodyProps: ComponentPropsGetter0;
-    getTrGroupProps: ComponentPropsGetterR | ComponentPropsGetter0;
-    getTrProps: ComponentPropsGetterR | ComponentPropsGetter0;
+    getTrGroupProps: ComponentPropsGetterR<D> | ComponentPropsGetter0;
+    getTrProps: ComponentPropsGetterR<D> | ComponentPropsGetter0;
 
     /**
      * @TODO not exists in react-table but in the docs
      */
     // getThProps: ComponentPropsGetter
-    getTdProps: ComponentPropsGetterRC | ComponentPropsGetterR;
+    getTdProps: ComponentPropsGetterRC<D> | ComponentPropsGetterR<D>;
     getTfootProps: ComponentPropsGetter0;
     getTfootTrProps: ComponentPropsGetter0;
 
@@ -382,17 +383,17 @@ export interface TextProps {
     rowsText: string;
 }
 
-export interface GlobalColumn extends
-    Column.Basics,
-    Column.CellProps,
-    Column.FilterProps,
-    Column.FooterProps,
-    Column.HeaderProps {
+export interface GlobalColumn<D> extends
+    Column.Basics<D>,
+    Column.CellProps<D>,
+    Column.FilterProps<D>,
+    Column.FooterProps<D>,
+    Column.HeaderProps<D> {
 }
 
 export namespace Column {
     /** Basic column props */
-    interface Basics {
+    interface Basics<D> {
         /** Default: undefined, use table default */
         sortable: boolean | undefined;
 
@@ -415,20 +416,20 @@ export namespace Column {
         defaultSortDesc: boolean | undefined;
 
         /** Used to render aggregated cells. Defaults to a comma separated list of values. */
-        Aggregated: TableCellRenderer;
+        Aggregated: TableCellRenderer<D>;
 
         /** Used to render a pivoted cell  */
-        Pivot: PivotRenderer;
+        Pivot: PivotRenderer<D>;
 
         /**  Used to render the value inside of a Pivot cell */
-        PivotValue: TableCellRenderer;
+        PivotValue: TableCellRenderer<D>;
 
         /** Used to render the expander in both Pivot and Expander cells */
-        Expander: TableCellRenderer;
+        Expander: TableCellRenderer<D>;
     }
 
     /** Configuration of a columns cell section */
-    interface CellProps {
+    interface CellProps<D> {
         /**
          * Default: undefined
          * A function that returns a primitive, or JSX / React Component
@@ -436,7 +437,7 @@ export namespace Column {
          * @example 'Cell Value'
          * @example ({data, column}) => <div>Cell Value</div>,
          */
-        Cell: TableCellRenderer;
+        Cell: TableCellRenderer<D>;
 
         /**
          * Set the classname of the `td` element of the column
@@ -457,7 +458,7 @@ export namespace Column {
     }
 
     /** Configuration of a columns header section */
-    interface HeaderProps {
+    interface HeaderProps<D> {
         /**
          * Default: undefined
          * A function that returns a primitive, or JSX / React Component
@@ -465,7 +466,7 @@ export namespace Column {
          * @example 'Header Name'
          * @example ({data, column}) => <div>Header Name</div>,
          */
-        Header: TableCellRenderer;
+        Header: TableCellRenderer<D>;
 
         /**
          * Set the classname of the `th` element of the column
@@ -487,7 +488,7 @@ export namespace Column {
     }
 
     /** Configuration of a columns footer section */
-    interface FooterProps {
+    interface FooterProps<D> {
         /**
          * Default: undefined
          * A function that returns a primitive, or JSX / React Component
@@ -495,7 +496,7 @@ export namespace Column {
          * @example 'Footer Name'
          * @example ({data, column}) => <div>Footer Name</div>,
          */
-        Footer: TableCellRenderer;
+        Footer: TableCellRenderer<D>;
 
         /**
          * Default: string
@@ -517,7 +518,7 @@ export namespace Column {
     }
 
     /** Filtering related column props */
-    interface FilterProps {
+    interface FilterProps<D> {
         /** Default: false */
         filterAll: boolean;
 
@@ -534,7 +535,7 @@ export namespace Column {
         hideFilter: boolean;
 
         /** Default: ... */
-        Filter: FilterRender;
+        Filter: FilterRender<D>;
     }
 }
 
@@ -552,17 +553,17 @@ export interface ExpanderDefaults {
     width: number;
 }
 
-export interface PivotDefaults {
+export interface PivotDefaults<D> {
     /** Will be overriden in methods.js to display ExpanderComponent */
-    render: TableCellRenderer;
+    render: TableCellRenderer<D>;
 }
 
-export interface Column<D = any> extends
-    Partial<Column.Basics>,
-    Partial<Column.CellProps>,
-    Partial<Column.FilterProps>,
-    Partial<Column.FooterProps>,
-    Partial<Column.HeaderProps> {
+export interface Column<D> extends
+    Partial<Column.Basics<D>>,
+    Partial<Column.CellProps<D>>,
+    Partial<Column.FilterProps<D>>,
+    Partial<Column.FooterProps<D>>,
+    Partial<Column.HeaderProps<D>> {
     /**
      * Property name as string or Accessor
      * @example: 'myProperty'
@@ -617,7 +618,7 @@ export interface Column<D = any> extends
     pivot?: boolean;
 }
 
-export interface ColumnRenderProps<D = any> {
+export interface ColumnRenderProps<D> {
     /** Sorted data. */
     data: D[];
 
@@ -625,15 +626,15 @@ export interface ColumnRenderProps<D = any> {
     column: Column<D>;
 }
 
-export interface RowRenderProps extends Partial<RowInfo> {
+export interface RowRenderProps<D> extends Partial<RowInfo<D>> {
     /** Whenever the current row is expanded */
     isExpanded?: boolean;
 
     /** The current cell value */
-    value?: any;
+    value?: D;
 }
 
-export interface RowInfo {
+export interface RowInfo<D> {
     /** Materialized row of data */
     row: any;
 
@@ -668,18 +669,18 @@ export interface RowInfo {
     subRows: any[];
 
     /** Original object passed to row */
-    original: any;
+    original: D;
 }
 
-export interface CellInfo extends RowInfo, Pick<ControlledStateOverrideProps, "resized"> {
+export interface CellInfo<D> extends RowInfo<D>, Pick<ControlledStateOverrideProps<D>, "resized"> {
     /* true if this row is expanded */
     isExpanded: boolean;
 
     /* the cell's column */
-    column: Column;
+    column: Column<D>;
 
     /* materialized value of the cell */
-    value: any;
+    value: D;
 
     /* true if the column is pivoted */
     pivoted: boolean;
@@ -709,7 +710,7 @@ export interface CellInfo extends RowInfo, Pick<ControlledStateOverrideProps, "r
     styles: object;
 }
 
-export interface FinalState<D = any> extends TableProps<D> {
+export interface FinalState<D> extends TableProps<D> {
     frozen: boolean;
     startRow: number;
     endRow: number;
@@ -728,10 +729,10 @@ export interface FinalState<D = any> extends TableProps<D> {
     headerGroups: any[];
 }
 
-export const ReactTableDefaults: TableProps;
+export const ReactTableDefaults: TableProps<any>;
 export default class ReactTable<D> extends React.Component<Partial<TableProps<D>>> { }
 
-export interface Instance<D = any> extends ReactTable<D> {
+export interface Instance<D> extends ReactTable<D> {
     context: any;
     props: Partial<TableProps<D>>;
     refs: any;
diff --git a/types/react-table/lib/hoc/selectTable.d.ts b/types/react-table/lib/hoc/selectTable.d.ts
index d1fc5d8392..f4020dcf2d 100644
--- a/types/react-table/lib/hoc/selectTable.d.ts
+++ b/types/react-table/lib/hoc/selectTable.d.ts
@@ -48,7 +48,7 @@ export interface SelectTableHOCOptions {
     floatingLeft?: boolean;
 }
 
-declare function selectTableHOC<Props extends Partial<TableProps>>(
+declare function selectTableHOC<Props extends Partial<TableProps<any>>>(
     WrappedComponent: ComponentType<Props>,
     options?: SelectTableHOCOptions
 ): ComponentClass<Props & SelectTableAdditionalProps>;
diff --git a/types/react-table/lib/hoc/treeTable.d.ts b/types/react-table/lib/hoc/treeTable.d.ts
index e696ceda02..49d113f627 100644
--- a/types/react-table/lib/hoc/treeTable.d.ts
+++ b/types/react-table/lib/hoc/treeTable.d.ts
@@ -2,7 +2,7 @@ import { ComponentType, ComponentClass } from 'react';
 
 import { TableProps } from '../../index';
 
-declare function treeTableHOC<Props extends Partial<TableProps>>(
+declare function treeTableHOC<Props extends Partial<TableProps<any>>>(
     WrappedComponent: ComponentType<Props>
 ): ComponentClass<Props>;
 
diff --git a/types/react-table/react-table-tests.tsx b/types/react-table/react-table-tests.tsx
index de7eea0bc7..9b2af35122 100644
--- a/types/react-table/react-table-tests.tsx
+++ b/types/react-table/react-table-tests.tsx
@@ -28,7 +28,7 @@ const columns: Array<Column<Data>> = [
         accessor: (data: Data) => data.age,
         Cell: props => <span className='number'>{props.value}</span>
       },
-      { Header: "Status", accessor: "status" }
+      { Header: "Progress", accessor: "progress" }
     ]
   },
   {
diff --git a/types/react-table/test/select-table-tests.tsx b/types/react-table/test/select-table-tests.tsx
index fe4ee5c694..a54afade1e 100644
--- a/types/react-table/test/select-table-tests.tsx
+++ b/types/react-table/test/select-table-tests.tsx
@@ -42,7 +42,7 @@ const selectTableAdditionalProps: SelectTableAdditionalProps = {
 
 const data = [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }];
 
-const columns: Column[] = [
+const columns: Array<Column<any>> = [
     { Header: 'ID', accessor: 'id' },
     { Header: 'Name', accessor: 'name' }
 ];
diff --git a/types/react-table/test/tree-table-tests.tsx b/types/react-table/test/tree-table-tests.tsx
index 6bb9461f78..e99608269b 100644
--- a/types/react-table/test/tree-table-tests.tsx
+++ b/types/react-table/test/tree-table-tests.tsx
@@ -8,7 +8,7 @@ const TreeTable = treeTableHOC(ReactTable);
 
 const data = [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }];
 
-const columns: Column[] = [
+const columns: Array<Column<any>> = [
     { Header: 'ID', accessor: 'id' },
     { Header: 'Name', accessor: 'name' }
 ];