Merge pull request #30809 from Gelio/react-table-fixes

[react-table] selectTableHOC fixes

types/react-table/index.d.ts

@@ -1,6 +1,10 @@
 // Type definitions for react-table 6.7
 // Project: https://github.com/react-tools/react-table
-// Definitions by: Roy Xue <https://github.com/royxue>, Pavel Sakalo <https://github.com/psakalo>, Krzysztof Porębski <https://github.com/Havret>, Andy S <https://github.com/andys8>
+// Definitions by: Roy Xue <https://github.com/royxue>,
+//                 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>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 import * as React from 'react';
@@ -46,7 +50,7 @@ export interface SortingRule {
     desc?: true;
 }
 
-export interface TableProps<D = any> extends
+export interface TableProps<D = any, ResolvedData = D> extends
     Partial<TextProps>,
     Partial<ComponentDecoratorProps>,
     Partial<ControlledStateCallbackProps>,
@@ -56,6 +60,8 @@ export interface TableProps<D = any> extends
     /** Default: [] */
     data: D[];
 
+    resolveData?: (data: D[]) => ResolvedData[];
+
     /** Default: false */
     loading: boolean;
 
@@ -164,7 +170,7 @@ export interface TableProps<D = any> extends
     column: Partial<GlobalColumn>;
 
     /** Array of all Available Columns */
-    columns?: Array<Column<D>>;
+    columns?: Array<Column<ResolvedData>>;
 
     /** Expander defaults. */
     expanderDefaults: Partial<ExpanderDefaults>;
@@ -180,9 +186,9 @@ export interface TableProps<D = any> extends
 
     /** Control callback for functional rendering */
     children: (
-        state: FinalState<D>,
+        state: FinalState<ResolvedData>,
         makeTable: () => React.ReactElement<any>,
-        instance: Instance<D>
+        instance: Instance<ResolvedData>
     ) => React.ReactNode;
 }
 

types/react-table/lib/hoc/selectTable.d.ts

@@ -12,7 +12,7 @@ export interface SelectInputComponentProps {
     row: any;
 }
 
-export interface SelectAllInputComponent {
+export interface SelectAllInputComponentProps {
     selectType: SelectType;
     checked: boolean;
     onClick: () => any;
@@ -28,7 +28,7 @@ export interface SelectTableAdditionalProps {
 
     selectAll?: boolean;
 
-    toggleAll?: SelectAllInputComponent['onClick'];
+    toggleAll?: SelectAllInputComponentProps['onClick'];
 
     toggleSelection?: SelectInputComponentProps['onClick'];
 
@@ -38,7 +38,7 @@ export interface SelectTableAdditionalProps {
     selectType?: SelectType;
 
     SelectInputComponent?: ComponentType<SelectInputComponentProps>;
-    SelectAllInputComponent?: ComponentType<SelectAllInputComponent>;
+    SelectAllInputComponent?: ComponentType<SelectAllInputComponentProps>;
 }
 
 export interface SelectTableHOCOptions {

types/react-table/test/select-table-tests.tsx

@@ -3,18 +3,41 @@ import * as ReactDOM from 'react-dom';
 
 import ReactTable, { Column } from 'react-table';
 import selectTableHOC, {
-    SelectTableAdditionalProps
+    SelectTableAdditionalProps,
+    SelectInputComponentProps,
+    SelectAllInputComponentProps
 } from 'react-table/lib/hoc/selectTable';
 
 const SelectTable = selectTableHOC(ReactTable);
 
+const SelectInput: React.StatelessComponent<SelectInputComponentProps> = ({
+    onClick,
+    id,
+    checked,
+    row
+}) => (
+    <input
+        type="checkbox"
+        onClick={e => onClick(id, e.shiftKey, row)}
+        checked={checked}
+    />
+);
+
+const SelectAllInput: React.StatelessComponent<
+    SelectAllInputComponentProps
+> = ({ onClick, checked }) => (
+    <input type="checkbox" onClick={onClick} checked={checked} />
+);
+
 const selectTableAdditionalProps: SelectTableAdditionalProps = {
     isSelected: () => true,
     keyField: 'id',
     selectAll: true,
     selectType: 'checkbox',
     toggleAll: () => null,
-    toggleSelection: () => null
+    toggleSelection: () => null,
+    SelectInputComponent: SelectInput,
+    SelectAllInputComponent: SelectAllInput
 };
 
 const data = [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }];