From eb41e9a8cc682151bac5651ba0cbfd98a8c680a9 Mon Sep 17 00:00:00 2001 From: Fedor Katurov <gotham48@gmail.com> Date: Wed, 17 Nov 2021 17:53:02 +0700 Subject: [PATCH] removed swiper from lab image --- src/components/lab/LabImage/index.tsx | 65 ++++---------------------- src/components/tags/TagInput/index.tsx | 2 +- 2 files changed, 10 insertions(+), 57 deletions(-) diff --git a/src/components/lab/LabImage/index.tsx b/src/components/lab/LabImage/index.tsx index 5ba6a85d..b8205e5e 100644 --- a/src/components/lab/LabImage/index.tsx +++ b/src/components/lab/LabImage/index.tsx @@ -1,7 +1,6 @@ -import React, { FC, useCallback, useEffect, useState } from 'react'; +import React, { FC } from 'react'; import { INodeComponentProps } from '~/redux/node/constants'; import SwiperCore, { A11y, Navigation, Pagination, SwiperOptions } from 'swiper'; -import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/swiper.scss'; import 'swiper/components/pagination/pagination.scss'; @@ -11,9 +10,6 @@ import 'swiper/components/navigation/navigation.scss'; import styles from './styles.module.scss'; import { useNodeImages } from '~/utils/hooks/node/useNodeImages'; -import { getURL } from '~/utils/dom'; -import { PRESETS } from '~/constants/urls'; -import SwiperClass from 'swiper/types/swiper-class'; import { useGotoNode } from '~/utils/hooks/node/useGotoNode'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { normalizeBrightColor } from '~/utils/color'; @@ -30,67 +26,24 @@ const breakpoints: SwiperOptions['breakpoints'] = { }; const LabImage: FC<IProps> = ({ node, isLoading }) => { - const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined); - const images = useNodeImages(node); - - const updateSwiper = useCallback(() => { - if (!controlledSwiper) return; - - controlledSwiper.updateSlides(); - controlledSwiper.updateSize(); - controlledSwiper.update(); - }, [controlledSwiper]); - - const resetSwiper = useCallback(() => { - if (!controlledSwiper) return; - controlledSwiper.slideTo(0, 0); - }, [controlledSwiper]); - - useEffect(() => { - updateSwiper(); - resetSwiper(); - }, [images, updateSwiper, resetSwiper]); - const onClick = useGotoNode(node.id); if (!images?.length && !isLoading) { return null; } + const file = images[0]; + return ( <Placeholder active={isLoading} width="100%" height={400}> <div className={styles.wrapper}> - <Swiper - initialSlide={0} - slidesPerView={images.length > 1 ? 1.1 : 1} - onSwiper={setControlledSwiper} - grabCursor - autoHeight - breakpoints={breakpoints} - observeSlideChildren - observeParents - resizeObserver - watchOverflow - updateOnImagesReady - onInit={resetSwiper} - keyboard={{ - enabled: true, - onlyInViewport: false, - }} - > - {images.map(file => ( - <SwiperSlide className={styles.slide} key={file.id}> - <ImagePreloader - file={file} - onLoad={updateSwiper} - onClick={onClick} - className={styles.image} - color={normalizeBrightColor(file?.metadata?.dominant_color)} - /> - </SwiperSlide> - ))} - </Swiper> + <ImagePreloader + file={file} + onClick={onClick} + className={styles.image} + color={normalizeBrightColor(file?.metadata?.dominant_color)} + /> </div> </Placeholder> ); diff --git a/src/components/tags/TagInput/index.tsx b/src/components/tags/TagInput/index.tsx index b3fb0eeb..5fc4e35f 100644 --- a/src/components/tags/TagInput/index.tsx +++ b/src/components/tags/TagInput/index.tsx @@ -130,7 +130,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => { /> </TagWrapper> - {onInput && focused && input?.length > 0 && ref.current && ( + {focused && input?.length > 0 && ref.current && ( <TagAutocomplete exclude={exclude} input={ref.current}