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

fix(ui): useGalleryNavigation callback typing issue

Browse Source
This commit is contained in:
psychedelicious 2024-05-31 20:45:10 +10:00
parent 0e5336d8fa
commit 76b1f241d7
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
View File

@ -14,7 +14,7 @@ const nextPrevButtonStyles: ChakraProps['sx'] = {
const NextPrevImageButtons = () => { const NextPrevImageButtons = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { handleLeftImage, handleRightImage, isOnFirstImage, isOnLastImage } = useGalleryNavigation(); const { prevImage, nextImage, isOnFirstImage, isOnLastImage } = useGalleryNavigation();
const { const {
areMoreImagesAvailable, areMoreImagesAvailable,
@ -30,7 +30,7 @@ const NextPrevImageButtons = () => {
aria-label={t('accessibility.previousImage')} aria-label={t('accessibility.previousImage')}
icon={<PiCaretLeftBold size={64} />} icon={<PiCaretLeftBold size={64} />}
variant="unstyled" variant="unstyled"
onClick={handleLeftImage} onClick={prevImage}
boxSize={16} boxSize={16}
sx={nextPrevButtonStyles} sx={nextPrevButtonStyles}
/> />
@ -42,7 +42,7 @@ const NextPrevImageButtons = () => {
aria-label={t('accessibility.nextImage')} aria-label={t('accessibility.nextImage')}
icon={<PiCaretRightBold size={64} />} icon={<PiCaretRightBold size={64} />}
variant="unstyled" variant="unstyled"
onClick={handleRightImage} onClick={nextImage}
boxSize={16} boxSize={16}
sx={nextPrevButtonStyles} sx={nextPrevButtonStyles}
/> />

12
invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
View File

@ -110,6 +110,8 @@ type UseGalleryNavigationReturn = {
handleRightImage: (alt?: boolean) => void; handleRightImage: (alt?: boolean) => void;
handleUpImage: (alt?: boolean) => void; handleUpImage: (alt?: boolean) => void;
handleDownImage: (alt?: boolean) => void; handleDownImage: (alt?: boolean) => void;
prevImage: () => void;
nextImage: () => void;
isOnFirstImage: boolean; isOnFirstImage: boolean;
isOnLastImage: boolean; isOnLastImage: boolean;
areImagesBelowCurrent: boolean; areImagesBelowCurrent: boolean;
@ -202,6 +204,14 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
[handleNavigation] [handleNavigation]
); );
const nextImage = useCallback(() => {
handleRightImage();
}, [handleRightImage]);
const prevImage = useCallback(() => {
handleLeftImage();
}, [handleLeftImage]);
return { return {
handleLeftImage, handleLeftImage,
handleRightImage, handleRightImage,
@ -210,5 +220,7 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
isOnFirstImage, isOnFirstImage,
isOnLastImage, isOnLastImage,
areImagesBelowCurrent, areImagesBelowCurrent,
nextImage,
prevImage,
}; };
}; };