All files / components/Carousel index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"use client"
/* eslint-disable max-lines-per-function, max-statements */
 
import React, { useEffect, useState } from "react"
import Carousel from "./Carousel"
import prepareComponent from "@bluframe/grapple/prepareComponent"
 
export interface Props {
  children: React.ReactNode
  className?: string
  slidesToShow?: number
  slidesToScroll?: number
}
 
export interface ComponentProps extends Omit<Props, "slidesToScroll"> {
  children: React.ReactNode[]
  onNext: () => void
  onPrev: () => void
  // eslint-disable-next-line no-unused-vars
  onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => void
  // eslint-disable-next-line no-unused-vars
  onTouchMove: (event: React.TouchEvent<HTMLDivElement>) => void
  onTouchEnd: () => void
  slidesToShow: number
  translateX: number
}
 
const DEFAULT_SLIDES_TO_SCROLL = 1
const DEFAULT_SLIDES_TO_SHOW = 1
 
const DEFAULT_ACTIVE_INDEX = 0
const DEFAULT_TRANSLATE_X = 0
 
const FIRST = 0
const TOTAL = 100
const HALF = 50
 
const usePrepareComponent = ({
  children,
  slidesToScroll = DEFAULT_SLIDES_TO_SCROLL,
  slidesToShow = DEFAULT_SLIDES_TO_SHOW,
  ...props
}: Props): ComponentProps => {
  // If children isn't an array throw error
  Iif (!Array.isArray(children)) {
    throw new Error("Children must be an array of React nodes")
  }
 
  const [activeIndex, setActiveIndex] = useState(DEFAULT_ACTIVE_INDEX)
  const [translateX, setTranslateX] = useState(DEFAULT_TRANSLATE_X)
  const [touchStart, setTouchStart] = useState<number | null>(null)
  const [touchMove, setTouchMove] = useState<number | null>(null)
 
  useEffect(() => {
    const onResize = () => {
      setTranslateX(-activeIndex * (TOTAL / slidesToShow))
    }
 
    window.addEventListener("resize", onResize)
 
    return () => window.removeEventListener("resize", onResize)
  }, [activeIndex, slidesToShow])
 
  useEffect(() => {
    setTranslateX(-activeIndex * (TOTAL / slidesToShow))
  }, [activeIndex, slidesToShow])
 
  const onNext = () => {
    setActiveIndex(
      (prevIndex) => (prevIndex + slidesToScroll) % children?.length
    )
  }
 
  const onPrev = () => {
    setActiveIndex(
      (prevIndex) =>
        (prevIndex - slidesToScroll + children?.length) % children?.length
    )
  }
 
  const onTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
    setTouchStart(event.touches[FIRST].clientX)
  }
 
  const onTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {
    setTouchMove(event.touches[FIRST].clientX)
  }
 
  const onTouchEnd = () => {
    Iif (touchStart && touchMove) {
      const swipeDistance = touchMove - touchStart
      if (swipeDistance > HALF) {
        onPrev()
      } else Iif (swipeDistance < -HALF) {
        onNext()
      }
    }
    setTouchStart(null)
    setTouchMove(null)
  }
 
  return {
    ...props,
    children,
    onNext,
    onPrev,
    onTouchEnd,
    onTouchMove,
    onTouchStart,
    slidesToShow,
    translateX
  }
}
 
export default prepareComponent<Props, ComponentProps>(usePrepareComponent)(
  Carousel
)