react-native-reanimated-carousel 3.1.4 → 3.1.5

package/lib/module/hooks/useCommonVariables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCommonVariables.ts"],"names":["React","useSharedValue","useAnimatedReaction","computeNewIndexWhenDataChanges","handlerOffsetDirection","useCommonVariables","props","vertical","height","width","data","defaultIndex","defaultScrollOffsetValue","loop","size","validLength","length","defaultHandlerOffsetValue","Math","abs","_handlerOffset","handlerOffset","prevDataLength","useEffect","value","previousLength","currentLength","isLengthChanged","shouldComputed","direction"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,cAAT,EAAyBC,mBAAzB,QAAoD,yBAApD;AAEA,SAASC,8BAAT,QAA+C,kCAA/C;AAGA,SAASC,sBAAT,QAAuC,iCAAvC;AAQA,OAAO,SAASC,kBAAT,CACLC,KADK,EAEa;AAClB,QAAM;AACJC,IAAAA,QADI;AAEJC,IAAAA,MAFI;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,IAJI;AAKJC,IAAAA,YALI;AAMJC,IAAAA,wBANI;AAOJC,IAAAA;AAPI,MAQFP,KARJ;AASA,QAAMQ,IAAI,GAAGP,QAAQ,GAAGC,MAAH,GAAYC,KAAjC;AACA,QAAMM,WAAW,GAAGL,IAAI,CAACM,MAAL,GAAc,CAAlC;AACA,QAAMC,yBAAyB,GAAG,CAACC,IAAI,CAACC,GAAL,CAASR,YAAY,GAAGG,IAAxB,CAAnC;;AACA,QAAMM,cAAc,GAAGnB,cAAc,CAASgB,yBAAT,CAArC;;AACA,QAAMI,aAAa,GAAGT,wBAAH,aAAGA,wBAAH,cAAGA,wBAAH,GAA+BQ,cAAlD;AACA,QAAME,cAAc,GAAGrB,cAAc,CAACS,IAAI,CAACM,MAAN,CAArC;AAEAhB,EAAAA,KAAK,CAACuB,SAAN,CAAgB,MAAM;AACpBF,IAAAA,aAAa,CAACG,KAAd,GAAsBP,yBAAtB;AACD,GAFD,EAEG,CAACV,QAAD,EAAWc,aAAX,EAA0BJ,yBAA1B,CAFH;AAIAf,EAAAA,mBAAmB,CAAC,MAAM;AACxB,UAAMuB,cAAc,GAAGH,cAAc,CAACE,KAAtC;AACA,UAAME,aAAa,GAAGhB,IAAI,CAACM,MAA3B;AACA,UAAMW,eAAe,GAAGF,cAAc,KAAKC,aAA3C;AACA,UAAME,cAAc,GAAGD,eAAe,IAAId,IAA1C;AAEA,QAAIe,cAAJ,EACEN,cAAc,CAACE,KAAf,GAAuBd,IAAI,CAACM,MAA5B;AAEF,WAAO;AACLY,MAAAA,cADK;AAELH,MAAAA,cAFK;AAGLC,MAAAA;AAHK,KAAP;AAKD,GAdkB,EAchB,QAAuD;AAAA,QAAtD;AAAEE,MAAAA,cAAF;AAAkBH,MAAAA,cAAlB;AAAkCC,MAAAA;AAAlC,KAAsD;;AACxD,QAAIE,cAAJ,EAAoB;AAClB;AACA,YAAMC,SAAS,GAAGzB,sBAAsB,CAACiB,aAAD,CAAxC;AAEAA,MAAAA,aAAa,CAACG,KAAd,GAAsBrB,8BAA8B,CAAC;AACnD0B,QAAAA,SADmD;AAEnDJ,QAAAA,cAFmD;AAGnDC,QAAAA,aAHmD;AAInDZ,QAAAA,IAJmD;AAKnDO,QAAAA,aAAa,EAAEA,aAAa,CAACG;AALsB,OAAD,CAApD;AAOD;AACF,GA3BkB,EA2BhB,CAACd,IAAD,EAAOG,IAAP,CA3BgB,CAAnB;AA6BA,SAAO;AACLC,IAAAA,IADK;AAELC,IAAAA,WAFK;AAGLM,IAAAA;AAHK,GAAP;AAKD","sourcesContent":["import React from \"react\";\nimport type Animated from \"react-native-reanimated\";\nimport { useSharedValue, useAnimatedReaction } from \"react-native-reanimated\";\n\nimport { computeNewIndexWhenDataChanges } from \"./computeNewIndexWhenDataChanges\";\nimport type { TInitializeCarouselProps } from \"./useInitProps\";\n\nimport { handlerOffsetDirection } from \"../utils/handlerOffsetDirection\";\n\ninterface ICommonVariables {\n  size: number\n  validLength: number\n  handlerOffset: Animated.SharedValue<number>\n}\n\nexport function useCommonVariables(\n  props: TInitializeCarouselProps<any>,\n): ICommonVariables {\n  const {\n    vertical,\n    height,\n    width,\n    data,\n    defaultIndex,\n    defaultScrollOffsetValue,\n    loop,\n  } = props;\n  const size = vertical ? height : width;\n  const validLength = data.length - 1;\n  const defaultHandlerOffsetValue = -Math.abs(defaultIndex * size);\n  const _handlerOffset = useSharedValue<number>(defaultHandlerOffsetValue);\n  const handlerOffset = defaultScrollOffsetValue ?? _handlerOffset;\n  const prevDataLength = useSharedValue(data.length);\n\n  React.useEffect(() => {\n    handlerOffset.value = defaultHandlerOffsetValue;\n  }, [vertical, handlerOffset, defaultHandlerOffsetValue]);\n\n  useAnimatedReaction(() => {\n    const previousLength = prevDataLength.value;\n    const currentLength = data.length;\n    const isLengthChanged = previousLength !== currentLength;\n    const shouldComputed = isLengthChanged && loop;\n\n    if (shouldComputed)\n      prevDataLength.value = data.length;\n\n    return {\n      shouldComputed,\n      previousLength,\n      currentLength,\n    };\n  }, ({ shouldComputed, previousLength, currentLength }) => {\n    if (shouldComputed) {\n      // direction -> 1 | -1\n      const direction = handlerOffsetDirection(handlerOffset);\n\n      handlerOffset.value = computeNewIndexWhenDataChanges({\n        direction,\n        previousLength,\n        currentLength,\n        size,\n        handlerOffset: handlerOffset.value,\n      });\n    }\n  }, [data, loop]);\n\n  return {\n    size,\n    validLength,\n    handlerOffset,\n  };\n}\n"]}
+{"version":3,"sources":["useCommonVariables.ts"],"names":["React","useSharedValue","useAnimatedReaction","computeNewIndexWhenDataChanges","handlerOffsetDirection","useCommonVariables","props","vertical","height","width","dataLength","defaultIndex","defaultScrollOffsetValue","loop","size","validLength","defaultHandlerOffsetValue","Math","abs","_handlerOffset","handlerOffset","prevDataLength","useEffect","value","previousLength","currentLength","isLengthChanged","shouldComputed","direction"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,cAAT,EAAyBC,mBAAzB,QAAoD,yBAApD;AAEA,SAASC,8BAAT,QAA+C,kCAA/C;AAGA,SAASC,sBAAT,QAAuC,iCAAvC;AAQA,OAAO,SAASC,kBAAT,CACLC,KADK,EAEa;AAClB,QAAM;AACJC,IAAAA,QADI;AAEJC,IAAAA,MAFI;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,UAJI;AAKJC,IAAAA,YALI;AAMJC,IAAAA,wBANI;AAOJC,IAAAA;AAPI,MAQFP,KARJ;AASA,QAAMQ,IAAI,GAAGP,QAAQ,GAAGC,MAAH,GAAYC,KAAjC;AACA,QAAMM,WAAW,GAAGL,UAAU,GAAG,CAAjC;AACA,QAAMM,yBAAyB,GAAG,CAACC,IAAI,CAACC,GAAL,CAASP,YAAY,GAAGG,IAAxB,CAAnC;;AACA,QAAMK,cAAc,GAAGlB,cAAc,CAASe,yBAAT,CAArC;;AACA,QAAMI,aAAa,GAAGR,wBAAH,aAAGA,wBAAH,cAAGA,wBAAH,GAA+BO,cAAlD;AACA,QAAME,cAAc,GAAGpB,cAAc,CAACS,UAAD,CAArC;AAEAV,EAAAA,KAAK,CAACsB,SAAN,CAAgB,MAAM;AACpBF,IAAAA,aAAa,CAACG,KAAd,GAAsBP,yBAAtB;AACD,GAFD,EAEG,CAACT,QAAD,EAAWa,aAAX,EAA0BJ,yBAA1B,CAFH;AAIAd,EAAAA,mBAAmB,CAAC,MAAM;AACxB,UAAMsB,cAAc,GAAGH,cAAc,CAACE,KAAtC;AACA,UAAME,aAAa,GAAGf,UAAtB;AACA,UAAMgB,eAAe,GAAGF,cAAc,KAAKC,aAA3C;AACA,UAAME,cAAc,GAAGD,eAAe,IAAIb,IAA1C;AAEA,QAAIc,cAAJ,EACEN,cAAc,CAACE,KAAf,GAAuBb,UAAvB;AAEF,WAAO;AACLiB,MAAAA,cADK;AAELH,MAAAA,cAFK;AAGLC,MAAAA;AAHK,KAAP;AAKD,GAdkB,EAchB,QAAuD;AAAA,QAAtD;AAAEE,MAAAA,cAAF;AAAkBH,MAAAA,cAAlB;AAAkCC,MAAAA;AAAlC,KAAsD;;AACxD,QAAIE,cAAJ,EAAoB;AAClB;AACA,YAAMC,SAAS,GAAGxB,sBAAsB,CAACgB,aAAD,CAAxC;AAEAA,MAAAA,aAAa,CAACG,KAAd,GAAsBpB,8BAA8B,CAAC;AACnDyB,QAAAA,SADmD;AAEnDJ,QAAAA,cAFmD;AAGnDC,QAAAA,aAHmD;AAInDX,QAAAA,IAJmD;AAKnDM,QAAAA,aAAa,EAAEA,aAAa,CAACG;AALsB,OAAD,CAApD;AAOD;AACF,GA3BkB,EA2BhB,CAACb,UAAD,EAAaG,IAAb,CA3BgB,CAAnB;AA6BA,SAAO;AACLC,IAAAA,IADK;AAELC,IAAAA,WAFK;AAGLK,IAAAA;AAHK,GAAP;AAKD","sourcesContent":["import React from \"react\";\nimport type Animated from \"react-native-reanimated\";\nimport { useSharedValue, useAnimatedReaction } from \"react-native-reanimated\";\n\nimport { computeNewIndexWhenDataChanges } from \"./computeNewIndexWhenDataChanges\";\nimport type { TInitializeCarouselProps } from \"./useInitProps\";\n\nimport { handlerOffsetDirection } from \"../utils/handlerOffsetDirection\";\n\ninterface ICommonVariables {\n  size: number\n  validLength: number\n  handlerOffset: Animated.SharedValue<number>\n}\n\nexport function useCommonVariables(\n  props: TInitializeCarouselProps<any>,\n): ICommonVariables {\n  const {\n    vertical,\n    height,\n    width,\n    dataLength,\n    defaultIndex,\n    defaultScrollOffsetValue,\n    loop,\n  } = props;\n  const size = vertical ? height : width;\n  const validLength = dataLength - 1;\n  const defaultHandlerOffsetValue = -Math.abs(defaultIndex * size);\n  const _handlerOffset = useSharedValue<number>(defaultHandlerOffsetValue);\n  const handlerOffset = defaultScrollOffsetValue ?? _handlerOffset;\n  const prevDataLength = useSharedValue(dataLength);\n\n  React.useEffect(() => {\n    handlerOffset.value = defaultHandlerOffsetValue;\n  }, [vertical, handlerOffset, defaultHandlerOffsetValue]);\n\n  useAnimatedReaction(() => {\n    const previousLength = prevDataLength.value;\n    const currentLength = dataLength;\n    const isLengthChanged = previousLength !== currentLength;\n    const shouldComputed = isLengthChanged && loop;\n\n    if (shouldComputed)\n      prevDataLength.value = dataLength;\n\n    return {\n      shouldComputed,\n      previousLength,\n      currentLength,\n    };\n  }, ({ shouldComputed, previousLength, currentLength }) => {\n    if (shouldComputed) {\n      // direction -> 1 | -1\n      const direction = handlerOffsetDirection(handlerOffset);\n\n      handlerOffset.value = computeNewIndexWhenDataChanges({\n        direction,\n        previousLength,\n        currentLength,\n        size,\n        handlerOffset: handlerOffset.value,\n      });\n    }\n  }, [dataLength, loop]);\n\n  return {\n    size,\n    validLength,\n    handlerOffset,\n  };\n}\n"]}

package/lib/module/hooks/useInitProps.js

@@ -22,29 +22,34 @@ export function useInitProps(props) {
   const height = Math.round(_height || 0);
   const autoPlayInterval = Math.max(_autoPlayInterval, 0);
   const data = React.useMemo(() => {
-    const computedData = computedFillDataWithAutoFillData({
+    return computedFillDataWithAutoFillData({
       loop,
       autoFillData,
       data: rawData,
       dataLength: rawData.length
     });
-    return Array.from({
-      length: computedData.length
-    });
   }, [rawData, loop, autoFillData]);
+  const dataLength = data.length;
+  const rawDataLength = rawData.length;
 
   if (props.mode === "vertical-stack" || props.mode === "horizontal-stack") {
     var _props$modeConfig$sho, _props$modeConfig;
 
     if (!props.modeConfig) props.modeConfig = {};
-    props.modeConfig.showLength = (_props$modeConfig$sho = (_props$modeConfig = props.modeConfig) === null || _props$modeConfig === void 0 ? void 0 : _props$modeConfig.showLength) !== null && _props$modeConfig$sho !== void 0 ? _props$modeConfig$sho : data.length - 1;
+    props.modeConfig.showLength = (_props$modeConfig$sho = (_props$modeConfig = props.modeConfig) === null || _props$modeConfig === void 0 ? void 0 : _props$modeConfig.showLength) !== null && _props$modeConfig$sho !== void 0 ? _props$modeConfig$sho : dataLength - 1;
   }
 
   return { ...props,
     defaultIndex,
     autoFillData,
+    // Fill data with autoFillData
     data,
+    // Length of fill data
+    dataLength,
+    // Raw data that has not been processed
     rawData,
+    // Length of raw data
+    rawDataLength,
     loop,
     enabled,
     autoPlayInterval,

package/lib/module/hooks/useInitProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useInitProps.ts"],"names":["React","computedFillDataWithAutoFillData","useInitProps","props","defaultIndex","data","rawData","loop","enabled","autoPlayInterval","_autoPlayInterval","scrollAnimationDuration","style","panGestureHandlerProps","pagingEnabled","autoFillData","snapEnabled","enableSnap","width","_width","height","_height","Math","round","max","useMemo","computedData","dataLength","length","Array","from","mode","modeConfig","showLength"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,gCAAT,QAAiD,mCAAjD;AAqBA,OAAO,SAASC,YAAT,CACLC,KADK,EAEwB;AAAA;;AAC7B,QAAM;AACJC,IAAAA,YAAY,GAAG,CADX;AAEJC,IAAAA,IAAI,EAAEC,OAAO,GAAG,EAFZ;AAGJC,IAAAA,IAAI,GAAG,IAHH;AAIJC,IAAAA,OAAO,GAAG,IAJN;AAKJC,IAAAA,gBAAgB,EAAEC,iBAAiB,GAAG,IALlC;AAMJC,IAAAA,uBAAuB,GAAG,GANtB;AAOJC,IAAAA,KAAK,GAAG,EAPJ;AAQJC,IAAAA,sBAAsB,GAAG,EARrB;AASJC,IAAAA,aAAa,GAAG,IATZ;AAUJC,IAAAA,YAAY,GAAG,IAVX;AAWJC,IAAAA,WAAW,wBAAGb,KAAK,CAACc,UAAT,iEAAuB,IAX9B;AAYJC,IAAAA,KAAK,EAAEC,MAZH;AAaJC,IAAAA,MAAM,EAAEC;AAbJ,MAcFlB,KAdJ;AAgBA,QAAMe,KAAK,GAAGI,IAAI,CAACC,KAAL,CAAWJ,MAAM,IAAI,CAArB,CAAd;AACA,QAAMC,MAAM,GAAGE,IAAI,CAACC,KAAL,CAAWF,OAAO,IAAI,CAAtB,CAAf;AACA,QAAMZ,gBAAgB,GAAGa,IAAI,CAACE,GAAL,CAASd,iBAAT,EAA4B,CAA5B,CAAzB;AAEA,QAAML,IAAI,GAAGL,KAAK,CAACyB,OAAN,CACX,MAAM;AACJ,UAAMC,YAAY,GAAGzB,gCAAgC,CAAI;AACvDM,MAAAA,IADuD;AAEvDQ,MAAAA,YAFuD;AAGvDV,MAAAA,IAAI,EAAEC,OAHiD;AAIvDqB,MAAAA,UAAU,EAAErB,OAAO,CAACsB;AAJmC,KAAJ,CAArD;AAOA,WAAOC,KAAK,CAACC,IAAN,CAAW;AAAEF,MAAAA,MAAM,EAAEF,YAAY,CAACE;AAAvB,KAAX,CAAP;AACD,GAVU,EAWX,CAACtB,OAAD,EAAUC,IAAV,EAAgBQ,YAAhB,CAXW,CAAb;;AAcA,MAAIZ,KAAK,CAAC4B,IAAN,KAAe,gBAAf,IAAmC5B,KAAK,CAAC4B,IAAN,KAAe,kBAAtD,EAA0E;AAAA;;AACxE,QAAI,CAAC5B,KAAK,CAAC6B,UAAX,EACE7B,KAAK,CAAC6B,UAAN,GAAmB,EAAnB;AAEF7B,IAAAA,KAAK,CAAC6B,UAAN,CAAiBC,UAAjB,iDAA8B9B,KAAK,CAAC6B,UAApC,sDAA8B,kBAAkBC,UAAhD,yEAA8D5B,IAAI,CAACuB,MAAL,GAAc,CAA5E;AACD;;AAED,SAAO,EACL,GAAGzB,KADE;AAELC,IAAAA,YAFK;AAGLW,IAAAA,YAHK;AAILV,IAAAA,IAJK;AAKLC,IAAAA,OALK;AAMLC,IAAAA,IANK;AAOLC,IAAAA,OAPK;AAQLC,IAAAA,gBARK;AASLE,IAAAA,uBATK;AAULC,IAAAA,KAVK;AAWLC,IAAAA,sBAXK;AAYLC,IAAAA,aAZK;AAaLE,IAAAA,WAbK;AAcLE,IAAAA,KAdK;AAeLE,IAAAA;AAfK,GAAP;AAiBD","sourcesContent":["import React from \"react\";\n\nimport type { TCarouselProps } from \"../types\";\nimport { computedFillDataWithAutoFillData } from \"../utils/computedWithAutoFillData\";\n\ntype TGetRequiredProps<P extends keyof TCarouselProps> = Record<\nP,\nRequired<TCarouselProps>[P]\n>;\n\nexport type TInitializeCarouselProps<T> = TCarouselProps<T> &\nTGetRequiredProps<\n| \"defaultIndex\"\n| \"loop\"\n| \"width\"\n| \"height\"\n| \"scrollAnimationDuration\"\n| \"autoPlayInterval\"\n| \"autoFillData\"\n> & {\n  // Raw data that has not been processed\n  rawData: T[]\n};\n\nexport function useInitProps<T>(\n  props: TCarouselProps<T>,\n): TInitializeCarouselProps<T> {\n  const {\n    defaultIndex = 0,\n    data: rawData = [],\n    loop = true,\n    enabled = true,\n    autoPlayInterval: _autoPlayInterval = 1000,\n    scrollAnimationDuration = 500,\n    style = {},\n    panGestureHandlerProps = {},\n    pagingEnabled = true,\n    autoFillData = true,\n    snapEnabled = props.enableSnap ?? true,\n    width: _width,\n    height: _height,\n  } = props;\n\n  const width = Math.round(_width || 0);\n  const height = Math.round(_height || 0);\n  const autoPlayInterval = Math.max(_autoPlayInterval, 0);\n\n  const data = React.useMemo<T[]>(\n    () => {\n      const computedData = computedFillDataWithAutoFillData<T>({\n        loop,\n        autoFillData,\n        data: rawData,\n        dataLength: rawData.length,\n      });\n\n      return Array.from({ length: computedData.length });\n    },\n    [rawData, loop, autoFillData],\n  );\n\n  if (props.mode === \"vertical-stack\" || props.mode === \"horizontal-stack\") {\n    if (!props.modeConfig)\n      props.modeConfig = {};\n\n    props.modeConfig.showLength = props.modeConfig?.showLength ?? data.length - 1;\n  }\n\n  return {\n    ...props,\n    defaultIndex,\n    autoFillData,\n    data,\n    rawData,\n    loop,\n    enabled,\n    autoPlayInterval,\n    scrollAnimationDuration,\n    style,\n    panGestureHandlerProps,\n    pagingEnabled,\n    snapEnabled,\n    width,\n    height,\n  };\n}\n"]}
+{"version":3,"sources":["useInitProps.ts"],"names":["React","computedFillDataWithAutoFillData","useInitProps","props","defaultIndex","data","rawData","loop","enabled","autoPlayInterval","_autoPlayInterval","scrollAnimationDuration","style","panGestureHandlerProps","pagingEnabled","autoFillData","snapEnabled","enableSnap","width","_width","height","_height","Math","round","max","useMemo","dataLength","length","rawDataLength","mode","modeConfig","showLength"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,gCAAT,QAAiD,mCAAjD;AAuBA,OAAO,SAASC,YAAT,CACLC,KADK,EAEwB;AAAA;;AAC7B,QAAM;AACJC,IAAAA,YAAY,GAAG,CADX;AAEJC,IAAAA,IAAI,EAAEC,OAAO,GAAG,EAFZ;AAGJC,IAAAA,IAAI,GAAG,IAHH;AAIJC,IAAAA,OAAO,GAAG,IAJN;AAKJC,IAAAA,gBAAgB,EAAEC,iBAAiB,GAAG,IALlC;AAMJC,IAAAA,uBAAuB,GAAG,GANtB;AAOJC,IAAAA,KAAK,GAAG,EAPJ;AAQJC,IAAAA,sBAAsB,GAAG,EARrB;AASJC,IAAAA,aAAa,GAAG,IATZ;AAUJC,IAAAA,YAAY,GAAG,IAVX;AAWJC,IAAAA,WAAW,wBAAGb,KAAK,CAACc,UAAT,iEAAuB,IAX9B;AAYJC,IAAAA,KAAK,EAAEC,MAZH;AAaJC,IAAAA,MAAM,EAAEC;AAbJ,MAcFlB,KAdJ;AAgBA,QAAMe,KAAK,GAAGI,IAAI,CAACC,KAAL,CAAWJ,MAAM,IAAI,CAArB,CAAd;AACA,QAAMC,MAAM,GAAGE,IAAI,CAACC,KAAL,CAAWF,OAAO,IAAI,CAAtB,CAAf;AACA,QAAMZ,gBAAgB,GAAGa,IAAI,CAACE,GAAL,CAASd,iBAAT,EAA4B,CAA5B,CAAzB;AAEA,QAAML,IAAI,GAAGL,KAAK,CAACyB,OAAN,CACX,MAAM;AACJ,WAAOxB,gCAAgC,CAAI;AACzCM,MAAAA,IADyC;AAEzCQ,MAAAA,YAFyC;AAGzCV,MAAAA,IAAI,EAAEC,OAHmC;AAIzCoB,MAAAA,UAAU,EAAEpB,OAAO,CAACqB;AAJqB,KAAJ,CAAvC;AAMD,GARU,EASX,CAACrB,OAAD,EAAUC,IAAV,EAAgBQ,YAAhB,CATW,CAAb;AAYA,QAAMW,UAAU,GAAGrB,IAAI,CAACsB,MAAxB;AACA,QAAMC,aAAa,GAAGtB,OAAO,CAACqB,MAA9B;;AAEA,MAAIxB,KAAK,CAAC0B,IAAN,KAAe,gBAAf,IAAmC1B,KAAK,CAAC0B,IAAN,KAAe,kBAAtD,EAA0E;AAAA;;AACxE,QAAI,CAAC1B,KAAK,CAAC2B,UAAX,EACE3B,KAAK,CAAC2B,UAAN,GAAmB,EAAnB;AAEF3B,IAAAA,KAAK,CAAC2B,UAAN,CAAiBC,UAAjB,iDAA8B5B,KAAK,CAAC2B,UAApC,sDAA8B,kBAAkBC,UAAhD,yEAA8DL,UAAU,GAAG,CAA3E;AACD;;AAED,SAAO,EACL,GAAGvB,KADE;AAELC,IAAAA,YAFK;AAGLW,IAAAA,YAHK;AAIL;AACAV,IAAAA,IALK;AAML;AACAqB,IAAAA,UAPK;AAQL;AACApB,IAAAA,OATK;AAUL;AACAsB,IAAAA,aAXK;AAYLrB,IAAAA,IAZK;AAaLC,IAAAA,OAbK;AAcLC,IAAAA,gBAdK;AAeLE,IAAAA,uBAfK;AAgBLC,IAAAA,KAhBK;AAiBLC,IAAAA,sBAjBK;AAkBLC,IAAAA,aAlBK;AAmBLE,IAAAA,WAnBK;AAoBLE,IAAAA,KApBK;AAqBLE,IAAAA;AArBK,GAAP;AAuBD","sourcesContent":["import React from \"react\";\n\nimport type { TCarouselProps } from \"../types\";\nimport { computedFillDataWithAutoFillData } from \"../utils/computedWithAutoFillData\";\n\ntype TGetRequiredProps<P extends keyof TCarouselProps> = Record<\nP,\nRequired<TCarouselProps>[P]\n>;\n\nexport type TInitializeCarouselProps<T> = TCarouselProps<T> &\nTGetRequiredProps<\n| \"defaultIndex\"\n| \"loop\"\n| \"width\"\n| \"height\"\n| \"scrollAnimationDuration\"\n| \"autoPlayInterval\"\n| \"autoFillData\"\n> & {\n  // Raw data that has not been processed\n  rawData: T[]\n  dataLength: number\n  rawDataLength: number\n};\n\nexport function useInitProps<T>(\n  props: TCarouselProps<T>,\n): TInitializeCarouselProps<T> {\n  const {\n    defaultIndex = 0,\n    data: rawData = [],\n    loop = true,\n    enabled = true,\n    autoPlayInterval: _autoPlayInterval = 1000,\n    scrollAnimationDuration = 500,\n    style = {},\n    panGestureHandlerProps = {},\n    pagingEnabled = true,\n    autoFillData = true,\n    snapEnabled = props.enableSnap ?? true,\n    width: _width,\n    height: _height,\n  } = props;\n\n  const width = Math.round(_width || 0);\n  const height = Math.round(_height || 0);\n  const autoPlayInterval = Math.max(_autoPlayInterval, 0);\n\n  const data = React.useMemo<T[]>(\n    () => {\n      return computedFillDataWithAutoFillData<T>({\n        loop,\n        autoFillData,\n        data: rawData,\n        dataLength: rawData.length,\n      });\n    },\n    [rawData, loop, autoFillData],\n  );\n\n  const dataLength = data.length;\n  const rawDataLength = rawData.length;\n\n  if (props.mode === \"vertical-stack\" || props.mode === \"horizontal-stack\") {\n    if (!props.modeConfig)\n      props.modeConfig = {};\n\n    props.modeConfig.showLength = props.modeConfig?.showLength ?? dataLength - 1;\n  }\n\n  return {\n    ...props,\n    defaultIndex,\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    loop,\n    enabled,\n    autoPlayInterval,\n    scrollAnimationDuration,\n    style,\n    panGestureHandlerProps,\n    pagingEnabled,\n    snapEnabled,\n    width,\n    height,\n  };\n}\n"]}

package/lib/module/hooks/useOffsetX.js

@@ -5,14 +5,15 @@ export const useOffsetX = (opts, visibleRanges) => {
     index,
     size,
     loop,
-    data,
+    dataLength,
     type = "positive",
-    viewCount = Math.round((data.length - 1) / 2)
+    viewCount: _viewCount
   } = opts;
-  const ITEM_LENGTH = data.length;
+  const ITEM_LENGTH = dataLength;
   const VALID_LENGTH = ITEM_LENGTH - 1;
   const TOTAL_WIDTH = size * ITEM_LENGTH;
   const HALF_WIDTH = 0.5 * size;
+  const viewCount = _viewCount !== null && _viewCount !== void 0 ? _viewCount : Math.round((ITEM_LENGTH - 1) / 2);
   const positiveCount = type === "positive" ? viewCount : VALID_LENGTH - viewCount;
   let startPos = size * index;
   if (index > positiveCount) startPos = (index - ITEM_LENGTH) * size;
@@ -32,7 +33,7 @@ export const useOffsetX = (opts, visibleRanges) => {
     }
 
     return handlerOffset.value + size * index;
-  }, [loop, data, viewCount, type, size, visibleRanges]);
+  }, [loop, dataLength, viewCount, type, size, visibleRanges]);
   return x;
 };
 //# sourceMappingURL=useOffsetX.js.map

package/lib/module/hooks/useOffsetX.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOffsetX.ts"],"names":["Extrapolate","interpolate","useDerivedValue","useOffsetX","opts","visibleRanges","handlerOffset","index","size","loop","data","type","viewCount","Math","round","length","ITEM_LENGTH","VALID_LENGTH","TOTAL_WIDTH","HALF_WIDTH","positiveCount","startPos","MAX","MIN","x","negativeRange","positiveRange","value","Number","MAX_SAFE_INTEGER","inputRange","MIN_VALUE","outputRange","CLAMP"],"mappings":"AACA,SACEA,WADF,EAEEC,WAFF,EAGEC,eAHF,QAIO,yBAJP;AAkBA,OAAO,MAAMC,UAAU,GAAG,CAACC,IAAD,EAAcC,aAAd,KAAgD;AACxE,QAAM;AACJC,IAAAA,aADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAHI;AAIJC,IAAAA,IAJI;AAKJC,IAAAA,IALI;AAMJC,IAAAA,IAAI,GAAG,UANH;AAOJC,IAAAA,SAAS,GAAGC,IAAI,CAACC,KAAL,CAAW,CAACJ,IAAI,CAACK,MAAL,GAAc,CAAf,IAAoB,CAA/B;AAPR,MAQFX,IARJ;AAUA,QAAMY,WAAW,GAAGN,IAAI,CAACK,MAAzB;AACA,QAAME,YAAY,GAAGD,WAAW,GAAG,CAAnC;AACA,QAAME,WAAW,GAAGV,IAAI,GAAGQ,WAA3B;AACA,QAAMG,UAAU,GAAG,MAAMX,IAAzB;AAEA,QAAMY,aAAa,GACXT,IAAI,KAAK,UAAT,GAAsBC,SAAtB,GAAkCK,YAAY,GAAGL,SADzD;AAGA,MAAIS,QAAQ,GAAGb,IAAI,GAAGD,KAAtB;AACA,MAAIA,KAAK,GAAGa,aAAZ,EACEC,QAAQ,GAAG,CAACd,KAAK,GAAGS,WAAT,IAAwBR,IAAnC;AAEF,QAAMc,GAAG,GAAGF,aAAa,GAAGZ,IAA5B;AACA,QAAMe,GAAG,GAAG,EAAE,CAACN,YAAY,GAAGG,aAAhB,IAAiCZ,IAAnC,CAAZ;AAEA,QAAMgB,CAAC,GAAGtB,eAAe,CAAC,MAAM;AAC9B,UAAM;AAAEuB,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAmCrB,aAAa,CAACsB,KAAvD;AACA,QACE,CAACpB,KAAK,GAAGkB,aAAa,CAAC,CAAD,CAArB,IAA4BlB,KAAK,GAAGkB,aAAa,CAAC,CAAD,CAAlD,MACUlB,KAAK,GAAGmB,aAAa,CAAC,CAAD,CAArB,IAA4BnB,KAAK,GAAGmB,aAAa,CAAC,CAAD,CAD3D,CADF,EAIE,OAAOE,MAAM,CAACC,gBAAd;;AAEF,QAAIpB,IAAJ,EAAU;AACR,YAAMqB,UAAU,GAAG,CACjB,CAACZ,WADgB,EAEjBK,GAAG,GAAGJ,UAAN,GAAmBE,QAAnB,GAA8BO,MAAM,CAACG,SAFpB,EAGjBR,GAAG,GAAGJ,UAAN,GAAmBE,QAHF,EAIjB,CAJiB,EAKjBC,GAAG,GAAGH,UAAN,GAAmBE,QALF,EAMjBC,GAAG,GAAGH,UAAN,GAAmBE,QAAnB,GAA8BO,MAAM,CAACG,SANpB,EAOjBb,WAPiB,CAAnB;AAUA,YAAMc,WAAW,GAAG,CAClBX,QADkB,EAElBC,GAAG,GAAGH,UAAN,GAAmBS,MAAM,CAACG,SAFR,EAGlBR,GAAG,GAAGJ,UAHY,EAIlBE,QAJkB,EAKlBC,GAAG,GAAGH,UALY,EAMlBI,GAAG,GAAGJ,UAAN,GAAmBS,MAAM,CAACG,SANR,EAOlBV,QAPkB,CAApB;AAUA,aAAOpB,WAAW,CAChBK,aAAa,CAACqB,KADE,EAEhBG,UAFgB,EAGhBE,WAHgB,EAIhBhC,WAAW,CAACiC,KAJI,CAAlB;AAMD;;AAED,WAAO3B,aAAa,CAACqB,KAAd,GAAsBnB,IAAI,GAAGD,KAApC;AACD,GAtCwB,EAsCtB,CAACE,IAAD,EAAOC,IAAP,EAAaE,SAAb,EAAwBD,IAAxB,EAA8BH,IAA9B,EAAoCH,aAApC,CAtCsB,CAAzB;AAwCA,SAAOmB,CAAP;AACD,CAnEM","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport {\n  Extrapolate,\n  interpolate,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { IVisibleRanges } from \"./useVisibleRanges\";\n\nexport interface IOpts {\n  index: number\n  size: number\n  handlerOffset: Animated.SharedValue<number>\n  data: unknown[]\n  type?: \"positive\" | \"negative\"\n  viewCount?: number\n  loop?: boolean\n}\n\nexport const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {\n  const {\n    handlerOffset,\n    index,\n    size,\n    loop,\n    data,\n    type = \"positive\",\n    viewCount = Math.round((data.length - 1) / 2),\n  } = opts;\n\n  const ITEM_LENGTH = data.length;\n  const VALID_LENGTH = ITEM_LENGTH - 1;\n  const TOTAL_WIDTH = size * ITEM_LENGTH;\n  const HALF_WIDTH = 0.5 * size;\n\n  const positiveCount\n        = type === \"positive\" ? viewCount : VALID_LENGTH - viewCount;\n\n  let startPos = size * index;\n  if (index > positiveCount)\n    startPos = (index - ITEM_LENGTH) * size;\n\n  const MAX = positiveCount * size;\n  const MIN = -((VALID_LENGTH - positiveCount) * size);\n\n  const x = useDerivedValue(() => {\n    const { negativeRange, positiveRange } = visibleRanges.value;\n    if (\n      (index < negativeRange[0] || index > negativeRange[1])\n            && (index < positiveRange[0] || index > positiveRange[1])\n    )\n      return Number.MAX_SAFE_INTEGER;\n\n    if (loop) {\n      const inputRange = [\n        -TOTAL_WIDTH,\n        MIN - HALF_WIDTH - startPos - Number.MIN_VALUE,\n        MIN - HALF_WIDTH - startPos,\n        0,\n        MAX + HALF_WIDTH - startPos,\n        MAX + HALF_WIDTH - startPos + Number.MIN_VALUE,\n        TOTAL_WIDTH,\n      ];\n\n      const outputRange = [\n        startPos,\n        MAX + HALF_WIDTH - Number.MIN_VALUE,\n        MIN - HALF_WIDTH,\n        startPos,\n        MAX + HALF_WIDTH,\n        MIN - HALF_WIDTH + Number.MIN_VALUE,\n        startPos,\n      ];\n\n      return interpolate(\n        handlerOffset.value,\n        inputRange,\n        outputRange,\n        Extrapolate.CLAMP,\n      );\n    }\n\n    return handlerOffset.value + size * index;\n  }, [loop, data, viewCount, type, size, visibleRanges]);\n\n  return x;\n};\n"]}
+{"version":3,"sources":["useOffsetX.ts"],"names":["Extrapolate","interpolate","useDerivedValue","useOffsetX","opts","visibleRanges","handlerOffset","index","size","loop","dataLength","type","viewCount","_viewCount","ITEM_LENGTH","VALID_LENGTH","TOTAL_WIDTH","HALF_WIDTH","Math","round","positiveCount","startPos","MAX","MIN","x","negativeRange","positiveRange","value","Number","MAX_SAFE_INTEGER","inputRange","MIN_VALUE","outputRange","CLAMP"],"mappings":"AACA,SACEA,WADF,EAEEC,WAFF,EAGEC,eAHF,QAIO,yBAJP;AAkBA,OAAO,MAAMC,UAAU,GAAG,CAACC,IAAD,EAAcC,aAAd,KAAgD;AACxE,QAAM;AACJC,IAAAA,aADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAHI;AAIJC,IAAAA,IAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,IAAI,GAAG,UANH;AAOJC,IAAAA,SAAS,EAAEC;AAPP,MAQFT,IARJ;AAUA,QAAMU,WAAW,GAAGJ,UAApB;AACA,QAAMK,YAAY,GAAGD,WAAW,GAAG,CAAnC;AACA,QAAME,WAAW,GAAGR,IAAI,GAAGM,WAA3B;AACA,QAAMG,UAAU,GAAG,MAAMT,IAAzB;AAEA,QAAMI,SAAS,GAAGC,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBK,IAAI,CAACC,KAAL,CAAW,CAACL,WAAW,GAAG,CAAf,IAAoB,CAA/B,CAAhC;AACA,QAAMM,aAAa,GACXT,IAAI,KAAK,UAAT,GAAsBC,SAAtB,GAAkCG,YAAY,GAAGH,SADzD;AAGA,MAAIS,QAAQ,GAAGb,IAAI,GAAGD,KAAtB;AACA,MAAIA,KAAK,GAAGa,aAAZ,EACEC,QAAQ,GAAG,CAACd,KAAK,GAAGO,WAAT,IAAwBN,IAAnC;AAEF,QAAMc,GAAG,GAAGF,aAAa,GAAGZ,IAA5B;AACA,QAAMe,GAAG,GAAG,EAAE,CAACR,YAAY,GAAGK,aAAhB,IAAiCZ,IAAnC,CAAZ;AAEA,QAAMgB,CAAC,GAAGtB,eAAe,CAAC,MAAM;AAC9B,UAAM;AAAEuB,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAmCrB,aAAa,CAACsB,KAAvD;AACA,QACE,CAACpB,KAAK,GAAGkB,aAAa,CAAC,CAAD,CAArB,IAA4BlB,KAAK,GAAGkB,aAAa,CAAC,CAAD,CAAlD,MACUlB,KAAK,GAAGmB,aAAa,CAAC,CAAD,CAArB,IAA4BnB,KAAK,GAAGmB,aAAa,CAAC,CAAD,CAD3D,CADF,EAIE,OAAOE,MAAM,CAACC,gBAAd;;AAEF,QAAIpB,IAAJ,EAAU;AACR,YAAMqB,UAAU,GAAG,CACjB,CAACd,WADgB,EAEjBO,GAAG,GAAGN,UAAN,GAAmBI,QAAnB,GAA8BO,MAAM,CAACG,SAFpB,EAGjBR,GAAG,GAAGN,UAAN,GAAmBI,QAHF,EAIjB,CAJiB,EAKjBC,GAAG,GAAGL,UAAN,GAAmBI,QALF,EAMjBC,GAAG,GAAGL,UAAN,GAAmBI,QAAnB,GAA8BO,MAAM,CAACG,SANpB,EAOjBf,WAPiB,CAAnB;AAUA,YAAMgB,WAAW,GAAG,CAClBX,QADkB,EAElBC,GAAG,GAAGL,UAAN,GAAmBW,MAAM,CAACG,SAFR,EAGlBR,GAAG,GAAGN,UAHY,EAIlBI,QAJkB,EAKlBC,GAAG,GAAGL,UALY,EAMlBM,GAAG,GAAGN,UAAN,GAAmBW,MAAM,CAACG,SANR,EAOlBV,QAPkB,CAApB;AAUA,aAAOpB,WAAW,CAChBK,aAAa,CAACqB,KADE,EAEhBG,UAFgB,EAGhBE,WAHgB,EAIhBhC,WAAW,CAACiC,KAJI,CAAlB;AAMD;;AAED,WAAO3B,aAAa,CAACqB,KAAd,GAAsBnB,IAAI,GAAGD,KAApC;AACD,GAtCwB,EAsCtB,CAACE,IAAD,EAAOC,UAAP,EAAmBE,SAAnB,EAA8BD,IAA9B,EAAoCH,IAApC,EAA0CH,aAA1C,CAtCsB,CAAzB;AAwCA,SAAOmB,CAAP;AACD,CApEM","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport {\n  Extrapolate,\n  interpolate,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { IVisibleRanges } from \"./useVisibleRanges\";\n\nexport interface IOpts {\n  index: number\n  size: number\n  handlerOffset: Animated.SharedValue<number>\n  dataLength: number\n  type?: \"positive\" | \"negative\"\n  viewCount?: number\n  loop?: boolean\n}\n\nexport const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {\n  const {\n    handlerOffset,\n    index,\n    size,\n    loop,\n    dataLength,\n    type = \"positive\",\n    viewCount: _viewCount,\n  } = opts;\n\n  const ITEM_LENGTH = dataLength;\n  const VALID_LENGTH = ITEM_LENGTH - 1;\n  const TOTAL_WIDTH = size * ITEM_LENGTH;\n  const HALF_WIDTH = 0.5 * size;\n\n  const viewCount = _viewCount ?? Math.round((ITEM_LENGTH - 1) / 2);\n  const positiveCount\n        = type === \"positive\" ? viewCount : VALID_LENGTH - viewCount;\n\n  let startPos = size * index;\n  if (index > positiveCount)\n    startPos = (index - ITEM_LENGTH) * size;\n\n  const MAX = positiveCount * size;\n  const MIN = -((VALID_LENGTH - positiveCount) * size);\n\n  const x = useDerivedValue(() => {\n    const { negativeRange, positiveRange } = visibleRanges.value;\n    if (\n      (index < negativeRange[0] || index > negativeRange[1])\n            && (index < positiveRange[0] || index > positiveRange[1])\n    )\n      return Number.MAX_SAFE_INTEGER;\n\n    if (loop) {\n      const inputRange = [\n        -TOTAL_WIDTH,\n        MIN - HALF_WIDTH - startPos - Number.MIN_VALUE,\n        MIN - HALF_WIDTH - startPos,\n        0,\n        MAX + HALF_WIDTH - startPos,\n        MAX + HALF_WIDTH - startPos + Number.MIN_VALUE,\n        TOTAL_WIDTH,\n      ];\n\n      const outputRange = [\n        startPos,\n        MAX + HALF_WIDTH - Number.MIN_VALUE,\n        MIN - HALF_WIDTH,\n        startPos,\n        MAX + HALF_WIDTH,\n        MIN - HALF_WIDTH + Number.MIN_VALUE,\n        startPos,\n      ];\n\n      return interpolate(\n        handlerOffset.value,\n        inputRange,\n        outputRange,\n        Extrapolate.CLAMP,\n      );\n    }\n\n    return handlerOffset.value + size * index;\n  }, [loop, dataLength, viewCount, type, size, visibleRanges]);\n\n  return x;\n};\n"]}

package/lib/module/hooks/useOnProgressChange.js

@@ -5,11 +5,10 @@ export function useOnProgressChange(opts) {
     autoFillData,
     loop,
     offsetX,
-    rawData,
     size,
+    rawDataLength,
     onProgressChange
   } = opts;
-  const rawDataLength = rawData.length;
   useAnimatedReaction(() => offsetX.value, _value => {
     let value = computedOffsetXValueWithAutoFillData({
       value: _value,

package/lib/module/hooks/useOnProgressChange.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOnProgressChange.ts"],"names":["runOnJS","useAnimatedReaction","computedOffsetXValueWithAutoFillData","useOnProgressChange","opts","autoFillData","loop","offsetX","rawData","size","onProgressChange","rawDataLength","length","value","_value","Math","max","min","absoluteProgress","abs"],"mappings":"AACA,SACEA,OADF,EAEEC,mBAFF,QAGO,yBAHP;AAMA,SAASC,oCAAT,QAAqD,mCAArD;AAEA,OAAO,SAASC,mBAAT,CACLC,IADK,EAQL;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,IAAhB;AAAsBC,IAAAA,OAAtB;AAA+BC,IAAAA,OAA/B;AAAwCC,IAAAA,IAAxC;AAA8CC,IAAAA;AAA9C,MACEN,IADR;AAGA,QAAMO,aAAa,GAAGH,OAAO,CAACI,MAA9B;AAEAX,EAAAA,mBAAmB,CACjB,MAAMM,OAAO,CAACM,KADG,EAEhBC,MAAD,IAAY;AACV,QAAID,KAAK,GAAGX,oCAAoC,CAAC;AAC/CW,MAAAA,KAAK,EAAEC,MADwC;AAE/CH,MAAAA,aAF+C;AAG/CF,MAAAA,IAH+C;AAI/CJ,MAAAA,YAJ+C;AAK/CC,MAAAA;AAL+C,KAAD,CAAhD;;AAQA,QAAI,CAACA,IAAL,EAAW;AACTO,MAAAA,KAAK,GAAGE,IAAI,CAACC,GAAL,CACN,EAAE,CAACL,aAAa,GAAG,CAAjB,IAAsBF,IAAxB,CADM,EAENM,IAAI,CAACE,GAAL,CAASJ,KAAT,EAAgB,CAAhB,CAFM,CAAR;AAID;;AAED,QAAIK,gBAAgB,GAAGH,IAAI,CAACI,GAAL,CAASN,KAAK,GAAGJ,IAAjB,CAAvB;AAEA,QAAII,KAAK,GAAG,CAAZ,EACEK,gBAAgB,GAAGP,aAAa,GAAGO,gBAAnC;AAEF,QAAIR,gBAAJ,EACEV,OAAO,CAACU,gBAAD,CAAP,CAA0BG,KAA1B,EAAiCK,gBAAjC;AACH,GAzBgB,EA0BjB,CAACZ,IAAD,EAAOD,YAAP,EAAqBM,aAArB,EAAoCD,gBAApC,CA1BiB,CAAnB;AA4BD","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport {\n  runOnJS,\n  useAnimatedReaction,\n} from \"react-native-reanimated\";\n\nimport type { TCarouselProps } from \"../types\";\nimport { computedOffsetXValueWithAutoFillData } from \"../utils/computedWithAutoFillData\";\n\nexport function useOnProgressChange(\n  opts: {\n    size: number\n    autoFillData: boolean\n    loop: boolean\n    offsetX: Animated.SharedValue<number>\n    rawData: TCarouselProps[\"data\"]\n  } & Pick<TCarouselProps, \"onProgressChange\">,\n) {\n  const { autoFillData, loop, offsetX, rawData, size, onProgressChange }\n        = opts;\n\n  const rawDataLength = rawData.length;\n\n  useAnimatedReaction(\n    () => offsetX.value,\n    (_value) => {\n      let value = computedOffsetXValueWithAutoFillData({\n        value: _value,\n        rawDataLength,\n        size,\n        autoFillData,\n        loop,\n      });\n\n      if (!loop) {\n        value = Math.max(\n          -((rawDataLength - 1) * size),\n          Math.min(value, 0),\n        );\n      }\n\n      let absoluteProgress = Math.abs(value / size);\n\n      if (value > 0)\n        absoluteProgress = rawDataLength - absoluteProgress;\n\n      if (onProgressChange)\n        runOnJS(onProgressChange)(value, absoluteProgress);\n    },\n    [loop, autoFillData, rawDataLength, onProgressChange],\n  );\n}\n"]}
+{"version":3,"sources":["useOnProgressChange.ts"],"names":["runOnJS","useAnimatedReaction","computedOffsetXValueWithAutoFillData","useOnProgressChange","opts","autoFillData","loop","offsetX","size","rawDataLength","onProgressChange","value","_value","Math","max","min","absoluteProgress","abs"],"mappings":"AACA,SACEA,OADF,EAEEC,mBAFF,QAGO,yBAHP;AAMA,SAASC,oCAAT,QAAqD,mCAArD;AAEA,OAAO,SAASC,mBAAT,CACLC,IADK,EAQL;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,IAAhB;AAAsBC,IAAAA,OAAtB;AAA+BC,IAAAA,IAA/B;AAAqCC,IAAAA,aAArC;AAAoDC,IAAAA;AAApD,MACEN,IADR;AAGAH,EAAAA,mBAAmB,CACjB,MAAMM,OAAO,CAACI,KADG,EAEhBC,MAAD,IAAY;AACV,QAAID,KAAK,GAAGT,oCAAoC,CAAC;AAC/CS,MAAAA,KAAK,EAAEC,MADwC;AAE/CH,MAAAA,aAF+C;AAG/CD,MAAAA,IAH+C;AAI/CH,MAAAA,YAJ+C;AAK/CC,MAAAA;AAL+C,KAAD,CAAhD;;AAQA,QAAI,CAACA,IAAL,EAAW;AACTK,MAAAA,KAAK,GAAGE,IAAI,CAACC,GAAL,CACN,EAAE,CAACL,aAAa,GAAG,CAAjB,IAAsBD,IAAxB,CADM,EAENK,IAAI,CAACE,GAAL,CAASJ,KAAT,EAAgB,CAAhB,CAFM,CAAR;AAID;;AAED,QAAIK,gBAAgB,GAAGH,IAAI,CAACI,GAAL,CAASN,KAAK,GAAGH,IAAjB,CAAvB;AAEA,QAAIG,KAAK,GAAG,CAAZ,EACEK,gBAAgB,GAAGP,aAAa,GAAGO,gBAAnC;AAEF,QAAIN,gBAAJ,EACEV,OAAO,CAACU,gBAAD,CAAP,CAA0BC,KAA1B,EAAiCK,gBAAjC;AACH,GAzBgB,EA0BjB,CAACV,IAAD,EAAOD,YAAP,EAAqBI,aAArB,EAAoCC,gBAApC,CA1BiB,CAAnB;AA4BD","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport {\n  runOnJS,\n  useAnimatedReaction,\n} from \"react-native-reanimated\";\n\nimport type { TCarouselProps } from \"../types\";\nimport { computedOffsetXValueWithAutoFillData } from \"../utils/computedWithAutoFillData\";\n\nexport function useOnProgressChange(\n  opts: {\n    size: number\n    autoFillData: boolean\n    loop: boolean\n    offsetX: Animated.SharedValue<number>\n    rawDataLength: number\n  } & Pick<TCarouselProps, \"onProgressChange\">,\n) {\n  const { autoFillData, loop, offsetX, size, rawDataLength, onProgressChange }\n        = opts;\n\n  useAnimatedReaction(\n    () => offsetX.value,\n    (_value) => {\n      let value = computedOffsetXValueWithAutoFillData({\n        value: _value,\n        rawDataLength,\n        size,\n        autoFillData,\n        loop,\n      });\n\n      if (!loop) {\n        value = Math.max(\n          -((rawDataLength - 1) * size),\n          Math.min(value, 0),\n        );\n      }\n\n      let absoluteProgress = Math.abs(value / size);\n\n      if (value > 0)\n        absoluteProgress = rawDataLength - absoluteProgress;\n\n      if (onProgressChange)\n        runOnJS(onProgressChange)(value, absoluteProgress);\n    },\n    [loop, autoFillData, rawDataLength, onProgressChange],\n  );\n}\n"]}

package/lib/module/hooks/usePropsErrorBoundary.js

@@ -3,9 +3,8 @@ export function usePropsErrorBoundary(props) {
   React.useEffect(() => {
     const {
       defaultIndex,
-      data
+      dataLength: viewCount
     } = props;
-    const viewCount = data.length;
 
     if (typeof defaultIndex === "number" && viewCount > 0) {
       if (defaultIndex < 0 || defaultIndex >= viewCount) {

package/lib/module/hooks/usePropsErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePropsErrorBoundary.ts"],"names":["React","usePropsErrorBoundary","props","useEffect","defaultIndex","data","viewCount","length","Error","mode","vertical","width","height"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,OAAO,SAASC,qBAAT,CAA+BC,KAA/B,EAAsD;AAC3DF,EAAAA,KAAK,CAACG,SAAN,CAAgB,MAAM;AACpB,UAAM;AAAEC,MAAAA,YAAF;AAAgBC,MAAAA;AAAhB,QAAyBH,KAA/B;AAEA,UAAMI,SAAS,GAAGD,IAAI,CAACE,MAAvB;;AACA,QAAI,OAAOH,YAAP,KAAwB,QAAxB,IAAoCE,SAAS,GAAG,CAApD,EAAuD;AACrD,UAAIF,YAAY,GAAG,CAAf,IAAoBA,YAAY,IAAIE,SAAxC,EAAmD;AACjD,cAAM,IAAIE,KAAJ,CACJ,mDADI,CAAN;AAGD;AACF,KAVmB,CAYpB;;;AACA,QAAI,CAACN,KAAK,CAACO,IAAP,IAAeP,KAAK,CAACO,IAAN,KAAe,UAAlC,EAA8C;AAC5C,UAAI,CAACP,KAAK,CAACQ,QAAP,IAAmB,CAACR,KAAK,CAACS,KAA9B,EAAqC;AACnC,cAAM,IAAIH,KAAJ,CACJ,qDADI,CAAN;AAGD;;AACD,UAAIN,KAAK,CAACQ,QAAN,IAAkB,CAACR,KAAK,CAACU,MAA7B,EAAqC;AACnC,cAAM,IAAIJ,KAAJ,CACJ,oDADI,CAAN;AAGD;AACF;AACF,GAzBD,EAyBG,CAACN,KAAD,CAzBH;AA0BD","sourcesContent":["import React from \"react\";\n\nimport type { TCarouselProps } from \"../types\";\n\nexport function usePropsErrorBoundary(props: TCarouselProps) {\n  React.useEffect(() => {\n    const { defaultIndex, data } = props;\n\n    const viewCount = data.length;\n    if (typeof defaultIndex === \"number\" && viewCount > 0) {\n      if (defaultIndex < 0 || defaultIndex >= viewCount) {\n        throw new Error(\n          \"DefaultIndex must be in the range of data length.\",\n        );\n      }\n    }\n\n    // TODO\n    if (!props.mode || props.mode === \"parallax\") {\n      if (!props.vertical && !props.width) {\n        throw new Error(\n          \"`width` must be specified for horizontal carousels.\",\n        );\n      }\n      if (props.vertical && !props.height) {\n        throw new Error(\n          \"`height` must be specified for vertical carousels.\",\n        );\n      }\n    }\n  }, [props]);\n}\n"]}
+{"version":3,"sources":["usePropsErrorBoundary.ts"],"names":["React","usePropsErrorBoundary","props","useEffect","defaultIndex","dataLength","viewCount","Error","mode","vertical","width","height"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,OAAO,SAASC,qBAAT,CAA+BC,KAA/B,EAA+E;AACpFF,EAAAA,KAAK,CAACG,SAAN,CAAgB,MAAM;AACpB,UAAM;AAAEC,MAAAA,YAAF;AAAgBC,MAAAA,UAAU,EAAEC;AAA5B,QAA0CJ,KAAhD;;AAEA,QAAI,OAAOE,YAAP,KAAwB,QAAxB,IAAoCE,SAAS,GAAG,CAApD,EAAuD;AACrD,UAAIF,YAAY,GAAG,CAAf,IAAoBA,YAAY,IAAIE,SAAxC,EAAmD;AACjD,cAAM,IAAIC,KAAJ,CACJ,mDADI,CAAN;AAGD;AACF,KATmB,CAWpB;;;AACA,QAAI,CAACL,KAAK,CAACM,IAAP,IAAeN,KAAK,CAACM,IAAN,KAAe,UAAlC,EAA8C;AAC5C,UAAI,CAACN,KAAK,CAACO,QAAP,IAAmB,CAACP,KAAK,CAACQ,KAA9B,EAAqC;AACnC,cAAM,IAAIH,KAAJ,CACJ,qDADI,CAAN;AAGD;;AACD,UAAIL,KAAK,CAACO,QAAN,IAAkB,CAACP,KAAK,CAACS,MAA7B,EAAqC;AACnC,cAAM,IAAIJ,KAAJ,CACJ,oDADI,CAAN;AAGD;AACF;AACF,GAxBD,EAwBG,CAACL,KAAD,CAxBH;AAyBD","sourcesContent":["import React from \"react\";\n\nimport type { TCarouselProps } from \"../types\";\n\nexport function usePropsErrorBoundary(props: TCarouselProps & { dataLength: number }) {\n  React.useEffect(() => {\n    const { defaultIndex, dataLength: viewCount } = props;\n\n    if (typeof defaultIndex === \"number\" && viewCount > 0) {\n      if (defaultIndex < 0 || defaultIndex >= viewCount) {\n        throw new Error(\n          \"DefaultIndex must be in the range of data length.\",\n        );\n      }\n    }\n\n    // TODO\n    if (!props.mode || props.mode === \"parallax\") {\n      if (!props.vertical && !props.width) {\n        throw new Error(\n          \"`width` must be specified for horizontal carousels.\",\n        );\n      }\n      if (props.vertical && !props.height) {\n        throw new Error(\n          \"`height` must be specified for vertical carousels.\",\n        );\n      }\n    }\n  }, [props]);\n}\n"]}

package/lib/module/layouts/BaseLayout.js

@@ -17,7 +17,7 @@ export const BaseLayout = props => {
   const {
     props: {
       loop,
-      data,
+      dataLength,
       width,
       height,
       vertical,
@@ -32,7 +32,7 @@ export const BaseLayout = props => {
     handlerOffset,
     index,
     size,
-    data,
+    dataLength,
     loop,
     ...(typeof customConfig === "function" ? customConfig() : {})
   };
@@ -46,7 +46,7 @@ export const BaseLayout = props => {
       handlerOffset,
       index,
       size,
-      data,
+      dataLength,
       loop,
       type: snapDirection === "right" ? "negative" : "positive",
       viewCount: showLength

package/lib/module/layouts/BaseLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useCheckMounted","useOffsetX","LazyView","CTX","BaseLayout","props","mounted","handlerOffset","index","children","visibleRanges","animationStyle","context","useContext","loop","data","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","current","position"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,EAGEC,gBAHF,EAIEC,eAJF,QAKO,yBALP;AASA,SAASC,eAAT,QAAgC,0BAAhC;AAEA,SAASC,UAAT,QAA2B,qBAA3B;AAEA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,GAAT,QAAoB,UAApB;AAIA,OAAO,MAAMC,UAQX,GAAIC,KAAD,IAAW;AACd,QAAMC,OAAO,GAAGN,eAAe,EAA/B;AACA,QAAM;AAAEO,IAAAA,aAAF;AAAiBC,IAAAA,KAAjB;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA,aAAlC;AAAiDC,IAAAA;AAAjD,MACEN,KADR;AAGA,QAAMO,OAAO,GAAGlB,KAAK,CAACmB,UAAN,CAAiBV,GAAjB,CAAhB;AACA,QAAM;AACJE,IAAAA,KAAK,EAAE;AACLS,MAAAA,IADK;AAELC,MAAAA,IAFK;AAGLC,MAAAA,KAHK;AAILC,MAAAA,MAJK;AAKLC,MAAAA,QALK;AAMLC,MAAAA,YANK;AAOLC,MAAAA,IAPK;AAQLC,MAAAA;AARK;AADH,MAWFT,OAXJ;AAYA,QAAMU,IAAI,GAAGJ,QAAQ,GAAGD,MAAH,GAAYD,KAAjC;AACA,QAAM,CAACO,YAAD,EAAeC,eAAf,IAAkC9B,KAAK,CAAC+B,QAAN,CAAe,KAAf,CAAxC;AACA,MAAIC,aAAoB,GAAG;AACzBnB,IAAAA,aADyB;AAEzBC,IAAAA,KAFyB;AAGzBc,IAAAA,IAHyB;AAIzBP,IAAAA,IAJyB;AAKzBD,IAAAA,IALyB;AAMzB,QAAI,OAAOK,YAAP,KAAwB,UAAxB,GAAqCA,YAAY,EAAjD,GAAsD,EAA1D;AANyB,GAA3B;;AASA,MAAIC,IAAI,KAAK,kBAAb,EAAiC;AAC/B,UAAM;AAAEO,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAgCP,UAAtC;AAEAK,IAAAA,aAAa,GAAG;AACdnB,MAAAA,aADc;AAEdC,MAAAA,KAFc;AAGdc,MAAAA,IAHc;AAIdP,MAAAA,IAJc;AAKdD,MAAAA,IALc;AAMde,MAAAA,IAAI,EAAEF,aAAa,KAAK,OAAlB,GAA4B,UAA5B,GAAyC,UANjC;AAOdG,MAAAA,SAAS,EAAEF;AAPG,KAAhB;AASD;;AAED,QAAMG,CAAC,GAAG9B,UAAU,CAACyB,aAAD,EAAgBhB,aAAhB,CAApB;AACA,QAAMsB,cAAc,GAAGjC,eAAe,CAAC,MAAMgC,CAAC,CAACE,KAAF,GAAUX,IAAjB,EAAuB,CAACS,CAAD,EAAIT,IAAJ,CAAvB,CAAtC;AACA,QAAMY,aAAa,GAAGpC,gBAAgB,CACpC,MAAMa,cAAc,CAACoB,CAAC,CAACE,KAAF,GAAUX,IAAX,CADgB,EAEpC,CAACX,cAAD,CAFoC,CAAtC;AAKA,QAAMwB,UAAU,GAAGzC,KAAK,CAAC0C,WAAN,CACjB,CAACC,aAAD,EAA0BC,aAA1B,KAAsD;AACpDhC,IAAAA,OAAO,CAACiC,OAAR,IACaf,eAAe,CACfhB,KAAK,IAAI6B,aAAa,CAAC,CAAD,CAAtB,IAA6B7B,KAAK,IAAI6B,aAAa,CAAC,CAAD,CAApD,IACU7B,KAAK,IAAI8B,aAAa,CAAC,CAAD,CAAtB,IAA6B9B,KAAK,IAAI8B,aAAa,CAAC,CAAD,CAF7C,CAD5B;AAKD,GAPgB,EAQjB,CAAC9B,KAAD,EAAQF,OAAR,CARiB,CAAnB;AAWAT,EAAAA,mBAAmB,CACjB,MAAMa,aAAa,CAACuB,KADH,EAEjB,MAAM;AACJrC,IAAAA,OAAO,CAACuC,UAAD,CAAP,CACEzB,aAAa,CAACuB,KAAd,CAAoBI,aADtB,EAEE3B,aAAa,CAACuB,KAAd,CAAoBK,aAFtB;AAID,GAPgB,EAQjB,CAAC5B,aAAa,CAACuB,KAAf,CARiB,CAAnB;AAWA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACL;AACEjB,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADlB;AAEEC,MAAAA,MAAM,EAAEA,MAAM,IAAI,MAFpB;AAGEuB,MAAAA,QAAQ,EAAE;AAHZ,KADK,EAMLN,aANK;AADT,kBAUE,oBAAC,QAAD;AAAU,IAAA,YAAY,EAAEX;AAAxB,KACGd,QAAQ,CAAC;AAAEuB,IAAAA;AAAF,GAAD,CADX,CAVF,CADF;AAgBD,CAhGM","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { AnimatedStyleProp } from \"react-native-reanimated\";\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./stack\";\n\nimport { useCheckMounted } from \"../hooks/useCheckMounted\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { LazyView } from \"../LazyView\";\nimport { CTX } from \"../store\";\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n  index: number\n  handlerOffset: Animated.SharedValue<number>\n  visibleRanges: IVisibleRanges\n  animationStyle: TAnimationStyle\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>\n  }) => React.ReactElement\n}> = (props) => {\n  const mounted = useCheckMounted();\n  const { handlerOffset, index, children, visibleRanges, animationStyle }\n        = props;\n\n  const context = React.useContext(CTX);\n  const {\n    props: {\n      loop,\n      data,\n      width,\n      height,\n      vertical,\n      customConfig,\n      mode,\n      modeConfig,\n    },\n  } = context;\n  const size = vertical ? height : width;\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n  let offsetXConfig: IOpts = {\n    handlerOffset,\n    index,\n    size,\n    data,\n    loop,\n    ...(typeof customConfig === \"function\" ? customConfig() : {}),\n  };\n\n  if (mode === \"horizontal-stack\") {\n    const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n    offsetXConfig = {\n      handlerOffset,\n      index,\n      size,\n      data,\n      loop,\n      type: snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: showLength,\n    };\n  }\n\n  const x = useOffsetX(offsetXConfig, visibleRanges);\n  const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n  const animatedStyle = useAnimatedStyle(\n    () => animationStyle(x.value / size),\n    [animationStyle],\n  );\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      mounted.current\n                && setShouldUpdate(\n                  (index >= negativeRange[0] && index <= negativeRange[1])\n                        || (index >= positiveRange[0] && index <= positiveRange[1]),\n                );\n    },\n    [index, mounted],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        animatedStyle,\n      ]}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>\n        {children({ animationValue })}\n      </LazyView>\n    </Animated.View>\n  );\n};\n"]}
+{"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useCheckMounted","useOffsetX","LazyView","CTX","BaseLayout","props","mounted","handlerOffset","index","children","visibleRanges","animationStyle","context","useContext","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","current","position"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,EAGEC,gBAHF,EAIEC,eAJF,QAKO,yBALP;AASA,SAASC,eAAT,QAAgC,0BAAhC;AAEA,SAASC,UAAT,QAA2B,qBAA3B;AAEA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,GAAT,QAAoB,UAApB;AAIA,OAAO,MAAMC,UAQX,GAAIC,KAAD,IAAW;AACd,QAAMC,OAAO,GAAGN,eAAe,EAA/B;AACA,QAAM;AAAEO,IAAAA,aAAF;AAAiBC,IAAAA,KAAjB;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA,aAAlC;AAAiDC,IAAAA;AAAjD,MACEN,KADR;AAGA,QAAMO,OAAO,GAAGlB,KAAK,CAACmB,UAAN,CAAiBV,GAAjB,CAAhB;AACA,QAAM;AACJE,IAAAA,KAAK,EAAE;AACLS,MAAAA,IADK;AAELC,MAAAA,UAFK;AAGLC,MAAAA,KAHK;AAILC,MAAAA,MAJK;AAKLC,MAAAA,QALK;AAMLC,MAAAA,YANK;AAOLC,MAAAA,IAPK;AAQLC,MAAAA;AARK;AADH,MAWFT,OAXJ;AAYA,QAAMU,IAAI,GAAGJ,QAAQ,GAAGD,MAAH,GAAYD,KAAjC;AACA,QAAM,CAACO,YAAD,EAAeC,eAAf,IAAkC9B,KAAK,CAAC+B,QAAN,CAAe,KAAf,CAAxC;AACA,MAAIC,aAAoB,GAAG;AACzBnB,IAAAA,aADyB;AAEzBC,IAAAA,KAFyB;AAGzBc,IAAAA,IAHyB;AAIzBP,IAAAA,UAJyB;AAKzBD,IAAAA,IALyB;AAMzB,QAAI,OAAOK,YAAP,KAAwB,UAAxB,GAAqCA,YAAY,EAAjD,GAAsD,EAA1D;AANyB,GAA3B;;AASA,MAAIC,IAAI,KAAK,kBAAb,EAAiC;AAC/B,UAAM;AAAEO,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAgCP,UAAtC;AAEAK,IAAAA,aAAa,GAAG;AACdnB,MAAAA,aADc;AAEdC,MAAAA,KAFc;AAGdc,MAAAA,IAHc;AAIdP,MAAAA,UAJc;AAKdD,MAAAA,IALc;AAMde,MAAAA,IAAI,EAAEF,aAAa,KAAK,OAAlB,GAA4B,UAA5B,GAAyC,UANjC;AAOdG,MAAAA,SAAS,EAAEF;AAPG,KAAhB;AASD;;AAED,QAAMG,CAAC,GAAG9B,UAAU,CAACyB,aAAD,EAAgBhB,aAAhB,CAApB;AACA,QAAMsB,cAAc,GAAGjC,eAAe,CAAC,MAAMgC,CAAC,CAACE,KAAF,GAAUX,IAAjB,EAAuB,CAACS,CAAD,EAAIT,IAAJ,CAAvB,CAAtC;AACA,QAAMY,aAAa,GAAGpC,gBAAgB,CACpC,MAAMa,cAAc,CAACoB,CAAC,CAACE,KAAF,GAAUX,IAAX,CADgB,EAEpC,CAACX,cAAD,CAFoC,CAAtC;AAKA,QAAMwB,UAAU,GAAGzC,KAAK,CAAC0C,WAAN,CACjB,CAACC,aAAD,EAA0BC,aAA1B,KAAsD;AACpDhC,IAAAA,OAAO,CAACiC,OAAR,IACaf,eAAe,CACfhB,KAAK,IAAI6B,aAAa,CAAC,CAAD,CAAtB,IAA6B7B,KAAK,IAAI6B,aAAa,CAAC,CAAD,CAApD,IACU7B,KAAK,IAAI8B,aAAa,CAAC,CAAD,CAAtB,IAA6B9B,KAAK,IAAI8B,aAAa,CAAC,CAAD,CAF7C,CAD5B;AAKD,GAPgB,EAQjB,CAAC9B,KAAD,EAAQF,OAAR,CARiB,CAAnB;AAWAT,EAAAA,mBAAmB,CACjB,MAAMa,aAAa,CAACuB,KADH,EAEjB,MAAM;AACJrC,IAAAA,OAAO,CAACuC,UAAD,CAAP,CACEzB,aAAa,CAACuB,KAAd,CAAoBI,aADtB,EAEE3B,aAAa,CAACuB,KAAd,CAAoBK,aAFtB;AAID,GAPgB,EAQjB,CAAC5B,aAAa,CAACuB,KAAf,CARiB,CAAnB;AAWA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACL;AACEjB,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADlB;AAEEC,MAAAA,MAAM,EAAEA,MAAM,IAAI,MAFpB;AAGEuB,MAAAA,QAAQ,EAAE;AAHZ,KADK,EAMLN,aANK;AADT,kBAUE,oBAAC,QAAD;AAAU,IAAA,YAAY,EAAEX;AAAxB,KACGd,QAAQ,CAAC;AAAEuB,IAAAA;AAAF,GAAD,CADX,CAVF,CADF;AAgBD,CAhGM","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { AnimatedStyleProp } from \"react-native-reanimated\";\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./stack\";\n\nimport { useCheckMounted } from \"../hooks/useCheckMounted\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { LazyView } from \"../LazyView\";\nimport { CTX } from \"../store\";\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n  index: number\n  handlerOffset: Animated.SharedValue<number>\n  visibleRanges: IVisibleRanges\n  animationStyle: TAnimationStyle\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>\n  }) => React.ReactElement\n}> = (props) => {\n  const mounted = useCheckMounted();\n  const { handlerOffset, index, children, visibleRanges, animationStyle }\n        = props;\n\n  const context = React.useContext(CTX);\n  const {\n    props: {\n      loop,\n      dataLength,\n      width,\n      height,\n      vertical,\n      customConfig,\n      mode,\n      modeConfig,\n    },\n  } = context;\n  const size = vertical ? height : width;\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n  let offsetXConfig: IOpts = {\n    handlerOffset,\n    index,\n    size,\n    dataLength,\n    loop,\n    ...(typeof customConfig === \"function\" ? customConfig() : {}),\n  };\n\n  if (mode === \"horizontal-stack\") {\n    const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n    offsetXConfig = {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n      type: snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: showLength,\n    };\n  }\n\n  const x = useOffsetX(offsetXConfig, visibleRanges);\n  const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n  const animatedStyle = useAnimatedStyle(\n    () => animationStyle(x.value / size),\n    [animationStyle],\n  );\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      mounted.current\n                && setShouldUpdate(\n                  (index >= negativeRange[0] && index <= negativeRange[1])\n                        || (index >= positiveRange[0] && index <= positiveRange[1]),\n                );\n    },\n    [index, mounted],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        animatedStyle,\n      ]}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>\n        {children({ animationValue })}\n      </LazyView>\n    </Animated.View>\n  );\n};\n"]}

package/lib/module/layouts/ParallaxLayout.js

@@ -12,7 +12,7 @@ export const ParallaxLayout = props => {
     width,
     height,
     loop,
-    data,
+    dataLength,
     children,
     visibleRanges,
     vertical
@@ -23,7 +23,7 @@ export const ParallaxLayout = props => {
     handlerOffset,
     index,
     size,
-    data,
+    dataLength,
     loop
   }, visibleRanges);
   const offsetXStyle = useAnimatedStyle(() => {

package/lib/module/layouts/ParallaxLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ParallaxLayout.tsx"],"names":["React","Animated","Extrapolate","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","ParallaxLayout","props","handlerOffset","parallaxScrollingOffset","parallaxScrollingScale","parallaxAdjacentItemScale","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","size","x","offsetXStyle","value","translate","EXTEND","zIndex","CLAMP","scale","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport Animated, {\n  Extrapolate,\n  interpolate,\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./parallax\";\n\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { LazyView } from \"../LazyView\";\nimport type { IComputedDirectionTypes } from \"../types\";\n\nexport const ParallaxLayout: React.FC<\nIComputedDirectionTypes<\n{\n  loop?: boolean\n  handlerOffset: Animated.SharedValue<number>\n  index: number\n  data: unknown[]\n  visibleRanges: IVisibleRanges\n} & ILayoutConfig\n>\n> = (props) => {\n  const {\n    handlerOffset,\n    parallaxScrollingOffset = 100,\n    parallaxScrollingScale = 0.8,\n    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,\n    index,\n    width,\n    height,\n    loop,\n    data,\n    children,\n    visibleRanges,\n    vertical,\n  } = props;\n\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n  const size = props.vertical ? props.height : props.width;\n\n  const x = useOffsetX(\n    {\n      handlerOffset,\n      index,\n      size,\n      data,\n      loop,\n    },\n    visibleRanges,\n  );\n\n  const offsetXStyle = useAnimatedStyle(() => {\n    const value = x.value / size;\n\n    const translate = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        -size + parallaxScrollingOffset,\n        0,\n        size - parallaxScrollingOffset,\n      ],\n      Extrapolate.EXTEND,\n    );\n\n    const zIndex = interpolate(\n      value,\n      [-1, 0, 1],\n      [0, size, 0],\n      Extrapolate.CLAMP,\n    );\n\n    const scale = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        parallaxAdjacentItemScale,\n        parallaxScrollingScale,\n        parallaxAdjacentItemScale,\n      ],\n      Extrapolate.CLAMP,\n    );\n\n    return {\n      transform: [\n        vertical\n          ? {\n            translateY: translate,\n          }\n          : {\n            translateX: translate,\n          },\n        {\n          scale,\n        },\n      ],\n      zIndex,\n    };\n  }, [loop, vertical, parallaxScrollingOffset]);\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      setShouldUpdate(\n        (index >= negativeRange[0] && index <= negativeRange[1])\n                    || (index >= positiveRange[0] && index <= positiveRange[1]),\n      );\n    },\n    [index],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        offsetXStyle,\n      ]}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n    </Animated.View>\n  );\n};\n"]}
+{"version":3,"sources":["ParallaxLayout.tsx"],"names":["React","Animated","Extrapolate","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","ParallaxLayout","props","handlerOffset","parallaxScrollingOffset","parallaxScrollingScale","parallaxAdjacentItemScale","index","width","height","loop","dataLength","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","size","x","offsetXStyle","value","translate","EXTEND","zIndex","CLAMP","scale","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport Animated, {\n  Extrapolate,\n  interpolate,\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./parallax\";\n\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { LazyView } from \"../LazyView\";\nimport type { IComputedDirectionTypes } from \"../types\";\n\nexport const ParallaxLayout: React.FC<\nIComputedDirectionTypes<\n{\n  loop?: boolean\n  handlerOffset: Animated.SharedValue<number>\n  index: number\n  dataLength: number\n  visibleRanges: IVisibleRanges\n} & ILayoutConfig\n>\n> = (props) => {\n  const {\n    handlerOffset,\n    parallaxScrollingOffset = 100,\n    parallaxScrollingScale = 0.8,\n    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,\n    index,\n    width,\n    height,\n    loop,\n    dataLength,\n    children,\n    visibleRanges,\n    vertical,\n  } = props;\n\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n  const size = props.vertical ? props.height : props.width;\n\n  const x = useOffsetX(\n    {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n    },\n    visibleRanges,\n  );\n\n  const offsetXStyle = useAnimatedStyle(() => {\n    const value = x.value / size;\n\n    const translate = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        -size + parallaxScrollingOffset,\n        0,\n        size - parallaxScrollingOffset,\n      ],\n      Extrapolate.EXTEND,\n    );\n\n    const zIndex = interpolate(\n      value,\n      [-1, 0, 1],\n      [0, size, 0],\n      Extrapolate.CLAMP,\n    );\n\n    const scale = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        parallaxAdjacentItemScale,\n        parallaxScrollingScale,\n        parallaxAdjacentItemScale,\n      ],\n      Extrapolate.CLAMP,\n    );\n\n    return {\n      transform: [\n        vertical\n          ? {\n            translateY: translate,\n          }\n          : {\n            translateX: translate,\n          },\n        {\n          scale,\n        },\n      ],\n      zIndex,\n    };\n  }, [loop, vertical, parallaxScrollingOffset]);\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      setShouldUpdate(\n        (index >= negativeRange[0] && index <= negativeRange[1])\n                    || (index >= positiveRange[0] && index <= positiveRange[1]),\n      );\n    },\n    [index],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        offsetXStyle,\n      ]}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n    </Animated.View>\n  );\n};\n"]}

package/lib/typescript/hooks/useCarouselController.d.ts

@@ -3,7 +3,7 @@ import type { TCarouselActionOptions, TCarouselProps } from "../types";
 interface IOpts {
     loop: boolean;
     size: number;
-    data: TCarouselProps["data"];
+    dataLength: number;
     autoFillData: TCarouselProps["autoFillData"];
     handlerOffset: Animated.SharedValue<number>;
     withAnimation?: TCarouselProps["withAnimation"];

package/lib/typescript/hooks/useInitProps.d.ts

@@ -2,6 +2,8 @@ import type { TCarouselProps } from "../types";
 declare type TGetRequiredProps<P extends keyof TCarouselProps> = Record<P, Required<TCarouselProps>[P]>;
 export declare type TInitializeCarouselProps<T> = TCarouselProps<T> & TGetRequiredProps<"defaultIndex" | "loop" | "width" | "height" | "scrollAnimationDuration" | "autoPlayInterval" | "autoFillData"> & {
     rawData: T[];
+    dataLength: number;
+    rawDataLength: number;
 };
 export declare function useInitProps<T>(props: TCarouselProps<T>): TInitializeCarouselProps<T>;
 export {};

package/lib/typescript/hooks/useOffsetX.d.ts

@@ -4,7 +4,7 @@ export interface IOpts {
     index: number;
     size: number;
     handlerOffset: Animated.SharedValue<number>;
-    data: unknown[];
+    dataLength: number;
     type?: "positive" | "negative";
     viewCount?: number;
     loop?: boolean;

package/lib/typescript/hooks/useOnProgressChange.d.ts

@@ -5,5 +5,5 @@ export declare function useOnProgressChange(opts: {
     autoFillData: boolean;
     loop: boolean;
     offsetX: Animated.SharedValue<number>;
-    rawData: TCarouselProps["data"];
+    rawDataLength: number;
 } & Pick<TCarouselProps, "onProgressChange">): void;

package/lib/typescript/hooks/usePropsErrorBoundary.d.ts

@@ -1,2 +1,4 @@
 import type { TCarouselProps } from "../types";
-export declare function usePropsErrorBoundary(props: TCarouselProps): void;
+export declare function usePropsErrorBoundary(props: TCarouselProps & {
+    dataLength: number;
+}): void;

package/lib/typescript/layouts/ParallaxLayout.d.ts

@@ -7,6 +7,6 @@ export declare const ParallaxLayout: React.FC<IComputedDirectionTypes<{
     loop?: boolean;
     handlerOffset: Animated.SharedValue<number>;
     index: number;
-    data: unknown[];
+    dataLength: number;
     visibleRanges: IVisibleRanges;
 } & ILayoutConfig>>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "3.1.4",
+    "version": "3.1.5",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "react-native": "src/index.tsx",

package/src/Carousel.tsx

@@ -23,10 +23,16 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
 
     const {
       testID,
-      data,
-      rawData,
       loop,
       autoFillData,
+      // Fill data with autoFillData
+      data,
+      // Length of fill data
+      dataLength,
+      // Raw data that has not been processed
+      rawData,
+      // Length of raw data
+      rawDataLength,
       mode,
       style,
       width,
@@ -49,7 +55,6 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
 
     const commonVariables = useCommonVariables(props);
     const { size, handlerOffset } = commonVariables;
-    const dataLength = data.length;
 
     const offsetX = useDerivedValue(() => {
       const totalSize = size * dataLength;
@@ -61,20 +66,20 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       return isNaN(x) ? 0 : x;
     }, [loop, size, dataLength]);
 
-    usePropsErrorBoundary(props);
+    usePropsErrorBoundary({ ...props, dataLength });
     useOnProgressChange({
       autoFillData,
       loop,
       size,
       offsetX,
-      rawData,
+      rawDataLength,
       onProgressChange,
     });
 
     const carouselController = useCarouselController({
       loop,
       size,
-      data,
+      dataLength,
       autoFillData,
       handlerOffset,
       withAnimation,
@@ -99,7 +104,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
 
       const realIndex = computedRealIndexWithAutoFillData({
         index: _sharedIndex,
-        dataLength: rawData.length,
+        dataLength: rawDataLength,
         loop,
         autoFillData,
       });
@@ -112,7 +117,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
     }, [
       loop,
       autoFillData,
-      rawData.length,
+      rawDataLength,
       getSharedIndex,
       onSnapToItem,
       onScrollEnd,
@@ -148,7 +153,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
     );
 
     const visibleRanges = useVisibleRanges({
-      total: data.length,
+      total: dataLength,
       viewSize: size,
       translation: handlerOffset,
       windowSize,
@@ -160,7 +165,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       (item: any, i: number) => {
         const realIndex = computedRealIndexWithAutoFillData({
           index: i,
-          dataLength: rawData.length,
+          dataLength: rawDataLength,
           loop,
           autoFillData,
         });

package/src/ScrollViewGesture.tsx

@@ -41,7 +41,6 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
   const {
     props: {
       vertical,
-      data,
       pagingEnabled,
       snapEnabled,
       panGestureHandlerProps,
@@ -49,6 +48,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
       scrollAnimationDuration,
       withAnimation,
       enabled,
+      dataLength,
     },
   } = React.useContext(CTX);
 
@@ -63,7 +63,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     onTouchEnd,
   } = props;
 
-  const maxPage = data.length;
+  const maxPage = dataLength;
   const isHorizontal = useDerivedValue(() => !vertical, [vertical]);
   const touching = useSharedValue(false);
   const scrollEndTranslation = useSharedValue(0);

package/src/hooks/useCarouselController.tsx

@@ -20,7 +20,7 @@ import { round } from "../utils/log";
 interface IOpts {
   loop: boolean
   size: number
-  data: TCarouselProps["data"]
+  dataLength: number
   autoFillData: TCarouselProps["autoFillData"]
   handlerOffset: Animated.SharedValue<number>
   withAnimation?: TCarouselProps["withAnimation"]
@@ -41,8 +41,8 @@ export interface ICarouselController {
 export function useCarouselController(options: IOpts): ICarouselController {
   const {
     size,
-    data,
     loop,
+    dataLength,
     handlerOffset,
     withAnimation,
     defaultIndex = 0,
@@ -52,11 +52,11 @@ export function useCarouselController(options: IOpts): ICarouselController {
 
   const dataInfo = React.useMemo(
     () => ({
-      length: data.length,
-      disable: !data.length,
-      originalLength: data.length,
+      length: dataLength,
+      disable: !dataLength,
+      originalLength: dataLength,
     }),
-    [data],
+    [dataLength],
   );
 
   const index = useSharedValue<number>(defaultIndex);

package/src/hooks/useCommonVariables.ts

@@ -20,17 +20,17 @@ export function useCommonVariables(
     vertical,
     height,
     width,
-    data,
+    dataLength,
     defaultIndex,
     defaultScrollOffsetValue,
     loop,
   } = props;
   const size = vertical ? height : width;
-  const validLength = data.length - 1;
+  const validLength = dataLength - 1;
   const defaultHandlerOffsetValue = -Math.abs(defaultIndex * size);
   const _handlerOffset = useSharedValue<number>(defaultHandlerOffsetValue);
   const handlerOffset = defaultScrollOffsetValue ?? _handlerOffset;
-  const prevDataLength = useSharedValue(data.length);
+  const prevDataLength = useSharedValue(dataLength);
 
   React.useEffect(() => {
     handlerOffset.value = defaultHandlerOffsetValue;
@@ -38,12 +38,12 @@ export function useCommonVariables(
 
   useAnimatedReaction(() => {
     const previousLength = prevDataLength.value;
-    const currentLength = data.length;
+    const currentLength = dataLength;
     const isLengthChanged = previousLength !== currentLength;
     const shouldComputed = isLengthChanged && loop;
 
     if (shouldComputed)
-      prevDataLength.value = data.length;
+      prevDataLength.value = dataLength;
 
     return {
       shouldComputed,
@@ -63,7 +63,7 @@ export function useCommonVariables(
         handlerOffset: handlerOffset.value,
       });
     }
-  }, [data, loop]);
+  }, [dataLength, loop]);
 
   return {
     size,

package/src/hooks/useInitProps.ts

@@ -20,6 +20,8 @@ TGetRequiredProps<
 > & {
   // Raw data that has not been processed
   rawData: T[]
+  dataLength: number
+  rawDataLength: number
 };
 
 export function useInitProps<T>(
@@ -47,31 +49,38 @@ export function useInitProps<T>(
 
   const data = React.useMemo<T[]>(
     () => {
-      const computedData = computedFillDataWithAutoFillData<T>({
+      return computedFillDataWithAutoFillData<T>({
         loop,
         autoFillData,
         data: rawData,
         dataLength: rawData.length,
       });
-
-      return Array.from({ length: computedData.length });
     },
     [rawData, loop, autoFillData],
   );
 
+  const dataLength = data.length;
+  const rawDataLength = rawData.length;
+
   if (props.mode === "vertical-stack" || props.mode === "horizontal-stack") {
     if (!props.modeConfig)
       props.modeConfig = {};
 
-    props.modeConfig.showLength = props.modeConfig?.showLength ?? data.length - 1;
+    props.modeConfig.showLength = props.modeConfig?.showLength ?? dataLength - 1;
   }
 
   return {
     ...props,
     defaultIndex,
     autoFillData,
+    // Fill data with autoFillData
     data,
+    // Length of fill data
+    dataLength,
+    // Raw data that has not been processed
     rawData,
+    // Length of raw data
+    rawDataLength,
     loop,
     enabled,
     autoPlayInterval,