vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge pull request #1780 from clurdish/dev 

Enable onKeyDown and onKeyUp props on Autocomplete component
old
Rubén Moya 2018-01-23 18:14:44 +01:00 committed by GitHub
parent a91c04b73e b79c3da04d
commit 30d6c4a766
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/autocomplete/Autocomplete.d.ts vendored
View File

@ -88,6 +88,14 @@ export interface AutocompleteProps extends InputProps {
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
/**
* Callback function that is fired when a key is pressed down.
*/
onKeyDown?: Function;
/**
* Callback function that is fired when a key is lifted up.
*/
onKeyUp?: Function;
/**
* Callback function that is fired when the components's query value changes.
*/

6
components/autocomplete/Autocomplete.js
View File

@ -35,6 +35,8 @@ const factory = (Chip, Input) => {
onBlur: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
onKeyDown: PropTypes.func,
onKeyUp: PropTypes.func,
onQueryChange: PropTypes.func,
query: PropTypes.string,
selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
@ -148,6 +150,8 @@ const factory = (Chip, Input) => {
if (event.which === 13) {
this.selectOrCreateActiveItem(event);
}
if(this.props.onKeyDown) this.props.onKeyDown(event);
};
handleQueryKeyUp = (event) => {
@ -160,6 +164,8 @@ const factory = (Chip, Input) => {
if (index >= suggestionsKeys.length) index = 0;
this.setState({ active: suggestionsKeys[index] });
}
if(this.props.onKeyUp) this.props.onKeyUp(event);
};
handleSuggestionHover = (event) => {

4
components/autocomplete/readme.md
View File

@ -53,8 +53,10 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
| `multiple` | `Bool` | `true` | If true, component can hold multiple values. |
| `onBlur` | `Function` | | Callback function that is fired when component is blurred. |
| `onChange` | `Function` | | Callback function that is fired when the components's value changes. |
| `onQueryChange` | `Function` | | Callback function that is fired when the components's query input value changes. |
| `onFocus` | `Function` | | Callback function that is fired when component is focused. |
| `onKeyDown` | `Function` | | Callback function that is fired when a key is pressed down. |
| `onKeyUp` | `Function` | | Callback function that is fired when a key is lifted up. |
| `onQueryChange` | `Function` | | Callback function that is fired when the components's query input value changes. |
| `query` | `String` | | This property has to be used in case the `source` is not static and will be changing during search for `multiple={false}` autocomplete, content of the `query` has to be managed by the `onQueryChange` callback. |
| `source` | `Object` or `Array` | | Object of key/values or array representing all items suggested. |
| `selectedPosition` | `String` | `above` | Determines if the selected list is shown above or below input. It can be `above`, `below` or `none`. |