Multiple checkboxes in SelectField (closes #33).

vazco · Jun 18, 2016 · 5b7fa60 · 5b7fa60
1 parent dae4685
commit 5b7fa60
Show file tree

Hide file tree

Showing 4 changed files with 224 additions and 74 deletions.
diff --git a/packages/uniforms-bootstrap3/src/components/fields/SelectField.js b/packages/uniforms-bootstrap3/src/components/fields/SelectField.js
@@ -4,28 +4,62 @@ import {connectField} from 'uniforms';
 
 import FormGroup from './FormGroup';
 
+const xor = (item, array) => {
+    let index = array.indexOf(item);
+    if (index === -1) {
+        return array.concat([item]);
+    }
+
+    return array.slice(0, index).concat(array.slice(index + 1));
+};
+
+const renderCheckboxes = props =>
+    props.allowedValues.map(item =>
+        <section key={item} className={classnames(props.inputClassName, `checkbox${props.inline ? '-inline' : ''}`)}>
+            <label htmlFor={`${props.id}-${item}`}>
+                <input
+                    checked={props.fieldType === Array ? props.value.includes(item) : props.value === item}
+                    disabled={props.disabled}
+                    id={`${props.id}-${item}`}
+                    name={props.name}
+                    onChange={() => props.onChange(props.fieldType === Array ? xor(item, props.value) : item)}
+                    type="checkbox"
+                />
+                {props.transform ? props.transform(item) : item}
+            </label>
+        </section>
+    )
+;
+
+const renderSelect = props =>
+    <select
+        className={classnames(props.inputClassName, 'form-control', {'form-control-danger': props.error})}
+        disabled={props.disabled}
+        id={props.id}
+        name={props.name}
+        onChange={event => props.onChange(event.target.value)}
+        value={props.value}
+    >
+        {props.placeholder && (
+            <option value="" disabled hidden>
+                {props.placeholder}
+            </option>
+        )}
+
+        {props.allowedValues.map(value =>
+            <option key={value} value={value}>
+                {props.transform ? props.transform(value) : value}
+            </option>
+        )}
+    </select>
+;
+
 const Select = props =>
     <FormGroup {...props}>
-        <select
-            className={classnames(props.inputClassName, 'c-select form-control', {'form-control-danger': props.error})}
-            disabled={props.disabled}
-            id={props.id}
-            name={props.name}
-            onChange={event => props.onChange(event.target.value)}
-            value={props.value}
-        >
-            {props.placeholder && (
-                <option value="" disabled hidden>
-                    {props.placeholder}
-                </option>
-            )}
-
-            {props.allowedValues.map(value =>
-                <option key={value} value={value}>
-                    {props.transform ? props.transform(value) : value}
-                </option>
-            )}
-        </select>
+        {props.checkboxes || props.fieldType === Array
+            ? renderCheckboxes(props)
+            : renderSelect(props)
+        }
     </FormGroup>
 ;
 

diff --git a/packages/uniforms-bootstrap4/src/components/fields/SelectField.js b/packages/uniforms-bootstrap4/src/components/fields/SelectField.js
@@ -4,28 +4,62 @@ import {connectField} from 'uniforms';
 
 import FormGroup from './FormGroup';
 
+const xor = (item, array) => {
+    let index = array.indexOf(item);
+    if (index === -1) {
+        return array.concat([item]);
+    }
+
+    return array.slice(0, index).concat(array.slice(index + 1));
+};
+
+const renderCheckboxes = props =>
+    props.allowedValues.map(item =>
+        <section key={item} className={classnames(props.inputClassName, `checkbox${props.inline ? '-inline' : ''}`)}>
+            <label htmlFor={`${props.id}-${item}`}>
+                <input
+                    checked={props.fieldType === Array ? props.value.includes(item) : props.value === item}
+                    disabled={props.disabled}
+                    id={`${props.id}-${item}`}
+                    name={props.name}
+                    onChange={() => props.onChange(props.fieldType === Array ? xor(item, props.value) : item)}
+                    type="checkbox"
+                />
+                {props.transform ? props.transform(item) : item}
+            </label>
+        </section>
+    )
+;
+
+const renderSelect = props =>
+    <select
+        className={classnames(props.inputClassName, 'c-select form-control', {'form-control-danger': props.error})}
+        disabled={props.disabled}
+        id={props.id}
+        name={props.name}
+        onChange={event => props.onChange(event.target.value)}
+        value={props.value}
+    >
+        {props.placeholder && (
+            <option value="" disabled hidden>
+                {props.placeholder}
+            </option>
+        )}
+
+        {props.allowedValues.map(value =>
+            <option key={value} value={value}>
+                {props.transform ? props.transform(value) : value}
+            </option>
+        )}
+    </select>
+;
+
 const Select = props =>
     <FormGroup {...props}>
-        <select
-            className={classnames(props.inputClassName, 'c-select form-control', {'form-control-danger': props.error})}
-            disabled={props.disabled}
-            id={props.id}
-            name={props.name}
-            onChange={event => props.onChange(event.target.value)}
-            value={props.value}
-        >
-            {props.placeholder && (
-                <option value="" disabled hidden>
-                    {props.placeholder}
-                </option>
-            )}
-
-            {props.allowedValues.map(value =>
-                <option key={value} value={value}>
-                    {props.transform ? props.transform(value) : value}
-                </option>
-            )}
-        </select>
+        {props.checkboxes || props.fieldType === Array
+            ? renderCheckboxes(props)
+            : renderSelect(props)
+        }
     </FormGroup>
 ;
 

diff --git a/packages/uniforms-semantic/src/components/fields/SelectField.js b/packages/uniforms-semantic/src/components/fields/SelectField.js
@@ -2,10 +2,65 @@ import React          from 'react';
 import classnames     from 'classnames';
 import {connectField} from 'uniforms';
 
+const xor = (item, array) => {
+    let index = array.indexOf(item);
+    if (index === -1) {
+        return array.concat([item]);
+    }
+
+    return array.slice(0, index).concat(array.slice(index + 1));
+};
+
+const renderCheckboxes = ({allowedValues, disabled, fieldType, id, name, onChange, transform, value}) =>
+    allowedValues.map(item =>
+        <section className="field" key={item}>
+            <section className="ui checkbox">
+                <input
+                    checked={fieldType === Array ? value.includes(item) : value === item}
+                    disabled={disabled}
+                    id={`${id}-${item}`}
+                    name={name}
+                    onChange={() => onChange(fieldType === Array ? xor(item, value) : item)}
+                    type="checkbox"
+                />
+
+                <label htmlFor={`${id}-${item}`}>
+                    {transform ? transform(item) : item}
+                </label>
+            </section>
+        </section>
+    )
+;
+
+const renderSelect = ({allowedValues, disabled, id, name, onChange, placeholder, transform, value}) =>
+    <select
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={event => onChange(event.target.value)}
+        value={value}
+    >
+        {placeholder && (
+            <option value="" disabled hidden>
+                {placeholder}
+            </option>
+        )}
+
+        {allowedValues.map(value =>
+            <option key={value} value={value}>
+                {transform ? transform(value) : value}
+            </option>
+        )}
+    </select>
+;
+
 const Select = ({
     allowedValues,
+    checkboxes,
+    className,
     disabled,
     error,
+    fieldType,
     id,
     label,
     name,
@@ -16,33 +71,17 @@ const Select = ({
     value,
     ...props
 }) =>
-    <section className={classnames({disabled, error, required}, 'field')}>
+    <section className={classnames({disabled, error, required}, className, 'field')} {...props}>
         {label && (
             <label htmlFor={id}>
                 {label}
             </label>
         )}
 
-        <select
-            disabled={disabled}
-            id={id}
-            name={name}
-            onChange={event => onChange(event.target.value)}
-            value={value}
-            {...props}
-        >
-            {placeholder && (
-                <option value="" disabled hidden>
-                    {placeholder}
-                </option>
-            )}
-
-            {allowedValues.map(value =>
-                <option key={value} value={value}>
-                    {transform ? transform(value) : value}
-                </option>
-            )}
-        </select>
+        {checkboxes || fieldType === Array
+            ? renderCheckboxes({allowedValues, disabled, id, name, onChange, transform, value, fieldType})
+            : renderSelect    ({allowedValues, disabled, id, name, onChange, transform, value, placeholder})
+        }
     </section>
 ;
 

diff --git a/packages/uniforms-unstyled/src/components/fields/SelectField.js b/packages/uniforms-unstyled/src/components/fields/SelectField.js
@@ -1,9 +1,61 @@
 import React          from 'react';
 import {connectField} from 'uniforms';
 
+const xor = (item, array) => {
+    let index = array.indexOf(item);
+    if (index === -1) {
+        return array.concat([item]);
+    }
+
+    return array.slice(0, index).concat(array.slice(index + 1));
+};
+
+const renderCheckboxes = ({allowedValues, disabled, fieldType, id, name, onChange, transform, value}) =>
+    allowedValues.map(item =>
+        <section key={item}>
+            <input
+                checked={fieldType === Array ? value.includes(item) : value === item}
+                disabled={disabled}
+                id={`${id}-${item}`}
+                name={name}
+                onChange={() => onChange(fieldType === Array ? xor(item, value) : item)}
+                type="checkbox"
+            />
+
+            <label htmlFor={`${id}-${item}`}>
+                {transform ? transform(item) : item}
+            </label>
+        </section>
+    )
+;
+
+const renderSelect = ({allowedValues, disabled, id, name, onChange, placeholder, transform, value}) =>
+    <select
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={event => onChange(event.target.value)}
+        value={value}
+    >
+        {placeholder && (
+            <option value="" disabled hidden>
+                {placeholder}
+            </option>
+        )}
+
+        {allowedValues.map(value =>
+            <option key={value} value={value}>
+                {transform ? transform(value) : value}
+            </option>
+        )}
+    </select>
+;
+
 const Select = ({
     allowedValues,
+    checkboxes,
     disabled,
+    fieldType,
     id,
     label,
     name,
@@ -20,19 +72,10 @@ const Select = ({
             </label>
         )}
 
-        <select disabled={disabled} id={id} name={name} value={value} onChange={event => onChange(event.target.value)}>
-            {placeholder && (
-                <option value="" disabled hidden>
-                    {placeholder}
-                </option>
-            )}
-
-            {allowedValues.map(value =>
-                <option key={value} value={value}>
-                    {transform ? transform(value) : value}
-                </option>
-            )}
-        </select>
+        {checkboxes || fieldType === Array
+            ? renderCheckboxes({allowedValues, disabled, id, name, onChange, transform, value, fieldType})
+            : renderSelect    ({allowedValues, disabled, id, name, onChange, transform, value, placeholder})
+        }
     </section>
 ;