2018-02-20 01:59:32 +11:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
|
2019-05-06 16:05:11 +10:00
|
|
|
import CreatableSelect from 'react-select/creatable';
|
2018-02-20 01:59:32 +11:00
|
|
|
|
|
|
|
|
const components = {
|
|
|
|
|
DropdownIndicator: null,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const createOption = (label: string) => ({
|
|
|
|
|
label,
|
|
|
|
|
value: label,
|
|
|
|
|
});
|
|
|
|
|
|
2018-02-27 18:37:34 +11:00
|
|
|
export default class CreatableInputOnly extends Component<*, State> {
|
2018-02-20 01:59:32 +11:00
|
|
|
state = {
|
|
|
|
|
inputValue: '',
|
|
|
|
|
value: [],
|
|
|
|
|
};
|
|
|
|
|
handleChange = (value: any, actionMeta: any) => {
|
|
|
|
|
console.group('Value Changed');
|
|
|
|
|
console.log(value);
|
|
|
|
|
console.log(`action: ${actionMeta.action}`);
|
|
|
|
|
console.groupEnd();
|
|
|
|
|
this.setState({ value });
|
|
|
|
|
};
|
|
|
|
|
handleInputChange = (inputValue: string) => {
|
|
|
|
|
this.setState({ inputValue });
|
|
|
|
|
};
|
|
|
|
|
handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
|
|
|
|
|
const { inputValue, value } = this.state;
|
|
|
|
|
if (!inputValue) return;
|
|
|
|
|
switch (event.key) {
|
|
|
|
|
case 'Enter':
|
|
|
|
|
case 'Tab':
|
|
|
|
|
console.group('Value Added');
|
|
|
|
|
console.log(value);
|
|
|
|
|
console.groupEnd();
|
|
|
|
|
this.setState({
|
|
|
|
|
inputValue: '',
|
|
|
|
|
value: [...value, createOption(inputValue)],
|
|
|
|
|
});
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
render() {
|
|
|
|
|
const { inputValue, value } = this.state;
|
|
|
|
|
return (
|
2018-03-02 13:26:44 +11:00
|
|
|
<CreatableSelect
|
|
|
|
|
components={components}
|
|
|
|
|
inputValue={inputValue}
|
|
|
|
|
isClearable
|
|
|
|
|
isMulti
|
|
|
|
|
menuIsOpen={false}
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
onInputChange={this.handleInputChange}
|
|
|
|
|
onKeyDown={this.handleKeyDown}
|
|
|
|
|
placeholder="Type something and press enter..."
|
|
|
|
|
value={value}
|
|
|
|
|
/>
|
2018-02-20 01:59:32 +11:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
