#15

- Update server api response, deleted react-select, modified Lookup and Select
- Modified componentsSelect/Lookup text to generate a Select/Lookup which consumes the api

Author: jonisaa

demo/Server.js

@@ -20,10 +20,19 @@ let router = new Router();
 
 router.get("/api/languages", (request, response) => {
     const arr = [
-        "español",
-        "english",
-        "deutsch"
-    ]
+        {
+            value: "español",
+            label: "Español"
+        },
+        {
+            value: "english",
+            label: "English"
+        },
+        {
+            value: "deutsch",
+            label: "Deutsch"
+        }
+    ];
 
     response.status(200).json(arr);
 });

demo/presets/componentsLookup.txt

@@ -43,7 +43,7 @@
                     component: "Select",
                     options: {
                         "url": "/api/languages",
-                        "label": "Languages",
+                        "label": "label",
                         "value": "value"
                     }
                 }

demo/presets/componentsSelect.txt

@@ -65,7 +65,7 @@
                     component: "Select",
                     options: {
                         "url": "/api/languages",
-                        "label": "Languages",
+                        "label": "label",
                         "value": "value"
                     }
                 }

package.json

@@ -32,7 +32,6 @@
     "react": "^15.1.0",
     "react-bootstrap": "^0.30.0",
     "react-dom": "^15.2.1",
-    "react-select": "^0.9.1",
     "react-select-plus": "^1.0.0-beta14.patch1",
     "react-widgets": "^3.4.2",
     "redux-autoform-utils": "^1.0.3",

src/components/fieldComponents/Lookup.js

@@ -5,7 +5,7 @@ import Select from 'react-select-plus';
 class Lookup extends Component {
     fetchItems = () => {
         const { options } = this.props;
-
+        
         return fetch(options.url)
             .then(response => response.json())
             .then(json => {
@@ -28,11 +28,11 @@ class Lookup extends Component {
             )
 
         } else if (options.url) {
-            selectProps = { value, name, onChange, onBlur: (event) => onBlur(), loadOptions: this.fetchItems, valueKey: options.value? options.value : 'value', labelKey: options.label? options.label : 'label' };
+            selectProps = { value, name, onChange, onBlur: (event) => onBlur(), valueKey: options.value? options.value : 'value', labelKey: options.label? options.label : 'label' };
 
             return (
                 <FormGroup {...formGroupProps}>
-                    <Select.Async {...selectProps}/>
+                    <Select.Async {...selectProps} loadOptions={this.fetchItems}/>
                 </FormGroup>
             )
         }

src/components/fieldComponents/Select.js

@@ -39,32 +39,27 @@ class Select extends Component {
     render() {
         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: (event) => onBlur(),
-            loadOptions: this.fetchItems,
-            valueKey: options.value? options.value : 'value',
-            labelKey: options.label? options.label : 'label'
-        };
 
         if (options && Array.isArray(options)) {
-            console.info("Render normal select!");
-
             return (
                 <Input componentClass="select" {...this.props}>
                     { this.getOptions() }
                 </Input>
             );
 
         } else if (options.url) {
-            console.info("Async props: " + JSON.stringify(selectProps));
-            console.info("Render async select!");
+            let selectProps = {
+                value,
+                name,
+                onChange,
+                onBlur: (event) => onBlur(),
+                valueKey: options.value? options.value : 'value',
+                labelKey: options.label? options.label : 'label'
+            };
 
             return (
                 <FormGroup {...formGroupProps}>
-                    <ReactSelect.Async {...selectProps}/>
+                    <ReactSelect.Async {...selectProps} loadOptions={this.fetchItems}/>
                 </FormGroup>
             );
         }