react-native-reanimated-carousel 4.0.0-alpha.1 → 4.0.0-alpha.11

package/lib/module/components/Carousel.js

@@ -2,6 +2,7 @@ import React from "react";
 import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { runOnJS, useDerivedValue } from "react-native-reanimated";
+import { ItemRenderer } from "./ItemRenderer";
 import { ScrollViewGesture } from "./ScrollViewGesture";
 import { useAutoPlay } from "../hooks/useAutoPlay";
 import { useCarouselController } from "../hooks/useCarouselController";
@@ -10,8 +11,6 @@ import { useInitProps } from "../hooks/useInitProps";
 import { useLayoutConfig } from "../hooks/useLayoutConfig";
 import { useOnProgressChange } from "../hooks/useOnProgressChange";
 import { usePropsErrorBoundary } from "../hooks/usePropsErrorBoundary";
-import { useVisibleRanges } from "../hooks/useVisibleRanges";
-import { BaseLayout } from "../layouts/BaseLayout";
 import { CTX } from "../store";
 import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
 const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
@@ -24,8 +23,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
     data,
     // Length of fill data
     dataLength,
-    // Raw data that has not been processed
-    rawData,
     // Length of raw data
     rawDataLength,
     mode,
@@ -39,10 +36,11 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
     autoPlayInterval,
     scrollAnimationDuration,
     withAnimation,
+    fixedDirection,
     renderItem,
     onScrollEnd,
     onSnapToItem,
-    onScrollBegin,
+    onScrollStart,
     onProgressChange,
     customAnimation,
     defaultIndex
@@ -61,7 +59,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
   usePropsErrorBoundary({ ...props,
     dataLength
   });
-  useOnProgressChange({
+  const progressValue = useOnProgressChange({
     autoFillData,
     loop,
     size,
@@ -77,9 +75,10 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
     handlerOffset,
     withAnimation,
     defaultIndex,
+    fixedDirection,
+    duration: scrollAnimationDuration,
     onScrollEnd: () => runOnJS(_onScrollEnd)(),
-    onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
-    duration: scrollAnimationDuration
+    onScrollStart: () => !!onScrollStart && runOnJS(onScrollStart)()
   });
   const {
     next,
@@ -111,10 +110,10 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
     if (onScrollEnd) onScrollEnd(realIndex);
   }, [loop, autoFillData, rawDataLength, getSharedIndex, onSnapToItem, onScrollEnd]);
 
-  const scrollViewGestureOnScrollBegin = React.useCallback(() => {
+  const scrollViewGestureOnScrollStart = React.useCallback(() => {
     pauseAutoPlay();
-    onScrollBegin === null || onScrollBegin === void 0 ? void 0 : onScrollBegin();
-  }, [onScrollBegin, pauseAutoPlay]);
+    onScrollStart === null || onScrollStart === void 0 ? void 0 : onScrollStart();
+  }, [onScrollStart, pauseAutoPlay]);
   const scrollViewGestureOnScrollEnd = React.useCallback(() => {
     startAutoPlay();
 
@@ -126,41 +125,12 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
     next,
     prev,
     getCurrentIndex,
-    scrollTo
+    scrollTo,
+    progressValue
   }), [getCurrentIndex, next, prev, scrollTo]);
-  const visibleRanges = useVisibleRanges({
-    total: dataLength,
-    viewSize: size,
-    translation: handlerOffset,
-    windowSize
-  });
   const layoutConfig = useLayoutConfig({ ...props,
     size
   });
-  const renderLayout = React.useCallback((item, i) => {
-    const realIndex = computedRealIndexWithAutoFillData({
-      index: i,
-      dataLength: rawDataLength,
-      loop,
-      autoFillData
-    });
-    return /*#__PURE__*/React.createElement(BaseLayout, {
-      key: i,
-      index: i,
-      handlerOffset: offsetX,
-      visibleRanges: visibleRanges,
-      animationStyle: customAnimation || layoutConfig
-    }, _ref => {
-      let {
-        animationValue
-      } = _ref;
-      return renderItem({
-        item,
-        index: realIndex,
-        animationValue
-      });
-    });
-  }, [loop, rawData, offsetX, visibleRanges, autoFillData, renderItem, layoutConfig, customAnimation]);
   return /*#__PURE__*/React.createElement(GestureHandlerRootView, null, /*#__PURE__*/React.createElement(CTX.Provider, {
     value: {
       props,
@@ -175,11 +145,24 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
       height: height || "100%"
     }, style, vertical ? styles.itemsVertical : styles.itemsHorizontal],
     testID: testID,
-    onScrollBegin: scrollViewGestureOnScrollBegin,
+    onScrollStart: scrollViewGestureOnScrollStart,
     onScrollEnd: scrollViewGestureOnScrollEnd,
     onTouchBegin: scrollViewGestureOnTouchBegin,
     onTouchEnd: scrollViewGestureOnTouchEnd
-  }, data.map(renderLayout))));
+  }, /*#__PURE__*/React.createElement(ItemRenderer, {
+    data: data,
+    dataLength: dataLength,
+    rawDataLength: rawDataLength,
+    loop: loop,
+    size: size,
+    windowSize: windowSize,
+    autoFillData: autoFillData,
+    offsetX: offsetX,
+    handlerOffset: handlerOffset,
+    layoutConfig: layoutConfig,
+    renderItem: renderItem,
+    customAnimation: customAnimation
+  }))));
 });
 export default Carousel;
 const styles = StyleSheet.create({

package/lib/module/components/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Carousel.tsx"],"names":["React","StyleSheet","GestureHandlerRootView","runOnJS","useDerivedValue","ScrollViewGesture","useAutoPlay","useCarouselController","useCommonVariables","useInitProps","useLayoutConfig","useOnProgressChange","usePropsErrorBoundary","useVisibleRanges","BaseLayout","CTX","computedRealIndexWithAutoFillData","Carousel","forwardRef","_props","ref","props","testID","loop","autoFillData","data","dataLength","rawData","rawDataLength","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","renderItem","onScrollEnd","onSnapToItem","onScrollBegin","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffset","offsetX","totalSize","x","value","isNaN","carouselController","_onScrollEnd","duration","next","prev","scrollTo","getSharedIndex","getCurrentIndex","start","startAutoPlay","pause","pauseAutoPlay","useCallback","_sharedIndex","Math","round","realIndex","index","scrollViewGestureOnScrollBegin","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","useImperativeHandle","visibleRanges","total","viewSize","translation","layoutConfig","renderLayout","item","i","animationValue","common","styles","container","itemsVertical","itemsHorizontal","map","create","overflow","flexDirection"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,sBAAT,QAAuC,8BAAvC;AACA,SAASC,OAAT,EAAkBC,eAAlB,QAAyC,yBAAzC;AAEA,SAASC,iBAAT,QAAkC,qBAAlC;AAEA,SAASC,WAAT,QAA4B,sBAA5B;AACA,SAASC,qBAAT,QAAsC,gCAAtC;AACA,SAASC,kBAAT,QAAmC,6BAAnC;AACA,SAASC,YAAT,QAA6B,uBAA7B;AACA,SAASC,eAAT,QAAgC,0BAAhC;AACA,SAASC,mBAAT,QAAoC,8BAApC;AACA,SAASC,qBAAT,QAAsC,gCAAtC;AACA,SAASC,gBAAT,QAAiC,2BAAjC;AACA,SAASC,UAAT,QAA2B,uBAA3B;AACA,SAASC,GAAT,QAAoB,UAApB;AAEA,SAASC,iCAAT,QAAkD,uCAAlD;AAEA,MAAMC,QAAQ,gBAAGjB,KAAK,CAACkB,UAAN,CACf,CAACC,MAAD,EAASC,GAAT,KAAiB;AACf,QAAMC,KAAK,GAAGZ,YAAY,CAACU,MAAD,CAA1B;AAEA,QAAM;AACJG,IAAAA,MADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,YAHI;AAIJ;AACAC,IAAAA,IALI;AAMJ;AACAC,IAAAA,UAPI;AAQJ;AACAC,IAAAA,OATI;AAUJ;AACAC,IAAAA,aAXI;AAYJC,IAAAA,IAZI;AAaJC,IAAAA,KAbI;AAcJC,IAAAA,KAdI;AAeJC,IAAAA,MAfI;AAgBJC,IAAAA,QAhBI;AAiBJC,IAAAA,QAjBI;AAkBJC,IAAAA,UAlBI;AAmBJC,IAAAA,eAnBI;AAoBJC,IAAAA,gBApBI;AAqBJC,IAAAA,uBArBI;AAsBJC,IAAAA,aAtBI;AAuBJC,IAAAA,UAvBI;AAwBJC,IAAAA,WAxBI;AAyBJC,IAAAA,YAzBI;AA0BJC,IAAAA,aA1BI;AA2BJC,IAAAA,gBA3BI;AA4BJC,IAAAA,eA5BI;AA6BJC,IAAAA;AA7BI,MA8BFzB,KA9BJ;AAgCA,QAAM0B,eAAe,GAAGvC,kBAAkB,CAACa,KAAD,CAA1C;AACA,QAAM;AAAE2B,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAA0BF,eAAhC;AAEA,QAAMG,OAAO,GAAG9C,eAAe,CAAC,MAAM;AACpC,UAAM+C,SAAS,GAAGH,IAAI,GAAGtB,UAAzB;AACA,UAAM0B,CAAC,GAAGH,aAAa,CAACI,KAAd,GAAsBF,SAAhC;AAEA,QAAI,CAAC5B,IAAL,EACE,OAAO0B,aAAa,CAACI,KAArB;AAEF,WAAOC,KAAK,CAACF,CAAD,CAAL,GAAW,CAAX,GAAeA,CAAtB;AACD,GAR8B,EAQ5B,CAAC7B,IAAD,EAAOyB,IAAP,EAAatB,UAAb,CAR4B,CAA/B;AAUAd,EAAAA,qBAAqB,CAAC,EAAE,GAAGS,KAAL;AAAYK,IAAAA;AAAZ,GAAD,CAArB;AACAf,EAAAA,mBAAmB,CAAC;AAClBa,IAAAA,YADkB;AAElBD,IAAAA,IAFkB;AAGlByB,IAAAA,IAHkB;AAIlBE,IAAAA,OAJkB;AAKlBtB,IAAAA,aALkB;AAMlBgB,IAAAA;AANkB,GAAD,CAAnB;AASA,QAAMW,kBAAkB,GAAGhD,qBAAqB,CAAC;AAC/CgB,IAAAA,IAD+C;AAE/CyB,IAAAA,IAF+C;AAG/CtB,IAAAA,UAH+C;AAI/CF,IAAAA,YAJ+C;AAK/CyB,IAAAA,aAL+C;AAM/CV,IAAAA,aAN+C;AAO/CO,IAAAA,YAP+C;AAQ/CL,IAAAA,WAAW,EAAE,MAAMtC,OAAO,CAACqD,YAAD,CAAP,EAR4B;AAS/Cb,IAAAA,aAAa,EAAE,MAAM,CAAC,CAACA,aAAF,IAAmBxC,OAAO,CAACwC,aAAD,CAAP,EATO;AAU/Cc,IAAAA,QAAQ,EAAEnB;AAVqC,GAAD,CAAhD;AAaA,QAAM;AAAEoB,IAAAA,IAAF;AAAQC,IAAAA,IAAR;AAAcC,IAAAA,QAAd;AAAwBC,IAAAA,cAAxB;AAAwCC,IAAAA;AAAxC,MACIP,kBADV;AAGA,QAAM;AAAEQ,IAAAA,KAAK,EAAEC,aAAT;AAAwBC,IAAAA,KAAK,EAAEC;AAA/B,MAAiD5D,WAAW,CAAC;AACjE4B,IAAAA,QADiE;AAEjEG,IAAAA,gBAFiE;AAGjED,IAAAA,eAHiE;AAIjEmB,IAAAA;AAJiE,GAAD,CAAlE;;AAOA,QAAMC,YAAY,GAAGxD,KAAK,CAACmE,WAAN,CAAkB,MAAM;AAC3C,UAAMC,YAAY,GAAGC,IAAI,CAACC,KAAL,CAAWT,cAAc,EAAzB,CAArB;;AAEA,UAAMU,SAAS,GAAGvD,iCAAiC,CAAC;AAClDwD,MAAAA,KAAK,EAAEJ,YAD2C;AAElD1C,MAAAA,UAAU,EAAEE,aAFsC;AAGlDL,MAAAA,IAHkD;AAIlDC,MAAAA;AAJkD,KAAD,CAAnD;AAOA,QAAIkB,YAAJ,EACEA,YAAY,CAAC6B,SAAD,CAAZ;AAEF,QAAI9B,WAAJ,EACEA,WAAW,CAAC8B,SAAD,CAAX;AACH,GAfoB,EAelB,CACDhD,IADC,EAEDC,YAFC,EAGDI,aAHC,EAIDiC,cAJC,EAKDnB,YALC,EAMDD,WANC,CAfkB,CAArB;;AAwBA,QAAMgC,8BAA8B,GAAGzE,KAAK,CAACmE,WAAN,CAAkB,MAAM;AAC7DD,IAAAA,aAAa;AACbvB,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;AACd,GAHsC,EAGpC,CAACA,aAAD,EAAgBuB,aAAhB,CAHoC,CAAvC;AAKA,QAAMQ,4BAA4B,GAAG1E,KAAK,CAACmE,WAAN,CAAkB,MAAM;AAC3DH,IAAAA,aAAa;;AACbR,IAAAA,YAAY;AACb,GAHoC,EAGlC,CAACA,YAAD,EAAeQ,aAAf,CAHkC,CAArC;AAKA,QAAMW,6BAA6B,GAAG3E,KAAK,CAACmE,WAAN,CAAkBD,aAAlB,EAAiC,CACrEA,aADqE,CAAjC,CAAtC;AAIA,QAAMU,2BAA2B,GAAG5E,KAAK,CAACmE,WAAN,CAAkBH,aAAlB,EAAiC,CACnEA,aADmE,CAAjC,CAApC;AAIAhE,EAAAA,KAAK,CAAC6E,mBAAN,CACEzD,GADF,EAEE,OAAO;AACLsC,IAAAA,IADK;AAELC,IAAAA,IAFK;AAGLG,IAAAA,eAHK;AAILF,IAAAA;AAJK,GAAP,CAFF,EAQE,CAACE,eAAD,EAAkBJ,IAAlB,EAAwBC,IAAxB,EAA8BC,QAA9B,CARF;AAWA,QAAMkB,aAAa,GAAGjE,gBAAgB,CAAC;AACrCkE,IAAAA,KAAK,EAAErD,UAD8B;AAErCsD,IAAAA,QAAQ,EAAEhC,IAF2B;AAGrCiC,IAAAA,WAAW,EAAEhC,aAHwB;AAIrCd,IAAAA;AAJqC,GAAD,CAAtC;AAOA,QAAM+C,YAAY,GAAGxE,eAAe,CAAC,EAAE,GAAGW,KAAL;AAAY2B,IAAAA;AAAZ,GAAD,CAApC;AAEA,QAAMmC,YAAY,GAAGnF,KAAK,CAACmE,WAAN,CACnB,CAACiB,IAAD,EAAYC,CAAZ,KAA0B;AACxB,UAAMd,SAAS,GAAGvD,iCAAiC,CAAC;AAClDwD,MAAAA,KAAK,EAAEa,CAD2C;AAElD3D,MAAAA,UAAU,EAAEE,aAFsC;AAGlDL,MAAAA,IAHkD;AAIlDC,MAAAA;AAJkD,KAAD,CAAnD;AAOA,wBACE,oBAAC,UAAD;AACE,MAAA,GAAG,EAAE6D,CADP;AAEE,MAAA,KAAK,EAAEA,CAFT;AAGE,MAAA,aAAa,EAAEnC,OAHjB;AAIE,MAAA,aAAa,EAAE4B,aAJjB;AAKE,MAAA,cAAc,EAAEjC,eAAe,IAAIqC;AALrC,OAOG;AAAA,UAAC;AAAEI,QAAAA;AAAF,OAAD;AAAA,aACC9C,UAAU,CAAC;AACT4C,QAAAA,IADS;AAETZ,QAAAA,KAAK,EAAED,SAFE;AAGTe,QAAAA;AAHS,OAAD,CADX;AAAA,KAPH,CADF;AAiBD,GA1BkB,EA2BnB,CACE/D,IADF,EAEEI,OAFF,EAGEuB,OAHF,EAIE4B,aAJF,EAKEtD,YALF,EAMEgB,UANF,EAOE0C,YAPF,EAQErC,eARF,CA3BmB,CAArB;AAuCA,sBACE,oBAAC,sBAAD,qBACE,oBAAC,GAAD,CAAK,QAAL;AAAc,IAAA,KAAK,EAAE;AAAExB,MAAAA,KAAF;AAASkE,MAAAA,MAAM,EAAExC;AAAjB;AAArB,kBACE,oBAAC,iBAAD;AACE,IAAA,GAAG,EAAElB,IADP;AAEE,IAAA,IAAI,EAAEmB,IAFR;AAGE,IAAA,WAAW,EAAEC,aAHf;AAIE,IAAA,KAAK,EAAE,CACLuC,MAAM,CAACC,SADF,EAEL;AACE1D,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADlB;AAEEC,MAAAA,MAAM,EAAEA,MAAM,IAAI;AAFpB,KAFK,EAMLF,KANK,EAOLG,QAAQ,GACJuD,MAAM,CAACE,aADH,GAEJF,MAAM,CAACG,eATN,CAJT;AAeE,IAAA,MAAM,EAAErE,MAfV;AAgBE,IAAA,aAAa,EAAEmD,8BAhBjB;AAiBE,IAAA,WAAW,EAAEC,4BAjBf;AAkBE,IAAA,YAAY,EAAEC,6BAlBhB;AAmBE,IAAA,UAAU,EAAEC;AAnBd,KAqBGnD,IAAI,CAACmE,GAAL,CAAST,YAAT,CArBH,CADF,CADF,CADF;AA6BD,CApNc,CAAjB;AAuNA,eAAelE,QAAf;AAIA,MAAMuE,MAAM,GAAGvF,UAAU,CAAC4F,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AACTK,IAAAA,QAAQ,EAAE;AADD,GADoB;AAI/BH,EAAAA,eAAe,EAAE;AACfI,IAAAA,aAAa,EAAE;AADA,GAJc;AAO/BL,EAAAA,aAAa,EAAE;AACbK,IAAAA,aAAa,EAAE;AADF;AAPgB,CAAlB,CAAf","sourcesContent":["import React from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport { GestureHandlerRootView } from \"react-native-gesture-handler\";\nimport { runOnJS, useDerivedValue } from \"react-native-reanimated\";\n\nimport { ScrollViewGesture } from \"./ScrollViewGesture\";\n\nimport { useAutoPlay } from \"../hooks/useAutoPlay\";\nimport { useCarouselController } from \"../hooks/useCarouselController\";\nimport { useCommonVariables } from \"../hooks/useCommonVariables\";\nimport { useInitProps } from \"../hooks/useInitProps\";\nimport { useLayoutConfig } from \"../hooks/useLayoutConfig\";\nimport { useOnProgressChange } from \"../hooks/useOnProgressChange\";\nimport { usePropsErrorBoundary } from \"../hooks/usePropsErrorBoundary\";\nimport { useVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { BaseLayout } from \"../layouts/BaseLayout\";\nimport { CTX } from \"../store\";\nimport type { ICarouselInstance, TCarouselProps } from \"../types\";\nimport { computedRealIndexWithAutoFillData } from \"../utils/computed-with-auto-fill-data\";\n\nconst Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(\n  (_props, ref) => {\n    const props = useInitProps(_props);\n\n    const {\n      testID,\n      loop,\n      autoFillData,\n      // Fill data with autoFillData\n      data,\n      // Length of fill data\n      dataLength,\n      // Raw data that has not been processed\n      rawData,\n      // Length of raw data\n      rawDataLength,\n      mode,\n      style,\n      width,\n      height,\n      vertical,\n      autoPlay,\n      windowSize,\n      autoPlayReverse,\n      autoPlayInterval,\n      scrollAnimationDuration,\n      withAnimation,\n      renderItem,\n      onScrollEnd,\n      onSnapToItem,\n      onScrollBegin,\n      onProgressChange,\n      customAnimation,\n      defaultIndex,\n    } = props;\n\n    const commonVariables = useCommonVariables(props);\n    const { size, handlerOffset } = commonVariables;\n\n    const offsetX = useDerivedValue(() => {\n      const totalSize = size * dataLength;\n      const x = handlerOffset.value % totalSize;\n\n      if (!loop)\n        return handlerOffset.value;\n\n      return isNaN(x) ? 0 : x;\n    }, [loop, size, dataLength]);\n\n    usePropsErrorBoundary({ ...props, dataLength });\n    useOnProgressChange({\n      autoFillData,\n      loop,\n      size,\n      offsetX,\n      rawDataLength,\n      onProgressChange,\n    });\n\n    const carouselController = useCarouselController({\n      loop,\n      size,\n      dataLength,\n      autoFillData,\n      handlerOffset,\n      withAnimation,\n      defaultIndex,\n      onScrollEnd: () => runOnJS(_onScrollEnd)(),\n      onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),\n      duration: scrollAnimationDuration,\n    });\n\n    const { next, prev, scrollTo, getSharedIndex, getCurrentIndex }\n            = carouselController;\n\n    const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({\n      autoPlay,\n      autoPlayInterval,\n      autoPlayReverse,\n      carouselController,\n    });\n\n    const _onScrollEnd = React.useCallback(() => {\n      const _sharedIndex = Math.round(getSharedIndex());\n\n      const realIndex = computedRealIndexWithAutoFillData({\n        index: _sharedIndex,\n        dataLength: rawDataLength,\n        loop,\n        autoFillData,\n      });\n\n      if (onSnapToItem)\n        onSnapToItem(realIndex);\n\n      if (onScrollEnd)\n        onScrollEnd(realIndex);\n    }, [\n      loop,\n      autoFillData,\n      rawDataLength,\n      getSharedIndex,\n      onSnapToItem,\n      onScrollEnd,\n    ]);\n\n    const scrollViewGestureOnScrollBegin = React.useCallback(() => {\n      pauseAutoPlay();\n      onScrollBegin?.();\n    }, [onScrollBegin, pauseAutoPlay]);\n\n    const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n      startAutoPlay();\n      _onScrollEnd();\n    }, [_onScrollEnd, startAutoPlay]);\n\n    const scrollViewGestureOnTouchBegin = React.useCallback(pauseAutoPlay, [\n      pauseAutoPlay,\n    ]);\n\n    const scrollViewGestureOnTouchEnd = React.useCallback(startAutoPlay, [\n      startAutoPlay,\n    ]);\n\n    React.useImperativeHandle(\n      ref,\n      () => ({\n        next,\n        prev,\n        getCurrentIndex,\n        scrollTo,\n      }),\n      [getCurrentIndex, next, prev, scrollTo],\n    );\n\n    const visibleRanges = useVisibleRanges({\n      total: dataLength,\n      viewSize: size,\n      translation: handlerOffset,\n      windowSize,\n    });\n\n    const layoutConfig = useLayoutConfig({ ...props, size });\n\n    const renderLayout = React.useCallback(\n      (item: any, i: number) => {\n        const realIndex = computedRealIndexWithAutoFillData({\n          index: i,\n          dataLength: rawDataLength,\n          loop,\n          autoFillData,\n        });\n\n        return (\n          <BaseLayout\n            key={i}\n            index={i}\n            handlerOffset={offsetX}\n            visibleRanges={visibleRanges}\n            animationStyle={customAnimation || layoutConfig}\n          >\n            {({ animationValue }) =>\n              renderItem({\n                item,\n                index: realIndex,\n                animationValue,\n              })\n            }\n          </BaseLayout>\n        );\n      },\n      [\n        loop,\n        rawData,\n        offsetX,\n        visibleRanges,\n        autoFillData,\n        renderItem,\n        layoutConfig,\n        customAnimation,\n      ],\n    );\n\n    return (\n      <GestureHandlerRootView>\n        <CTX.Provider value={{ props, common: commonVariables }}>\n          <ScrollViewGesture\n            key={mode}\n            size={size}\n            translation={handlerOffset}\n            style={[\n              styles.container,\n              {\n                width: width || \"100%\",\n                height: height || \"100%\",\n              },\n              style,\n              vertical\n                ? styles.itemsVertical\n                : styles.itemsHorizontal,\n            ]}\n            testID={testID}\n            onScrollBegin={scrollViewGestureOnScrollBegin}\n            onScrollEnd={scrollViewGestureOnScrollEnd}\n            onTouchBegin={scrollViewGestureOnTouchBegin}\n            onTouchEnd={scrollViewGestureOnTouchEnd}\n          >\n            {data.map(renderLayout)}\n          </ScrollViewGesture>\n        </CTX.Provider>\n      </GestureHandlerRootView>\n    );\n  },\n);\n\nexport default Carousel as <T extends any>(\n  props: React.PropsWithChildren<TCarouselProps<T>>\n) => React.ReactElement;\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: \"hidden\",\n  },\n  itemsHorizontal: {\n    flexDirection: \"row\",\n  },\n  itemsVertical: {\n    flexDirection: \"column\",\n  },\n});\n"]}
+{"version":3,"sources":["Carousel.tsx"],"names":["React","StyleSheet","GestureHandlerRootView","runOnJS","useDerivedValue","ItemRenderer","ScrollViewGesture","useAutoPlay","useCarouselController","useCommonVariables","useInitProps","useLayoutConfig","useOnProgressChange","usePropsErrorBoundary","CTX","computedRealIndexWithAutoFillData","Carousel","forwardRef","_props","ref","props","testID","loop","autoFillData","data","dataLength","rawDataLength","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","fixedDirection","renderItem","onScrollEnd","onSnapToItem","onScrollStart","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffset","offsetX","totalSize","x","value","isNaN","progressValue","carouselController","duration","_onScrollEnd","next","prev","scrollTo","getSharedIndex","getCurrentIndex","start","startAutoPlay","pause","pauseAutoPlay","useCallback","_sharedIndex","Math","round","realIndex","index","scrollViewGestureOnScrollStart","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","useImperativeHandle","layoutConfig","common","styles","container","itemsVertical","itemsHorizontal","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport { GestureHandlerRootView } from \"react-native-gesture-handler\";\nimport { runOnJS, useDerivedValue } from \"react-native-reanimated\";\n\nimport { ItemRenderer } from \"./ItemRenderer\";\nimport { ScrollViewGesture } from \"./ScrollViewGesture\";\n\nimport { useAutoPlay } from \"../hooks/useAutoPlay\";\nimport { useCarouselController } from \"../hooks/useCarouselController\";\nimport { useCommonVariables } from \"../hooks/useCommonVariables\";\nimport { useInitProps } from \"../hooks/useInitProps\";\nimport { useLayoutConfig } from \"../hooks/useLayoutConfig\";\nimport { useOnProgressChange } from \"../hooks/useOnProgressChange\";\nimport { usePropsErrorBoundary } from \"../hooks/usePropsErrorBoundary\";\nimport { CTX } from \"../store\";\nimport type { ICarouselInstance, TCarouselProps } from \"../types\";\nimport { computedRealIndexWithAutoFillData } from \"../utils/computed-with-auto-fill-data\";\n\nconst Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(\n  (_props, ref) => {\n    const props = useInitProps(_props);\n\n    const {\n      testID,\n      loop,\n      autoFillData,\n      // Fill data with autoFillData\n      data,\n      // Length of fill data\n      dataLength,\n      // Length of raw data\n      rawDataLength,\n      mode,\n      style,\n      width,\n      height,\n      vertical,\n      autoPlay,\n      windowSize,\n      autoPlayReverse,\n      autoPlayInterval,\n      scrollAnimationDuration,\n      withAnimation,\n      fixedDirection,\n      renderItem,\n      onScrollEnd,\n      onSnapToItem,\n      onScrollStart,\n      onProgressChange,\n      customAnimation,\n      defaultIndex,\n    } = props;\n\n    const commonVariables = useCommonVariables(props);\n    const { size, handlerOffset } = commonVariables;\n\n    const offsetX = useDerivedValue(() => {\n      const totalSize = size * dataLength;\n      const x = handlerOffset.value % totalSize;\n\n      if (!loop) return handlerOffset.value;\n\n      return isNaN(x) ? 0 : x;\n    }, [loop, size, dataLength]);\n\n    usePropsErrorBoundary({ ...props, dataLength });\n    const progressValue = useOnProgressChange({\n      autoFillData,\n      loop,\n      size,\n      offsetX,\n      rawDataLength,\n      onProgressChange,\n    });\n\n    const carouselController = useCarouselController({\n      loop,\n      size,\n      dataLength,\n      autoFillData,\n      handlerOffset,\n      withAnimation,\n      defaultIndex,\n      fixedDirection,\n      duration: scrollAnimationDuration,\n      onScrollEnd: () => runOnJS(_onScrollEnd)(),\n      onScrollStart: () => !!onScrollStart && runOnJS(onScrollStart)(),\n    });\n\n    const { next, prev, scrollTo, getSharedIndex, getCurrentIndex } =\n      carouselController;\n\n    const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({\n      autoPlay,\n      autoPlayInterval,\n      autoPlayReverse,\n      carouselController,\n    });\n\n    const _onScrollEnd = React.useCallback(() => {\n      const _sharedIndex = Math.round(getSharedIndex());\n\n      const realIndex = computedRealIndexWithAutoFillData({\n        index: _sharedIndex,\n        dataLength: rawDataLength,\n        loop,\n        autoFillData,\n      });\n\n      if (onSnapToItem) onSnapToItem(realIndex);\n\n      if (onScrollEnd) onScrollEnd(realIndex);\n    }, [\n      loop,\n      autoFillData,\n      rawDataLength,\n      getSharedIndex,\n      onSnapToItem,\n      onScrollEnd,\n    ]);\n\n    const scrollViewGestureOnScrollStart = React.useCallback(() => {\n      pauseAutoPlay();\n      onScrollStart?.();\n    }, [onScrollStart, pauseAutoPlay]);\n\n    const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n      startAutoPlay();\n      _onScrollEnd();\n    }, [_onScrollEnd, startAutoPlay]);\n\n    const scrollViewGestureOnTouchBegin = React.useCallback(pauseAutoPlay, [\n      pauseAutoPlay,\n    ]);\n\n    const scrollViewGestureOnTouchEnd = React.useCallback(startAutoPlay, [\n      startAutoPlay,\n    ]);\n\n    React.useImperativeHandle(\n      ref,\n      () => ({\n        next,\n        prev,\n        getCurrentIndex,\n        scrollTo,\n        progressValue,\n      }),\n      [getCurrentIndex, next, prev, scrollTo],\n    );\n\n    const layoutConfig = useLayoutConfig({ ...props, size });\n\n    return (\n      <GestureHandlerRootView>\n        <CTX.Provider value={{ props, common: commonVariables }}>\n          <ScrollViewGesture\n            key={mode}\n            size={size}\n            translation={handlerOffset}\n            style={[\n              styles.container,\n              {\n                width: width || \"100%\",\n                height: height || \"100%\",\n              },\n              style,\n              vertical ? styles.itemsVertical : styles.itemsHorizontal,\n            ]}\n            testID={testID}\n            onScrollStart={scrollViewGestureOnScrollStart}\n            onScrollEnd={scrollViewGestureOnScrollEnd}\n            onTouchBegin={scrollViewGestureOnTouchBegin}\n            onTouchEnd={scrollViewGestureOnTouchEnd}\n          >\n            <ItemRenderer\n              data={data}\n              dataLength={dataLength}\n              rawDataLength={rawDataLength}\n              loop={loop}\n              size={size}\n              windowSize={windowSize}\n              autoFillData={autoFillData}\n              offsetX={offsetX}\n              handlerOffset={handlerOffset}\n              layoutConfig={layoutConfig}\n              renderItem={renderItem}\n              customAnimation={customAnimation}\n            />\n          </ScrollViewGesture>\n        </CTX.Provider>\n      </GestureHandlerRootView>\n    );\n  },\n);\n\nexport default Carousel as <T extends any>(\n  props: React.PropsWithChildren<TCarouselProps<T>>,\n) => React.ReactElement;\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: \"hidden\",\n  },\n  itemsHorizontal: {\n    flexDirection: \"row\",\n  },\n  itemsVertical: {\n    flexDirection: \"column\",\n  },\n});\n"]}

package/lib/module/components/ItemRenderer.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { useAnimatedReaction, runOnJS } from "react-native-reanimated";
+import { BaseLayout } from "./BaseLayout";
+import { useVisibleRanges } from "../hooks/useVisibleRanges";
+import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
+export const ItemRenderer = props => {
+  const {
+    data,
+    size,
+    windowSize,
+    handlerOffset,
+    offsetX,
+    dataLength,
+    rawDataLength,
+    loop,
+    autoFillData,
+    layoutConfig,
+    renderItem,
+    customAnimation
+  } = props;
+  const visibleRanges = useVisibleRanges({
+    total: dataLength,
+    viewSize: size,
+    translation: handlerOffset,
+    windowSize,
+    loop
+  });
+  const [displayedItems, setDisplayedItems] = React.useState(null);
+  useAnimatedReaction(() => visibleRanges.value, ranges => runOnJS(setDisplayedItems)(ranges), [visibleRanges]);
+  if (!displayedItems) return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, data.map((item, index) => {
+    const realIndex = computedRealIndexWithAutoFillData({
+      index,
+      dataLength: rawDataLength,
+      loop,
+      autoFillData
+    });
+    const {
+      negativeRange,
+      positiveRange
+    } = displayedItems;
+    const shouldRender = index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1];
+    if (!shouldRender) return null;
+    return /*#__PURE__*/React.createElement(BaseLayout, {
+      key: index,
+      index: index,
+      handlerOffset: offsetX,
+      visibleRanges: visibleRanges,
+      animationStyle: customAnimation || layoutConfig
+    }, _ref => {
+      let {
+        animationValue
+      } = _ref;
+      return renderItem({
+        item,
+        index: realIndex,
+        animationValue
+      });
+    });
+  }));
+};
+//# sourceMappingURL=ItemRenderer.js.map

package/lib/module/components/ItemRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ItemRenderer.tsx"],"names":["React","useAnimatedReaction","runOnJS","BaseLayout","useVisibleRanges","computedRealIndexWithAutoFillData","ItemRenderer","props","data","size","windowSize","handlerOffset","offsetX","dataLength","rawDataLength","loop","autoFillData","layoutConfig","renderItem","customAnimation","visibleRanges","total","viewSize","translation","displayedItems","setDisplayedItems","useState","value","ranges","map","item","index","realIndex","negativeRange","positiveRange","shouldRender","animationValue"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,SAASC,mBAAT,EAAsDC,OAAtD,QAAqE,yBAArE;AAGA,SAASC,UAAT,QAA2B,cAA3B;AAGA,SAASC,gBAAT,QAAiC,2BAAjC;AAEA,SAASC,iCAAT,QAAkD,uCAAlD;AAiBA,OAAO,MAAMC,YAAuB,GAAIC,KAAD,IAAW;AAChD,QAAM;AACJC,IAAAA,IADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,UAHI;AAIJC,IAAAA,aAJI;AAKJC,IAAAA,OALI;AAMJC,IAAAA,UANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA,IARI;AASJC,IAAAA,YATI;AAUJC,IAAAA,YAVI;AAWJC,IAAAA,UAXI;AAYJC,IAAAA;AAZI,MAaFZ,KAbJ;AAeA,QAAMa,aAAa,GAAGhB,gBAAgB,CAAC;AACrCiB,IAAAA,KAAK,EAAER,UAD8B;AAErCS,IAAAA,QAAQ,EAAEb,IAF2B;AAGrCc,IAAAA,WAAW,EAAEZ,aAHwB;AAIrCD,IAAAA,UAJqC;AAKrCK,IAAAA;AALqC,GAAD,CAAtC;AAQA,QAAM,CAACS,cAAD,EAAiBC,iBAAjB,IAAsCzB,KAAK,CAAC0B,QAAN,CAA8B,IAA9B,CAA5C;AAEAzB,EAAAA,mBAAmB,CACjB,MAAMmB,aAAa,CAACO,KADH,EAEjBC,MAAM,IAAI1B,OAAO,CAACuB,iBAAD,CAAP,CAA2BG,MAA3B,CAFO,EAGjB,CAACR,aAAD,CAHiB,CAAnB;AAMA,MAAI,CAACI,cAAL,EACE,OAAO,IAAP;AAEF,sBACE,0CAEIhB,IAAI,CAACqB,GAAL,CAAS,CAACC,IAAD,EAAOC,KAAP,KAAiB;AACxB,UAAMC,SAAS,GAAG3B,iCAAiC,CAAC;AAClD0B,MAAAA,KADkD;AAElDlB,MAAAA,UAAU,EAAEC,aAFsC;AAGlDC,MAAAA,IAHkD;AAIlDC,MAAAA;AAJkD,KAAD,CAAnD;AAOA,UAAM;AAAEiB,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAmCV,cAAzC;AAEA,UAAMW,YAAY,GAAIJ,KAAK,IAAIE,aAAa,CAAC,CAAD,CAAtB,IAA6BF,KAAK,IAAIE,aAAa,CAAC,CAAD,CAApD,IACjBF,KAAK,IAAIG,aAAa,CAAC,CAAD,CAAtB,IAA6BH,KAAK,IAAIG,aAAa,CAAC,CAAD,CADvD;AAGA,QAAI,CAACC,YAAL,EACE,OAAO,IAAP;AAEF,wBACE,oBAAC,UAAD;AACE,MAAA,GAAG,EAAEJ,KADP;AAEE,MAAA,KAAK,EAAEA,KAFT;AAGE,MAAA,aAAa,EAAEnB,OAHjB;AAIE,MAAA,aAAa,EAAEQ,aAJjB;AAKE,MAAA,cAAc,EAAED,eAAe,IAAIF;AALrC,OAOG;AAAA,UAAC;AAAEmB,QAAAA;AAAF,OAAD;AAAA,aACClB,UAAU,CAAC;AACTY,QAAAA,IADS;AAETC,QAAAA,KAAK,EAAEC,SAFE;AAGTI,QAAAA;AAHS,OAAD,CADX;AAAA,KAPH,CADF;AAiBD,GAjCD,CAFJ,CADF;AAwCD,CA3EM","sourcesContent":["import React from \"react\";\nimport type { FC } from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type Animated from \"react-native-reanimated\";\nimport { useAnimatedReaction, type AnimatedStyleProp, runOnJS } from \"react-native-reanimated\";\n\nimport type { TAnimationStyle } from \"./BaseLayout\";\nimport { BaseLayout } from \"./BaseLayout\";\n\nimport type { VisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { useVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport type { CarouselRenderItem } from \"../types\";\nimport { computedRealIndexWithAutoFillData } from \"../utils/computed-with-auto-fill-data\";\n\ninterface Props {\n  data: any[]\n  dataLength: number\n  rawDataLength: number\n  loop: boolean\n  size: number\n  windowSize?: number\n  autoFillData: boolean\n  offsetX: Animated.SharedValue<number>\n  handlerOffset: Animated.SharedValue<number>\n  layoutConfig: TAnimationStyle\n  renderItem: CarouselRenderItem<any>\n  customAnimation?: ((value: number) => AnimatedStyleProp<ViewStyle>)\n}\n\nexport const ItemRenderer: FC<Props> = (props) => {\n  const {\n    data,\n    size,\n    windowSize,\n    handlerOffset,\n    offsetX,\n    dataLength,\n    rawDataLength,\n    loop,\n    autoFillData,\n    layoutConfig,\n    renderItem,\n    customAnimation,\n  } = props;\n\n  const visibleRanges = useVisibleRanges({\n    total: dataLength,\n    viewSize: size,\n    translation: handlerOffset,\n    windowSize,\n    loop,\n  });\n\n  const [displayedItems, setDisplayedItems] = React.useState<VisibleRanges>(null!);\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    ranges => runOnJS(setDisplayedItems)(ranges),\n    [visibleRanges],\n  );\n\n  if (!displayedItems)\n    return null;\n\n  return (\n    <>\n      {\n        data.map((item, index) => {\n          const realIndex = computedRealIndexWithAutoFillData({\n            index,\n            dataLength: rawDataLength,\n            loop,\n            autoFillData,\n          });\n\n          const { negativeRange, positiveRange } = displayedItems;\n\n          const shouldRender = (index >= negativeRange[0] && index <= negativeRange[1])\n          || (index >= positiveRange[0] && index <= positiveRange[1]);\n\n          if (!shouldRender)\n            return null;\n\n          return (\n            <BaseLayout\n              key={index}\n              index={index}\n              handlerOffset={offsetX}\n              visibleRanges={visibleRanges}\n              animationStyle={customAnimation || layoutConfig}\n            >\n              {({ animationValue }) =>\n                renderItem({\n                  item,\n                  index: realIndex,\n                  animationValue,\n                })\n              }\n            </BaseLayout>\n          );\n        })\n      }\n    </>\n  );\n};\n"]}

package/lib/module/components/Pagination/Basic/PaginationItem.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { View } from "react-native";
+import Animated, { Extrapolate, interpolate, useAnimatedStyle } from "react-native-reanimated";
+export const PaginationItem = props => {
+  const {
+    animValue,
+    dotStyle,
+    activeDotStyle,
+    index,
+    count,
+    size,
+    horizontal,
+    children
+  } = props;
+  const defaultDotSize = 10;
+  const sizes = {
+    width: size || (dotStyle === null || dotStyle === void 0 ? void 0 : dotStyle.width) || defaultDotSize,
+    height: size || (dotStyle === null || dotStyle === void 0 ? void 0 : dotStyle.height) || defaultDotSize
+  };
+  /**
+   * TODO: Keep this for future implementation
+   * Used to change the size of the active dot with animation
+   */
+  // const animatedSize = {
+  //   width: activeDotStyle?.width,
+  //   height: activeDotStyle?.height,
+  // };
+
+  const width = sizes.width;
+  const height = sizes.height;
+  const animStyle = useAnimatedStyle(() => {
+    const size = horizontal ? height : width;
+    let inputRange = [index - 1, index, index + 1];
+    let outputRange = [-size, 0, size];
+
+    if (index === 0 && (animValue === null || animValue === void 0 ? void 0 : animValue.value) > count - 1) {
+      inputRange = [count - 1, count, count + 1];
+      outputRange = [-size, 0, size];
+    }
+
+    return {
+      transform: [{
+        translateX: interpolate(animValue === null || animValue === void 0 ? void 0 : animValue.value, inputRange, outputRange, Extrapolate.CLAMP)
+      }]
+    };
+  }, [animValue, index, count, horizontal]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      width,
+      height,
+      overflow: "hidden",
+      transform: [{
+        rotateZ: horizontal ? "90deg" : "0deg"
+      }]
+    }, dotStyle]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [{
+      backgroundColor: "black",
+      flex: 1
+    }, animStyle, activeDotStyle]
+  }, children));
+};
+//# sourceMappingURL=PaginationItem.js.map

package/lib/module/components/Pagination/Basic/PaginationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PaginationItem.tsx"],"names":["React","View","Animated","Extrapolate","interpolate","useAnimatedStyle","PaginationItem","props","animValue","dotStyle","activeDotStyle","index","count","size","horizontal","children","defaultDotSize","sizes","width","height","animStyle","inputRange","outputRange","value","transform","translateX","CLAMP","overflow","rotateZ","backgroundColor","flex"],"mappings":"AACA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,QAAP,IACEC,WADF,EAEEC,WAFF,EAGEC,gBAHF,QAIO,yBAJP;AAWA,OAAO,MAAMC,cAUZ,GAAIC,KAAD,IAAW;AACb,QAAM;AACJC,IAAAA,SADI;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,cAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA,KALI;AAMJC,IAAAA,IANI;AAOJC,IAAAA,UAPI;AAQJC,IAAAA;AARI,MASFR,KATJ;AAWA,QAAMS,cAAc,GAAG,EAAvB;AAEA,QAAMC,KAAK,GAAG;AACZC,IAAAA,KAAK,EAAEL,IAAI,KAAIJ,QAAJ,aAAIA,QAAJ,uBAAIA,QAAQ,CAAES,KAAd,CAAJ,IAA2BF,cADtB;AAEZG,IAAAA,MAAM,EAAEN,IAAI,KAAIJ,QAAJ,aAAIA,QAAJ,uBAAIA,QAAQ,CAAEU,MAAd,CAAJ,IAA4BH;AAFxB,GAAd;AAKA;AACF;AACA;AACA;AACE;AACA;AACA;AACA;;AAEA,QAAME,KAAK,GAAGD,KAAK,CAACC,KAApB;AACA,QAAMC,MAAM,GAAGF,KAAK,CAACE,MAArB;AAEA,QAAMC,SAAS,GAAGf,gBAAgB,CAAC,MAAM;AACvC,UAAMQ,IAAI,GAAGC,UAAU,GAAGK,MAAH,GAAYD,KAAnC;AACA,QAAIG,UAAU,GAAG,CAACV,KAAK,GAAG,CAAT,EAAYA,KAAZ,EAAmBA,KAAK,GAAG,CAA3B,CAAjB;AACA,QAAIW,WAAW,GAAG,CAAC,CAACT,IAAF,EAAQ,CAAR,EAAWA,IAAX,CAAlB;;AAEA,QAAIF,KAAK,KAAK,CAAV,IAAe,CAAAH,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEe,KAAX,IAAmBX,KAAK,GAAG,CAA9C,EAAiD;AAC/CS,MAAAA,UAAU,GAAG,CAACT,KAAK,GAAG,CAAT,EAAYA,KAAZ,EAAmBA,KAAK,GAAG,CAA3B,CAAb;AACAU,MAAAA,WAAW,GAAG,CAAC,CAACT,IAAF,EAAQ,CAAR,EAAWA,IAAX,CAAd;AACD;;AAED,WAAO;AACLW,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,UAAU,EAAErB,WAAW,CACrBI,SADqB,aACrBA,SADqB,uBACrBA,SAAS,CAAEe,KADU,EAErBF,UAFqB,EAGrBC,WAHqB,EAIrBnB,WAAW,CAACuB,KAJS;AADzB,OADS;AADN,KAAP;AAYD,GAtBiC,EAsB/B,CAAClB,SAAD,EAAYG,KAAZ,EAAmBC,KAAnB,EAA0BE,UAA1B,CAtB+B,CAAlC;AAwBA,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACL;AACEI,MAAAA,KADF;AAEEC,MAAAA,MAFF;AAGEQ,MAAAA,QAAQ,EAAE,QAHZ;AAIEH,MAAAA,SAAS,EAAE,CACT;AACEI,QAAAA,OAAO,EAAEd,UAAU,GAAG,OAAH,GAAa;AADlC,OADS;AAJb,KADK,EAWLL,QAXK;AADT,kBAeE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACL;AACEoB,MAAAA,eAAe,EAAE,OADnB;AAEEC,MAAAA,IAAI,EAAE;AAFR,KADK,EAKLV,SALK,EAMLV,cANK;AADT,KAUGK,QAVH,CAfF,CADF;AA8BD,CA/FM","sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport { View } from \"react-native\";\nimport Animated, {\n  Extrapolate,\n  interpolate,\n  useAnimatedStyle,\n} from \"react-native-reanimated\";\n\nexport type DotStyle = Omit<ViewStyle, \"width\" | \"height\"> & {\n  width?: number\n  height?: number\n};\n\nexport const PaginationItem: React.FC<\nPropsWithChildren<{\n  index: number\n  count: number\n  size?: number\n  animValue: Animated.SharedValue<number>\n  horizontal?: boolean\n  dotStyle?: DotStyle\n  activeDotStyle?: DotStyle\n}>\n> = (props) => {\n  const {\n    animValue,\n    dotStyle,\n    activeDotStyle,\n    index,\n    count,\n    size,\n    horizontal,\n    children,\n  } = props;\n\n  const defaultDotSize = 10;\n\n  const sizes = {\n    width: size || dotStyle?.width || defaultDotSize,\n    height: size || dotStyle?.height || defaultDotSize,\n  };\n\n  /**\n   * TODO: Keep this for future implementation\n   * Used to change the size of the active dot with animation\n   */\n  // const animatedSize = {\n  //   width: activeDotStyle?.width,\n  //   height: activeDotStyle?.height,\n  // };\n\n  const width = sizes.width;\n  const height = sizes.height;\n\n  const animStyle = useAnimatedStyle(() => {\n    const size = horizontal ? height : width;\n    let inputRange = [index - 1, index, index + 1];\n    let outputRange = [-size, 0, size];\n\n    if (index === 0 && animValue?.value > count - 1) {\n      inputRange = [count - 1, count, count + 1];\n      outputRange = [-size, 0, size];\n    }\n\n    return {\n      transform: [\n        {\n          translateX: interpolate(\n            animValue?.value,\n            inputRange,\n            outputRange,\n            Extrapolate.CLAMP,\n          ),\n        },\n      ],\n    };\n  }, [animValue, index, count, horizontal]);\n\n  return (\n    <View\n      style={[\n        {\n          width,\n          height,\n          overflow: \"hidden\",\n          transform: [\n            {\n              rotateZ: horizontal ? \"90deg\" : \"0deg\",\n            },\n          ],\n        },\n        dotStyle,\n      ]}\n    >\n      <Animated.View\n        style={[\n          {\n            backgroundColor: \"black\",\n            flex: 1,\n          },\n          animStyle,\n          activeDotStyle,\n        ]}\n      >\n        {children}\n      </Animated.View>\n    </View>\n  );\n};\n"]}

package/lib/module/components/Pagination/Basic/index.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { View } from "react-native";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import { PaginationItem } from "./PaginationItem";
+export const Basic = props => {
+  const {
+    activeDotStyle,
+    dotStyle,
+    progress,
+    horizontal = true,
+    data,
+    size,
+    containerStyle,
+    renderItem,
+    onPress
+  } = props;
+  if (typeof size === "string" || typeof (dotStyle === null || dotStyle === void 0 ? void 0 : dotStyle.width) === "string" || typeof (dotStyle === null || dotStyle === void 0 ? void 0 : dotStyle.height) === "string") throw new Error("size/width/height must be a number");
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      justifyContent: "space-between",
+      alignSelf: "center"
+    }, horizontal ? {
+      flexDirection: "row"
+    } : {
+      flexDirection: "column"
+    }, containerStyle]
+  }, data.map((item, index) => {
+    return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+      key: index,
+      onPress: () => onPress === null || onPress === void 0 ? void 0 : onPress(index)
+    }, /*#__PURE__*/React.createElement(PaginationItem, {
+      index: index,
+      size: size,
+      count: data.length,
+      dotStyle: dotStyle,
+      animValue: progress,
+      horizontal: !horizontal,
+      activeDotStyle: activeDotStyle
+    }, renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index)));
+  }));
+};
+//# sourceMappingURL=index.js.map

package/lib/module/components/Pagination/Basic/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["React","View","TouchableWithoutFeedback","PaginationItem","Basic","props","activeDotStyle","dotStyle","progress","horizontal","data","size","containerStyle","renderItem","onPress","width","height","Error","justifyContent","alignSelf","flexDirection","map","item","index","length"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,wBAAT,QAAyC,8BAAzC;AAIA,SAASC,cAAT,QAA+B,kBAA/B;AAcA,OAAO,MAAMC,KAAK,GAAkBC,KAAf,IAAwC;AAC3D,QAAM;AACJC,IAAAA,cADI;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,UAAU,GAAG,IAJT;AAKJC,IAAAA,IALI;AAMJC,IAAAA,IANI;AAOJC,IAAAA,cAPI;AAQJC,IAAAA,UARI;AASJC,IAAAA;AATI,MAUFT,KAVJ;AAYA,MACE,OAAOM,IAAP,KAAgB,QAAhB,IACA,QAAOJ,QAAP,aAAOA,QAAP,uBAAOA,QAAQ,CAAEQ,KAAjB,MAA2B,QAD3B,IAEA,QAAOR,QAAP,aAAOA,QAAP,uBAAOA,QAAQ,CAAES,MAAjB,MAA4B,QAH9B,EAKE,MAAM,IAAIC,KAAJ,CAAU,oCAAV,CAAN;AAEF,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACL;AACEC,MAAAA,cAAc,EAAE,eADlB;AAEEC,MAAAA,SAAS,EAAE;AAFb,KADK,EAKLV,UAAU,GACN;AACAW,MAAAA,aAAa,EAAE;AADf,KADM,GAIN;AACAA,MAAAA,aAAa,EAAE;AADf,KATC,EAYLR,cAZK;AADT,KAgBGF,IAAI,CAACW,GAAL,CAAS,CAACC,IAAD,EAAOC,KAAP,KAAiB;AACzB,wBACE,oBAAC,wBAAD;AACE,MAAA,GAAG,EAAEA,KADP;AAEE,MAAA,OAAO,EAAE,MAAMT,OAAN,aAAMA,OAAN,uBAAMA,OAAO,CAAGS,KAAH;AAFxB,oBAIE,oBAAC,cAAD;AACE,MAAA,KAAK,EAAEA,KADT;AAEE,MAAA,IAAI,EAAEZ,IAFR;AAGE,MAAA,KAAK,EAAED,IAAI,CAACc,MAHd;AAIE,MAAA,QAAQ,EAAEjB,QAJZ;AAKE,MAAA,SAAS,EAAEC,QALb;AAME,MAAA,UAAU,EAAE,CAACC,UANf;AAOE,MAAA,cAAc,EAAEH;AAPlB,OASGO,UATH,aASGA,UATH,uBASGA,UAAU,CAAGS,IAAH,EAASC,KAAT,CATb,CAJF,CADF;AAkBD,GAnBA,CAhBH,CADF;AAuCD,CA3DM","sourcesContent":["import React from \"react\";\nimport type { StyleProp, ViewStyle } from \"react-native\";\nimport { View } from \"react-native\";\nimport { TouchableWithoutFeedback } from \"react-native-gesture-handler\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { DotStyle } from \"./PaginationItem\";\nimport { PaginationItem } from \"./PaginationItem\";\n\nexport interface BasicProps<T extends {} = {}> {\n  progress: SharedValue<number>\n  horizontal?: boolean\n  data: Array<T>\n  renderItem?: (item: T, index: number) => React.ReactNode\n  containerStyle?: StyleProp<ViewStyle>\n  dotStyle?: DotStyle\n  activeDotStyle?: DotStyle\n  size?: number\n  onPress?: (index: number) => void\n}\n\nexport const Basic = <T extends {}>(props: BasicProps<T>) => {\n  const {\n    activeDotStyle,\n    dotStyle,\n    progress,\n    horizontal = true,\n    data,\n    size,\n    containerStyle,\n    renderItem,\n    onPress,\n  } = props;\n\n  if (\n    typeof size === \"string\" ||\n    typeof dotStyle?.width === \"string\" ||\n    typeof dotStyle?.height === \"string\"\n  )\n    throw new Error(\"size/width/height must be a number\");\n\n  return (\n    <View\n      style={[\n        {\n          justifyContent: \"space-between\",\n          alignSelf: \"center\",\n        },\n        horizontal\n          ? {\n            flexDirection: \"row\",\n          }\n          : {\n            flexDirection: \"column\",\n          },\n        containerStyle,\n      ]}\n    >\n      {data.map((item, index) => {\n        return (\n          <TouchableWithoutFeedback\n            key={index}\n            onPress={() => onPress?.(index)}\n          >\n            <PaginationItem\n              index={index}\n              size={size}\n              count={data.length}\n              dotStyle={dotStyle}\n              animValue={progress}\n              horizontal={!horizontal}\n              activeDotStyle={activeDotStyle}\n            >\n              {renderItem?.(item, index)}\n            </PaginationItem>\n          </TouchableWithoutFeedback>\n        );\n      })}\n    </View>\n  );\n};\n"]}

package/lib/module/components/Pagination/index.js

@@ -0,0 +1,5 @@
+import { Basic } from "./Basic";
+export const Pagination = {
+  Basic
+};
+//# sourceMappingURL=index.js.map

package/lib/module/components/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["Basic","Pagination"],"mappings":"AAAA,SAASA,KAAT,QAAsB,SAAtB;AAEA,OAAO,MAAMC,UAAU,GAAG;AACxBD,EAAAA;AADwB,CAAnB","sourcesContent":["import { Basic } from \"./Basic\";\n\nexport const Pagination = {\n  Basic,\n};\n"]}

package/lib/module/components/ScrollViewGesture.js

@@ -1,8 +1,8 @@
-import React, { useCallback, useMemo } from "react";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import React, { useCallback } from "react";
+import { GestureDetector } from "react-native-gesture-handler";
 import Animated, { cancelAnimation, measure, runOnJS, useAnimatedReaction, useAnimatedRef, useDerivedValue, useSharedValue, withDecay } from "react-native-reanimated";
 import { Easing } from "../constants";
-import { useUpdateGestureConfig } from "../hooks/useUpdateGestureConfig";
+import { usePanGestureProxy } from "../hooks/usePanGestureProxy";
 import { CTX } from "../store";
 import { dealWithAnimation } from "../utils/deal-with-animation";
 
@@ -13,13 +13,15 @@ const IScrollViewGesture = props => {
       vertical,
       pagingEnabled,
       snapEnabled,
-      loop: infinite,
+      loop,
       scrollAnimationDuration,
       withAnimation,
       enabled,
       dataLength,
       overscrollEnabled,
-      maxScrollDistancePerSwipe
+      maxScrollDistancePerSwipe,
+      minScrollDistancePerSwipe,
+      fixedDirection
     }
   } = React.useContext(CTX);
   const {
@@ -27,7 +29,7 @@ const IScrollViewGesture = props => {
     translation,
     testID,
     style = {},
-    onScrollBegin,
+    onScrollStart,
     onScrollEnd,
     onTouchBegin,
     onTouchEnd
@@ -41,12 +43,13 @@ const IScrollViewGesture = props => {
   const scrollEndTranslation = useSharedValue(0);
   const scrollEndVelocity = useSharedValue(0);
   const containerRef = useAnimatedRef();
-  const maxScrollDistancePerSwipeIsSet = typeof maxScrollDistancePerSwipe === "number"; // Get the limit of the scroll.
+  const maxScrollDistancePerSwipeIsSet = typeof maxScrollDistancePerSwipe === "number";
+  const minScrollDistancePerSwipeIsSet = typeof minScrollDistancePerSwipe === "number"; // Get the limit of the scroll.
 
   const getLimit = React.useCallback(() => {
     "worklet";
 
-    if (!infinite && !overscrollEnabled) {
+    if (!loop && !overscrollEnabled) {
       const {
         width: containerWidth = 0
       } = measure(containerRef); // If the item's total width is less than the container's width, then there is no need to scroll.
@@ -57,7 +60,7 @@ const IScrollViewGesture = props => {
     }
 
     return dataLength * size;
-  }, [infinite, size, dataLength, overscrollEnabled]);
+  }, [loop, size, dataLength, overscrollEnabled]);
   const withSpring = React.useCallback((toValue, onFinished) => {
     "worklet";
 
@@ -102,7 +105,7 @@ const IScrollViewGesture = props => {
         const computed = offset < 0 ? Math.ceil : Math.floor;
         const page = computed(-translation.value / size);
 
-        if (infinite) {
+        if (loop) {
           const finalPage = page + offset;
           finalTranslation = withSpring(withProcessTranslation(-finalPage * size), onFinished);
         } else {
@@ -121,7 +124,7 @@ const IScrollViewGesture = props => {
     translation.value = finalTranslation;
 
     function withProcessTranslation(translation) {
-      if (!infinite && !overscrollEnabled) {
+      if (!loop && !overscrollEnabled) {
         const limit = getLimit();
         const sign = Math.sign(translation);
         return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
@@ -129,7 +132,7 @@ const IScrollViewGesture = props => {
 
       return translation;
     }
-  }, [withSpring, size, maxPage, infinite, snapEnabled, translation, pagingEnabled, scrollEndVelocity.value, maxScrollDistancePerSwipe, scrollEndTranslation.value, maxScrollDistancePerSwipeIsSet]);
+  }, [withSpring, size, maxPage, loop, snapEnabled, translation, pagingEnabled, scrollEndVelocity.value, maxScrollDistancePerSwipe, scrollEndTranslation.value, maxScrollDistancePerSwipeIsSet]);
   const onFinish = React.useCallback(isFinished => {
     "worklet";
 
@@ -157,7 +160,7 @@ const IScrollViewGesture = props => {
         return;
       }
 
-      if (!infinite) {
+      if (!loop) {
         translation.value = withSpring(0);
         return;
       }
@@ -169,9 +172,9 @@ const IScrollViewGesture = props => {
         return;
       }
 
-      if (!infinite) translation.value = withSpring(-((maxPage - 1) * size));
+      if (!loop) translation.value = withSpring(-((maxPage - 1) * size));
     }
-  }, [touching.value, translation, maxPage, size, scrollEndTranslation.value, infinite, activeDecay, withSpring]);
+  }, [touching.value, translation, maxPage, size, scrollEndTranslation.value, loop, activeDecay, withSpring]);
   useAnimatedReaction(() => translation.value, () => {
     if (!pagingEnabled) resetBoundary();
   }, [pagingEnabled, resetBoundary]);
@@ -179,7 +182,7 @@ const IScrollViewGesture = props => {
   function withProcessTranslation(translation) {
     "worklet";
 
-    if (!infinite && !overscrollEnabled) {
+    if (!loop && !overscrollEnabled) {
       const limit = getLimit();
       const sign = Math.sign(translation);
       return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
@@ -188,16 +191,16 @@ const IScrollViewGesture = props => {
     return translation;
   }
 
-  const onGestureBegin = useCallback(() => {
+  const onGestureStart = useCallback(_ => {
     "worklet";
 
     touching.value = true;
     validStart.value = true;
-    onScrollBegin && runOnJS(onScrollBegin)();
+    onScrollStart && runOnJS(onScrollStart)();
     max.value = (maxPage - 1) * size;
-    if (!infinite && !overscrollEnabled) max.value = getLimit();
+    if (!loop && !overscrollEnabled) max.value = getLimit();
     panOffset.value = translation.value;
-  }, [max, size, maxPage, infinite, touching, panOffset, validStart, translation, overscrollEnabled, getLimit, onScrollBegin]);
+  }, [max, size, maxPage, loop, touching, panOffset, validStart, translation, overscrollEnabled, getLimit, onScrollStart]);
   const onGestureUpdate = useCallback(e => {
     "worklet";
 
@@ -211,9 +214,10 @@ const IScrollViewGesture = props => {
       translationX,
       translationY
     } = e;
-    const panTranslation = isHorizontal.value ? translationX : translationY;
+    let panTranslation = isHorizontal.value ? translationX : translationY;
+    if (fixedDirection === "negative") panTranslation = -Math.abs(panTranslation);else if (fixedDirection === "positive") panTranslation = +Math.abs(panTranslation);
 
-    if (!infinite) {
+    if (!loop) {
       if (translation.value > 0 || translation.value < -max.value) {
         const boundary = translation.value > 0 ? 0 : -max.value;
         const fixed = boundary - panOffset.value;
@@ -225,8 +229,8 @@ const IScrollViewGesture = props => {
 
     const translationValue = panOffset.value + panTranslation;
     translation.value = translationValue;
-  }, [isHorizontal, max, panOffset, infinite, overscrollEnabled, translation, validStart, touching]);
-  const onGestureFinish = useCallback(e => {
+  }, [isHorizontal, max, panOffset, loop, overscrollEnabled, fixedDirection, translation, validStart, touching]);
+  const onGestureEnd = useCallback((e, _success) => {
     "worklet";
 
     const {
@@ -236,25 +240,40 @@ const IScrollViewGesture = props => {
       translationY
     } = e;
     scrollEndVelocity.value = isHorizontal.value ? velocityX : velocityY;
-    scrollEndTranslation.value = isHorizontal.value ? translationX : translationY;
+    let panTranslation = isHorizontal.value ? translationX : translationY;
+    if (fixedDirection === "negative") panTranslation = -Math.abs(panTranslation);else if (fixedDirection === "positive") panTranslation = +Math.abs(panTranslation);
+    scrollEndTranslation.value = panTranslation;
     const totalTranslation = scrollEndVelocity.value + scrollEndTranslation.value;
+    /**
+     * If the maximum scroll distance is set and the translation `exceeds the maximum scroll distance`,
+     * the carousel will keep the view at the current position.
+    */
 
     if (maxScrollDistancePerSwipeIsSet && Math.abs(totalTranslation) > maxScrollDistancePerSwipe) {
       const nextPage = Math.round((panOffset.value + maxScrollDistancePerSwipe * Math.sign(totalTranslation)) / size) * size;
       translation.value = withSpring(withProcessTranslation(nextPage), onScrollEnd);
+    }
+    /**
+     * If the minimum scroll distance is set and the translation `didn't exceeds the minimum scroll distance`,
+     * the carousel will keep the view at the current position.
+    */
+    else if (minScrollDistancePerSwipeIsSet && Math.abs(totalTranslation) < minScrollDistancePerSwipe) {
+      const nextPage = Math.round((panOffset.value + minScrollDistancePerSwipe * Math.sign(totalTranslation)) / size) * size;
+      translation.value = withSpring(withProcessTranslation(nextPage), onScrollEnd);
     } else {
       endWithSpring(onScrollEnd);
     }
 
-    if (!infinite) touching.value = false;
-  }, [size, infinite, touching, panOffset, translation, isHorizontal, scrollEndVelocity, scrollEndTranslation, maxScrollDistancePerSwipeIsSet, maxScrollDistancePerSwipe, endWithSpring, withSpring, onScrollEnd]);
-  const gesture = useMemo(() => {
-    const gesture = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);
-    if (onConfigurePanGesture) onConfigurePanGesture(gesture);
-    return gesture;
-  }, [onGestureBegin, onGestureUpdate, onGestureFinish, onConfigurePanGesture]);
-  useUpdateGestureConfig(gesture, {
-    enabled
+    if (!loop) touching.value = false;
+  }, [size, loop, touching, panOffset, translation, isHorizontal, scrollEndVelocity, scrollEndTranslation, fixedDirection, maxScrollDistancePerSwipeIsSet, maxScrollDistancePerSwipe, maxScrollDistancePerSwipeIsSet, minScrollDistancePerSwipe, endWithSpring, withSpring, onScrollEnd]);
+  const gesture = usePanGestureProxy({
+    onConfigurePanGesture,
+    onGestureStart,
+    onGestureUpdate,
+    onGestureEnd,
+    options: {
+      enabled
+    }
   });
   return /*#__PURE__*/React.createElement(GestureDetector, {
     gesture: gesture