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 = ({ node, isLoading }) => { - const [controlledSwiper, setControlledSwiper] = useState(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 (
- 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 => ( - - - - ))} - +
); 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 = ({ exclude, onAppend, onClearTag, onSubmit }) => { /> - {onInput && focused && input?.length > 0 && ref.current && ( + {focused && input?.length > 0 && ref.current && (