bazarr/frontend/src/components/tables/PageControl.tsx

import React, { FunctionComponent, useMemo } from "react";
import { Col, Container, Pagination, Row } from "react-bootstrap";
import { PageControlAction } from "./types";
interface Props {
  count: number;
  index: number;
  size: number;
  total: number;
  canPrevious: boolean;
  previous: () => void;
  canNext: boolean;
  next: () => void;
  goto: (idx: number) => void;
  loadState?: PageControlAction;
}

const PageControl: FunctionComponent<Props> = ({
  count,
  index,
  size,
  total,
  canPrevious,
  previous,
  canNext,
  next,
  goto,
  loadState,
}) => {
  const empty = total === 0;
  const start = empty ? 0 : size * index + 1;
  const end = Math.min(size * (index + 1), total);

  const loading = loadState !== undefined;

  const pageButtons = useMemo(
    () =>
      [...Array(count).keys()]
        .map((idx) => {
          if (Math.abs(idx - index) >= 4 && idx !== 0 && idx !== count - 1) {
            return null;
          } else {
            return (
              <Pagination.Item
                key={idx}
                disabled={loading}
                active={index === idx}
                onClick={() => goto(idx)}
              >
                {idx + 1}
              </Pagination.Item>
            );
          }
        })
        .flatMap((item, idx, arr) => {
          if (item === null) {
            if (arr[idx + 1] === null) {
              return [];
            } else {
              return (
                <Pagination.Ellipsis key={idx} disabled></Pagination.Ellipsis>
              );
            }
          } else {
            return [item];
          }
        }),
    [count, index, goto, loading]
  );

  return (
    <Container fluid className="mb-3">
      <Row>
        <Col className="d-flex align-items-center justify-content-start">
          <span>
            Show {start} to {end} of {total} entries
          </span>
        </Col>
        <Col className="d-flex justify-content-end">
          <Pagination className="m-0" hidden={count <= 1}>
            <Pagination.Prev
              onClick={previous}
              disabled={!canPrevious && loading}
            ></Pagination.Prev>
            {pageButtons}
            <Pagination.Next
              onClick={next}
              disabled={!canNext && loading}
            ></Pagination.Next>
          </Pagination>
        </Col>
      </Row>
    </Container>
  );
};

export default PageControl;