🐛 bug: dot

:%s
This commit is contained in:
unknown
2021-08-25 18:46:37 +07:00
parent b824893540
commit beb9b2e47c
4 changed files with 110 additions and 28 deletions

View File

@@ -1,14 +1,16 @@
import { useKeenSlider } from 'keen-slider/react'
import React from 'react'
import React, { useEffect } from 'react'
import 'keen-slider/keen-slider.min.css'
import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
import s from './CaroucelCommon.module.scss'
import { TOptionsEvents } from 'keen-slider'
import classNames from 'classnames'
import CustomDot from './CustomDot/CustomDot'
export interface CarouselCommonProps<T> {
data: T[]
Component: React.ComponentType<T>
isArrow?: Boolean
isDot?: Boolean
itemKey: String
option: TOptionsEvents
keenClassname?: string
@@ -19,12 +21,18 @@ const CarouselCommon = <T,>({
data,
Component,
itemKey,
keenClassname,isPadding=false,
option: { slideChanged, ...sliderOption },
keenClassname,
isPadding = false,
isArrow = true,
isDot = false,
option: { slideChanged,slidesPerView, ...sliderOption },
}: CarouselCommonProps<T>) => {
const [currentSlide, setCurrentSlide] = React.useState(0)
const [dotActive, setDotActive] = React.useState<number>(0)
const [dotArr, setDotArr] = React.useState<number[]>([])
const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
...sliderOption,
slidesPerView,
slideChanged(s) {
setCurrentSlide(s.details().relativeSlide)
},
@@ -33,19 +41,37 @@ const CarouselCommon = <T,>({
slider.next()
}
useEffect(() => {
if(isDot && slider){
console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1)))
setDotArr([...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()])
}
}, [isDot,slider])
const handleLeftArrowClick = () => {
slider.prev()
}
const onDotClick = (index:number) => {
slider.moveToSlide(((Number(slider.details().slidesPerView)||1)*index))
setDotActive(index)
}
return (
<div className={s.navigationWrapper}>
<div ref={sliderRef} className={classNames('keen-slider', keenClassname,{[s.isPadding]:isPadding})}>
<div
ref={sliderRef}
className={classNames('keen-slider', keenClassname, {
[s.isPadding]: isPadding,
})}
>
{data?.map((props, index) => (
<div className="keen-slider__slide" key={`${itemKey}-${index}`}>
<Component {...props} />
</div>
))}
</div>
{slider && (
{slider && isArrow && (
<>
<CustomCarouselArrow
side="right"
@@ -59,6 +85,15 @@ const CarouselCommon = <T,>({
/>
</>
)}
{slider && isDot && (
<div className="dots">
{dotArr.map((index) => {
return (
<CustomDot key={`dot-${index}`} index={index} dotActive={dotActive} onClick={onDotClick}/>
)
})}
</div>
)}
</div>
)
}