muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed swiper callbacks

Browse source
This commit is contained in:
Fedor Katurov 2021-06-23 15:00:14 +07:00
parent 4853143d26
commit 337f8609c2
1 changed files with 13 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/components/node/NodeImageSwiperBlock/index.tsx
View file

@ -45,23 +45,12 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
controlledSwiper.updateProgress(); controlledSwiper.updateProgress();
}, [controlledSwiper]); }, [controlledSwiper]);
// const resetSwiper = useCallback(() => { const onOpenPhotoSwipe = useCallback(
// if (!controlledSwiper) return; (index: number) => {
// controlledSwiper.slideTo(0, 0); dispatch(modalShowPhotoswipe(images, index));
// setTimeout(() => controlledSwiper.slideTo(0, 0), 100); },
// setTimeout(() => controlledSwiper.slideTo(0, 0), 300); [dispatch, images, controlledSwiper]
// }, [controlledSwiper]); );
// useEffect(() => {
// updateSwiper();
// resetSwiper();
//
// return () => setControlledSwiper(undefined);
// }, [images, updateSwiper, resetSwiper, setControlledSwiper]);
const onOpenPhotoSwipe = useCallback(() => {
dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0));
}, [dispatch, images, controlledSwiper]);
if (!images?.length) { if (!images?.length) {
return null; return null;
@ -76,12 +65,11 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
breakpoints={breakpoints} breakpoints={breakpoints}
pagination={{ type: 'fraction' }} pagination={{ type: 'fraction' }}
centeredSlides centeredSlides
// observeSlideChildren observeSlideChildren
// observeParents observeParents
// resizeObserver resizeObserver
// watchOverflow watchOverflow
// updateOnImagesReady updateOnImagesReady
// onInit={resetSwiper}
keyboard={{ keyboard={{
enabled: true, enabled: true,
onlyInViewport: false, onlyInViewport: false,
@ -91,23 +79,14 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
zoom zoom
navigation navigation
> >
{images.map(file => ( {images.map((file, i) => (
<SwiperSlide className={styles.slide} key={file.id}> <SwiperSlide className={styles.slide} key={file.id}>
<ImagePreloader <ImagePreloader
file={file} file={file}
onLoad={updateSwiper} onLoad={updateSwiper}
onClick={onOpenPhotoSwipe} onClick={() => onOpenPhotoSwipe(i)}
className={styles.image} className={styles.image}
/> />
{/*
<img
className={classNames('swiper-lazy', styles.image)}
src={getURL(file, PRESETS['1600'])}
alt={node.title}
onLoad={updateSwiper}
onClick={onOpenPhotoSwipe}
/>
*/}
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>