Home Reference Source Repository

src/Toggle.js

/**
 * @file melon/Toggle
 * @author cxtom<[email protected]>
 * @author leon<[email protected]>
 */


import React, {PropTypes} from 'react';
import InputComponent from 'melon-core/InputComponent';
import {create} from 'melon-core/classname/cxBuilder';
import CenterRipple from './ripples/CenterRipple';
import Validity from 'melon-core/Validity';

const cx = create('Toggle');

export default class Toggle extends InputComponent {

    constructor(props, context) {

        super(props, context);

        this.onChange = this.onChange.bind(this);

    }

    onChange(e) {

        const {
            disabled,
            readOnly,
            trueValue,
            falseValue
        } = this.props;

        if (disabled || readOnly) {
            return;
        }

        super.onChange({
            type: 'change',
            target: this,
            value: e.target.checked ? trueValue : falseValue
        });

    }

    render() {

        const {
            props,
            state,
            onChange
        } = this;

        const {value, validity} = state;

        const {
            name,
            trueValue,
            disabled
        } = props;

        const checked = value === trueValue;

        return (
            <label className={cx(props).addStates({checked}).build()}>
                <input
                    type="checkbox"
                    name={name}
                    value={value}
                    onChange={onChange}
                    checked={checked} />
                <div className={cx().part('bar-container').build()}>
                    <div className={cx().part('bar').build()} />
                    <div className={cx().part('circle').build()}>
                        {disabled
                            ? null
                            : <CenterRipple flag={checked} scale={2.5} opacity={0.3} />}
                    </div>
                </div>
                <Validity validity={validity} />
            </label>
        );

    }

}

Toggle.displayName = 'Toggle';

Toggle.defaultProps = {
    ...InputComponent.defaultProps,
    trueValue: 'on',
    falseValue: '',
    defaultValue: ''
};

Toggle.propTypes = {
    ...InputComponent.propTypes,
    trueValue: PropTypes.string.isRequired,
    falseValue: PropTypes.string
};

Toggle.childContextTypes = InputComponent.childContextTypes;
Toggle.contextTypes = InputComponent.contextTypes;