+ )
+}
+
/**
* Pagingation bar
*/
const PaginationBar = enhance(({onPageChange, currentPageNum, totalCount, pageSize}) => {
const handlePageSelection = val => {
// if it's a number then call handler
- if (currentPageNum !== val && _.isNumber(val)) onPageChange(val)
+ if (currentPageNum !== val && _.isNumber(val)) return onPageChange(val)
// val must be an event- handle prev / next
val = val.target.innerText.toLowerCase()
if (val === 'prev') onPageChange(currentPageNum-1)
if (val === 'next') onPageChange(currentPageNum+1)
}
+ const renderPill = (pageNum) => {
+ return (
+
+ )
+ }
+
+ const populatePills = (pages) => {
+ const pagePills = []
+
+ if (pages <= NUMBER_OF_PILLS) {
+ for(let p=1; p <= pages; p++) {
+ pagePills.push(renderPill(p))
+ }
+ return pagePills
+ }
+ // number of pages available to show pills before current page (assuming 1st pill is always there)
+ const pagesBeforeCurrent = currentPageNum - 1 - 1
+ // number of pages available to show pills after current page (assuming last pill is always there)
+ const pagesAfterCurrent = pages - currentPageNum - 1
+ // render first page pill
+ if (currentPageNum > 1) {
+ pagePills.push(renderPill(1))
+ }
+ // render current page pill
+ pagePills.push(renderPill(currentPageNum))
+
+ // render last page pill
+ if (currentPageNum < pages) {
+ pagePills.push(renderPill(pages))
+ }
+ // array to store the pills to be rendered on the left side of the current page
+ const leftPagePills = []
+ // initially assumes equal partition between left and right side of the current page
+ let remainingPillsLeft = Math.ceil((NUMBER_OF_PILLS - pagePills.length) / 2)
+
+ // if pills avialable to render before current page, add pills determined by remainingPillsLeft
+ if (pagesBeforeCurrent > 0) {
+ for(let i=1; i <= remainingPillsLeft && i <= pagesBeforeCurrent; i++) {
+ leftPagePills.splice(0, 0, renderPill(currentPageNum - i))
+ }
+ }
+ // add the left side pills to the main pills array
+ pagePills.splice(1, 0, ...leftPagePills)
+ // calculates the pills to render on the right side of the current page, it may be greater than the left side pills
+ const remainingPillsRight = NUMBER_OF_PILLS - pagePills.length
+
+ // if pills available to render after the current page, add pills determined by remainingPillsRight
+ if (pagesAfterCurrent > 0) {
+ for(let i=1; i <= remainingPillsRight && i <= pagesAfterCurrent; i++) {
+ pagePills.splice(pagePills.length - 1, 0, renderPill(currentPageNum + i))
+ }
+ }
+ // Now, checks if we still need to render any pill to show fix number of pills
+ remainingPillsLeft = NUMBER_OF_PILLS - pagePills.length
+ // adds more pills towards left of the current page
+ if(pagesBeforeCurrent - leftPagePills.length - remainingPillsLeft > 0) {
+ for(let i=1; i <= remainingPillsLeft; i++) {
+ pagePills.splice(1, 0, renderPill(currentPageNum - leftPagePills.length - i))
+ }
+ }
+ // adds go to page pill if there are missing pills between first and current page pill
+ if (pagesBeforeCurrent - leftPagePills.length - remainingPillsLeft > 0) {
+ pagePills.splice(1,
+ 0,
+
+ )
+ }
+ // adds go to page pill if there are missing pills between current page and last pill
+ if (pagesAfterCurrent - remainingPillsRight > 0) {
+ pagePills.splice(pagePills.length - 1,
+ 0,
+
+ )
+ }
+ return pagePills
+ }
+
// calculate number of pages to show
const pages = Math.ceil(totalCount / pageSize)
+ const pagePills = populatePills(pages)
return (