react-zeanium-ui-ui/src/ui/Checkbox.js

Zeanium UI Framework for React.js

var React = require('react');
var ReactDOM = require('react-dom');

module.exports = React.createClass({
	displayName:'Checkbox',
	getInitialState:function(){
		return {

		}
	},
	componentDidMount:function(){
		this.checked(this.props.checked, false, null);
		this.disabled(this.props.disabled);
		this.props.onDidMount && this.props.onDidMount(this);
	},
	componentWillReceiveProps: function (nextProps){
		if(this.props.checked!==nextProps.checked){
			this.checked(nextProps.checked, false, null);
		}
	},
	__onClick: function (event){
		if(this.props.disabled){
			return;
		}
		event.stopPropagation();
		if(event.target.tagName=='INPUT'){
			this._checked = event.target.checked;
			this.props.onChange && this.props.onChange(event, this._checked, this);
		} else {
			//event.stopPropagation();
			event.preventDefault();
			this.checked(!this._checked, true, event);
		}

	},
	disabled: function (value) {
		this._disabled = value;
		ReactDOM.findDOMNode(this.refs.cb).disabled = value;
	},
	checked: function (value, ifTriggeChange, event) {
		this._checked = value;
		ReactDOM.findDOMNode(this.refs.cb).checked = value;
		(ifTriggeChange===undefined?true:ifTriggeChange) && this.props.onChange && this.props.onChange(event, value, this);
	},
	render: function(){
		return (
			<label className={"rt-checkbox " + (this.props.className||'')} onClick={(event)=>this.__onClick(event)} style={this.props.style}>
				<input ref='cb' type={this.props.type||'checkbox'} />
				{
					this.props.text && <span className="label">{this.props.text}</span>
				}
			</label>
		);
	}
});