Enable dynamic source for single value Autocomplete (#1120)
parent
d3fe9f9868
commit
d80dc82991
|
@ -34,6 +34,7 @@ const factory = (Chip, Input) => {
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
onFocus: PropTypes.func,
|
onFocus: PropTypes.func,
|
||||||
onQueryChange: PropTypes.func,
|
onQueryChange: PropTypes.func,
|
||||||
|
query: PropTypes.string,
|
||||||
selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
|
selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
|
||||||
showSelectedWhenNotInSource: PropTypes.bool,
|
showSelectedWhenNotInSource: PropTypes.bool,
|
||||||
showSuggestionsWhenValueIsSet: PropTypes.bool,
|
showSuggestionsWhenValueIsSet: PropTypes.bool,
|
||||||
|
@ -70,15 +71,14 @@ const factory = (Chip, Input) => {
|
||||||
direction: this.props.direction,
|
direction: this.props.direction,
|
||||||
focus: false,
|
focus: false,
|
||||||
showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
|
showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
|
||||||
query: this.query(this.props.value),
|
query: this.props.query ? this.props.query : this.query(this.props.value),
|
||||||
isValueAnObject: false
|
isValueAnObject: false
|
||||||
};
|
};
|
||||||
|
|
||||||
componentWillReceiveProps (nextProps) {
|
componentWillReceiveProps (nextProps) {
|
||||||
if (!this.props.multiple) {
|
if (!this.props.multiple) {
|
||||||
this.setState({
|
const query = nextProps.query ? nextProps.query : this.query(nextProps.value);
|
||||||
query: this.query(nextProps.value)
|
this.updateQuery(query, false);
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -104,6 +104,7 @@ const factory = (Chip, Input) => {
|
||||||
ReactDOM.findDOMNode(this).querySelector('input').blur();
|
ReactDOM.findDOMNode(this).querySelector('input').blur();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
this.updateQuery(query, this.props.query);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleMouseDown = (event) => {
|
handleMouseDown = (event) => {
|
||||||
|
@ -115,9 +116,17 @@ const factory = (Chip, Input) => {
|
||||||
if (this.props.onBlur) this.props.onBlur(event, this.state.active);
|
if (this.props.onBlur) this.props.onBlur(event, this.state.active);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
updateQuery = (query, notify) => {
|
||||||
|
if (notify && this.props.onQueryChange) this.props.onQueryChange(query);
|
||||||
|
this.setState({ query });
|
||||||
|
}
|
||||||
|
|
||||||
handleQueryChange = (value) => {
|
handleQueryChange = (value) => {
|
||||||
if (this.props.onQueryChange) this.props.onQueryChange(value);
|
const query = this.clearQuery ? '' : value;
|
||||||
this.setState({query: value, showAllSuggestions: false, active: null});
|
this.clearQuery = false;
|
||||||
|
|
||||||
|
this.updateQuery(query, true);
|
||||||
|
this.setState({showAllSuggestions: false, active: null});
|
||||||
};
|
};
|
||||||
|
|
||||||
handleQueryFocus = (event) => {
|
handleQueryFocus = (event) => {
|
||||||
|
@ -127,15 +136,12 @@ const factory = (Chip, Input) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleQueryKeyDown = (event) => {
|
handleQueryKeyDown = (event) => {
|
||||||
// Clear query when pressing backspace and showing all suggestions.
|
// Mark query for clearing in handleQueryChange when pressing backspace and showing all suggestions.
|
||||||
const shouldClearQuery = (
|
this.clearQuery = (
|
||||||
event.which === 8
|
event.which === 8
|
||||||
&& this.props.showSuggestionsWhenValueIsSet
|
&& this.props.showSuggestionsWhenValueIsSet
|
||||||
&& this.state.showAllSuggestions
|
&& this.state.showAllSuggestions
|
||||||
);
|
);
|
||||||
if (shouldClearQuery) {
|
|
||||||
this.setState({query: ''});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.which === 13) {
|
if (event.which === 13) {
|
||||||
this.selectOrCreateActiveItem(event);
|
this.selectOrCreateActiveItem(event);
|
||||||
|
@ -374,7 +380,7 @@ const factory = (Chip, Input) => {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const {
|
const {
|
||||||
allowCreate, error, label, source, suggestionMatch, //eslint-disable-line no-unused-vars
|
allowCreate, error, label, source, suggestionMatch, query, //eslint-disable-line no-unused-vars
|
||||||
selectedPosition, keepFocusOnChange, showSuggestionsWhenValueIsSet, showSelectedWhenNotInSource, onQueryChange, //eslint-disable-line no-unused-vars
|
selectedPosition, keepFocusOnChange, showSuggestionsWhenValueIsSet, showSelectedWhenNotInSource, onQueryChange, //eslint-disable-line no-unused-vars
|
||||||
theme, ...other
|
theme, ...other
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
|
@ -55,6 +55,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
|
||||||
| `onChange` | `Function` | | Callback function that is fired when the components's value changes. |
|
| `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. |
|
| `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. |
|
| `onFocus` | `Function` | | Callback function that is fired when component is focused. |
|
||||||
|
| `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. |
|
| `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`. |
|
| `selectedPosition` | `String` | `above` | Determines if the selected list is shown above or below input. It can be `above`, `below` or `none`. |
|
||||||
| `showSelectedWhenNotInSource` | `Bool` | `false` | Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object. |
|
| `showSelectedWhenNotInSource` | `Bool` | `false` | Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object. |
|
||||||
|
|
|
@ -4,17 +4,37 @@ const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'Englan
|
||||||
class AutocompleteTest extends React.Component {
|
class AutocompleteTest extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
simple: 'Spain',
|
simple: 'Spain',
|
||||||
multiple: ['ES-es', 'TH-th']
|
multiple: ['ES-es', 'TH-th'],
|
||||||
|
dynamicSimple: '',
|
||||||
|
dynamicSource: {},
|
||||||
|
query: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
handleSimpleChange = (value) => {
|
handleSimpleChange = (value) => {
|
||||||
this.setState({simple: value});
|
this.setState({simple: value});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleDynamicSimpleChange = (value) => {
|
||||||
|
this.setState({dynamicSimple: value});
|
||||||
|
};
|
||||||
|
|
||||||
handleMultipleChange = (value) => {
|
handleMultipleChange = (value) => {
|
||||||
this.setState({multiple: value});
|
this.setState({multiple: value});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleQueryChange = (value) => {
|
||||||
|
this.setState({query: value});
|
||||||
|
};
|
||||||
|
|
||||||
|
generateSource = (event) => {
|
||||||
|
const query = event.target.value;
|
||||||
|
const source = {
|
||||||
|
A: query + ' # A',
|
||||||
|
B: query + ' # B'
|
||||||
|
};
|
||||||
|
this.setState({dynamicSource: source});
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -35,6 +55,19 @@ class AutocompleteTest extends React.Component {
|
||||||
source={countriesArray}
|
source={countriesArray}
|
||||||
value={this.state.simple}
|
value={this.state.simple}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<Autocomplete
|
||||||
|
direction="down"
|
||||||
|
label="Type to load new source"
|
||||||
|
hint="You can only choose one..."
|
||||||
|
multiple={false}
|
||||||
|
onChange={this.handleDynamicSimpleChange}
|
||||||
|
onInput={this.generateSource}
|
||||||
|
onQueryChange={this.handleQueryChange}
|
||||||
|
query={this.state.query}
|
||||||
|
source={this.state.dynamicSource}
|
||||||
|
value={this.state.dynamicSimple}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue