Feat: new pagination (#11170)
KVOJJJin
1 year ago
committed by
GitHub
parent
0a30a5b077
commit
18d3ffc194
@ -1,3 +0,0 @@
|
|||||||
.pagination li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.pagination li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.pagination li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
import React, { useCallback } from 'react'
|
||||||
|
import type { IPaginationProps, IUsePagination } from './type'
|
||||||
|
|
||||||
|
const usePagination = ({
|
||||||
|
currentPage,
|
||||||
|
setCurrentPage,
|
||||||
|
truncableText = '...',
|
||||||
|
truncableClassName = '',
|
||||||
|
totalPages,
|
||||||
|
edgePageCount,
|
||||||
|
middlePagesSiblingCount,
|
||||||
|
}: IPaginationProps): IUsePagination => {
|
||||||
|
const pages = Array(totalPages)
|
||||||
|
.fill(0)
|
||||||
|
.map((_, i) => i + 1)
|
||||||
|
|
||||||
|
const hasPreviousPage = currentPage > 1
|
||||||
|
const hasNextPage = currentPage < totalPages
|
||||||
|
|
||||||
|
const isReachedToFirst = currentPage <= middlePagesSiblingCount
|
||||||
|
const isReachedToLast = currentPage + middlePagesSiblingCount >= totalPages
|
||||||
|
|
||||||
|
const middlePages = React.useMemo(() => {
|
||||||
|
const middlePageCount = middlePagesSiblingCount * 2 + 1
|
||||||
|
if (isReachedToFirst)
|
||||||
|
return pages.slice(0, middlePageCount)
|
||||||
|
|
||||||
|
if (isReachedToLast)
|
||||||
|
return pages.slice(-middlePageCount)
|
||||||
|
|
||||||
|
return pages.slice(
|
||||||
|
currentPage - middlePagesSiblingCount,
|
||||||
|
currentPage + middlePagesSiblingCount + 1,
|
||||||
|
)
|
||||||
|
}, [currentPage, isReachedToFirst, isReachedToLast, middlePagesSiblingCount, pages])
|
||||||
|
|
||||||
|
const getAllPreviousPages = useCallback(() => {
|
||||||
|
return pages.slice(0, middlePages[0] - 1)
|
||||||
|
}, [middlePages, pages])
|
||||||
|
|
||||||
|
const previousPages = React.useMemo(() => {
|
||||||
|
if (isReachedToFirst || getAllPreviousPages().length < 1)
|
||||||
|
return []
|
||||||
|
|
||||||
|
return pages
|
||||||
|
.slice(0, edgePageCount)
|
||||||
|
.filter(p => !middlePages.includes(p))
|
||||||
|
}, [edgePageCount, getAllPreviousPages, isReachedToFirst, middlePages, pages])
|
||||||
|
|
||||||
|
const getAllNextPages = React.useMemo(() => {
|
||||||
|
return pages.slice(
|
||||||
|
middlePages[middlePages.length - 1],
|
||||||
|
pages[pages.length],
|
||||||
|
)
|
||||||
|
}, [pages, middlePages])
|
||||||
|
|
||||||
|
const nextPages = React.useMemo(() => {
|
||||||
|
if (isReachedToLast)
|
||||||
|
return []
|
||||||
|
|
||||||
|
if (getAllNextPages.length < 1)
|
||||||
|
return []
|
||||||
|
|
||||||
|
return pages
|
||||||
|
.slice(pages.length - edgePageCount, pages.length)
|
||||||
|
.filter(p => !middlePages.includes(p))
|
||||||
|
}, [edgePageCount, getAllNextPages.length, isReachedToLast, middlePages, pages])
|
||||||
|
|
||||||
|
const isPreviousTruncable = React.useMemo(() => {
|
||||||
|
// Is truncable if first value of middlePage is larger than last value of previousPages
|
||||||
|
return middlePages[0] > previousPages[previousPages.length - 1] + 1
|
||||||
|
}, [previousPages, middlePages])
|
||||||
|
|
||||||
|
const isNextTruncable = React.useMemo(() => {
|
||||||
|
// Is truncable if last value of middlePage is larger than first value of previousPages
|
||||||
|
return middlePages[middlePages.length - 1] + 1 < nextPages[0]
|
||||||
|
}, [nextPages, middlePages])
|
||||||
|
|
||||||
|
return {
|
||||||
|
currentPage,
|
||||||
|
setCurrentPage,
|
||||||
|
truncableText,
|
||||||
|
truncableClassName,
|
||||||
|
pages,
|
||||||
|
hasPreviousPage,
|
||||||
|
hasNextPage,
|
||||||
|
previousPages,
|
||||||
|
isPreviousTruncable,
|
||||||
|
middlePages,
|
||||||
|
isNextTruncable,
|
||||||
|
nextPages,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default usePagination
|
||||||
@ -0,0 +1,189 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import clsx from 'clsx'
|
||||||
|
import usePagination from './hook'
|
||||||
|
import type {
|
||||||
|
ButtonProps,
|
||||||
|
IPagination,
|
||||||
|
IPaginationProps,
|
||||||
|
PageButtonProps,
|
||||||
|
} from './type'
|
||||||
|
|
||||||
|
const defaultState: IPagination = {
|
||||||
|
currentPage: 0,
|
||||||
|
setCurrentPage: () => {},
|
||||||
|
truncableText: '...',
|
||||||
|
truncableClassName: '',
|
||||||
|
pages: [],
|
||||||
|
hasPreviousPage: false,
|
||||||
|
hasNextPage: false,
|
||||||
|
previousPages: [],
|
||||||
|
isPreviousTruncable: false,
|
||||||
|
middlePages: [],
|
||||||
|
isNextTruncable: false,
|
||||||
|
nextPages: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
const PaginationContext: React.Context<IPagination> = React.createContext<IPagination>(defaultState)
|
||||||
|
|
||||||
|
export const PrevButton = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
dataTestId,
|
||||||
|
as = <button />,
|
||||||
|
...buttonProps
|
||||||
|
}: ButtonProps) => {
|
||||||
|
const pagination = React.useContext(PaginationContext)
|
||||||
|
const previous = () => {
|
||||||
|
if (pagination.currentPage + 1 > 1)
|
||||||
|
pagination.setCurrentPage(pagination.currentPage - 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const disabled = pagination.currentPage === 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<as.type
|
||||||
|
{...buttonProps}
|
||||||
|
{...as.props}
|
||||||
|
className={clsx(className, as.props.className)}
|
||||||
|
onClick={() => previous()}
|
||||||
|
tabIndex={disabled ? '-1' : 0}
|
||||||
|
disabled={disabled}
|
||||||
|
data-testid={dataTestId}
|
||||||
|
onKeyPress={(event: React.KeyboardEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
if (event.key === 'Enter' && !disabled)
|
||||||
|
previous()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{as.props.children ?? children}
|
||||||
|
</as.type>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const NextButton = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
dataTestId,
|
||||||
|
as = <button />,
|
||||||
|
...buttonProps
|
||||||
|
}: ButtonProps) => {
|
||||||
|
const pagination = React.useContext(PaginationContext)
|
||||||
|
const next = () => {
|
||||||
|
if (pagination.currentPage + 1 < pagination.pages.length)
|
||||||
|
pagination.setCurrentPage(pagination.currentPage + 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const disabled = pagination.currentPage === pagination.pages.length - 1
|
||||||
|
|
||||||
|
return (
|
||||||
|
<as.type
|
||||||
|
{...buttonProps}
|
||||||
|
{...as.props}
|
||||||
|
className={clsx(className, as.props.className)}
|
||||||
|
onClick={() => next()}
|
||||||
|
tabIndex={disabled ? '-1' : 0}
|
||||||
|
disabled={disabled}
|
||||||
|
data-testid={dataTestId}
|
||||||
|
onKeyPress={(event: React.KeyboardEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
if (event.key === 'Enter' && !disabled)
|
||||||
|
next()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{as.props.children ?? children}
|
||||||
|
</as.type>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
type ITruncableElementProps = {
|
||||||
|
prev?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const TruncableElement = ({ prev }: ITruncableElementProps) => {
|
||||||
|
const pagination: IPagination = React.useContext(PaginationContext)
|
||||||
|
|
||||||
|
const {
|
||||||
|
isPreviousTruncable,
|
||||||
|
isNextTruncable,
|
||||||
|
truncableText,
|
||||||
|
truncableClassName,
|
||||||
|
} = pagination
|
||||||
|
|
||||||
|
return ((isPreviousTruncable && prev === true) || (isNextTruncable && !prev))
|
||||||
|
? (
|
||||||
|
<li className={truncableClassName || undefined}>{truncableText}</li>
|
||||||
|
)
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PageButton = ({
|
||||||
|
as = <a />,
|
||||||
|
className,
|
||||||
|
dataTestIdActive,
|
||||||
|
dataTestIdInactive,
|
||||||
|
activeClassName,
|
||||||
|
inactiveClassName,
|
||||||
|
renderExtraProps,
|
||||||
|
}: PageButtonProps) => {
|
||||||
|
const pagination: IPagination = React.useContext(PaginationContext)
|
||||||
|
|
||||||
|
const renderPageButton = (page: number) => (
|
||||||
|
<li key={page}>
|
||||||
|
<as.type
|
||||||
|
data-testid={
|
||||||
|
clsx({
|
||||||
|
[`${dataTestIdActive}`]:
|
||||||
|
dataTestIdActive && pagination.currentPage + 1 === page,
|
||||||
|
[`${dataTestIdInactive}-${page}`]:
|
||||||
|
dataTestIdActive && pagination.currentPage + 1 !== page,
|
||||||
|
}) || undefined
|
||||||
|
}
|
||||||
|
tabIndex={0}
|
||||||
|
onKeyPress={(event: React.KeyboardEvent) => {
|
||||||
|
if (event.key === 'Enter')
|
||||||
|
pagination.setCurrentPage(page - 1)
|
||||||
|
}}
|
||||||
|
onClick={() => pagination.setCurrentPage(page - 1)}
|
||||||
|
className={clsx(
|
||||||
|
className,
|
||||||
|
pagination.currentPage + 1 === page
|
||||||
|
? activeClassName
|
||||||
|
: inactiveClassName,
|
||||||
|
)}
|
||||||
|
{...as.props}
|
||||||
|
{...(renderExtraProps ? renderExtraProps(page) : {})}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</as.type>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{pagination.previousPages.map(renderPageButton)}
|
||||||
|
<TruncableElement prev />
|
||||||
|
{pagination.middlePages.map(renderPageButton)}
|
||||||
|
<TruncableElement />
|
||||||
|
{pagination.nextPages.map(renderPageButton)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Pagination = ({
|
||||||
|
dataTestId,
|
||||||
|
...paginationProps
|
||||||
|
}: IPaginationProps & { dataTestId?: string }) => {
|
||||||
|
const pagination = usePagination(paginationProps)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PaginationContext.Provider value={pagination}>
|
||||||
|
<div className={paginationProps.className} data-testid={dataTestId}>
|
||||||
|
{paginationProps.children}
|
||||||
|
</div>
|
||||||
|
</PaginationContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Pagination.PrevButton = PrevButton
|
||||||
|
Pagination.NextButton = NextButton
|
||||||
|
Pagination.PageButton = PageButton
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.pagination li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
import type { ButtonHTMLAttributes } from 'react'
|
||||||
|
|
||||||
|
type IBasePaginationProps = {
|
||||||
|
currentPage: number
|
||||||
|
setCurrentPage: (page: number) => void
|
||||||
|
truncableText?: string
|
||||||
|
truncableClassName?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type IPaginationProps = IBasePaginationProps & {
|
||||||
|
totalPages: number
|
||||||
|
edgePageCount: number
|
||||||
|
middlePagesSiblingCount: number
|
||||||
|
className?: string
|
||||||
|
children?: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
type IUsePagination = IBasePaginationProps & {
|
||||||
|
pages: number[]
|
||||||
|
hasPreviousPage: boolean
|
||||||
|
hasNextPage: boolean
|
||||||
|
previousPages: number[]
|
||||||
|
isPreviousTruncable: boolean
|
||||||
|
middlePages: number[]
|
||||||
|
isNextTruncable: boolean
|
||||||
|
nextPages: number[]
|
||||||
|
}
|
||||||
|
|
||||||
|
type IPagination = IUsePagination & {
|
||||||
|
setCurrentPage: (page: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||||
|
as?: React.ReactElement
|
||||||
|
children?: string | React.ReactNode
|
||||||
|
className?: string
|
||||||
|
dataTestId?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type PageButtonProps = ButtonProps & {
|
||||||
|
/**
|
||||||
|
* Provide a custom ReactElement (e.g. Next/Link)
|
||||||
|
*/
|
||||||
|
as?: React.ReactElement
|
||||||
|
activeClassName?: string
|
||||||
|
inactiveClassName?: string
|
||||||
|
dataTestIdActive?: string
|
||||||
|
dataTestIdInactive?: string
|
||||||
|
renderExtraProps?: (pageNum: number) => {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export type {
|
||||||
|
IPaginationProps,
|
||||||
|
IUsePagination,
|
||||||
|
IPagination,
|
||||||
|
ButtonProps,
|
||||||
|
PageButtonProps,
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue