Removes the Languages API, adds documentation for the URL in the Lookup #22 #30

Author: andrerpena

README.md

@@ -149,7 +149,8 @@ Specific metadata for the `Lookup` component. Common metadata is not listed.
 
 Metadata | Description
 --- | ---
-options | The options to display. Options are an array of objects with two properties: **value**: The actual value that is stored in the model. **text**: What is displayed to the user
+options (array) | The options to display. Options is an array of objects with two properties: **value**: The actual value that is stored in the model; **label**: What is displayed to the user
+options (object) | The options to display. Options is an object containing three properties: **url**: The URL to call for data. This call should return an array of objects. **valueKey**: In the resulting Array, this is the name of the property that should contain the actual value. **labelKey**: In the resulting Array, this is the name of the property that should contain the label.
 
 [Lookup demo](https://redux-autoform.github.io/redux-autoform-bootstrap-ui/demo.html?preset=componentsLookup).
 

demo/Server.js

@@ -33,25 +33,6 @@ let app = express();
 
 let router = new Router();
 
-router.get("/api/languages", (request, response) => {
-    const arr = [
-        {
-            value: "español",
-            label: "Español"
-        },
-        {
-            value: "english",
-            label: "English"
-        },
-        {
-            value: "deutsch",
-            label: "Deutsch"
-        }
-    ];
-
-    response.status(200).json(arr);
-});
-
 router.post("/upload", (request, response) => {
 
     upload.array("fileData")(request, response, (err) => {

demo/presets/componentsLookup.txt

@@ -37,14 +37,15 @@
                     ]
                 },
                 {
-                    name: "Languages",
-                    displayName: "Languages",
+                    name: "Url",
+                    displayName: "Url",
                     type: "string",
-                    component: "Select",
+                    component: "Lookup",
+                    help: "Lists the React project open-issues",
                     options: {
-                        "url": "/api/languages",
-                        "label": "label",
-                        "value": "value"
+                        url: "https://api.github.com/repos/facebook/react/issues",
+                        valueKey: "id",
+                        labelKey: "title"
                     }
                 }
             ]

src/components/field/Lookup.js

@@ -1,25 +1,31 @@
-import React, { Component, PropTypes } from 'react';
+import React, {Component, PropTypes} from 'react';
 import FormGroup from '../common/FormGroup';
 import Select from 'react-select-plus';
 
 class Lookup extends Component {
     fetchItems = () => {
-        const { options } = this.props;
-        
+        const {options} = this.props;
+
         return fetch(options.url)
             .then(response => response.json())
             .then(json => {
-                return { options: json }
+                return {options: json}
             });
     };
 
     render() {
-        let { value, name, displayName, help, error, touched, onChange, onBlur, options, fieldLayout } = this.props;
-        let formGroupProps = { error, touched, displayName, name, help, fieldLayout};
+        let {value, name, displayName, help, error, touched, onChange, onBlur, options, fieldLayout} = this.props;
+        let formGroupProps = {error, touched, displayName, name, help, fieldLayout};
         let selectProps;
 
-        if (!options.url && Array.isArray(options)) {
-            selectProps = { options, value, name, onChange, onBlur: (event) => onBlur() };
+        if (Array.isArray(options)) {
+            selectProps = {
+                options,
+                value,
+                name,
+                onChange,
+                onBlur: (event) => onBlur()
+            };
 
             return (
                 <FormGroup {...formGroupProps}>
@@ -28,7 +34,14 @@ class Lookup extends Component {
             )
 
         } else if (options.url) {
-            selectProps = { value, name, onChange, onBlur: (event) => onBlur(), valueKey: options.value? options.value : 'value', labelKey: options.label? options.label : 'label' };
+            selectProps = {
+                value,
+                name,
+                onChange,
+                onBlur: (event) => onBlur(),
+                valueKey: options.valueKey || 'value',
+                labelKey: options.labelKey || 'label'
+            };
 
             return (
                 <FormGroup {...formGroupProps}>