From b4fad1da940bff44921573238f3e9e2ecb1cf77c Mon Sep 17 00:00:00 2001 From: Grzegorz Rozdzialik Date: Fri, 26 Oct 2018 22:45:27 +0200 Subject: [PATCH 1/4] [react-table] add typings for selectTableHOC and treeTableHOC --- types/react-table/index.d.ts | 5 ++- types/react-table/lib/hoc/hoc-type.d.ts | 5 +++ types/react-table/lib/hoc/selectTable.d.ts | 50 ++++++++++++++++++++++ types/react-table/lib/hoc/treeTable.d.ts | 10 +++++ 4 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 types/react-table/lib/hoc/hoc-type.d.ts create mode 100644 types/react-table/lib/hoc/selectTable.d.ts create mode 100644 types/react-table/lib/hoc/treeTable.d.ts diff --git a/types/react-table/index.d.ts b/types/react-table/index.d.ts index ca7981a6f8..90ad254134 100644 --- a/types/react-table/index.d.ts +++ b/types/react-table/index.d.ts @@ -1,6 +1,9 @@ // 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 +// Grzegorz Rozdzialik // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import * as React from 'react'; diff --git a/types/react-table/lib/hoc/hoc-type.d.ts b/types/react-table/lib/hoc/hoc-type.d.ts new file mode 100644 index 0000000000..9970d07a5b --- /dev/null +++ b/types/react-table/lib/hoc/hoc-type.d.ts @@ -0,0 +1,5 @@ +import { ComponentType } from 'react'; + +type HOC = ( + Component: ComponentType +) => ComponentType; 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..59cf9d1f17 --- /dev/null +++ b/types/react-table/lib/hoc/selectTable.d.ts @@ -0,0 +1,50 @@ +import { ComponentType } from 'react'; + +import { TableProps } from '../../index'; +import { HOC } from './hoc-type'; + +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; +} + +declare const selectTableHOC: HOC< + Partial, + SelectTableAdditionalProps +>; + +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..2f91951789 --- /dev/null +++ b/types/react-table/lib/hoc/treeTable.d.ts @@ -0,0 +1,10 @@ +import { ComponentType } from 'react'; + +import { TableProps } from '../../index'; +import { HOC } from './hoc-type'; + +interface TreeTableAdditionalProps {} + +declare const treeTableHOC: HOC, TreeTableAdditionalProps>; + +export default treeTableHOC; From 5c4f74febd6bdca0ad3afcd2ab740c513ff097ca Mon Sep 17 00:00:00 2001 From: Grzegorz Rozdzialik Date: Sat, 27 Oct 2018 13:12:02 +0200 Subject: [PATCH 2/4] [react-table] add tests for HOCs --- types/react-table/select-table-tests.tsx | 36 ++++++++++++++++++++++++ types/react-table/tree-table-tests.tsx | 21 ++++++++++++++ types/react-table/tsconfig.json | 4 ++- 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 types/react-table/select-table-tests.tsx create mode 100644 types/react-table/tree-table-tests.tsx diff --git a/types/react-table/select-table-tests.tsx b/types/react-table/select-table-tests.tsx new file mode 100644 index 0000000000..1a29ed07c1 --- /dev/null +++ b/types/react-table/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/tree-table-tests.tsx b/types/react-table/tree-table-tests.tsx new file mode 100644 index 0000000000..14ad8265de --- /dev/null +++ b/types/react-table/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..b08c4dc5c1 100644 --- a/types/react-table/tsconfig.json +++ b/types/react-table/tsconfig.json @@ -20,6 +20,8 @@ }, "files": [ "index.d.ts", - "react-table-tests.tsx" + "react-table-tests.tsx", + "select-table-tests.tsx", + "tree-table-tests.tsx" ] } \ No newline at end of file From e2ccb7a1434b5fd9556df5024210473582c5b980 Mon Sep 17 00:00:00 2001 From: Grzegorz Rozdzialik Date: Sat, 27 Oct 2018 13:22:34 +0200 Subject: [PATCH 3/4] [react-table] add missing options to selectTableHOC --- types/react-table/lib/hoc/hoc-type.d.ts | 9 ++++++++- types/react-table/lib/hoc/selectTable.d.ts | 14 +++++++++++--- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/types/react-table/lib/hoc/hoc-type.d.ts b/types/react-table/lib/hoc/hoc-type.d.ts index 9970d07a5b..c8bdcb462c 100644 --- a/types/react-table/lib/hoc/hoc-type.d.ts +++ b/types/react-table/lib/hoc/hoc-type.d.ts @@ -1,5 +1,12 @@ import { ComponentType } from 'react'; -type HOC = ( +export type HOC = ( Component: ComponentType ) => ComponentType; + +export type HOCWithOptions = < + Props extends OwnProps +>( + Component: ComponentType, + options?: Options +) => ComponentType; diff --git a/types/react-table/lib/hoc/selectTable.d.ts b/types/react-table/lib/hoc/selectTable.d.ts index 59cf9d1f17..910c5a34a4 100644 --- a/types/react-table/lib/hoc/selectTable.d.ts +++ b/types/react-table/lib/hoc/selectTable.d.ts @@ -1,7 +1,7 @@ import { ComponentType } from 'react'; import { TableProps } from '../../index'; -import { HOC } from './hoc-type'; +import { HOCWithOptions } from './hoc-type'; export type SelectType = 'checkbox' | 'radio'; @@ -42,9 +42,17 @@ export interface SelectTableAdditionalProps { SelectAllInputComponent?: ComponentType; } -declare const selectTableHOC: HOC< +export interface SelectTableHOCOptions { + /** + * Default: false + */ + floatingLeft?: boolean; +} + +declare const selectTableHOC: HOCWithOptions< Partial, - SelectTableAdditionalProps + SelectTableAdditionalProps, + SelectTableHOCOptions >; export default selectTableHOC; From 9fd15718934e0f32eebc3c758828180694e4016f Mon Sep 17 00:00:00 2001 From: Grzegorz Rozdzialik Date: Sat, 27 Oct 2018 13:40:04 +0200 Subject: [PATCH 4/4] [react-table] move HOC tests to a test directory Fixes linting error [react-table] inline HOC types --- types/react-table/lib/hoc/hoc-type.d.ts | 12 ------------ types/react-table/lib/hoc/selectTable.d.ts | 10 ++++------ types/react-table/lib/hoc/treeTable.d.ts | 7 +++---- types/react-table/{ => test}/select-table-tests.tsx | 0 types/react-table/{ => test}/tree-table-tests.tsx | 0 types/react-table/tsconfig.json | 6 ++++-- 6 files changed, 11 insertions(+), 24 deletions(-) delete mode 100644 types/react-table/lib/hoc/hoc-type.d.ts rename types/react-table/{ => test}/select-table-tests.tsx (100%) rename types/react-table/{ => test}/tree-table-tests.tsx (100%) diff --git a/types/react-table/lib/hoc/hoc-type.d.ts b/types/react-table/lib/hoc/hoc-type.d.ts deleted file mode 100644 index c8bdcb462c..0000000000 --- a/types/react-table/lib/hoc/hoc-type.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ComponentType } from 'react'; - -export type HOC = ( - Component: ComponentType -) => ComponentType; - -export type HOCWithOptions = < - Props extends OwnProps ->( - Component: ComponentType, - options?: Options -) => ComponentType; diff --git a/types/react-table/lib/hoc/selectTable.d.ts b/types/react-table/lib/hoc/selectTable.d.ts index 910c5a34a4..d70d84eb78 100644 --- a/types/react-table/lib/hoc/selectTable.d.ts +++ b/types/react-table/lib/hoc/selectTable.d.ts @@ -1,7 +1,6 @@ import { ComponentType } from 'react'; import { TableProps } from '../../index'; -import { HOCWithOptions } from './hoc-type'; export type SelectType = 'checkbox' | 'radio'; @@ -49,10 +48,9 @@ export interface SelectTableHOCOptions { floatingLeft?: boolean; } -declare const selectTableHOC: HOCWithOptions< - Partial, - SelectTableAdditionalProps, - SelectTableHOCOptions ->; +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 index 2f91951789..35d1522119 100644 --- a/types/react-table/lib/hoc/treeTable.d.ts +++ b/types/react-table/lib/hoc/treeTable.d.ts @@ -1,10 +1,9 @@ import { ComponentType } from 'react'; import { TableProps } from '../../index'; -import { HOC } from './hoc-type'; -interface TreeTableAdditionalProps {} - -declare const treeTableHOC: HOC, TreeTableAdditionalProps>; +declare function treeTableHOC>( + Component: ComponentType +): ComponentType; export default treeTableHOC; diff --git a/types/react-table/select-table-tests.tsx b/types/react-table/test/select-table-tests.tsx similarity index 100% rename from types/react-table/select-table-tests.tsx rename to types/react-table/test/select-table-tests.tsx diff --git a/types/react-table/tree-table-tests.tsx b/types/react-table/test/tree-table-tests.tsx similarity index 100% rename from types/react-table/tree-table-tests.tsx rename to types/react-table/test/tree-table-tests.tsx diff --git a/types/react-table/tsconfig.json b/types/react-table/tsconfig.json index b08c4dc5c1..ef6f8f22a1 100644 --- a/types/react-table/tsconfig.json +++ b/types/react-table/tsconfig.json @@ -20,8 +20,10 @@ }, "files": [ "index.d.ts", + "lib/hoc/selectTable.d.ts", + "lib/hoc/treeTable.d.ts", "react-table-tests.tsx", - "select-table-tests.tsx", - "tree-table-tests.tsx" + "test/select-table-tests.tsx", + "test/tree-table-tests.tsx" ] } \ No newline at end of file