@darwino/darwino-react-bootstrap/src/FieldCheckbox.jsx

A set of Javascript classes and utilities

/* 
 * (c) Copyright Darwino Inc. 2014-2017.
 */
import React, {Component} from "react";
import { FormGroup, Checkbox, ControlLabel } from 'react-bootstrap';
import FieldStatic from './FieldStatic';

function alterValue(values,checked,val) {
    const result = [...values];
    const pos = result.indexOf(val);
    if(checked) {
        if(pos<0) {
            result.push(val)
        }
    } else {
        if(pos>=0) {
            result.splice(pos,1);
        }
    }
    return result;
}

class FieldCheckbox extends Component {
    
    renderMultipleCheckbox(values,val) {
        const { input, inline, disabled, checkedValue, uncheckedValue, options, meta, ...props } = this.props;
        return (
            <label className={inline?"chekbox-inline":null} key={val.value} style={inline ? {marginRight:'1em'} : null}>
                <input type="checkbox" {...props} checked={values.indexOf(val.value)>=0} disabled={disabled} 
                    onChange={(e)=>{
                        const v = alterValue(values,e.target.checked,val.value)
                        input.onChange(v)
                    }}
                    onBlur={(e)=>{
                        input.onBlur(values)
                    }}/>
                {val.label||val.value}
            </label>
        )
    }

    render() {
        const { input, multiple, inline, options, checkedValue, uncheckedValue, disabled, readOnly, label, meta, ...props } = this.props;
        if(readOnly) {
            const { checkedValue, uncheckedValue, inline, ...roprops } = this.props;
            return (<FieldStatic {...roprops}/>);
        }

        const values = input.value;
        if(multiple) {
            return (   
                <div className="checkbox">     
                    {options && options.map(val => {
                        if(!(typeof(val)==="object")) val = {value:val,label:val};
                        if(inline) {
                            return (
                                this.renderMultipleCheckbox(values,val)
                            )
                        } else {
                            return (
                                <div className="checkbox" key={val.value}>
                                    {this.renderMultipleCheckbox(values,val)}
                                </div>
                            )
                        }
                    })}
                </div>     
            )
        } else {
            const checked = checkedValue!==undefined ? values==checkedValue : !!values
            return (
                <label>
                    <input type='checkbox' {...props} {...input} disabled={disabled} checked={checked}
                        onChange={(e)=>{
                            const v = e.target.checked 
                                            ? (checkedValue!==undefined ? checkedValue : true)
                                            : (uncheckedValue!==undefined ? uncheckedValue : null)
                            input.onChange(v)
                        }}
                        onBlur={(e)=>{
                            input.onBlur(values)
                        }}/>
                    {label}
                </label>
            )
        }
    }
};

export default FieldCheckbox