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

Zeanium UI Framework for React.js

var React = require('react');

module.exports = React.createClass({
	displayName:'RadioGroup',
	getDefaultProps: function (){
		return {
			disabled: false
		};
	},
	getInitialState: function(){
		return {

		}
	},
	componentDidMount: function(){
		if(this._fireItem){
			this.__onItemChange(null, this._fireItem, this._fireItem.index);
		}
	},
	__onItemChange: function (event, item, index){
		if(this.state.disabled){
			return;
		}
		this.props.onChange && this.props.onChange(event, {
			index: index,
			value: item
		}, this);
	},
	render: function(){
		var _disabled = this.props.disabled,
			_value = this.props.value,
			_time = (new Date()).getTime(),
			_textKey = this.props.textKey || 'text',
			_valueKey = this.props.valueKey || 'value';
		return (
			<div className={"rt-radio-group " + (this.props.className||'') + ' layout-' + (this.props.layout||'inline')} style={this.props.style}>
				{
					this.props.data && this.props.data.map(function (item, index) {
						var _item = (typeof item=='string')?{ text: item }:item,
							_itemText = _item[_textKey]
							_itemValue = _item[_valueKey] || _itemText;
						_item.index = index;
						_item.text = _itemText;
						_item.value = _itemValue;
						if(_value === _itemValue){
							_item.checked = true;
							this._fireItem = _item;
						} else {
							_item.checked = false;
						}

						return <label className="rt-radio" key={index}>
							<input 	type="radio"
									name={(this.props.name||"radio_" + _time)}
									value={_itemValue}
									defaultChecked={_item.checked===true?true:undefined}
									disabled={_item.disabled||(_disabled===true?true:undefined)}
									onChange={(event)=>this.__onItemChange(event, _item, index)}/>
							{
								_itemText && <span className="label">{_itemText}</span>
							}
						</label>;
					}.bind(this))
				}
			</div>
		);
	}
});