Merge pull request #4 from aboutbits/display-number

Introducing display number

Author: alexlanz

readme.md

@@ -25,7 +25,7 @@ Second, you can call the calculate function by passing the following information
 - `size`: The amount of items shown per page
 - `total`: The amount of total items in the list/collection
 - `config`: A configuration object containing the following possible configuration values:
-  - `firstPage`: The first page of the pagination (default: 1)
+  - `indexType`: The starting point of the pagination (default: IndexType.ONE_BASED)
   - `maxPages`: The maximum amount of pages that should be shown (default: 5)
 
 In return, you receive an object with all relevant information:
@@ -43,32 +43,37 @@ This would return the following object:
 ```json
 {
   "previous": {
-    "number": 1,
+    "indexNumber": 1,
     "isDisabled": true
   },
   "next": {
-    "number": 2,
+    "indexNumber": 2,
     "isDisabled": false
   },
   "pages": [
     {
-      "number": 1,
+      "indexNumber": 1,
+      "displayNumber": 1,
       "isCurrent": true
     },
     {
-      "number": 2,
+      "indexNumber": 2,
+      "displayNumber": 2,
       "isCurrent": false
     },
     {
-      "number": 3,
+      "indexNumber": 3,
+      "displayNumber": 3,
       "isCurrent": false
     },
     {
-      "number": 4,
+      "indexNumber": 4,
+      "displayNumber": 4,
       "isCurrent": false
     },
     {
-      "number": 5,
+      "indexNumber": 5,
+      "displayNumber": 5,
       "isCurrent": false
     }
   ]

…t__/pagination-with-first-page-1.test.ts …nation-with-one-based-index-type.test.tssrc/__test__/pagination-with-first-page-1.test.ts renamed to src/__test__/pagination-with-one-based-index-type.test.ts src/__test__/pagination-with-first-page-1.test.ts renamed to src/__test__/pagination-with-one-based-index-type.test.ts

@@ -17,11 +17,14 @@ it('should return only a few pages', () => {
   expect(pagination).not.toBeNull()
   expect(pagination?.pages).toHaveLength(3)
 
-  expect(pagination?.pages[0].number).toBe(1)
+  expect(pagination?.pages[0].indexNumber).toBe(1)
+  expect(pagination?.pages[0].displayNumber).toBe(1)
   expect(pagination?.pages[0].isCurrent).toBeFalsy()
-  expect(pagination?.pages[1].number).toBe(2)
+  expect(pagination?.pages[1].indexNumber).toBe(2)
+  expect(pagination?.pages[1].displayNumber).toBe(2)
   expect(pagination?.pages[1].isCurrent).toBeTruthy()
-  expect(pagination?.pages[2].number).toBe(3)
+  expect(pagination?.pages[2].indexNumber).toBe(3)
+  expect(pagination?.pages[2].displayNumber).toBe(3)
   expect(pagination?.pages[2].isCurrent).toBeFalsy()
 })
 it('should return the maximum number of pages', () => {
@@ -36,15 +39,20 @@ it('should return the maximum number of pages', () => {
   expect(pagination).not.toBeNull()
   expect(pagination?.pages).toHaveLength(5)
 
-  expect(pagination?.pages[0].number).toBe(3)
+  expect(pagination?.pages[0].indexNumber).toBe(3)
+  expect(pagination?.pages[0].displayNumber).toBe(3)
   expect(pagination?.pages[0].isCurrent).toBeFalsy()
-  expect(pagination?.pages[1].number).toBe(4)
+  expect(pagination?.pages[1].indexNumber).toBe(4)
+  expect(pagination?.pages[1].displayNumber).toBe(4)
   expect(pagination?.pages[1].isCurrent).toBeFalsy()
-  expect(pagination?.pages[2].number).toBe(5)
+  expect(pagination?.pages[2].indexNumber).toBe(5)
+  expect(pagination?.pages[2].displayNumber).toBe(5)
   expect(pagination?.pages[2].isCurrent).toBeTruthy()
-  expect(pagination?.pages[3].number).toBe(6)
+  expect(pagination?.pages[3].indexNumber).toBe(6)
+  expect(pagination?.pages[3].displayNumber).toBe(6)
   expect(pagination?.pages[3].isCurrent).toBeFalsy()
-  expect(pagination?.pages[4].number).toBe(7)
+  expect(pagination?.pages[4].indexNumber).toBe(7)
+  expect(pagination?.pages[4].displayNumber).toBe(7)
   expect(pagination?.pages[4].isCurrent).toBeFalsy()
 })
 it('should disable the previous link', () => {
@@ -55,10 +63,10 @@ it('should disable the previous link', () => {
 
   expect(pagination).not.toBeNull()
 
-  expect(pagination?.previous.number).toBe(1)
+  expect(pagination?.previous.indexNumber).toBe(1)
   expect(pagination?.previous.isDisabled).toBeTruthy()
 
-  expect(pagination?.next.number).toBe(2)
+  expect(pagination?.next.indexNumber).toBe(2)
   expect(pagination?.next.isDisabled).toBeFalsy()
 
   expect(pagination?.pages[0].isCurrent).toBeTruthy()
@@ -72,10 +80,10 @@ it('should disable the next link', () => {
 
   expect(pagination).not.toBeNull()
 
-  expect(pagination?.previous.number).toBe(1)
+  expect(pagination?.previous.indexNumber).toBe(1)
   expect(pagination?.previous.isDisabled).toBeFalsy()
 
-  expect(pagination?.next.number).toBe(2)
+  expect(pagination?.next.indexNumber).toBe(2)
   expect(pagination?.next.isDisabled).toBeTruthy()
 
   expect(pagination?.pages[0].isCurrent).toBeFalsy()

…t__/pagination-with-first-page-0.test.ts …ation-with-zero-based-index-type.test.tssrc/__test__/pagination-with-first-page-0.test.ts renamed to src/__test__/pagination-with-zero-based-index-type.test.ts src/__test__/pagination-with-first-page-0.test.ts renamed to src/__test__/pagination-with-zero-based-index-type.test.ts

@@ -1,27 +1,34 @@
-import { calculatePagination } from '../index'
+import { calculatePagination, IndexType } from '../index'
 
 it('should return no pagination if not enough items are given', () => {
   const page = 0
   const size = 5
   const total = 2
-  const pagination = calculatePagination(page, size, total, { firstPage: 0 })
+  const pagination = calculatePagination(page, size, total, {
+    indexType: IndexType.ZERO_BASED,
+  })
 
   expect(pagination).toBeNull()
 })
 it('should return only a few pages', () => {
   const page = 1
   const size = 5
   const total = 15
-  const pagination = calculatePagination(page, size, total, { firstPage: 0 })
+  const pagination = calculatePagination(page, size, total, {
+    indexType: IndexType.ZERO_BASED,
+  })
 
   expect(pagination).not.toBeNull()
   expect(pagination?.pages).toHaveLength(3)
 
-  expect(pagination?.pages[0].number).toBe(0)
+  expect(pagination?.pages[0].indexNumber).toBe(0)
+  expect(pagination?.pages[0].displayNumber).toBe(1)
   expect(pagination?.pages[0].isCurrent).toBeFalsy()
-  expect(pagination?.pages[1].number).toBe(1)
+  expect(pagination?.pages[1].indexNumber).toBe(1)
+  expect(pagination?.pages[1].displayNumber).toBe(2)
   expect(pagination?.pages[1].isCurrent).toBeTruthy()
-  expect(pagination?.pages[2].number).toBe(2)
+  expect(pagination?.pages[2].indexNumber).toBe(2)
+  expect(pagination?.pages[2].displayNumber).toBe(3)
   expect(pagination?.pages[2].isCurrent).toBeFalsy()
 })
 it('should return the maximum number of pages', () => {
@@ -30,36 +37,43 @@ it('should return the maximum number of pages', () => {
   const total = 50
   const maxPages = 5
   const pagination = calculatePagination(page, size, total, {
-    firstPage: 0,
+    indexType: IndexType.ZERO_BASED,
     maxPages: maxPages,
   })
 
   expect(pagination).not.toBeNull()
   expect(pagination?.pages).toHaveLength(5)
 
-  expect(pagination?.pages[0].number).toBe(2)
+  expect(pagination?.pages[0].indexNumber).toBe(2)
+  expect(pagination?.pages[0].displayNumber).toBe(3)
   expect(pagination?.pages[0].isCurrent).toBeFalsy()
-  expect(pagination?.pages[1].number).toBe(3)
+  expect(pagination?.pages[1].indexNumber).toBe(3)
+  expect(pagination?.pages[1].displayNumber).toBe(4)
   expect(pagination?.pages[1].isCurrent).toBeFalsy()
-  expect(pagination?.pages[2].number).toBe(4)
+  expect(pagination?.pages[2].indexNumber).toBe(4)
+  expect(pagination?.pages[2].displayNumber).toBe(5)
   expect(pagination?.pages[2].isCurrent).toBeTruthy()
-  expect(pagination?.pages[3].number).toBe(5)
+  expect(pagination?.pages[3].indexNumber).toBe(5)
+  expect(pagination?.pages[3].displayNumber).toBe(6)
   expect(pagination?.pages[3].isCurrent).toBeFalsy()
-  expect(pagination?.pages[4].number).toBe(6)
+  expect(pagination?.pages[4].indexNumber).toBe(6)
+  expect(pagination?.pages[4].displayNumber).toBe(7)
   expect(pagination?.pages[4].isCurrent).toBeFalsy()
 })
 it('should disable the previous link', () => {
   const page = 0
   const size = 5
   const total = 10
-  const pagination = calculatePagination(page, size, total, { firstPage: 0 })
+  const pagination = calculatePagination(page, size, total, {
+    indexType: IndexType.ZERO_BASED,
+  })
 
   expect(pagination).not.toBeNull()
 
-  expect(pagination?.previous.number).toBe(0)
+  expect(pagination?.previous.indexNumber).toBe(0)
   expect(pagination?.previous.isDisabled).toBeTruthy()
 
-  expect(pagination?.next.number).toBe(1)
+  expect(pagination?.next.indexNumber).toBe(1)
   expect(pagination?.next.isDisabled).toBeFalsy()
 
   expect(pagination?.pages[0].isCurrent).toBeTruthy()
@@ -69,14 +83,16 @@ it('should disable the next link', () => {
   const page = 1
   const size = 5
   const total = 10
-  const pagination = calculatePagination(page, size, total, { firstPage: 0 })
+  const pagination = calculatePagination(page, size, total, {
+    indexType: IndexType.ZERO_BASED,
+  })
 
   expect(pagination).not.toBeNull()
 
-  expect(pagination?.previous.number).toBe(0)
+  expect(pagination?.previous.indexNumber).toBe(0)
   expect(pagination?.previous.isDisabled).toBeFalsy()
 
-  expect(pagination?.next.number).toBe(1)
+  expect(pagination?.next.indexNumber).toBe(1)
   expect(pagination?.next.isDisabled).toBeTruthy()
 
   expect(pagination?.pages[0].isCurrent).toBeFalsy()

src/index.ts

@@ -1,3 +1,8 @@
+enum IndexType {
+  ZERO_BASED,
+  ONE_BASED,
+}
+
 const calculateVisiblePages = (
   page: number,
   firstPage: number,
@@ -48,52 +53,56 @@ const calculatePagination = (
   size: number,
   total: number,
   config?: {
-    firstPage?: number
+    indexType?: IndexType
     maxPages?: number
   }
 ): {
   previous: {
-    number: number
+    indexNumber: number
     isDisabled: boolean
   }
   next: {
-    number: number
+    indexNumber: number
     isDisabled: boolean
   }
   pages: {
-    number: number
+    indexNumber: number
+    displayNumber: number
     isCurrent: boolean
   }[]
 } | null => {
   if (total <= size) {
     return null
   }
 
-  const firstPage = config?.firstPage ?? 1
+  const indexType = config?.indexType ?? IndexType.ONE_BASED
   const maxPages = config?.maxPages ?? 5
 
+  const firstPage = indexType === IndexType.ZERO_BASED ? 0 : 1
   const lastPage = Math.ceil(total / size) + (firstPage - 1)
   const isCurrentTheFirstPage = page === firstPage
   const isCurrentTheLastPage = page === lastPage
 
   return {
     previous: {
-      number: isCurrentTheFirstPage ? firstPage : page - 1,
+      indexNumber: isCurrentTheFirstPage ? firstPage : page - 1,
       isDisabled: isCurrentTheFirstPage,
     },
     next: {
-      number: isCurrentTheLastPage ? lastPage : page + 1,
+      indexNumber: isCurrentTheLastPage ? lastPage : page + 1,
       isDisabled: isCurrentTheLastPage,
     },
     pages: calculateVisiblePages(page, firstPage, lastPage, maxPages).map(
       (visiblePage) => {
         return {
-          number: visiblePage,
+          indexNumber: visiblePage,
+          displayNumber:
+            indexType === IndexType.ZERO_BASED ? visiblePage + 1 : visiblePage,
           isCurrent: visiblePage === page,
         }
       }
     ),
   }
 }
 
-export { calculatePagination }
+export { calculatePagination, IndexType }