Add create option to autocomplete
parent
0c53de91a3
commit
3461a1fba3
|
@ -27,6 +27,7 @@ const factory = (Chip, Input) => {
|
||||||
showSuggestionsWhenValueIsSet: PropTypes.bool,
|
showSuggestionsWhenValueIsSet: PropTypes.bool,
|
||||||
source: PropTypes.any,
|
source: PropTypes.any,
|
||||||
suggestionMatch: PropTypes.oneOf(['start', 'anywhere', 'word']),
|
suggestionMatch: PropTypes.oneOf(['start', 'anywhere', 'word']),
|
||||||
|
create: PropTypes.bool,
|
||||||
theme: PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
active: PropTypes.string,
|
active: PropTypes.string,
|
||||||
autocomplete: PropTypes.string,
|
autocomplete: PropTypes.string,
|
||||||
|
@ -117,6 +118,9 @@ const factory = (Chip, Input) => {
|
||||||
let target = this.state.active;
|
let target = this.state.active;
|
||||||
if (!target) {
|
if (!target) {
|
||||||
target = [...this.suggestions().keys()][0];
|
target = [...this.suggestions().keys()][0];
|
||||||
|
if (this.props.create && !target){
|
||||||
|
target = this.state.query;
|
||||||
|
}
|
||||||
this.setState({active: target});
|
this.setState({active: target});
|
||||||
}
|
}
|
||||||
this.select(target, event);
|
this.select(target, event);
|
||||||
|
@ -272,7 +276,7 @@ const factory = (Chip, Input) => {
|
||||||
const {
|
const {
|
||||||
error, label, source, suggestionMatch, //eslint-disable-line no-unused-vars
|
error, label, source, suggestionMatch, //eslint-disable-line no-unused-vars
|
||||||
selectedPosition, showSuggestionsWhenValueIsSet, //eslint-disable-line no-unused-vars
|
selectedPosition, showSuggestionsWhenValueIsSet, //eslint-disable-line no-unused-vars
|
||||||
theme, ...other
|
theme, create, ...other
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const className = classnames(theme.autocomplete, {
|
const className = classnames(theme.autocomplete, {
|
||||||
[theme.focus]: this.state.focus
|
[theme.focus]: this.state.focus
|
||||||
|
|
|
@ -55,6 +55,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
|
||||||
| `showSuggestionsWhenValueIsSet` | `Bool` | `false` | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
|
| `showSuggestionsWhenValueIsSet` | `Bool` | `false` | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
|
||||||
| `suggestionMatch` | `String` | `start` | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |
|
| `suggestionMatch` | `String` | `start` | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |
|
||||||
| `value` | `String` or `Array` | | Value or array of values currently selected component.|
|
| `value` | `String` or `Array` | | Value or array of values currently selected component.|
|
||||||
|
| `create` | `Bool` | `false` | Determines if user can create a new option by typing in the field
|
||||||
|
|
||||||
Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
|
Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
|
||||||
|
|
||||||
|
|
|
@ -104,6 +104,9 @@ var factory = function factory(Chip, Input) {
|
||||||
var target = _this.state.active;
|
var target = _this.state.active;
|
||||||
if (!target) {
|
if (!target) {
|
||||||
target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
|
target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
|
||||||
|
if (_this.props.create && !target) {
|
||||||
|
target = _this.state.query;
|
||||||
|
}
|
||||||
_this.setState({ active: target });
|
_this.setState({ active: target });
|
||||||
}
|
}
|
||||||
_this.select(target, event);
|
_this.select(target, event);
|
||||||
|
@ -158,7 +161,8 @@ var factory = function factory(Chip, Input) {
|
||||||
}, {
|
}, {
|
||||||
key: 'query',
|
key: 'query',
|
||||||
value: function query(key) {
|
value: function query(key) {
|
||||||
return !this.props.multiple && key ? this.source().get(key) : '';
|
var value = this.props.create && !this.source().get(key) ? key : this.source().get(key);
|
||||||
|
return !this.props.multiple && key ? value : '';
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
key: 'suggestions',
|
key: 'suggestions',
|
||||||
|
@ -397,8 +401,9 @@ var factory = function factory(Chip, Input) {
|
||||||
var selectedPosition = _props.selectedPosition;
|
var selectedPosition = _props.selectedPosition;
|
||||||
var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
|
var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
|
||||||
var theme = _props.theme;
|
var theme = _props.theme;
|
||||||
|
var create = _props.create;
|
||||||
|
|
||||||
var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
|
var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme', 'create']);
|
||||||
|
|
||||||
var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
|
var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
|
||||||
|
|
||||||
|
@ -439,6 +444,7 @@ var factory = function factory(Chip, Input) {
|
||||||
showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
|
showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
|
||||||
source: _react.PropTypes.any,
|
source: _react.PropTypes.any,
|
||||||
suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
|
suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
|
||||||
|
create: _react.PropTypes.bool,
|
||||||
theme: _react.PropTypes.shape({
|
theme: _react.PropTypes.shape({
|
||||||
active: _react.PropTypes.string,
|
active: _react.PropTypes.string,
|
||||||
autocomplete: _react.PropTypes.string,
|
autocomplete: _react.PropTypes.string,
|
||||||
|
|
|
@ -1,19 +1,24 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Autocomplete from '../../components/autocomplete';
|
import Autocomplete from '../../components/autocomplete';
|
||||||
|
|
||||||
const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'];
|
|
||||||
const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England',
|
|
||||||
'EN-en': 'United States of America', 'EN-nz': 'New Zealand'};
|
|
||||||
|
|
||||||
class AutocompleteTest extends React.Component {
|
class AutocompleteTest extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
simple: 'Spain',
|
simple: 'Spain',
|
||||||
simpleShowAll: 'England',
|
simpleShowAll: 'England',
|
||||||
multiple: ['ES-es', 'TH-th']
|
multiple: ['ES-es', 'TH-th'],
|
||||||
|
countriesArray: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
|
||||||
|
countriesObject: {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England',
|
||||||
|
'EN-en': 'United States of America', 'EN-nz': 'New Zealand'}
|
||||||
};
|
};
|
||||||
|
|
||||||
handleMultipleChange = (value) => {
|
handleMultipleChange = (value) => {
|
||||||
this.setState({multiple: value});
|
this.setState({
|
||||||
|
multiple: value,
|
||||||
|
countriesObject: {
|
||||||
|
...this.state.countriesObject,
|
||||||
|
...!this.state.countriesObject[value[0]] ? {[value[0]]: value[0]} : {}
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
handleSimpleChange = (value) => {
|
handleSimpleChange = (value) => {
|
||||||
|
@ -33,9 +38,10 @@ class AutocompleteTest extends React.Component {
|
||||||
<Autocomplete
|
<Autocomplete
|
||||||
onChange={this.handleMultipleChange}
|
onChange={this.handleMultipleChange}
|
||||||
label="Pick multiple elements..."
|
label="Pick multiple elements..."
|
||||||
source={countriesObject}
|
source={this.state.countriesObject}
|
||||||
value={this.state.multiple}
|
value={this.state.multiple}
|
||||||
suggestionMatch="anywhere"
|
suggestionMatch="anywhere"
|
||||||
|
create={true}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Autocomplete
|
<Autocomplete
|
||||||
|
@ -43,7 +49,7 @@ class AutocompleteTest extends React.Component {
|
||||||
hint="Elements up to you..."
|
hint="Elements up to you..."
|
||||||
multiple={false}
|
multiple={false}
|
||||||
onChange={this.handleSimpleChange}
|
onChange={this.handleSimpleChange}
|
||||||
source={countriesArray}
|
source={this.state.countriesArray}
|
||||||
value={this.state.simple}
|
value={this.state.simple}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
@ -52,7 +58,7 @@ class AutocompleteTest extends React.Component {
|
||||||
hint="Elements up to you..."
|
hint="Elements up to you..."
|
||||||
multiple={false}
|
multiple={false}
|
||||||
onChange={this.handleSimpleShowAllChange}
|
onChange={this.handleSimpleShowAllChange}
|
||||||
source={countriesArray}
|
source={this.state.countriesArray}
|
||||||
value={this.state.simpleShowAll}
|
value={this.state.simpleShowAll}
|
||||||
showSuggestionsWhenValueIsSet
|
showSuggestionsWhenValueIsSet
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue