vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-10 04:30:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

add go to page selector for list pagination

Browse Source
This commit is contained in:
jeffvli
2025-12-07 00:36:58 -08:00
parent 9385c25ea9
commit 1d6019c9d2
1 changed files with 71 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/pagination/pagination.tsx
+71 -21
View File
@@ -3,11 +3,15 @@ import {
PaginationProps as MantinePaginationProps, PaginationProps as MantinePaginationProps,
} from '@mantine/core'; } from '@mantine/core';
import clsx from 'clsx'; import clsx from 'clsx';
import { useRef } from 'react'; import { useRef, useState } from 'react';
import styles from './pagination.module.css'; import styles from './pagination.module.css';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon'; import { Icon } from '/@/shared/components/icon/icon';
import { NumberInput } from '/@/shared/components/number-input/number-input';
import { Popover } from '/@/shared/components/popover/popover';
import { Separator } from '/@/shared/components/separator/separator'; import { Separator } from '/@/shared/components/separator/separator';
import { Text } from '/@/shared/components/text/text'; import { Text } from '/@/shared/components/text/text';
import { useContainerQuery } from '/@/shared/hooks/use-container-query'; import { useContainerQuery } from '/@/shared/hooks/use-container-query';
@@ -41,28 +45,74 @@ export const Pagination = ({
const currentPageStartIndex = itemsPerPage * currentPageIndex + 1; const currentPageStartIndex = itemsPerPage * currentPageIndex + 1;
const currentPageEndIndex = Math.min(currentPageValue * itemsPerPage, totalItemCount); const currentPageEndIndex = Math.min(currentPageValue * itemsPerPage, totalItemCount);
const [goToPage, setGoToPage] = useState(currentPageValue);
const handleGoToPage = () => {
handleChange(Math.max(1, Math.min(goToPage, props.total)));
};
const handleGoToKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleGoToPage();
}
};
return ( return (
<div className={clsx(styles.container, containerClassName)} ref={containerRef}> <div className={clsx(styles.container, containerClassName)} ref={containerRef}>
<MantinePagination <Group gap="xs">
boundaries={1} <MantinePagination
classNames={{ boundaries={1}
control: styles.control, classNames={{
root: styles.root, control: styles.control,
...classNames, root: styles.root,
}} ...classNames,
nextIcon={() => <Icon icon="arrowRightS" />} }}
previousIcon={() => <Icon icon="arrowLeftS" />} nextIcon={() => <Icon icon="arrowRightS" />}
radius="md" previousIcon={() => <Icon icon="arrowLeftS" />}
ref={paginationRef} radius="md"
siblings={containerQuery.isXl ? 3 : containerQuery.isMd ? 2 : 1} ref={paginationRef}
size="md" siblings={containerQuery.isXl ? 3 : containerQuery.isMd ? 2 : 1}
style={{ size="md"
...style, style={{
}} ...style,
{...props} }}
onChange={handleChange} {...props}
value={currentPageValue} onChange={handleChange}
/> value={currentPageValue}
/>
<Popover position="top">
<Popover.Target>
<ActionIcon
className={styles.control}
icon="ellipsisHorizontal"
size="xs"
style={{
height: 'calc(2rem * 1)',
minWidth: 'calc(2rem * 1)',
}}
/>
</Popover.Target>
<Popover.Dropdown>
<Group gap={0}>
<NumberInput
autoFocus
hideControls={false}
max={props.total}
min={1}
onChange={(e) => setGoToPage(Number(e))}
onKeyDown={handleGoToKeyDown}
value={currentPageValue}
width={120}
/>
<ActionIcon
icon="arrowRight"
onClick={handleGoToPage}
variant="default"
/>
</Group>
</Popover.Dropdown>
</Popover>
</Group>
{containerQuery.isSm && totalItemCount && ( {containerQuery.isSm && totalItemCount && (
<Text isNoSelect weight={500}> <Text isNoSelect weight={500}>
{currentPageStartIndex} - {currentPageEndIndex} <Separator /> {totalItemCount} {currentPageStartIndex} - {currentPageEndIndex} <Separator /> {totalItemCount}