contiago-toolbar/app/components/Pagination/index.js

One of the options for outputting content from contiago xml-server

import React from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import Circle from './Circle';
import Container from './Container';
import DotsContainer from './DotsContainer';
import First from './First';
import Last from './Last';
import Next from './Next';
import Prev from './Prev';

function Pagination({ pageNumber, pagesAmount, onSetCurrentPage }) {
  return (
    <Container>
      <First
        isActive={pageNumber - 1 >= 0}
        onClick={() => (pageNumber - 1 >= 0 ? onSetCurrentPage(0) : null)}
      />
      <Prev
        isActive={pageNumber - 1 >= 0}
        onClick={() =>
          pageNumber - 1 >= 0 ? onSetCurrentPage(pageNumber - 1) : null
        }
      />
      <DotsContainer>
        {pagesAmount !== 0 &&
          _.range(pagesAmount).map((index) => (
            <Circle
              key={index}
              onClick={() => onSetCurrentPage(index)}
              index={index}
              pageNumber={pageNumber}
            />
          ))}
      </DotsContainer>
      <Next
        isActive={pageNumber + 1 <= pagesAmount - 1}
        onClick={() =>
          pageNumber + 1 <= pagesAmount - 1
            ? onSetCurrentPage(pageNumber + 1)
            : null
        }
      />
      <Last
        isActive={pageNumber + 1 <= pagesAmount - 1}
        onClick={() =>
          pageNumber + 1 <= pagesAmount - 1
            ? onSetCurrentPage(pagesAmount - 1)
            : null
        }
      />
    </Container>
  );
}

Pagination.propTypes = {
  pageNumber: PropTypes.number,
  pagesAmount: PropTypes.number,
  onSetCurrentPage: PropTypes.func,
};

export default Pagination;