Skip to content

Commit

Permalink
feat: improve TypeScript typings (#165)
Browse files Browse the repository at this point in the history
* Update actions types

* Remove props from GetButtonPropsOptions

These props are not required for getButtonProps.

* Make getItemProps index optional

* Update state types

* Update DownshiftProps and A11StatusMessageOptions

Allow null in places where the docs say they can go. Add missing `itemCount` property.

* Remove version number from types

* Update contributors

* Address PR comments

* Rename `changes` back to `options`.
* Add optional arguments in the
right places.
* Use `Function` as type for `cb`.
* Use `object` ast type
for `otherStateToSet`.
* Fix incorrect name `setHighlightedItem` by
changing it to
`setHighlightedIndex`.

* Address updated PR comments

* Rename `A11StatusMessageOptions` to `A11yStatusMessageOptions`.
* Remove `ChangeOptions`.
* Remove `onClick` prop.

* Update README.md
  • Loading branch information
tansongyang authored and Kent C. Dodds committed Sep 4, 2017
1 parent 7b4a40c commit 0f71611
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 39 deletions.
9 changes: 9 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,15 @@
"doc",
"ideas"
]
},
{
"login": "tansongyang",
"name": "Frank Tan",
"avatar_url": "https://avatars3.githubusercontent.com/u/9488719?v=4",
"profile": "https://github.com/tansongyang",
"contributions": [
"code"
]
}
]
}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -554,7 +554,7 @@ Thanks goes to these people ([emoji key][emojis]):
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars2.githubusercontent.com/u/15073300?v=4" width="100px;"/><br /><sub>monssef</sub>](https://github.com/rezof)<br />[💡](#example-rezof "Examples") | [<img src="https://avatars2.githubusercontent.com/u/5382443?v=4" width="100px;"/><br /><sub>Federico Zivolo</sub>](https://fezvrasta.github.io)<br />[📖](https://github.com/paypal/downshift/commits?author=FezVrasta "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/746482?v=4" width="100px;"/><br /><sub>Divyendu Singh</sub>](https://divyendusingh.com)<br />[💡](#example-divyenduz "Examples") | [<img src="https://avatars1.githubusercontent.com/u/841955?v=4" width="100px;"/><br /><sub>Muhammad Salman</sub>](https://github.com/salmanmanekia)<br />[💻](https://github.com/paypal/downshift/commits?author=salmanmanekia "Code") | [<img src="https://avatars3.githubusercontent.com/u/10820159?v=4" width="100px;"/><br /><sub>João Alberto</sub>](https://twitter.com/psicotropidev)<br />[💻](https://github.com/paypal/downshift/commits?author=psicotropicos "Code") | [<img src="https://avatars0.githubusercontent.com/u/16327281?v=4" width="100px;"/><br /><sub>Bernard Lin</sub>](https://github.com/bernard-lin)<br />[💻](https://github.com/paypal/downshift/commits?author=bernard-lin "Code") [📖](https://github.com/paypal/downshift/commits?author=bernard-lin "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/7330124?v=4" width="100px;"/><br /><sub>Geoff Davis</sub>](https://geoffdavis.info)<br />[💡](#example-geoffdavis92 "Examples") |
| [<img src="https://avatars0.githubusercontent.com/u/3415488?v=4" width="100px;"/><br /><sub>Anup</sub>](https://github.com/reznord)<br />[📖](https://github.com/paypal/downshift/commits?author=reznord "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/340520?v=4" width="100px;"/><br /><sub>Ferdinand Salis</sub>](http://ferdinandsalis.com)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Aferdinandsalis "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=ferdinandsalis "Code") | [<img src="https://avatars2.githubusercontent.com/u/662750?v=4" width="100px;"/><br /><sub>Kye Hohenberger</sub>](https://github.com/tkh44)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Atkh44 "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1443499?v=4" width="100px;"/><br /><sub>Julien Goux</sub>](https://github.com/jgoux)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Ajgoux "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=jgoux "Code") [⚠️](https://github.com/paypal/downshift/commits?author=jgoux "Tests") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub>Joachim Seminck</sub>](https://github.com/jseminck)<br />[💻](https://github.com/paypal/downshift/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/954596?v=4" width="100px;"/><br /><sub>Jesse Harlin</sub>](http://jesseharlin.net/)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Athe-simian "Bug reports") [💡](#example-the-simian "Examples") | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub>Matt Parrish</sub>](https://github.com/pbomb)<br />[🔧](#tool-pbomb "Tools") |
| [<img src="https://avatars1.githubusercontent.com/u/11661846?v=4" width="100px;"/><br /><sub>thom</sub>](http://thom.kr)<br />[💻](https://github.com/paypal/downshift/commits?author=thomhos "Code") | [<img src="https://avatars2.githubusercontent.com/u/1088312?v=4" width="100px;"/><br /><sub>Vu Tran</sub>](http://twitter.com/tranvu)<br />[💻](https://github.com/paypal/downshift/commits?author=vutran "Code") | [<img src="https://avatars1.githubusercontent.com/u/74193?v=4" width="100px;"/><br /><sub>Codie Mullins</sub>](https://github.com/codiemullins)<br />[💻](https://github.com/paypal/downshift/commits?author=codiemullins "Code") [💡](#example-codiemullins "Examples") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub>Mohammad Rajabifard</sub>](https://morajabi.me)<br />[📖](https://github.com/paypal/downshift/commits?author=morajabi "Documentation") [🤔](#ideas-morajabi "Ideas, Planning, & Feedback") |
| [<img src="https://avatars1.githubusercontent.com/u/11661846?v=4" width="100px;"/><br /><sub>thom</sub>](http://thom.kr)<br />[💻](https://github.com/paypal/downshift/commits?author=thomhos "Code") | [<img src="https://avatars2.githubusercontent.com/u/1088312?v=4" width="100px;"/><br /><sub>Vu Tran</sub>](http://twitter.com/tranvu)<br />[💻](https://github.com/paypal/downshift/commits?author=vutran "Code") | [<img src="https://avatars1.githubusercontent.com/u/74193?v=4" width="100px;"/><br /><sub>Codie Mullins</sub>](https://github.com/codiemullins)<br />[💻](https://github.com/paypal/downshift/commits?author=codiemullins "Code") [💡](#example-codiemullins "Examples") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub>Mohammad Rajabifard</sub>](https://morajabi.me)<br />[📖](https://github.com/paypal/downshift/commits?author=morajabi "Documentation") [🤔](#ideas-morajabi "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub>Frank Tan</sub>](https://github.com/tansongyang)<br />[💻](https://github.com/paypal/downshift/commits?author=tansongyang "Code") |
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors][all-contributors] specification.
Expand Down
57 changes: 19 additions & 38 deletions typings/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@ import * as React from 'react';

export interface DownshiftProps {
children: ChildrenFunction;
defaultHighlightedIndex?: number;
defaultHighlightedIndex?: number | null;
defaultSelectedItem?: any;
defaultInputValue?: string;
defaultIsOpen?: boolean;
getA11yStatusMessage?: (options: A11StatusMessageOptions) => any;
getA11yStatusMessage?: (options: A11yStatusMessageOptions) => any;
itemToString?: (item: any) => string;
onChange?: (selectedItem: any, stateAndHelpers: ControllerStateAndHelpers) => void;
onStateChange?: (options: StateChangeOptions, stateAndHelpers: ControllerStateAndHelpers) => void;
onUserAction?: (options: StateChangeOptions, stateAndHelpers: ControllerStateAndHelpers) => void;
onClick?: Function;
itemCount?: number;
selectedItem?: any;
isOpen?: boolean;
inputValue?: string;
highlightedIndex?: number;
}

export interface A11StatusMessageOptions {
highlightedIndex: number;
export interface A11yStatusMessageOptions {
highlightedIndex: number | null;
highlightedValue: any;
inputValue: string;
isOpen: boolean;
Expand All @@ -29,11 +29,6 @@ export interface A11StatusMessageOptions {
selectedItem: any;
}

export interface ChangeOptions {
selectedItem: any;
previousItem: any;
}

export interface StateChangeOptions {
highlightedIndex: number;
inputValue: string;
Expand All @@ -49,30 +44,14 @@ export interface GetInputPropsOptions extends React.HTMLProps<HTMLInputElement>

export interface GetLabelPropsOptions extends React.HTMLProps<HTMLLabelElement> { }

export interface GetButtonPropsOptions extends React.HTMLProps<HTMLButtonElement> {
// actions
clearSelection: () => void;
closeMenu: () => void;
openMenu: () => void;
selectHighlightedItem: () => void;
selectItem: (item: any) => void;
selectItemAtIndex: (index: number) => void;
setHighlightedIndex: (index: number) => void;
toggleMenu: (state: boolean) => void;

// state
highlightedIndex: number;
inputValue: string;
isOpen: boolean;
selectedItem: any;
}
export interface GetButtonPropsOptions extends React.HTMLProps<HTMLButtonElement> { }

interface OptionalExtraGetItemPropsOptions {
[key: string]: any;
}

export interface GetItemPropsOptions extends OptionalExtraGetItemPropsOptions {
index: number;
index?: number;
item: any;
}

Expand All @@ -85,18 +64,20 @@ export interface ControllerStateAndHelpers {
getItemProps: (options: GetItemPropsOptions) => any;

// actions
openMenu: () => void;
closeMenu: () => void;
toggleMenu: () => void;
selectItem: (item: any) => void;
selectItemAtIndex: (index: number) => void;
selectHighlightedItem: (index: number) => void;
setHighlightedItem: (index: number) => void;
clearSelection: () => void;
openMenu: (cb?: Function) => void;
closeMenu: (cb?: Function) => void;
toggleMenu: (cb?: Function) => void;
selectItem: (item: any, otherStateToSet?: object, cb?: Function) => void;
selectItemAtIndex: (index: number, otherStateToSet?: object, cb?: Function) => void;
selectHighlightedItem: (otherStateToSet?: object, cb?: Function) => void;
setHighlightedIndex: (index: number, otherStateToSet?: object, cb?: Function) => void;
clearSelection: (cb?: Function) => void;
reset: (otherStateToSet?: object, cb?: Function) => void;
itemToString: (item: any) => void;

// state
highlightedIndex: number;
inputValue: string;
highlightedIndex: number | null;
inputValue: string | null;
isOpen: boolean;
selectedItem: any;
}
Expand Down

0 comments on commit 0f71611

Please sign in to comment.