react-jam-ui/components/Checkbox/index.js

React JAM UI components

import React from 'react';
import classNames from 'classnames';
import './styles.styl'

export default class Checkbox extends React.PureComponent {
    constructor(props) {
        super();

        this.state = {
            checked: props.checked,
        }
    }
    componentWillReceiveProps(nextProps) {
        if (!this.props.disabled && !this.props.readOnly) {
            this.setState({
                checked: nextProps.checked
            });
        }
    }

    onChangeCapture = e => {
        this.setState({
            checked: e.target.checked
        })
        if(this.props.bindTo) this.props.bindTo()
        if(this.props.onChange) this.props.onChange(e)
    }

    render() {
        const {
            className,
            bindTo,
            onChange,
            onClick,
            inputRef,
            label,
            checked,
            error,
            valid,
            children,
            ...rest
        } = this.props
        let classes = classNames(
            'checkbox',
            className,
            {
                'disabled': rest.disabled,
                'error': error,
                'valid': valid
            }
        );

        return (
            <div
                className={ classes }
                onClick={ onClick }
            >
                <input
                    type='checkbox'
                    checked={ this.state.checked }
                    ref={ el => {
                        this.chDom = el;
                        if (inputRef) inputRef(el)
                    }}
                    onChange={ this.onChangeCapture }
                    { ...rest }
                />
                <label htmlFor={ rest.id }>{ label } { children }</label>
            </div>
        )
    }
}