Pagination.js

import React, { Fragment } from 'react'
import styled from 'styled-components'
import { TextField } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'

import { IconButton, Label, Text } from './'

const PaginationComponent = ({
  page = 1,
  toLast,
  toFirst,
  hasMore = true,
  nextPage,
  prevPage,
  maxItems = 23,
  itemsPerPage = 10,
  changeItemsPerPage = () => {},
}) => (
  <Root>
    <Text mr={1} secondary>
      Showing
    </Text>
    <TextInput onChange={changeItemsPerPage} value={itemsPerPage} />
    <Chevrons
      hide={page === 0}
      icon="chevrons-left"
      iconSize={2}
      onClick={toFirst}
    />
    <Chevrons
      hide={page === 0}
      icon="chevron-left"
      iconSize={2}
      onClick={prevPage}
    />
    <Label>{`${page * itemsPerPage + 1} to ${
      hasMore ? itemsPerPage * (page + 1) : maxItems
    }`}</Label>
    <Chevrons
      hide={!hasMore}
      icon="chevron-right"
      iconSize={2}
      onClick={nextPage}
    />
    <Chevrons
      hide={!hasMore}
      icon="chevrons-right"
      iconSize={2}
      onClick={toLast}
    />
  </Root>
)

export const Pagination = ({ paginatedItems, children, ...props }) => (
  <Fragment>
    <PaginationComponent {...props} />
    {typeof children === 'function' && children(paginatedItems, props)}
  </Fragment>
)

export default PaginationComponent

// #region styles
const Root = styled.div`
  align-items: center;
  display: flex;
  justify-content: center;
`

const TextInput = styled(TextField)`
  margin: 0;
  width: calc(${th('gridUnit')} * 5);
  height: calc(${th('gridUnit')} * 4);

  & input {
    text-align: center;
    vertical-align: middle;
  }
`

const Chevrons = styled(IconButton)`
  cursor: ${({ hide }) => (hide ? 'auto' : 'pointer')};
  opacity: ${({ hide }) => (hide ? 0 : 1)};
`
// #endregion