Update example: #479.

davidjerleke · May 24, 2023 · 72f85d6 · 72f85d6
1 parent e8fe232
commit 72f85d6
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 40 deletions.
diff --git a/...ousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarousel.jsx b/...ousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarousel.jsx
@@ -28,20 +28,24 @@ const EmblaCarousel = (props) => {
     [emblaApi],
   )
 
-  const onSelect = useCallback(() => {
-    if (!emblaApi) return
+  const onSelect = useCallback((emblaApi) => {
     setSelectedIndex(emblaApi.selectedScrollSnap())
     setPrevBtnEnabled(emblaApi.canScrollPrev())
     setNextBtnEnabled(emblaApi.canScrollNext())
-  }, [emblaApi, setSelectedIndex])
+  }, [])
+
+  const onInit = useCallback((emblaApi) => {
+    setScrollSnaps(emblaApi.scrollSnapList())
+  }, [])
 
   useEffect(() => {
     if (!emblaApi) return
-    onSelect()
-    setScrollSnaps(emblaApi.scrollSnapList())
-    emblaApi.on('select', onSelect)
+    onInit(emblaApi)
+    onSelect(emblaApi)
+    emblaApi.on('reInit', onInit)
     emblaApi.on('reInit', onSelect)
-  }, [emblaApi, setScrollSnaps, onSelect])
+    emblaApi.on('select', onSelect)
+  }, [emblaApi, onSelect])
 
   return (
     <>

diff --git a/...ousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarousel.tsx b/...ousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarousel.tsx
@@ -1,5 +1,8 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
+import useEmblaCarousel, {
+  EmblaCarouselType,
+  EmblaOptionsType,
+} from 'embla-carousel-react'
 import {
   DotButton,
   PrevButton,
@@ -33,20 +36,24 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     [emblaApi],
   )
 
-  const onSelect = useCallback(() => {
-    if (!emblaApi) return
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
     setSelectedIndex(emblaApi.selectedScrollSnap())
     setPrevBtnEnabled(emblaApi.canScrollPrev())
     setNextBtnEnabled(emblaApi.canScrollNext())
-  }, [emblaApi, setSelectedIndex])
+  }, [])
+
+  const onInit = useCallback((emblaApi: EmblaCarouselType) => {
+    setScrollSnaps(emblaApi.scrollSnapList())
+  }, [])
 
   useEffect(() => {
     if (!emblaApi) return
-    onSelect()
-    setScrollSnaps(emblaApi.scrollSnapList())
-    emblaApi.on('select', onSelect)
+    onInit(emblaApi)
+    onSelect(emblaApi)
+    emblaApi.on('reInit', onInit)
     emblaApi.on('reInit', onSelect)
-  }, [emblaApi, setScrollSnaps, onSelect])
+    emblaApi.on('select', onSelect)
+  }, [emblaApi, onSelect])
 
   return (
     <>

diff --git a/...rousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/ArrowsDots/EmblaCarousel.tsx b/...rousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/ArrowsDots/EmblaCarousel.tsx
@@ -1,5 +1,8 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
+import useEmblaCarousel, {
+  EmblaCarouselType,
+  EmblaOptionsType,
+} from 'embla-carousel-react'
 import {
   DotButton,
   PrevButton,
@@ -33,20 +36,25 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     [emblaApi],
   )
 
-  const onSelect = useCallback(() => {
-    if (!emblaApi) return
+  const onInit = useCallback((emblaApi: EmblaCarouselType) => {
+    setScrollSnaps(emblaApi.scrollSnapList())
+  }, [])
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
     setSelectedIndex(emblaApi.selectedScrollSnap())
     setPrevBtnEnabled(emblaApi.canScrollPrev())
     setNextBtnEnabled(emblaApi.canScrollNext())
-  }, [emblaApi, setSelectedIndex])
+  }, [])
 
   useEffect(() => {
     if (!emblaApi) return
-    onSelect()
-    setScrollSnaps(emblaApi.scrollSnapList())
-    emblaApi.on('select', onSelect)
+
+    onInit(emblaApi)
+    onSelect(emblaApi)
+    emblaApi.on('reInit', onInit)
     emblaApi.on('reInit', onSelect)
-  }, [emblaApi, setScrollSnaps, onSelect])
+    emblaApi.on('select', onSelect)
+  }, [emblaApi, onInit, onSelect])
 
   return (
     <>

diff --git a/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/LazyLoad/EmblaCarousel.tsx b/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/LazyLoad/EmblaCarousel.tsx
@@ -1,5 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
+import useEmblaCarousel, {
+  EmblaCarouselType,
+  EmblaOptionsType,
+} from 'embla-carousel-react'
 import { LazyLoadImage } from './EmblaCarouselLazyLoadImage'
 import imageByIndex from '../imageByIndex'
 
@@ -13,26 +16,25 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
   const [emblaRed, emblaApi] = useEmblaCarousel(options)
   const [slidesInView, setSlidesInView] = useState<number[]>([])
 
-  const findSlidesInView = useCallback(() => {
-    if (!emblaApi) return
-
+  const updateSlidesInView = useCallback((emblaApi: EmblaCarouselType) => {
     setSlidesInView((slidesInView) => {
       if (slidesInView.length === emblaApi.slideNodes().length) {
-        emblaApi.off('select', findSlidesInView)
+        emblaApi.off('select', updateSlidesInView)
       }
       const inView = emblaApi
         .slidesInView(true)
-        .filter((index) => slidesInView.indexOf(index) === -1)
+        .filter((index) => !slidesInView.includes(index))
       return slidesInView.concat(inView)
     })
-  }, [emblaApi, setSlidesInView])
+  }, [])
 
   useEffect(() => {
     if (!emblaApi) return
-    findSlidesInView()
-    emblaApi.on('select', findSlidesInView)
-    emblaApi.on('reInit', findSlidesInView)
-  }, [emblaApi, findSlidesInView])
+
+    updateSlidesInView(emblaApi)
+    emblaApi.on('select', updateSlidesInView)
+    emblaApi.on('reInit', updateSlidesInView)
+  }, [emblaApi, updateSlidesInView])
 
   return (
     <div className="embla">

diff --git a/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/Progress/EmblaCarousel.tsx b/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/Progress/EmblaCarousel.tsx
@@ -1,5 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
+import useEmblaCarousel, {
+  EmblaCarouselType,
+  EmblaOptionsType,
+} from 'embla-carousel-react'
 import imageByIndex from '../imageByIndex'
 
 type PropType = {
@@ -12,17 +15,17 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
   const [emblaRef, emblaApi] = useEmblaCarousel(options)
   const [scrollProgress, setScrollProgress] = useState(0)
 
-  const onScroll = useCallback(() => {
-    if (!emblaApi) return
+  const onScroll = useCallback((emblaApi: EmblaCarouselType) => {
     const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()))
     setScrollProgress(progress * 100)
-  }, [emblaApi, setScrollProgress])
+  }, [])
 
   useEffect(() => {
     if (!emblaApi) return
-    onScroll()
-    emblaApi.on('scroll', onScroll)
+
+    onScroll(emblaApi)
     emblaApi.on('reInit', onScroll)
+    emblaApi.on('scroll', onScroll)
   }, [emblaApi, onScroll])
 
   return (