75 lines
1.9 KiB
JavaScript
75 lines
1.9 KiB
JavaScript
var React = require('react');
|
|
var SingleItem = require('./singleItem');
|
|
var ItemCollection = require('../../models/itemCollection.js');
|
|
|
|
var ItemList = React.createClass({
|
|
changePage: function(page, e) {
|
|
e.preventDefault();
|
|
if(this.props.onPageChange) {
|
|
this.props.onPageChange(page);
|
|
}
|
|
},
|
|
render: function() {
|
|
|
|
var items = this.props.items.models.map( function(item) {
|
|
return (
|
|
<SingleItem item={item} key={item.id}/>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="row-fluid">
|
|
<div className="span10">
|
|
<div style={{marginTop: 35, padding: '0 25px'}} className="row">
|
|
{items}
|
|
</div>
|
|
{this.getPages()}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
getPages: function() {
|
|
if (!this.props.paginationEnabled) {
|
|
return "";
|
|
}
|
|
|
|
var nrOfPages = Math.ceil(this.props.total/ this.props.limit);
|
|
if (nrOfPages === 1) {
|
|
return "";
|
|
}
|
|
|
|
var maxSlots = 10;
|
|
var selectedIndex = Math.floor(this.props.currentOffset / this.props.limit);
|
|
|
|
var start, end;
|
|
start = selectedIndex - Math.floor(maxSlots / 2);
|
|
end = selectedIndex + Math.floor(maxSlots / 2 ) + 1;
|
|
|
|
if (start < 0) start = 0;
|
|
if (end > nrOfPages) end = nrOfPages;
|
|
|
|
if ((end - start) < maxSlots) {
|
|
start = Math.max(0, end - maxSlots);
|
|
end = Math.min(nrOfPages, start + maxSlots);
|
|
}
|
|
|
|
var pages = [];
|
|
for(var i = start; i < end; i++) {
|
|
var cn = i === selectedIndex ? "active": "";
|
|
pages.push(<li className={cn}><a onClick={this.changePage.bind(this, i)}href="#">{i + 1}</a></li>)
|
|
}
|
|
|
|
return (
|
|
<nav>
|
|
|
|
<ul className="pagination">
|
|
{pages}
|
|
</ul>
|
|
</nav>)
|
|
}
|
|
|
|
});
|
|
|
|
|
|
module.exports = ItemList;
|