Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 4x 4x | // @flow
import React, {Component} from 'react';
import {Button, Icon, Pagination} from 'antd';
import styled from 'styled-components';
const ButtonGroup = Button.Group;
const Wrapper = styled.div`
text-align: right;
margin-top: ${props => props.marginTop}px;
margin-right: ${props => props.marginRight}px;
display: inline-block;
`;
type Props = {
nextPage: () => void,
prevPage: () => void,
changePage: number => void,
hasNextPage: boolean,
hasPreviousPage: boolean,
changeSize: (size: number) => void,
size: number,
async: boolean,
total: number,
current: number
}
export default class PaginationPlugin extends Component<Props> {
render() {
const {nextPage, prevPage, hasNextPage, hasPreviousPage, async, total, changePage, current} = this.props;
if (!async) {
return <div style={{display: 'flex', justifyContent: 'flex-end'}}>
<Pagination current={current} onChange={changePage} total={total} />
</div>;
}
return <div style={{display: 'flex', justifyContent: 'flex-end'}}>
<Wrapper marginTop={16}>
<ButtonGroup>
<Button disabled={!hasPreviousPage} onClick={prevPage}>
<Icon type="left" />
Previous
</Button>
<Button disabled={!hasNextPage} onClick={nextPage}>
Next
<Icon type="right" />
</Button>
</ButtonGroup>
</Wrapper>
{/* <Wrapper marginTop={16} marginRight={16}>
<span>Page size: </span>
<Select style={{width: 100}} onChange={changeSize} defaultValue={10}>
<Option value={1}>1</Option>
<Option value={10}>10</Option>
<Option value={20}>20</Option>
<Option value={50}>50</Option>
<Option value={100}>100</Option>
</Select>
</Wrapper> */}
</div>;
}
}
|