All files / src/hocs/components pagination.js

25% Statements 2/8
0% Branches 0/2
0% Functions 0/3
25% Lines 2/8

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>;
  }
}