Add radio and select input support

Author: bhch

src/components/form.js

@@ -12,7 +12,7 @@ export function FormInput({label, help_text, error, ...props}) {
 }
 
 
-export function CheckInput({label, help_text, error, value, ...props}) {
+export function FormCheckInput({label, help_text, error, value, ...props}) {
 
     if (!label)
         label = props.name.toUpperCase();
@@ -34,6 +34,59 @@ export function CheckInput({label, help_text, error, value, ...props}) {
 }
 
 
+export function FormRadioInput({label, help_text, error, value, options, ...props}) {
+    return (
+        <div>
+            <label>{label}</label>
+            {options.map((option, i) => {
+                let label, inputValue;
+                if (typeof option === 'object') {
+                    label = option.label;
+                    inputValue = option.value;
+                } else {
+                    label = option;
+                    inputValue = option;
+                }
+
+                return (
+                    <label key={label + '_' + inputValue + '_' + i}>
+                        <input {...props} value={inputValue} checked={inputValue === value} /> {label}
+                    </label>
+                );
+            })}
+        </div>
+    );
+}
+
+
+export function FormSelectInput({label, help_text, error, value, options, ...props}) {
+    return (
+        <div>
+            {label && <label>{label}</label>}
+            <select defaultValue="" {...props}>
+                <option disabled value="" key={'__placehlder'}>Select...</option>
+                {options.map((option, i) => {
+                    let label, inputValue;
+                    if (typeof option === 'object') {
+                        label = option.label;
+                        inputValue = option.value;
+                    } else {
+                        label = option;
+                        inputValue = option;
+                    }
+
+                    return (
+                        <option value={inputValue} key={label + '_' + inputValue + '_' + i}>
+                            {label}
+                        </option>
+                    );
+                })}
+            </select>
+        </div>
+    );
+}
+
+
 export function FileInput(props) {
     return <FormInput {...props} />
 }

src/components/index.js

@@ -1,9 +1,9 @@
 import Button from './buttons';
-import {FormInput, CheckInput, FileInput} from './form';
+import {FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FileInput} from './form';
 import {FormRow, FormGroup} from './containers';
 
 export {
     Button,
-    FormInput, CheckInput, FileInput,
+    FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FileInput,
     FormRow, FormGroup
 };

src/ui.js

@@ -1,36 +1,24 @@
 import {getBlankData} from './data';
-import {Button, FormInput, CheckInput, FormRow, FormGroup} from './components';
+import {Button, FormInput, FormCheckInput, FormRadioInput, FormSelectInput,
+    FormRow, FormGroup} from './components';
 import {getVerboseName} from './util';
 
 
-const TYPE_MAP = {
-    string: 'text',
-    boolean: 'checkbox',
-    number: 'number'
-};
-
-const FIELD_MAP = {
-    string: FormInput,
-    integer: FormInput,
-    number: FormInput,
-    boolean: CheckInput
-};
-
-
-function handleChange(e, type, callback) {
+function handleChange(e, valueType, callback) {
+    let type = e.target.type
     let value;
-    if (type === 'text') {
+
+    if (type === 'checkbox') {
+        value = e.target.checked;
+    } else {
         value = e.target.value;
     }
-    else if (type === 'number') {
-        value = e.target.value.trim();
 
+    if (valueType === 'number') {
+        value = value.trim();
         if (value !== '' && !isNaN(Number(value)))
             value = Number(value);
     }
-    else if (type === 'checkbox') {
-        value = e.target.checked;
-    }
 
     callback(e.target.name, value);
 }
@@ -45,18 +33,13 @@ function FormField(props) {
     let type = props.schema.type;
     if (props.schema.choices) {
         inputProps.options = props.schema.choices;
-        if (props.schema.multi)
-            type = 'multiselect';
-        else
-            type = 'select';
+        type = 'select';
     }
     if (props.schema.widget)
         type = props.schema.widget;
 
     let InputField;
 
-    console.log(type)
-
     switch (type) {
         case 'string':
             inputProps.type = 'text';
@@ -72,23 +55,18 @@ function FormField(props) {
             break;
         case 'boolean':
             inputProps.type = 'checkbox';
-            InputField = CheckInput;
+            InputField = FormCheckInput;
             break;
         case 'checkbox':
             inputProps.type = 'checkbox';
-            InputField = CheckInput;
+            InputField = FormCheckInput;
             break;
         case 'radio':
-            inputProps.type = 'checkbox';
-            InputField = CheckInput;
+            inputProps.type = 'radio';
+            InputField = FormRadioInput;
             break;
         case 'select':
-            inputProps.type = 'checkbox';
-            InputField = CheckInput;
-            break;
-        case 'multiselect':
-            inputProps.type = 'checkbox';
-            InputField = CheckInput;
+            InputField = FormSelectInput;
             break;
         default:
             inputProps.type = 'text';
@@ -103,7 +81,7 @@ function FormField(props) {
                 :
                 props.schema.title
             }
-            onChange={(e) => handleChange(e, inputProps.type, props.onChange)}
+            onChange={(e) => handleChange(e, props.schema.type, props.onChange)}
         />
     );
 }