JSFiddle - React, Tailwind, and code Playground

by Alexander Malinov

Babel + JSX

const params_1 = {
  pageIndex: 0,
  pageSize: 10,
  pageCount: 50,
  canNextPage: true,
  canPreviousPage: false
}

const params_2 = {
  pageIndex: 23,
  pageSize: 10,
  pageCount: 50,
  canNextPage: true,
  canPreviousPage: true
}

const params_3 = {
  pageIndex: 49,
  pageSize: 10,
  pageCount: 50,
  canNextPage: false,
  canPreviousPage: true
}

const params_4 = {
  pageIndex: 0,
  pageSize: 10,
  pageCount: 9,
  canNextPage: true,
  canPreviousPage: false
}

const params_5 = {
  pageIndex: 8,
  pageSize: 10,
  pageCount: 9,
  canNextPage: false,
  canPreviousPage: true
}

const params_6 = {
  pageIndex: 4,
  pageSize: 10,
  pageCount: 9,
  canNextPage: true,
  canPreviousPage: true
}

const generatePaginationElements = (params) => {
  
  const dots = "...";
  const {
    pageIndex,
    pageSize,
    pageCount,
    canNextPage,
    canPreviousPage
  } = params;

  const allPages = [
    ...Array.from(
      {
        length: pageCount
      },
      (v, k) => ({
        page: k,
        text: `${k + 1}`
      })
    )
  ];

  let result = [];

  if (pageCount <= 7) {
    result = allPages;
  } else {
    if (pageIndex < 5) {
      result = [];
      result.push(allPages[0]);
      result.push(allPages[1]);
      result.push(allPages[2]);
      result.push(allPages[3]);
      result.push(allPages[4]);
      result.push({
        page: Math.round((pageCount - 5) / 2) + 4,
        text: dots
      });
      result.push(allPages[pageCount - 1]);
    }

    if (pageIndex > pageCount - 5 && pageIndex < pageCount) {
      result = [];
      result.push(allPages[0]);
      result.push({
        page: Math.round((pageCount - 5) / 2),
        text: dots
      });
      result.push(allPages[pageCount - 5]);
      result.push(allPages[pageCount - 4]);
      result.push(allPages[pageCount - 3]);
      result.push(allPages[pageCount - 2]);
      result.push(allPages[pageCount - 1]);
    }

    if (
      canNextPage &&
      canPreviousPage &&
      pageIndex >= 4 &&
     ...