From 337f8609c2c0c9ae01b33397857ff5a3e0836cf7 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 23 Jun 2021 15:00:14 +0700 Subject: [PATCH] fixed swiper callbacks --- .../node/NodeImageSwiperBlock/index.tsx | 47 +++++-------------- 1 file changed, 13 insertions(+), 34 deletions(-) diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx index fcd99bef..501eef34 100644 --- a/src/components/node/NodeImageSwiperBlock/index.tsx +++ b/src/components/node/NodeImageSwiperBlock/index.tsx @@ -45,23 +45,12 @@ const NodeImageSwiperBlock: FC = ({ node }) => { controlledSwiper.updateProgress(); }, [controlledSwiper]); - // const resetSwiper = useCallback(() => { - // if (!controlledSwiper) return; - // controlledSwiper.slideTo(0, 0); - // setTimeout(() => controlledSwiper.slideTo(0, 0), 100); - // setTimeout(() => controlledSwiper.slideTo(0, 0), 300); - // }, [controlledSwiper]); - - // useEffect(() => { - // updateSwiper(); - // resetSwiper(); - // - // return () => setControlledSwiper(undefined); - // }, [images, updateSwiper, resetSwiper, setControlledSwiper]); - - const onOpenPhotoSwipe = useCallback(() => { - dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0)); - }, [dispatch, images, controlledSwiper]); + const onOpenPhotoSwipe = useCallback( + (index: number) => { + dispatch(modalShowPhotoswipe(images, index)); + }, + [dispatch, images, controlledSwiper] + ); if (!images?.length) { return null; @@ -76,12 +65,11 @@ const NodeImageSwiperBlock: FC = ({ node }) => { breakpoints={breakpoints} pagination={{ type: 'fraction' }} centeredSlides - // observeSlideChildren - // observeParents - // resizeObserver - // watchOverflow - // updateOnImagesReady - // onInit={resetSwiper} + observeSlideChildren + observeParents + resizeObserver + watchOverflow + updateOnImagesReady keyboard={{ enabled: true, onlyInViewport: false, @@ -91,23 +79,14 @@ const NodeImageSwiperBlock: FC = ({ node }) => { zoom navigation > - {images.map(file => ( + {images.map((file, i) => ( onOpenPhotoSwipe(i)} className={styles.image} /> - {/* - {node.title} - */} ))}