Fix #17: Add support for multiple choices

Author: bhch

src/components/form.js

@@ -111,6 +111,142 @@ export function FormSelectInput({label, help_text, error, value, options, ...pro
     );
 }
 
+export class FormMultiSelectInput extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showOptions: false
+        };
+
+        this.optionsContainer = React.createRef();
+        this.input = React.createRef();
+    }
+
+    handleChange = (e) => {
+        let value = [...this.props.value];
+
+        if (e.target.checked) {
+            value.push(e.target.value);
+        } else {
+            value = value.filter((item) => item !== e.target.value);
+        }
+
+        let event = {
+            target: {
+                type: this.props.type,
+                value: value,
+                name: this.props.name
+            }
+        };
+
+        this.props.onChange(event);
+    }
+
+    showOptions = (e) => {
+        if (!this.state.showOptions)
+            this.setState({showOptions: true});
+    }
+
+    hideOptions = (e) => {
+        this.setState({showOptions: false});
+    }
+
+    toggleOptions = (e) => {
+        this.setState((state) => ({showOptions: !state.showOptions}))
+    }
+
+    render() {
+        return (
+            <div className="rjf-multiselect-field">
+                <FormInput
+                    label={this.props.label}
+                    value={this.props.value.length ? this.props.value.length + ' selected' : 'Select...'}
+                    help_text={this.props.help_text}
+                    error={this.props.error}
+                    onClick={this.toggleOptions}
+                    readOnly={true}
+                    inputRef={this.input}
+                    className="rjf-multiselect-field-input"
+                />
+                {this.state.showOptions &&
+                    <FormMultiSelectInputOptions
+                        options={this.props.options}
+                        value={this.props.value}
+                        hideOptions={this.hideOptions}
+                        onChange={this.handleChange}
+                        containerRef={this.optionsContainer}
+                        inputRef={this.input}
+                        disabled={this.props.readOnly}
+                    />
+                }
+            </div>
+        )
+    }
+}
+
+class FormMultiSelectInputOptions extends React.Component {
+    componentDidMount() {
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+
+    componentWillUnmount() {
+      document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+
+    handleClickOutside = (e) => {
+        if (this.props.containerRef.current &&
+            !this.props.containerRef.current.contains(e.target) &&
+            !this.props.inputRef.current.contains(e.target)
+        )
+            this.props.hideOptions();
+    };
+
+    render() {
+        return (
+            <div ref={this.props.containerRef}>
+                <div className="rjf-multiselect-field-options-container">
+                    {this.props.options.map((option, i) => {
+                        let label, inputValue;
+                        if (typeof option === 'object') {
+                            label = option.label;
+                            inputValue = option.value;
+                        } else {
+                            label = option;
+                            if (typeof label === 'boolean')
+                                label = capitalize(label.toString());
+                            inputValue = option;
+                        }
+
+                        let selected = this.props.value.indexOf(inputValue) > -1;
+
+                        let optionClassName = 'rjf-multiselect-field-option';
+                        if (selected)
+                            optionClassName += ' selected';
+                        if (this.props.disabled)
+                            optionClassName += ' disabled';
+
+                        return (
+                            <div key={label + '_' + inputValue + '_' + i} className={optionClassName}>
+                                <label>
+                                    <input
+                                        type="checkbox"
+                                        onChange={this.props.onChange}
+                                        value={inputValue}
+                                        checked={selected}
+                                        disabled={this.props.disabled}
+                                    /> {label}
+                                </label>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+}
+
 export function dataURItoBlob(dataURI) {
       // Split metadata from data
       const splitted = dataURI.split(",");

src/components/index.js

@@ -1,14 +1,14 @@
 import Button from './buttons';
 import {FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput,
-    FormTextareaInput, FormDateTimeInput} from './form';
+    FormTextareaInput, FormDateTimeInput, FormMultiSelectInput} from './form';
 import {FormRow, FormGroup, FormRowControls} from './containers';
 import Loader from './loaders';
 import Icon from './icons';
 
 export {
     Button,
     FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput,
-    FormTextareaInput, FormDateTimeInput,
+    FormTextareaInput, FormDateTimeInput, FormMultiSelectInput,
     FormRow, FormGroup, FormRowControls,
     Loader,
     Icon,

src/ui.js

@@ -1,7 +1,7 @@
 import {getBlankData} from './data';
 import {Button, FormInput, FormCheckInput, FormRadioInput, FormSelectInput,
     FormFileInput, FormRow, FormGroup, FormRowControls, FormTextareaInput,
-    FormDateTimeInput} from './components';
+    FormDateTimeInput, FormMultiSelectInput} from './components';
 import {getVerboseName} from './util';
 
 
@@ -89,6 +89,9 @@ function FormField(props) {
         case 'select':
             InputField = FormSelectInput;
             break;
+        case 'multiselect':
+            InputField = FormMultiSelectInput;
+            break;
         case 'textarea':
             InputField = FormTextareaInput;
             break;
@@ -114,7 +117,7 @@ function FormField(props) {
 export function getStringFormRow(args) {
     let {
         data, schema, name, onChange, onRemove, removable, onEdit, editable, 
-        onMoveUp, onMoveDown
+        onMoveUp, onMoveDown, parentType, ...fieldProps
     } = args;
 
     return (
@@ -131,6 +134,8 @@ export function getStringFormRow(args) {
                 onChange={onChange}
                 onEdit={onEdit}
                 editable={editable}
+                parentType={parentType}
+                {...fieldProps}
             />
         </FormRow>
     );
@@ -167,29 +172,41 @@ export function getArrayFormRow(args) {
         level: level + 1,
         removable: removable,
         onMove: onMove,
+        parentType: 'array',
     };
 
-    for (let i = 0; i < data.length; i++) {
-        nextArgs.data = data[i];
-        nextArgs.name = name + '-' + i;
-
-        if (i === 0)
-            nextArgs.onMoveUp = null;
-        else
-            nextArgs.onMoveUp = (e) => onMove(name + '-' + i, name + '-' + (i - 1));
-
-        if (i === data.length - 1)
-            nextArgs.onMoveDown = null;
-        else
-            nextArgs.onMoveDown = (e) => onMove(name + '-' + i, name + '-' + (i + 1));
+    if (nextArgs.schema.widget === 'multiselect') {
+        nextArgs.data = data;
+        nextArgs.name = name;
+        nextArgs.removable = false;
+        nextArgs.onMoveUp = null;
+        nextArgs.onMoveDown = null;
+        addable = false;
+        rows.push(getStringFormRow(nextArgs));
+    } else {
 
-        if (type === 'array') {
-            groups.push(getArrayFormRow(nextArgs));
-        } else if (type === 'object') {
-            groups.push(getObjectFormRow(nextArgs));
-        } else {
-            rows.push(getStringFormRow(nextArgs));
-        } 
+        for (let i = 0; i < data.length; i++) {
+            nextArgs.data = data[i];
+            nextArgs.name = name + '-' + i;
+
+            if (i === 0)
+                nextArgs.onMoveUp = null;
+            else
+                nextArgs.onMoveUp = (e) => onMove(name + '-' + i, name + '-' + (i - 1));
+
+            if (i === data.length - 1)
+                nextArgs.onMoveDown = null;
+            else
+                nextArgs.onMoveDown = (e) => onMove(name + '-' + i, name + '-' + (i + 1));
+
+            if (type === 'array') {
+                groups.push(getArrayFormRow(nextArgs));
+            } else if (type === 'object') {
+                groups.push(getObjectFormRow(nextArgs));
+            } else {
+                rows.push(getStringFormRow(nextArgs));
+            } 
+        }
     }
 
     let coords = name; // coordinates for insertion and deletion
@@ -283,7 +300,8 @@ export function getObjectFormRow(args) {
             onRemove: onRemove,
             level: level + 1,
             removable: removable,
-            onMove: onMove
+            onMove: onMove,
+            parentType: 'object',
         };
 
          if (type === 'array') {