5.1.9 • Published 6 years ago
cf-builder-pagination v5.1.9
cf-builder-pagination
Cloudflare Pagination Builder
Installation
Installation with yarn is recommended
$ yarn add cf-builder-pagination
Usage
import React from 'react';
import { PaginationBuilder } from 'cf-builder-pagination';
function getStartAndEnd(page, pageSize) {
const start = (page - 1) * pageSize;
const end = start + pageSize - 1;
return [start, end];
}
function hasAllItems(items, start, end) {
for (let i = start; i <= end; i++) {
if (!items[i] || items[i].isRequesting) {
return false;
}
}
return true;
}
class BuilderPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
totalCount: 143,
page: 1,
perPage: 20
};
this.handlePageChange = this.handlePageChange.bind(this);
}
componentDidMount() {
this.maybeRequestPage(this.state.page);
}
handlePageChange(page) {
this.maybeRequestPage(page);
}
// This is mimicking what will happen in the API actions/reducers:
maybeRequestPage(page) {
const items = this.state.items.slice();
const [start, end] = getStartAndEnd(page, this.state.perPage);
const needsRequest = !hasAllItems(items, start, end);
if (!needsRequest) {
this.setState({ page });
return;
}
for (let i = start; i <= end; i++) {
if (!items[i]) {
items[i] = {
isRequesting: true
};
}
}
this.setState({ page, items });
setTimeout(() => {
const items = this.state.items.slice();
for (let i = start; i <= end; i++) {
items[i].isRequesting = false;
}
this.setState({ items });
}, 500);
}
render() {
const [start, end] = getStartAndEnd(this.state.page, this.state.perPage);
const loading = !hasAllItems(this.state.items, start, end);
return (
<PaginationBuilder
onPageChange={this.handlePageChange}
loading={loading}
totalCount={this.state.totalCount}
page={this.state.page}
perPage={this.state.perPage}
/>
);
}
}
export default BuilderPagination;
5.1.9
6 years ago
5.1.8
6 years ago
5.1.7
6 years ago
5.1.6
6 years ago
5.1.5
6 years ago
5.1.4
6 years ago
5.1.3
6 years ago
5.1.2
7 years ago
5.1.1
7 years ago
5.1.0
7 years ago
5.0.12
7 years ago
5.0.11
7 years ago
5.0.9
7 years ago
5.0.8
7 years ago
5.0.7
7 years ago
5.0.6
7 years ago
5.0.5
7 years ago
5.0.4
7 years ago
5.0.3
7 years ago
5.0.2
7 years ago
5.0.1
7 years ago
5.0.0
7 years ago
4.4.1
7 years ago
4.4.0
7 years ago
4.3.1
7 years ago
4.3.0
7 years ago
4.2.6
7 years ago
4.2.5
7 years ago
4.2.4
7 years ago
4.2.3
7 years ago
4.2.2
7 years ago
4.2.1
7 years ago
4.2.0
7 years ago
4.1.3
7 years ago
4.1.2
7 years ago
4.1.1
7 years ago
4.1.0
7 years ago
4.0.1
7 years ago
4.0.0
7 years ago
3.4.0
7 years ago
3.3.3
7 years ago
3.3.2
7 years ago
3.3.1
7 years ago
3.2.0
7 years ago
3.1.1
7 years ago
3.1.0
7 years ago
3.0.1
7 years ago
3.0.0
7 years ago
2.2.0
7 years ago
2.0.1
7 years ago
2.0.0
7 years ago
1.0.2
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago