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

Zeanium UI Framework for React.js

var React = require('react');

module.exports = React.createClass({
	getDefaultProps: function () {
		return {
			className: 'c-default',
			autoLoad: true,
			textKey: 'text',
			singleSelect: true
		};
	},
	displayName: 'ListView',
	getInitialState: function(){
		return {
			currIndex: null,
			data: []
		}
	},
	componentDidMount:function(){
		this._dataSource = Store.dataSource(this.props.data, {
			autoLoad: this.props.autoLoad === undefined ? true : this.props.autoLoad,
			onSuccess: function (data){
				//console.log(data);
				this.__onDataLoaded(data.result?data.result:data);
			}.bind(this)
		});
	},
	require: function (data, argv){
		this._dataSource.reset(data, argv);
	},
	filter: function (handler) {
		var _data = [];
		this.state.data.forEach(function (item, index, array) {
			if(handler(item, index, array) !== false){
				_data.push(item);
			}
		});

		this.setState({ data: _data });
	},
	refresh: function (){
		this._dataSource.refresh();
	},
	__onDataLoaded: function (data){
		if(data.length==undefined){
			var temp = [];
			for(var key in data){
				temp.push(data[key]);
			}
			data = temp;
		}
		this.state.data = data;
		this.setState({ data: data });
		if(this.props.fireIndex != undefined){
			this.fireClick(this.props.fireIndex);
		}
		this.props.onLoaded && this.props.onLoaded(data, this);
	},
	__onItemClick: function (event, item, index){
		if(!item){ return; }
		this.props.singleSelect && this.setState({ currIndex: index });
		item.index = index;
		if(event){
			event.stopPropagation();
			//event.preventDefault();
		}
		this.props.onClick && this.props.onClick(event, item, index, this);
	},
	fireClick: function (index){
		this.__onItemClick(null, this.state.data[index], index);
	},
	__itemRender: function (item, index){
		var _content = null;
		if(typeof item=='string'){
			item = { text: item, value: item };
		}

		if(this.props.itemRender){
			_content = this.props.itemRender(item, index);
		}

		if(!_content){
			_content = <div>{item[this.props.textKey]}</div>;
		}

		return <li key={index} className={'rt-list-item ' + (this.state.currIndex==index?'curr':'')} onClick={(event)=>this.__onItemClick(event, item, index)}>{_content}</li>;
	},
	render:function(){
		return (
			<ul style={this.props.style} className={'rt-list ' + this.props.className + ' ' + (this.state.data.length?'':'no-data')}>
				{
					this.state.data && this.state.data.map(this.__itemRender)
				}
			</ul>
		);
	}
});