Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add jump to option for gallery pagination

Browse Source
This commit is contained in:
Mary Hipp 2024-07-24 11:20:59 -04:00 committed by psychedelicious
parent 3657285b1b
commit 2a9fdc6314
1 changed files with 54 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx
View File

@ -1,7 +1,7 @@
import { Button, Flex, IconButton, Spacer } from '@invoke-ai/ui-library'; import { Button, CompositeNumberInput, Flex, Icon, IconButton, Spacer } from '@invoke-ai/ui-library';
import { ELLIPSIS, useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination'; import { ELLIPSIS, useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi'; import { PiCaretLeftBold, PiCaretRightBold, PiDotsThreeBold } from 'react-icons/pi';
export const GalleryPagination = () => { export const GalleryPagination = () => {
const { goPrev, goNext, isPrevEnabled, isNextEnabled, pageButtons, goToPage, currentPage, total } = const { goPrev, goNext, isPrevEnabled, isNextEnabled, pageButtons, goToPage, currentPage, total } =
@ -15,32 +15,37 @@ export const GalleryPagination = () => {
goNext(); goNext();
}, [goNext]); }, [goNext]);
const onChangeJumpTo = useCallback(
(v: number) => {
goToPage(v - 1);
},
[goToPage]
);
if (!total) { if (!total) {
return null; return null;
} }
return ( return (
<Flex gap={2} alignItems="center" w="full"> <Flex justifyContent="space-between" alignItems="center" w="full">
<Spacer w="auto" />
<Flex flexGrow="1" justifyContent="center">
<Flex gap={1} alignItems="center">
<IconButton <IconButton
size="sm" size="xs"
aria-label="prev" aria-label="prev"
icon={<PiCaretLeftBold />} icon={<PiCaretLeftBold />}
onClick={onClickPrev} onClick={onClickPrev}
isDisabled={!isPrevEnabled} isDisabled={!isPrevEnabled}
variant="ghost" variant="ghost"
/> />
<Spacer />
{pageButtons.map((page, i) => { {pageButtons.map((page, i) => {
if (page === ELLIPSIS) { if (page === ELLIPSIS) {
return ( return <Icon as={PiDotsThreeBold} boxSize="4" key={`ellipsis-${i}`} />;
<Button size="sm" key={`ellipsis_${i}`} variant="link" isDisabled>
...
</Button>
);
} }
return ( return (
<Button <Button
size="sm" size="xs"
key={page} key={page}
onClick={goToPage.bind(null, page - 1)} onClick={goToPage.bind(null, page - 1)}
variant={currentPage === page - 1 ? 'solid' : 'outline'} variant={currentPage === page - 1 ? 'solid' : 'outline'}
@ -49,9 +54,8 @@ export const GalleryPagination = () => {
</Button> </Button>
); );
})} })}
<Spacer />
<IconButton <IconButton
size="sm" size="xs"
aria-label="next" aria-label="next"
icon={<PiCaretRightBold />} icon={<PiCaretRightBold />}
onClick={onClickNext} onClick={onClickNext}
@ -59,5 +63,16 @@ export const GalleryPagination = () => {
variant="ghost" variant="ghost"
/> />
</Flex> </Flex>
</Flex>
<CompositeNumberInput
size="xs"
maxW="60px"
value={currentPage + 1}
min={1}
max={total}
step={1}
onChange={onChangeJumpTo}
/>
</Flex>
); );
}; };