Extend reactive store

src/components/Carousel/carousel2.js

@@ -41,10 +41,17 @@ export const carousel2 = (onChange) => {
       pagesCount: 1,
       pauseOnFocus: false,
       focused: false,
+      autoplay: false,
+      autoplayDirection: 'next',
+      disabled: false, // Disable page change while animation is in progress
+      duration: 1000,
+      _duration: 1000,
+      offset: 0,
+      particleWidth: 0,
     },
     {
       setCurrentPageIndex: (data) => {
-        const ind = getCurrentPageIndexByCurrentParticleIndex({
+        data.currentPageIndex = getCurrentPageIndexByCurrentParticleIndex({
           currentParticleIndex: data.currentParticleIndex,
           particlesCount: data.particlesCount,
           clonesCountHead: data.clonesCountHead,
@@ -52,8 +59,6 @@ export const carousel2 = (onChange) => {
           infinite: data.initialPageIndex,
           particlesToScroll: data.particlesToScroll,
         })
-        data.currentPageIndex = ind
-        console.log('===> data.currentPageIndex', ind)
       },
       setPartialPageSize: (data) => {
         data.partialPageSize = getPartialPageSize({
@@ -81,21 +86,23 @@ export const carousel2 = (onChange) => {
         })
       },
       setProgressManagerAutoplayDuration: (data) => {
-        // progressManager.setAutoplayDuration(data.autoplayDuration)
-        // progressManager.restart()
+        progressManager.setAutoplayDuration(data.autoplayDuration)
       },
-      toggleProgressManager: (data) => {
-        if (data.pauseOnFocus) {
-          if (data.focused) {
+      toggleProgressManager: ({ pauseOnFocus, focused }) => {
+        if (pauseOnFocus) {
+          if (focused) {
             progressManager.pause()
           } else {
             progressManager.resume()
           }
         }
       },
+      initDuration: (data) => {
+        data._duration = data.duration
+      },
     },
     {
-      prev: (data) => {
+      _prev: (data) => {
         const newCurrentParticleIndex = getParticleIndexByPageIndex({
           infinite: data.infinite,
           pageIndex: data.currentPageIndex - 1,
@@ -107,7 +114,7 @@ export const carousel2 = (onChange) => {
         })
         data.currentParticleIndex = newCurrentParticleIndex
       },
-      next: (data) => {
+      _next: (data) => {
         const newCurrentParticleIndex = getParticleIndexByPageIndex({
           infinite: data.infinite,
           pageIndex: data.currentPageIndex + 1,
@@ -119,7 +126,7 @@ export const carousel2 = (onChange) => {
         })
         data.currentParticleIndex = newCurrentParticleIndex
       },
-      moveToParticle: (data, particleIndex) => {
+      _moveToParticle: (data, _, particleIndex) => {
         const newCurrentParticleIndex = getValueInRange(
           0,
           particleIndex,
@@ -130,9 +137,116 @@ export const carousel2 = (onChange) => {
       toggleFocused: (data) => {
         data.focused = !data.focused
       },
+      applyAutoplayIfNeeded: async (
+        {
+          infinite,
+          autoplayDirection,
+          currentParticleIndex,
+          particlesCount,
+          autoplay,
+        },
+        { showNextPage, showPrevPage }
+      ) => {
+        // prevent progress change if not infinite for first and last page
+        if (
+          !infinite &&
+          ((autoplayDirection === NEXT &&
+            currentParticleIndex === particlesCount - 1) ||
+            (autoplayDirection === PREV && currentParticleIndex === 0))
+        ) {
+          progressManager.reset()
+          return
+        }
+
+        if (autoplay) {
+          const autoplayDirectionFnDescription = {
+            [NEXT]: async () => await progressManager.start(showNextPage),
+            [PREV]: async () => await progressManager.start(showPrevPage),
+          }
+
+          await autoplayDirectionFnDescription[autoplayDirection]()
+        }
+      },
+      // makes delayed jump to 1st or last element
+      _jumpIfNeeded: async (
+        {
+          infinite,
+          currentParticleIndex,
+          particlesCount,
+          clonesCountTotal,
+          clonesCountTail,
+          clonesCountHead,
+        },
+        { showParticle }
+      ) => {
+        let jumped = false
+        if (infinite) {
+          if (currentParticleIndex === 0) {
+            await showParticle(particlesCount - clonesCountTotal, {
+              animated: false,
+            })
+            jumped = true
+          } else if (
+            currentParticleIndex ===
+            particlesCount - clonesCountTail
+          ) {
+            await showParticle(clonesCountHead, {
+              animated: false,
+            })
+            jumped = true
+          }
+        }
+        return jumped
+      },
+
+      changePage: async (
+        data,
+        { offsetPage, applyAutoplayIfNeeded, _jumpIfNeeded },
+        updateStoreFn,
+        options
+      ) => {
+        progressManager.reset()
+        if (data.disabled) return
+        data.disabled = true
+
+        updateStoreFn()
+        await offsetPage({ animated: get(options, 'animated', true) })
+        data.disabled = false
+
+        const jumped = await _jumpIfNeeded()
+        !jumped && applyAutoplayIfNeeded() // no need to wait it finishes
+      },
+      showNextPage: async ({ disabled }, { changePage, _next }, options) => {
+        if (disabled) return
+        await changePage(_next, options)
+      },
+      showPrevPage: async ({ disabled }, { changePage, _prev }, options) => {
+        if (disabled) return
+        await changePage(_prev, options)
+      },
+      showParticle: async (
+        _,
+        { changePage, _moveToParticle },
+        particleIndex,
+        options
+      ) => {
+        await changePage(() => _moveToParticle(particleIndex), options)
+      },
+      offsetPage: (data, _, options) => {
+        const animated = get(options, 'animated', true)
+        return new Promise((resolve) => {
+          // _duration is an offset animation time
+          data._duration = animated ? data.duration : 0
+          data.offset = -data.currentParticleIndex * data.particleWidth
+          setTimeout(() => {
+            resolve()
+          }, data._duration)
+        })
+      },
     },
     onChange
   )
 
-  return [{ ...data, progressManager }, methods]
+  return [{ data, progressManager }, methods]
+  // return [{ ...data, progressManager }, methods]
 }