diff --git a/types/react-table/index.d.ts b/types/react-table/index.d.ts index 0d03604ae9..560abfecc0 100644 --- a/types/react-table/index.d.ts +++ b/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 , Pavel Sakalo , Krzysztof Porębski , Andy S +// Definitions by: Roy Xue +// Pavel Sakalo +// Krzysztof Porębski +// Grzegorz Rozdzialik +// Andy S // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import * as React from 'react'; diff --git a/types/react-table/lib/hoc/selectTable.d.ts b/types/react-table/lib/hoc/selectTable.d.ts new file mode 100644 index 0000000000..d70d84eb78 --- /dev/null +++ b/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; + SelectAllInputComponent?: ComponentType; +} + +export interface SelectTableHOCOptions { + /** + * Default: false + */ + floatingLeft?: boolean; +} + +declare function selectTableHOC>( + Component: ComponentType, + options?: SelectTableHOCOptions +): ComponentType; + +export default selectTableHOC; diff --git a/types/react-table/lib/hoc/treeTable.d.ts b/types/react-table/lib/hoc/treeTable.d.ts new file mode 100644 index 0000000000..35d1522119 --- /dev/null +++ b/types/react-table/lib/hoc/treeTable.d.ts @@ -0,0 +1,9 @@ +import { ComponentType } from 'react'; + +import { TableProps } from '../../index'; + +declare function treeTableHOC>( + Component: ComponentType +): ComponentType; + +export default treeTableHOC; diff --git a/types/react-table/test/select-table-tests.tsx b/types/react-table/test/select-table-tests.tsx new file mode 100644 index 0000000000..1a29ed07c1 --- /dev/null +++ b/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( + , + document.getElementById('root') +); diff --git a/types/react-table/test/tree-table-tests.tsx b/types/react-table/test/tree-table-tests.tsx new file mode 100644 index 0000000000..14ad8265de --- /dev/null +++ b/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( + , + document.getElementById('root') +); diff --git a/types/react-table/tsconfig.json b/types/react-table/tsconfig.json index de6f3f8e69..ef6f8f22a1 100644 --- a/types/react-table/tsconfig.json +++ b/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" ] } \ No newline at end of file