feat: product caroucel

:%s
This commit is contained in:
unknown
2021-08-25 13:41:45 +07:00
20 changed files with 320 additions and 136 deletions

View File

@@ -1,21 +1,30 @@
import { useKeenSlider } from 'keen-slider/react'
import React from 'react'
import 'keen-slider/keen-slider.min.css'
import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow';
import s from "./CaroucelCommon.module.scss"
interface CarouselCommonProps {
children?: React.ReactNode
data?: any[]
Component: React.ComponentType<any>
isArrow?:Boolean
itemKey:String
import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
import s from './CaroucelCommon.module.scss'
import { TOptionsEvents } from 'keen-slider'
import classNames from 'classnames'
export interface CarouselCommonProps<T> {
data: T[]
Component: React.ComponentType<T>
isArrow?: Boolean
itemKey: String
option: TOptionsEvents
keenClassname?: string
isPadding?: boolean
}
const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => {
const CarouselCommon = <T,>({
data,
Component,
itemKey,
keenClassname,isPadding=false,
option: { slideChanged, ...sliderOption },
}: CarouselCommonProps<T>) => {
const [currentSlide, setCurrentSlide] = React.useState(0)
const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
slidesPerView: 1,
initial: 0,
...sliderOption,
slideChanged(s) {
setCurrentSlide(s.details().relativeSlide)
},
@@ -28,28 +37,28 @@ const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => {
slider.prev()
}
return (
<div className={s.navigation_wrapper}>
<div ref={sliderRef} className="keen-slider">
{data?.map((props,index) => (
<div className={s.navigationWrapper}>
<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 && (
<>
<CustomCarouselArrow
side="right"
onClick={handleRightArrowClick}
isDisabled={currentSlide === slider.details().size - 1}
/>
<CustomCarouselArrow
side="left"
onClick={handleLeftArrowClick}
isDisabled={currentSlide === 0}
/>
</>
)}
<>
<CustomCarouselArrow
side="right"
onClick={handleRightArrowClick}
// isDisabled={currentSlide === slider.details().size - 1}
/>
<CustomCarouselArrow
side="left"
onClick={handleLeftArrowClick}
// isDisabled={currentSlide === 0}
/>
</>
)}
</div>
)
}