crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-16 22:46:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update ProductSlider.tsx

Browse Source
This commit is contained in:
Catalin Pinte 2022-12-22 09:39:18 +02:00
parent 1330bc3162
commit a1025d507b
1 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
site/components/product/ProductSlider/ProductSlider.tsx
View File

@ -10,6 +10,8 @@ import cn from 'clsx'
import { a } from '@react-spring/web'
import s from './ProductSlider.module.css'
import ProductSliderControl from '../ProductSliderControl'
import { useProduct } from '../context'
import { Image as ProductImage } from '@commerce/types/common'
interface ProductSliderProps {
children?: React.ReactNode[]
@ -20,7 +22,9 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
children,
className = '',
}) => {
const { product, variant } = useProduct()
const [currentSlide, setCurrentSlide] = useState(0)
const sliderContainerRef = useRef<HTMLDivElement>(null)
const thumbsContainerRef = useRef<HTMLDivElement>(null)
@ -30,7 +34,6 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
slideChanged(s) {
const slideNumber = s.track.details.rel
setCurrentSlide(slideNumber)
if (thumbsContainerRef.current) {
const $el = document.getElementById(`thumb-${slideNumber}`)
if (slideNumber >= 3) {
@ -42,6 +45,18 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
},
})
useEffect(() => {
const index = product.images.findIndex((image: ProductImage) => {
return image.url === variant?.image?.url
})
if (index !== -1) {
slider.current?.moveToIdx(index, false, {
duration: 0,
})
}
}, [variant, product, slider])
// Stop the history navigation gesture on touch devices
useEffect(() => {
const preventNavigation = (event: TouchEvent) => {
@ -72,8 +87,13 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
}
}, [])
const onPrev = React.useCallback(() => slider.current?.prev(), [slider])
const onNext = React.useCallback(() => slider.current?.next(), [slider])
const onPrev = React.useCallback(() => {
slider.current?.prev()
}, [slider])
const onNext = React.useCallback(() => {
slider.current?.next()
}, [slider])
return (
<div className={cn(s.root, className)} ref={sliderContainerRef}>