@r0b0t3d/react-native-carousel 3.4.0 → 3.4.4

package/src/components/PaginationIndicator.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { useCallback, useMemo } from 'react';
-import { View, StyleSheet, ViewStyle } from 'react-native';
+import React, { useMemo } from 'react';
+import { View, StyleSheet, ViewStyle, StyleProp } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
-  useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
 import type { IndicatorConfigs, PaginationProps } from '../types';
@@ -18,20 +17,6 @@ const defaultIndicatorConfigs: IndicatorConfigs = {
   spaceBetween: 3,
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  dotContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  dotSelectedStyle: {
-    position: 'absolute',
-  },
-});
-
 const defaultSpringConfig = {
   stiffness: 1000,
   damping: 500,
@@ -42,15 +27,12 @@ const defaultSpringConfig = {
 };
 
 export default function PaginationIndicator({
-  // totalPage,
   containerStyle,
   indicatorStyle,
   activeIndicatorStyle,
   indicatorConfigs,
 }: PaginationProps) {
-  const carouselContext = useCarouselContext();
-  const page = useSharedValue(0);
-  const currentPage = carouselContext.currentPage || page;
+  const { currentPage, totalPage } = useCarouselContext();
 
   const configs = useMemo(() => {
     return {
@@ -76,7 +58,7 @@ export default function PaginationIndicator({
     };
   }, []);
 
-  const renderItem = useCallback((pageNumber: number) => {
+  function renderItem(pageNumber: number) {
     // @ts-ignore
     if (activeIndicatorStyle?.width) {
       console.error(
@@ -89,52 +71,21 @@ export default function PaginationIndicator({
         'Do not use indicatorStyle: { width }. Please use indicatorConfigs: { indicatorWidth } instead'
       );
     }
-    const dotContainerStyle: ViewStyle = StyleSheet.flatten([
-      styles.dotContainer,
-      {
-        width: configs.indicatorSelectedWidth,
-        height: configs.indicatorWidth,
-        marginEnd: configs.spaceBetween,
-      },
-      activeIndicatorStyle,
-      {
-        // Disable backgroundColor in activeIndicatorStyle
-        backgroundColor: undefined,
-      },
-    ]);
-    const dotStyle: ViewStyle = StyleSheet.flatten([
-      {
-        width: configs.indicatorWidth,
-        height: configs.indicatorWidth,
-        borderRadius: configs.indicatorWidth! / 2,
-        backgroundColor: configs.indicatorColor,
-      },
-      indicatorStyle,
-    ]);
-
-    const aStyle = useAnimatedStyle(() => {
-      return {
-        width: withSpring(
-          currentPage.value === pageNumber
-            ? configs.indicatorSelectedWidth!
-            : configs.indicatorWidth!,
-          defaultSpringConfig
-        ),
-      };
-    }, []);
     return (
-      <Animated.View
+      <IndicatorItem
         key={`index${pageNumber}`}
-        style={[dotContainerStyle, aStyle]}
-      >
-        <View style={dotStyle} />
-      </Animated.View>
+        currentPage={currentPage}
+        pageNumber={pageNumber}
+        configs={configs}
+        indicatorStyle={indicatorStyle}
+        activeIndicatorStyle={activeIndicatorStyle}
+      />
     );
-  }, []);
+  }
 
   return (
     <View style={[styles.container, containerStyle]}>
-      {[...Array(carouselContext.totalPage.value).keys()].map(renderItem)}
+      {[...Array(totalPage.value).keys()].map(renderItem)}
       <Animated.View
         style={[
           styles.dotSelectedStyle,
@@ -151,3 +102,76 @@ export default function PaginationIndicator({
     </View>
   );
 }
+
+function IndicatorItem({
+  currentPage,
+  pageNumber,
+  configs,
+  activeIndicatorStyle,
+  indicatorStyle,
+}: {
+  currentPage: Animated.SharedValue<number>;
+  pageNumber: number;
+  configs: IndicatorConfigs;
+  activeIndicatorStyle?: StyleProp<ViewStyle>;
+  indicatorStyle?: StyleProp<ViewStyle>;
+}) {
+  const dotContainerStyle: StyleProp<ViewStyle> = useMemo(()=> [
+    styles.dotContainer,
+    {
+      width: configs.indicatorSelectedWidth,
+      height: configs.indicatorWidth,
+      marginEnd: configs.spaceBetween,
+    },
+    activeIndicatorStyle,
+    {
+      // Disable backgroundColor in activeIndicatorStyle
+      backgroundColor: undefined,
+    },
+  ], [activeIndicatorStyle]);
+
+  const dotStyle: StyleProp<ViewStyle> = useMemo(() => [
+    {
+      width: configs.indicatorWidth,
+      height: configs.indicatorWidth,
+      borderRadius: configs.indicatorWidth! / 2,
+      backgroundColor: configs.indicatorColor,
+    },
+    indicatorStyle,
+  ], [indicatorStyle]);
+
+  const animatedWidth = useDerivedValue(() => {
+    return withSpring(
+      currentPage.value === pageNumber
+        ? configs.indicatorSelectedWidth!
+        : configs.indicatorWidth!,
+      defaultSpringConfig
+    );
+  });
+
+  const aStyle = useAnimatedStyle(() => {
+    return {
+      width: animatedWidth.value,
+    };
+  }, []);
+
+  return (
+    <Animated.View style={[dotContainerStyle, aStyle]}>
+      <View style={dotStyle} />
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  dotContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dotSelectedStyle: {
+    position: 'absolute',
+  },
+});