Feat: new pagination (#11170)
This commit is contained in:
KVOJJJin
95
web/app/components/base/pagination/hook.ts
Normal file
95
web/app/components/base/pagination/hook.ts
Normal file
@@ -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
|
||||
@@ -1,50 +1,165 @@
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { Pagination } from 'react-headless-pagination'
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import s from './style.module.css'
|
||||
import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
|
||||
import { useDebounceFn } from 'ahooks'
|
||||
import { Pagination } from './pagination'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
current: number
|
||||
onChange: (cur: number) => void
|
||||
total: number
|
||||
limit?: number
|
||||
onLimitChange?: (limit: number) => void
|
||||
}
|
||||
|
||||
const CustomizedPagination: FC<Props> = ({ current, onChange, total, limit = 10 }) => {
|
||||
const CustomizedPagination: FC<Props> = ({
|
||||
className,
|
||||
current,
|
||||
onChange,
|
||||
total,
|
||||
limit = 10,
|
||||
onLimitChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const totalPages = Math.ceil(total / limit)
|
||||
const inputRef = React.useRef<HTMLDivElement>(null)
|
||||
const [showInput, setShowInput] = React.useState(false)
|
||||
const [inputValue, setInputValue] = React.useState<string | number>(current + 1)
|
||||
const [showPerPageTip, setShowPerPageTip] = React.useState(false)
|
||||
|
||||
const { run: handlePaging } = useDebounceFn((value: string) => {
|
||||
if (parseInt(value) > totalPages) {
|
||||
setInputValue(totalPages)
|
||||
onChange(totalPages - 1)
|
||||
setShowInput(false)
|
||||
return
|
||||
}
|
||||
if (parseInt(value) < 1) {
|
||||
setInputValue(1)
|
||||
onChange(0)
|
||||
setShowInput(false)
|
||||
return
|
||||
}
|
||||
onChange(parseInt(value) - 1)
|
||||
setInputValue(parseInt(value))
|
||||
setShowInput(false)
|
||||
}, { wait: 500 })
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value
|
||||
if (!value)
|
||||
return setInputValue('')
|
||||
if (isNaN(parseInt(value)))
|
||||
return setInputValue('')
|
||||
setInputValue(parseInt(value))
|
||||
handlePaging(value)
|
||||
}
|
||||
|
||||
return (
|
||||
<Pagination
|
||||
className="flex items-center w-full h-10 text-sm select-none mt-8"
|
||||
className={cn('flex items-center w-full px-6 py-3 select-none', className)}
|
||||
currentPage={current}
|
||||
edgePageCount={2}
|
||||
middlePagesSiblingCount={1}
|
||||
setCurrentPage={onChange}
|
||||
totalPages={totalPages}
|
||||
truncatableClassName="w-8 px-0.5 text-center"
|
||||
truncatableText="..."
|
||||
truncableClassName='flex items-center justify-center w-8 px-1 py-2 system-sm-medium text-text-tertiary'
|
||||
truncableText='...'
|
||||
>
|
||||
<Pagination.PrevButton
|
||||
disabled={current === 0}
|
||||
className={`flex items-center mr-2 text-gray-500 focus:outline-none ${current === 0 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-gray-600'}`} >
|
||||
<ArrowLeftIcon className="mr-3 h-3 w-3" />
|
||||
{t('appLog.table.pagination.previous')}
|
||||
</Pagination.PrevButton>
|
||||
<div className={`flex items-center justify-center flex-grow ${s.pagination}`}>
|
||||
<div className='flex items-center gap-0.5 p-0.5 rounded-[10px] bg-background-section-burn'>
|
||||
<Pagination.PrevButton
|
||||
as={<div></div>}
|
||||
disabled={current === 0}
|
||||
>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='w-7 h-7 px-1.5'
|
||||
disabled={current === 0}
|
||||
>
|
||||
<RiArrowLeftLine className='h-4 w-4' />
|
||||
</Button>
|
||||
</Pagination.PrevButton>
|
||||
{!showInput && (
|
||||
<div
|
||||
ref={inputRef}
|
||||
className='flex items-center gap-0.5 px-2 py-1.5 rounded-lg hover:bg-state-base-hover-alt hover:cursor-text'
|
||||
onClick={() => setShowInput(true)}
|
||||
>
|
||||
<div className='system-xs-medium text-text-secondary'>{current + 1}</div>
|
||||
<div className='system-xs-medium text-text-quaternary'>/</div>
|
||||
<div className='system-xs-medium text-text-secondary'>{totalPages}</div>
|
||||
</div>
|
||||
)}
|
||||
{showInput && (
|
||||
<Input
|
||||
styleCss={{
|
||||
height: '28px',
|
||||
width: `${inputRef.current?.clientWidth}px`,
|
||||
}}
|
||||
placeholder=''
|
||||
autoFocus
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onBlur={() => setShowInput(false)}
|
||||
/>
|
||||
)}
|
||||
<Pagination.NextButton
|
||||
as={<div></div>}
|
||||
disabled={current === totalPages - 1}
|
||||
>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='w-7 h-7 px-1.5'
|
||||
disabled={current === totalPages - 1}
|
||||
>
|
||||
<RiArrowRightLine className='h-4 w-4' />
|
||||
</Button>
|
||||
</Pagination.NextButton>
|
||||
</div>
|
||||
<div className={cn('grow flex items-center justify-center gap-1 list-none')}>
|
||||
<Pagination.PageButton
|
||||
activeClassName="bg-primary-50 text-primary-600"
|
||||
className="flex items-center justify-center h-8 w-8 rounded-lg cursor-pointer"
|
||||
inactiveClassName="text-gray-500"
|
||||
className='flex items-center justify-center min-w-8 px-1 py-2 rounded-lg system-sm-medium cursor-pointer hover:bg-components-button-ghost-bg-hover'
|
||||
activeClassName='bg-components-button-tertiary-bg text-components-button-tertiary-text hover:bg-components-button-ghost-bg-hover'
|
||||
inactiveClassName='text-text-tertiary'
|
||||
/>
|
||||
</div>
|
||||
<Pagination.NextButton
|
||||
disabled={current === totalPages - 1}
|
||||
className={`flex items-center mr-2 text-gray-500 focus:outline-none ${current === totalPages - 1 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-gray-600'}`} >
|
||||
{t('appLog.table.pagination.next')}
|
||||
<ArrowRightIcon className="ml-3 h-3 w-3" />
|
||||
</Pagination.NextButton>
|
||||
{onLimitChange && (
|
||||
<div className='shrink-0 flex items-center gap-2'>
|
||||
<div className='shrink-0 w-[51px] text-end text-text-tertiary system-2xs-regular-uppercase'>{showPerPageTip ? t('common.pagination.perPage') : ''}</div>
|
||||
<div
|
||||
className='flex items-center gap-[1px] p-0.5 rounded-[10px] bg-components-segmented-control-bg-normal'
|
||||
onMouseEnter={() => setShowPerPageTip(true)}
|
||||
onMouseLeave={() => setShowPerPageTip(false)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'px-2.5 py-1.5 rounded-lg border-[0.5px] border-transparent system-sm-medium text-text-tertiary cursor-pointer hover:bg-state-base-hover hover:text-text-secondary',
|
||||
limit === 10 && 'shadow-xs border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary hover:bg-components-segmented-control-item-active-bg',
|
||||
)}
|
||||
onClick={() => onLimitChange?.(10)}
|
||||
>10</div>
|
||||
<div
|
||||
className={cn(
|
||||
'px-2.5 py-1.5 rounded-lg border-[0.5px] border-transparent system-sm-medium text-text-tertiary cursor-pointer hover:bg-state-base-hover hover:text-text-secondary',
|
||||
limit === 25 && 'shadow-xs border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary hover:bg-components-segmented-control-item-active-bg',
|
||||
)}
|
||||
onClick={() => onLimitChange?.(25)}
|
||||
>25</div>
|
||||
<div
|
||||
className={cn(
|
||||
'px-2.5 py-1.5 rounded-lg border-[0.5px] border-transparent system-sm-medium text-text-tertiary cursor-pointer hover:bg-state-base-hover hover:text-text-secondary',
|
||||
limit === 50 && 'shadow-xs border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary hover:bg-components-segmented-control-item-active-bg',
|
||||
)}
|
||||
onClick={() => onLimitChange?.(50)}
|
||||
>50</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Pagination>
|
||||
)
|
||||
}
|
||||
|
||||
189
web/app/components/base/pagination/pagination.tsx
Normal file
189
web/app/components/base/pagination/pagination.tsx
Normal file
@@ -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;
|
||||
}
|
||||
58
web/app/components/base/pagination/type.ts
Normal file
58
web/app/components/base/pagination/type.ts
Normal file
@@ -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,
|
||||
}
|
||||
Reference in New Issue
Block a user