#15 adding select with url options, added isomorphic-fetch in package.json

Author: jonisaa

package.json

@@ -28,6 +28,7 @@
   "homepage": "https://github.com/redux-autoform/redux-autoform-bootstrap-ui#readme",
   "dependencies": {
     "bootstrap": "^3.3.6",
+    "isomorphic-fetch": "^2.2.1",
     "react": "^15.1.0",
     "react-bootstrap": "^0.30.0-rc.1",
     "react-dom": "^15.2.1",

src/components/fieldComponents/Select.js

@@ -1,5 +1,8 @@
 import React, { Component, PropTypes } from 'react';
+import FormGroup from '../FormGroup';
 import Input from '../Input';
+import ReSelect from 'react-select';
+import fetch from 'isomorphic-fetch';
 
 class Select extends Component {
     static propTypes = {
@@ -23,14 +26,36 @@ class Select extends Component {
         ));
     };
 
+    fetchItems = () => {
+        const { options } = this.props;
+
+        return fetch(options.url)
+            .then(response => response.json())
+            .then(json => {
+                return { options: json }
+            });
+    };
+
     render() {
-        let options = this.getOptions();
-        
-        return (
-            <Input componentClass="select" {...this.props}>
-                { options }
-            </Input>
-        );
+        let { value, name, displayName, help, error, touched, onChange, onBlur, fieldLayout, options } = this.props;
+        let formGroupProps = { error, touched, displayName, name, help, fieldLayout };
+        let selectProps = { value, name, onChange, onBlur, loadOptions: this.fetchItems, valueKey: options.value? options.value : 'value', labelKey: options.label? options.label : 'label' };
+
+        if (!options.url && Array.isArray(options)) {
+            return (
+                <Input componentClass="select" {...this.props}>
+                    { this.getOptions() }
+                </Input>
+            );
+        } else if (options.url) {
+            return (
+                <FormGroup {...formGroupProps}>
+                    <ReSelect.Async {...selectProps}/>
+                </FormGroup>
+            );
+        }
+
+        return false;
     }
 }