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

Zeanium UI Framework for React.js

require('./Paging.less');
var React = require('react');

module.exports = React.createClass({
	displayName:'Pager',
	getDefaultProps: function (){
		return {

		};
	},
	getInitialState: function (){
		return {
			currIndex: null
		}
	},
	componentDidMount:function(){
		if(this.props.fireIndex != undefined){
			this.fireClick(this.props.fireIndex);
		}
	},
	__onItemClick: function (item, index){
		this.setState({ currIndex: index });
		this.props.onClick && this.props.onClick(item, index);
	},
	fireClick: function (index){
		this.__onItemClick(this.props.data[index], index);
	},
	__itemRender: function (item, index){
		var _content = null;
		if(this.props.itemRender){
			_content = this.props.itemRender(item, index);
		}
		if(!_content){
			_content = <a>{item}</a>
		}

		return <li key={index} className={this.state.currIndex==index?'curr':''} onClick={()=>this.__onItemClick(item, index)}>{_content}</li>;
	},
	render:function(){
		return (
			<div className="c-pager">
				<ul className="pager-list">
					<li></li>

					<li></li>
				</ul>
				<div className="go-to">
					<input className="input" type="text" name="index" />
					<span className="btn">go</span>
				</div>
			</div>
		);
	}
});