#38 fixed navigation and keyboard

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -1,15 +1,14 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import { INodeComponentProps } from '~/redux/node/constants';
-import SwiperCore, { A11y, Pagination, Navigation, SwiperOptions, Keyboard } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/swiper.scss';
 import 'swiper/components/pagination/pagination.scss';
-import 'swiper/components/scrollbar/scrollbar.scss';
-import 'swiper/components/zoom/zoom.scss';
 import 'swiper/components/navigation/navigation.scss';
-
 import styles from './styles.module.scss';
+
+import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper';
+
 import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
@@ -17,14 +16,13 @@ import SwiperClass from 'swiper/types/swiper-class';
 import { modalShowPhotoswipe } from '~/redux/modal/actions';
 import { useDispatch } from 'react-redux';
 
-SwiperCore.use([Navigation, Pagination, A11y]);
+SwiperCore.use([Navigation, Pagination, Keyboard]);
 
 interface IProps extends INodeComponentProps {}
 
 const breakpoints: SwiperOptions['breakpoints'] = {
   599: {
     spaceBetween: 20,
-    navigation: true,
   },
 };
 
@@ -40,25 +38,26 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
     controlledSwiper.updateSlides();
     controlledSwiper.updateSize();
     controlledSwiper.update();
+    controlledSwiper.updateAutoHeight();
   }, [controlledSwiper]);
 
   const resetSwiper = useCallback(() => {
     if (!controlledSwiper) return;
     controlledSwiper.slideTo(0, 0);
-
-    // TODO: replace with working one
-    // setTimeout(() => controlledSwiper.slideTo(0, 0), 300);
+    setTimeout(() => controlledSwiper.slideTo(0, 0), 100);
+    setTimeout(() => controlledSwiper.slideTo(0, 0), 300);
   }, [controlledSwiper]);
 
   useEffect(() => {
     updateSwiper();
     resetSwiper();
-  }, [images, updateSwiper, resetSwiper]);
 
-  const onOpenPhotoSwipe = useCallback(
-    () => dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0)),
-    [dispatch, images, controlledSwiper]
-  );
+    return () => setControlledSwiper(undefined);
+  }, [images, updateSwiper, resetSwiper, setControlledSwiper]);
+
+  const onOpenPhotoSwipe = useCallback(() => {
+    dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0));
+  }, [dispatch, images, controlledSwiper]);
 
   if (!images?.length) {
     return null;
@@ -69,12 +68,10 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
       <Swiper
         initialSlide={0}
         slidesPerView="auto"
-        centeredSlides
         onSwiper={setControlledSwiper}
-        grabCursor
-        autoHeight
         breakpoints={breakpoints}
         pagination={{ type: 'fraction' }}
+        centeredSlides
         observeSlideChildren
         observeParents
         resizeObserver
@@ -85,7 +82,10 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
           enabled: true,
           onlyInViewport: false,
         }}
+        grabCursor
+        autoHeight
         zoom
+        navigation
       >
         {images.map(file => (
           <SwiperSlide className={styles.slide} key={file.id}>