#15 Adding data for Lookup preset, modified Select and Lookup components, Updated package.json to add react-select-plus

Author: jonisaa

demo/presets/componentsLookup.txt

@@ -35,6 +35,17 @@
                         { value: 'option1', label: 'Option 1' },
                         { value: 'option2', label: 'Option 2' },
                     ]
+                },
+                {
+                    name: "Languages",
+                    displayName: "Languages",
+                    type: "string",
+                    component: "Select",
+                    options: {
+                        "url": "/api/languages",
+                        "label": "Languages",
+                        "value": "value"
+                    }
                 }
             ]
         }

package.json

@@ -33,6 +33,7 @@
     "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",
     "underscore": "^1.8.3"

src/components/fieldComponents/Lookup.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import FormGroup from '../FormGroup';
-import Select from 'react-select';
+import Select from 'react-select-plus';
 
 class Lookup extends Component {
     fetchItems = () => {
@@ -27,7 +27,7 @@ class Lookup extends Component {
                 </FormGroup>
             )
 
-        } else {
+        } 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' };
 
             return (
@@ -36,6 +36,8 @@ class Lookup extends Component {
                 </FormGroup>
             )
         }
+
+        return false;
     }
 }
 

src/components/fieldComponents/Select.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import FormGroup from '../FormGroup';
 import Input from '../Input';
-import ReSelect from 'react-select';
+import ReactSelect from 'react-select-plus';
 import fetch from 'isomorphic-fetch';
 
 class Select extends Component {
@@ -39,18 +39,32 @@ 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' };
+        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!");
 
-        if (!options.url && Array.isArray(options)) {
             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!");
+
             return (
                 <FormGroup {...formGroupProps}>
-                    <ReSelect.Async {...selectProps}/>
+                    <ReactSelect.Async {...selectProps}/>
                 </FormGroup>
             );
         }