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

Zeanium UI Framework for React.js

var React = require('react');
var Checkbox = require('./Checkbox');

module.exports = React.createClass({
	displayName:'CheckboxGroup',
	getDefaultProps: function (){
		return {
			sep: ',',
			value: [],
			disabled: false,
			valueConvert: function (item, index){
				return item.value||item.text||'';
			}
		};
	},
	getInitialState:function(){
		this._value = (typeof this.props.value == 'string')?this.props.value.split(this.props.sep):this.props.value;
		return {

		};
	},
	componentDidMount:function(){

	},
	componentWillReceiveProps: function (nextProps){
		if(this.props.value!==nextProps.value){
			this._value = (typeof nextProps.value == 'string')?nextProps.value.split(this.props.sep):nextProps.value;
		}
	},
	removeItemFromArray: function (array, item){
		for(var i = array.length; i--;) {
          	if(array[i] === item) {
              	array.splice(i, 1);
          	}
      	}
	},
	getCheckedItems: function (){

	},
	getValue: function (){
		if(this.props.multivalued){
			return this._map;
		} else {
			return this._value;
		}
	},
	__onItemChange: function (event, value, checkbox, item, index){
		item.checked = value;
		var _changeValue = this.props.valueConvert(item, index);
		if(this.props.multivalued){
			this._map[item.$key] = value;
		}else {
			if(value){
				this._value.push(_changeValue);
			} else {
				this.removeItemFromArray(this._value, _changeValue);
			}
		}

		this.props.onChange && this.props.onChange(event, {
			index: index,
			changeValue: _changeValue,
			value: this._value,
			checked: value,
			checkbox: checkbox
		}, this);
	},
	render: function(){
		var _disabled = this.props.disabled,
			_value = this._value;

		this._map = {};
		return (
			<div className={"rt-checkbox-group " + (this.props.className||'') + ' layout-' + (this.props.layout||'inline')} style={this.props.style} data-disabled={_disabled}>
				{
					this.props.data && this.props.data.map(function (item, index) {
						var _item = (typeof item=='string')?{ text: item }:item,
							_itemValue = _item.value || _item.text;

						if (_value.indexOf && _value.indexOf(_itemValue) != -1) {
							_item.checked = true;
						} else if(typeof _value == 'object' && _value[_itemValue]) {
							_item.checked = true;
						} else {
							_item.checked = false;
						}

						_item.$key = _itemValue;
						_item.disabled = _disabled;
						this._map[_itemValue] = _item.checked;
						return <Checkbox key={index} {..._item} onChange={(event, value, checkbox)=>this.__onItemChange(event, value, checkbox, _item, index)} />;
					}.bind(this))
				}
			</div>
		);
	}
});