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.Component {
    constructor(props) {
        super();

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

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

    render() {
        let classes = classNames(
            'checkbox',
            this.props.className,
            {
                'disabled': this.props.disabled,
                'error': this.props.error,
                'valid': this.props.valid
            }
        );

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