diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx index c72b0e6d..2e097808 100644 --- a/src/components/node/NodeImageSwiperBlock/index.tsx +++ b/src/components/node/NodeImageSwiperBlock/index.tsx @@ -1,11 +1,13 @@ import React, { FC, useCallback, useEffect, useState } from 'react'; +import { observer } from 'mobx-react-lite'; import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperClass from 'swiper/types/swiper-class'; import { ImagePreloader } from '~/components/media/ImagePreloader'; import { INodeComponentProps } from '~/constants/node'; +import { useModal } from '~/hooks/modal/useModal'; import { useImageModal } from '~/hooks/navigation/useImageModal'; import { useNodeImages } from '~/hooks/node/useNodeImages'; import { normalizeBrightColor } from '~/utils/color'; @@ -22,9 +24,10 @@ const breakpoints: SwiperOptions['breakpoints'] = { }, }; -const NodeImageSwiperBlock: FC = ({ node }) => { +const NodeImageSwiperBlock: FC = observer(({ node }) => { const [controlledSwiper, setControlledSwiper] = useState(undefined); const showPhotoSwiper = useImageModal(); + const { isOpened: isModalActive } = useModal(); const images = useNodeImages(node); @@ -71,6 +74,14 @@ const NodeImageSwiperBlock: FC = ({ node }) => { ); } + useEffect(() => { + if (isModalActive) { + controlledSwiper?.keyboard.disable(); + } else { + controlledSwiper?.keyboard.enable(); + } + }, [isModalActive]); + return (
= ({ node }) => { watchOverflow updateOnImagesReady keyboard={{ - enabled: true, - onlyInViewport: false, + enabled: !isModalActive, + onlyInViewport: true, }} grabCursor autoHeight @@ -110,6 +121,6 @@ const NodeImageSwiperBlock: FC = ({ node }) => {
); -}; +}); export { NodeImageSwiperBlock }; diff --git a/src/hooks/modal/useModal.ts b/src/hooks/modal/useModal.ts index 2499bc3d..de5ce0d2 100644 --- a/src/hooks/modal/useModal.ts +++ b/src/hooks/modal/useModal.ts @@ -15,7 +15,7 @@ export type DialogContentProps = { }; export const useModal = () => { - const { setCurrent, hide } = useModalStore(); + const { setCurrent, hide, current } = useModalStore(); const showModal = useCallback( (dialog: T, props: DialogContentProps[T]) => { @@ -24,5 +24,5 @@ export const useModal = () => { [setCurrent] ); - return { showModal, hideModal: hide }; + return { showModal, hideModal: hide, current, isOpened: !!current }; };