react-zeanium-ui-ui/src/table/TableRow.js

Zeanium UI Framework for React.js

var React = require('react');
var ReactDOM = require('react-dom');
var Checkbox = require('../ui/Checkbox');
var Input = require('../ui/Input');
var Icon = require('../ui/Icon');

module.exports = React.createClass({
	displayName:'TableRow',
	getInitialState:function(){
		return {
			selected: this.props.selected,
			editable: this.props.editable
		}
	},
	componentDidMount:function(){
		this.props.onDidMount && this.props.onDidMount(this);
	},
	checked: function (value){
		this.refs.checkbox && this.refs.checkbox.checked(value);
	},
	selected: function (selected) {
		if(this.isMounted()){
			this.setState({
				selected: selected
			});
		}
	},
	editable: function (editable) {
		this.setState({
			editable: editable
		});
	},
	__onCheckBoxChange: function (event, value, cb){
		this._checked = value;
		this.props.onCheckBoxChange && this.props.onCheckBoxChange(value, this, cb);
	},
	__onRowClick: function (event){
		var _td = this.__getTargetTD(event.target),
			_tr = ReactDOM.findDOMNode(this);
		this.props.onRowClick && this.props.onRowClick(event, {
			tr: _tr,
			td: _td,
			data: this.props.data,
			items: this.props.items
		}, this);
	},
	__getTargetTD: function (target) {
		if(target.tagName!=='TD'){
			return this.__getTargetTD(target.parentNode);
		} else {
			return target;
		}
	},
	__onTableColumnChange: function (rowIndex, columnIndex, name, value, input){
		this.props.data[name] = value.value;
		//console.log(this.props.data);
		//console.log(name, value);
	},
	__columnRender: function (item, index){
		var _value = this.props.data,
			_content = null;

		if(Object.prototype.toString.call(_value) === '[object Array]'){
			if(this.props.checkbox){
				_value = _value[index-1]
			} else {
				_value = _value[index]
			}
		} else {
			_value = _value[item.name];
		}

		if(this.props.columnRender){
			_content = this.props.columnRender(this.props.index, index, this.props.data, item, _value);
		}

		if(_content == null){
			switch (item.type) {
				case 'checkbox':
					_value = _value==undefined ? this.props.checked : _value;
					_content = this.state.editable?<Icon icon="fa-edit" />:<Checkbox onChange={this.__onCheckBoxChange} ref="checkbox" checked={_value} />;
					break;
				default:
					//console.log(this.state.editable, _value, item);
					_content = this.state.editable?<Input {...item} value={_value} text={_value} onInputChange={(name, value, input)=>this.__onTableColumnChange(this.props.index, index, name, value, input)} />:<span>{_value}</span>;
					break;
			}
		}

		return <td key={index} title={_value} className={'text-align-'+(item.textAlign||'left')}>{_content}</td>;
	},
	render:function(){
		return (
			<tr {...this.props} className={"row " + (this.state.editable?'editable':'') + " " + (this.state.selected?'selected':'')} onClick={this.__onRowClick}>
				{
					(this.props.items||[]).map(this.__columnRender)
				}
			</tr>
		);
	}
});