cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Update keen-slider (#592)

Browse Source 
Co-authored-by: Gonzalo Pozzo <gonzalo.pozzo4@gmail.com>
This commit is contained in:
Maaz 2021-12-15 22:54:06 +05:30 committed by GitHub
parent 9a4772cdb4
commit 2271864057
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/product/ProductSlider/ProductSlider.tsx
View File

@ -1,7 +1,6 @@
import { useKeenSlider } from 'keen-slider/react' import { useKeenSlider } from 'keen-slider/react'
import React, { import React, {
Children, Children,
FC,
isValidElement, isValidElement,
useState, useState,
useRef, useRef,
@ -28,16 +27,14 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
const [ref, slider] = useKeenSlider<HTMLDivElement>({ const [ref, slider] = useKeenSlider<HTMLDivElement>({
loop: true, loop: true,
slidesPerView: 1, slides: { perView: 1 },
mounted: () => setIsMounted(true), created: () => setIsMounted(true),
slideChanged(s) { slideChanged(s) {
const slideNumber = s.details().relativeSlide const slideNumber = s.track.details.rel
setCurrentSlide(slideNumber) setCurrentSlide(slideNumber)
if (thumbsContainerRef.current) { if (thumbsContainerRef.current) {
const $el = document.getElementById( const $el = document.getElementById(`thumb-${slideNumber}`)
`thumb-${s.details().relativeSlide}`
)
if (slideNumber >= 3) { if (slideNumber >= 3) {
thumbsContainerRef.current.scrollLeft = $el!.offsetLeft thumbsContainerRef.current.scrollLeft = $el!.offsetLeft
} else { } else {
@ -77,8 +74,8 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
} }
}, []) }, [])
const onPrev = React.useCallback(() => slider.prev(), [slider]) const onPrev = React.useCallback(() => slider.current?.prev(), [slider])
const onNext = React.useCallback(() => slider.next(), [slider]) const onNext = React.useCallback(() => slider.current?.next(), [slider])
return ( return (
<div className={cn(s.root, className)} ref={sliderContainerRef}> <div className={cn(s.root, className)} ref={sliderContainerRef}>
@ -117,7 +114,7 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
}), }),
id: `thumb-${idx}`, id: `thumb-${idx}`,
onClick: () => { onClick: () => {
slider.moveToSlideRelative(idx) slider.current?.moveToIdx(idx)
}, },
}, },
} }

2
package.json
View File

@ -31,7 +31,7 @@
"email-validator": "^2.0.4", "email-validator": "^2.0.4",
"immutability-helper": "^3.1.1", "immutability-helper": "^3.1.1",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"keen-slider": "^5.5.1", "keen-slider": "^6.3.2",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0", "lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1", "lodash.throttle": "^4.1.1",