feat(ui): z/esc first exit compare before closing viewer

This commit is contained in:
psychedelicious 2024-06-01 10:36:13 +10:00
parent ca728ca29f
commit 405fc46888
2 changed files with 14 additions and 6 deletions

View File

@ -1,22 +1,31 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice'; import { imageToCompareChanged, isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
import { useCallback } from 'react'; import { useCallback } from 'react';
export const useImageViewer = () => { export const useImageViewer = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const isComparing = useAppSelector((s) => s.gallery.imageToCompare !== null);
const isOpen = useAppSelector((s) => s.gallery.isImageViewerOpen); const isOpen = useAppSelector((s) => s.gallery.isImageViewerOpen);
const onClose = useCallback(() => { const onClose = useCallback(() => {
dispatch(isImageViewerOpenChanged(false)); if (isComparing && isOpen) {
}, [dispatch]); dispatch(imageToCompareChanged(null));
} else {
dispatch(isImageViewerOpenChanged(false));
}
}, [dispatch, isComparing, isOpen]);
const onOpen = useCallback(() => { const onOpen = useCallback(() => {
dispatch(isImageViewerOpenChanged(true)); dispatch(isImageViewerOpenChanged(true));
}, [dispatch]); }, [dispatch]);
const onToggle = useCallback(() => { const onToggle = useCallback(() => {
dispatch(isImageViewerOpenChanged(!isOpen)); if (isComparing && isOpen) {
}, [dispatch, isOpen]); dispatch(imageToCompareChanged(null));
} else {
dispatch(isImageViewerOpenChanged(!isOpen));
}
}, [dispatch, isComparing, isOpen]);
return { isOpen, onOpen, onClose, onToggle }; return { isOpen, onOpen, onClose, onToggle };
}; };

View File

@ -89,7 +89,6 @@ export const gallerySlice = createSlice({
state.alwaysShowImageSizeBadge = action.payload; state.alwaysShowImageSizeBadge = action.payload;
}, },
isImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => { isImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => {
state.imageToCompare = null;
state.isImageViewerOpen = action.payload; state.isImageViewerOpen = action.payload;
}, },
comparedImagesSwapped: (state) => { comparedImagesSwapped: (state) => {