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

Zeanium UI Framework for React.js

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

module.exports = React.createClass({
	displayName:'TableBody',
	getDefaultProps: function (){
		return {
			singleSelect: true,
			checked: []
		};
	},
	getInitialState:function(){
		return {
			curr: null,
			data: null
		}
	},
	componentDidMount:function(){
		this._dataSource = Store.dataSource(this.props.data, {
			autoLoad: this.props.autoLoad||true,
			onSuccess: function (data){
				//console.log('TableBody', data);
				this.__onDataLoaded(data.result || data);
				this.props.onData && this.props.onData(data);
			}.bind(this)
		});
	},
	componentWillReceiveProps: function(nextProps){
		if(nextProps.data!==this.props.data){
			this._dataSource.reset(nextProps.data);
		}
	},
	request: function (data, argv){
		this._dataSource.reset(data, argv);
	},
	refresh: function (){
		this._dataSource.refresh();
	},
	setData: function (data, argv){
		this._dataSource.reset(data, argv);
	},
	getData: function (){
		var _data = [];
		for(var i = 0, _len = this._rows.length; i < _len; i++){
			_data.push(this._rows[i].props.data);
		}

		return _data;
	},
	insertRow: function (row, index){
		if(index===undefined){
			this.state.data.push(row);
		} else {
			this.state.data.splice(index, 0, row);
		}
		this.forceUpdate();
	},
	deleteRow: function (row){
		this.state.data.splice(this.state.data.indexOf(row), 1);
		this.forceUpdate();
	},
	filter: function (filter) {
		this.setState({
			data: this.state.data.filter(filter||function (){})
		});
	},
	search: function (handler) {
		if(!this._data){
			this._data = this.state.data.slice(0);
		}
		this.setState({ data: this._data.filter(handler) });
	},
	__onDataLoaded: function (data){
		this.setState({ data: data });
		if(this.props.fireIndex != undefined){
			this.fireClick(this.props.fireIndex);
		}
		this.props.onLoaded && this.props.onLoaded(data, this);
	},
	fireClick: function (index){

	},
	setAllChecked: function (value){
		this._rows.forEach(function (row, index){
			row.checked(value);
		});
	},
	getCheckedItems: function (filter){
		var _values = [];
		this._rows.forEach(function (row, index){
			if(filter&&filter(row, index)!==false){
				// idle
			} else {
				if(row._checked){
					_values.push(row);
				}
			}
		});

		return _values;
	},
	getSelectedRow: function (){
		return this.state.curr;
	},
	__onRowDidMount: function (row){
		this._rows.push(row);
	},
	__onTableRowClick: function (event, data, row) {
		if(this.props.singleSelect){
			if(this.state.curr){
				this.state.curr.selected(false);
			}
			row.selected(true);
			this.state.curr = row;
		}
		this.props.onTableRowClick && this.props.onTableRowClick(event, data, row, this);
	},
	__onRowCheckBoxChange: function (value, row, checkbox){
		if (!!value) {
			this._checked.push(row.props.index);
		} else {
			this._checked.forEach(function(value, index){
				if(value == row.props.index){
					this._checked.splice(index, 1);
				}
			}.bind(this));
		}
		this.props.onCheckBoxChange && this.props.onCheckBoxChange(value, row, checkbox, this);
	},
	render:function(){
		this._checked = this._checked || this.props.checked;
		this._rows = [];
		return (
			<tbody style={this.props.tbodyStyle}>
				{
					this.state.data && this.state.data.map(function (item, index){
						return <TableRow
									index={index}
									key={index+'_'+Util.uuid()}
									data={item}
									items={this.props.items}
									editable={this.props.editable !== undefined ? this.props.editable: item._editable}
									checkbox={this.props.checkbox}
									rowRender={this.props.rowRender}
									columnRender={this.props.columnRender}
									draggable={!!this.props.onRowDragStart}
									onDragStart={(event)=>{
										this.props.onRowDragStart(event, item, index);
									}}
									onCheckBoxChange={this.__onRowCheckBoxChange}
									onDidMount={this.__onRowDidMount}
									onRowClick={this.__onTableRowClick}
									/>
					}.bind(this))
				}
			</tbody>
		);
	}
});