Merge pull request #30074 from Gelio/react-table-hocs

[react-table] Add typings for selectTableHOC and treeTableHOC

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>
+//                 Grzegorz Rozdzialik <https://github.com/Gelio>
+//                 Andy S <https://github.com/andys8>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 import * as React from 'react';

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

@@ -0,0 +1,56 @@
+import { ComponentType } from 'react';
+
+import { TableProps } from '../../index';
+
+export type SelectType = 'checkbox' | 'radio';
+
+export interface SelectInputComponentProps {
+    selectType: SelectType;
+    onClick: (key: string, shiftKeyPressed: boolean, row: any) => any;
+    checked: boolean;
+    id: string;
+    row: any;
+}
+
+export interface SelectAllInputComponent {
+    selectType: SelectType;
+    checked: boolean;
+    onClick: () => any;
+}
+
+export interface SelectTableAdditionalProps {
+    /**
+     * Default: _id
+     */
+    keyField?: string;
+
+    isSelected?: (key: string) => boolean;
+
+    selectAll?: boolean;
+
+    toggleAll?: SelectAllInputComponent['onClick'];
+
+    toggleSelection?: SelectInputComponentProps['onClick'];
+
+    /**
+     * Default: checkbox
+     */
+    selectType?: SelectType;
+
+    SelectInputComponent?: ComponentType<SelectInputComponentProps>;
+    SelectAllInputComponent?: ComponentType<SelectAllInputComponent>;
+}
+
+export interface SelectTableHOCOptions {
+    /**
+     * Default: false
+     */
+    floatingLeft?: boolean;
+}
+
+declare function selectTableHOC<Props extends Partial<TableProps>>(
+    Component: ComponentType<Props>,
+    options?: SelectTableHOCOptions
+): ComponentType<Props & SelectTableAdditionalProps>;
+
+export default selectTableHOC;

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

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+
+import { TableProps } from '../../index';
+
+declare function treeTableHOC<Props extends Partial<TableProps>>(
+    Component: ComponentType<Props>
+): ComponentType<Props>;
+
+export default treeTableHOC;

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import ReactTable, { Column } from 'react-table';
+import selectTableHOC, {
+    SelectTableAdditionalProps
+} from 'react-table/lib/hoc/selectTable';
+
+import 'react-table/react-table.css';
+
+const SelectTable = selectTableHOC(ReactTable);
+
+const selectTableAdditionalProps: SelectTableAdditionalProps = {
+    isSelected: () => true,
+    keyField: 'id',
+    selectAll: true,
+    selectType: 'checkbox',
+    toggleAll: () => null,
+    toggleSelection: () => null
+};
+
+const data = [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }];
+
+const columns: Column[] = [
+    { Header: 'ID', accessor: 'id' },
+    { Header: 'Name', accessor: 'name' }
+];
+
+ReactDOM.render(
+    <SelectTable
+        {...selectTableAdditionalProps}
+        data={data}
+        columns={columns}
+    />,
+    document.getElementById('root')
+);

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import ReactTable, { Column } from 'react-table';
+import treeTableHOC from 'react-table/lib/hoc/treeTable';
+
+import 'react-table/react-table.css';
+
+const SelectTable = treeTableHOC(ReactTable);
+
+const data = [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }];
+
+const columns: Column[] = [
+    { Header: 'ID', accessor: 'id' },
+    { Header: 'Name', accessor: 'name' }
+];
+
+ReactDOM.render(
+    <SelectTable data={data} columns={columns} />,
+    document.getElementById('root')
+);

types/react-table/tsconfig.json

@@ -20,6 +20,10 @@
     },
     "files": [
         "index.d.ts",
-        "react-table-tests.tsx"
+        "lib/hoc/selectTable.d.ts",
+        "lib/hoc/treeTable.d.ts",
+        "react-table-tests.tsx",
+        "test/select-table-tests.tsx",
+        "test/tree-table-tests.tsx"
     ]
 }