|
1 | 1 | import React, { Component, PropTypes } from 'react';
|
2 | 2 | import FormGroup from '../FormGroup';
|
3 |
| -import Select from 'react-select'; |
| 3 | +import ReSelect from 'react-select'; |
4 | 4 |
|
5 | 5 | class Lookup extends Component {
|
| 6 | + fetchItems = () => { |
| 7 | + const { options } = this.props; |
| 8 | + |
| 9 | + return fetch(options.url) |
| 10 | + .then(response => response.json()) |
| 11 | + .then(json => { |
| 12 | + return { options: json } |
| 13 | + }); |
| 14 | + }; |
| 15 | + |
6 | 16 | render() {
|
7 |
| - let { value, name, displayName, help, error, touched, onChange, onBlur, options, fieldLayout} = this.props; |
8 |
| - let selectProps = { options, value, name, onChange, onBlur: (event) => onBlur() }; |
| 17 | + let { value, name, displayName, help, error, touched, onChange, onBlur, options, fieldLayout } = this.props; |
9 | 18 | let formGroupProps = { error, touched, displayName, name, help, fieldLayout};
|
| 19 | + let selectProps; |
| 20 | + |
| 21 | + if (!options.url && Array.isArray(options)) { |
| 22 | + selectProps = { options, value, name, onChange, onBlur: (event) => onBlur() }; |
| 23 | + } else { |
| 24 | + selectProps = { value, name, onChange, onBlur: (event) => onBlur(), loadOptions: this.fetchItems, valueKey: options.value? options.value : 'value', labelKey: options.label? options.label : 'label' } |
| 25 | + } |
10 | 26 |
|
11 | 27 | return (
|
12 | 28 | <FormGroup {...formGroupProps}>
|
13 |
| - <Select {...selectProps}/> |
| 29 | + <ReSelect.Async {...selectProps}/> |
14 | 30 | </FormGroup>
|
15 | 31 | )
|
16 | 32 | }
|
|
0 commit comments