Merge pull request #652 from bdtren/main

dohooo · web-flow · commit c956690e1c20 · 2024-09-11T16:44:25.000+08:00
add Pagination.Custom dot animation
diff --git a/example/app/src/pages/parallax/index.tsx b/example/app/src/pages/parallax/index.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
+import { useSharedValue, interpolate, Extrapolation } from "react-native-reanimated";
 import Carousel, {
   ICarouselInstance,
   Pagination,
@@ -156,6 +156,7 @@ function Index() {
         activeDotStyle={{
           borderRadius: 100,
           overflow: "hidden",
+          backgroundColor: "rgba(0,0,0,0.2)",
         }}
         containerStyle={[
           isVertical
@@ -166,6 +167,10 @@ function Index() {
                 top: 40,
               }
             : undefined,
+          {
+            gap: 5,
+            marginBottom: 10,
+          },
         ]}
         horizontal={!isVertical}
         renderItem={(item) => (
@@ -179,6 +184,118 @@ function Index() {
         onPress={onPressPagination}
       />
 
+      <Pagination.Custom<{ color: string }>
+        progress={progress}
+        data={colors.map((color) => ({ color }))}
+        size={20}
+        dotStyle={{
+          borderRadius: 16,
+          backgroundColor: "rgba(0,0,0,0.2)",
+        }}
+        activeDotStyle={{
+          borderRadius: 8,
+          width: 40,
+          height: 30,
+          overflow: "hidden",
+          backgroundColor: 'black',
+        }}
+        containerStyle={[
+          isVertical
+            ? {
+                position: "absolute",
+                width: 20,
+                right: 5,
+                top: 40,
+              }
+            : undefined,
+            {
+              gap: 5,
+              marginBottom: 10,
+              alignItems: "center",
+            },
+        ]}
+        horizontal={!isVertical}
+        onPress={onPressPagination}
+        customReanimatedStyle={(progress, index, length) => {
+          let val = Math.abs(progress - index);
+          if (index === 0 && progress > length - 1) {
+            val = Math.abs(progress - length);
+          }
+
+          return {
+            transform: [
+              {
+                translateY: interpolate(
+                  val,
+                  [0, 1],
+                  [10, 0],
+                  Extrapolation.CLAMP,
+                ),
+              }
+            ]
+          }
+        }}
+      />
+
+      <Pagination.Custom<{ color: string }>
+        progress={progress}
+        data={colors.map((color) => ({ color }))}
+        size={20}
+        dotStyle={{
+          borderRadius: 16,
+          backgroundColor: "rgba(0,0,0,0.2)",
+        }}
+        activeDotStyle={{
+          borderRadius: 8,
+          width: 40,
+          height: 30,
+          overflow: "hidden",
+        }}
+        containerStyle={[
+          isVertical
+            ? {
+                position: "absolute",
+                width: 20,
+                right: 5,
+                top: 40,
+              }
+            : undefined,
+            {
+              gap: 5,
+              alignItems: "center",
+            },
+        ]}
+        horizontal={!isVertical}
+        onPress={onPressPagination}
+        customReanimatedStyle={(progress, index, length) => {
+          let val = Math.abs(progress - index);
+          if (index === 0 && progress > length - 1) {
+            val = Math.abs(progress - length);
+          }
+
+          return {
+            transform: [
+              {
+                translateY: interpolate(
+                  val,
+                  [0, 1],
+                  [10, 0],
+                  Extrapolation.CLAMP,
+                ),
+              }
+            ]
+          }
+        }}
+        renderItem={(item) => (
+          <View
+            style={{
+              backgroundColor: item.color,
+              flex: 1,
+            }}
+          />
+        )}
+      />
+
       <SButton
         onPress={() => setAutoPlay(!autoPlay)}
       >{`${ElementsText.AUTOPLAY}:${autoPlay}`}</SButton>
diff --git a/src/components/Pagination/Custom/PaginationItem.tsx b/src/components/Pagination/Custom/PaginationItem.tsx
@@ -0,0 +1,131 @@
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type { ViewStyle } from "react-native";
+import Animated, {
+  Extrapolation,
+  interpolate,
+  interpolateColor,
+  SharedValue,
+  useAnimatedStyle,
+  runOnJS,
+  useSharedValue,
+  useDerivedValue,
+} from "react-native-reanimated";
+import type { DefaultStyle } from "react-native-reanimated/lib/typescript/hook/commonTypes";
+
+export type DotStyle = Omit<ViewStyle, "width" | "height"> & {
+  width?: number
+  height?: number
+};
+
+export const PaginationItem: React.FC<
+PropsWithChildren<{
+  index: number
+  count: number
+  size?: number
+  animValue: SharedValue<number>
+  horizontal?: boolean
+  dotStyle?: DotStyle
+  activeDotStyle?: DotStyle
+  customReanimatedStyle?: (
+    progress: number,
+    index: number,
+    length: number,
+  ) => DefaultStyle
+}>
+> = (props) => {
+  const defaultDotSize = 10;
+  const {
+    animValue,
+    dotStyle,
+    activeDotStyle,
+    index,
+    count,
+    size,
+    horizontal,
+    children,
+    customReanimatedStyle,
+  } = props;
+  const customReanimatedStyleRef = useSharedValue<DefaultStyle>({});
+  const handleCustomAnimation = (progress: number) => {
+    customReanimatedStyleRef.value = customReanimatedStyle?.(progress, index, count) ?? {};
+  }
+
+  useDerivedValue(() => {
+    runOnJS(handleCustomAnimation)(animValue?.value);
+  });
+
+  const animStyle = useAnimatedStyle(() => {
+    const {
+      width = size || defaultDotSize,
+      height = size || defaultDotSize,
+      borderRadius,
+      backgroundColor = "#FFF",
+      ...restDotStyle
+    } = dotStyle ?? {};
+    const {
+      width: activeWidth = width,
+      height: activeHeight = height,
+      borderRadius: activeBorderRadius,
+      backgroundColor: activeBackgroundColor = "#000",
+      ...restActiveDotStyle
+    } = activeDotStyle ?? {};
+    let val = Math.abs(animValue?.value - index);
+    if (index === 0 && animValue?.value > count - 1) {
+      val = Math.abs(animValue?.value - count);
+    }
+    const inputRange = [0, 1, 2];
+    const restStyle = (val === 0 ? restActiveDotStyle : restDotStyle) ?? {};
+
+    return {
+        width: interpolate(
+            val,
+            inputRange,
+            [activeWidth, width, width],
+            Extrapolation.CLAMP,
+        ),
+        height: interpolate(
+            val,
+            inputRange,
+            [activeHeight, height, height],
+            Extrapolation.CLAMP,
+        ),
+        borderRadius: interpolate(
+          val,
+          inputRange,
+          [activeBorderRadius, borderRadius, borderRadius],
+          Extrapolation.CLAMP,
+        ),
+        backgroundColor: interpolateColor(
+            val,
+            inputRange,
+            [activeBackgroundColor, backgroundColor, backgroundColor],
+        ),
+        ...restStyle,
+        ...(customReanimatedStyleRef.value ?? {}),
+        transform: [
+          ...restStyle?.transform ?? [],
+          ...customReanimatedStyleRef.value?.transform ?? [],
+        ]
+    };
+  }, [animValue, index, count, horizontal, dotStyle, activeDotStyle, customReanimatedStyle]);
+
+  return (
+    <Animated.View
+      style={[
+          {
+            overflow: "hidden",
+            transform: [
+                {
+                    rotateZ: horizontal ? "90deg" : "0deg",
+                },
+            ],
+          },
+          dotStyle,
+          animStyle,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+};
diff --git a/src/components/Pagination/Custom/index.tsx b/src/components/Pagination/Custom/index.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import { View } from "react-native";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
+import type { DefaultStyle } from "react-native-reanimated/lib/typescript/hook/commonTypes";
+
+import type { DotStyle } from "./PaginationItem";
+import { PaginationItem } from "./PaginationItem";
+
+export interface ShapeProps<T extends {} = {}> {
+  progress: SharedValue<number>
+  horizontal?: boolean
+  data: Array<T>
+  renderItem?: (item: T, index: number) => React.ReactNode
+  containerStyle?: StyleProp<ViewStyle>
+  dotStyle?: DotStyle
+  activeDotStyle?: DotStyle
+  size?: number
+  onPress?: (index: number) => void
+  customReanimatedStyle?: (
+    progress: number,
+    index: number,
+    length: number,
+  ) => DefaultStyle
+}
+
+export const Custom = <T extends {}>(props: ShapeProps<T>) => {
+  const {
+    activeDotStyle,
+    dotStyle,
+    progress,
+    horizontal = true,
+    data,
+    size,
+    containerStyle,
+    renderItem,
+    onPress,
+    customReanimatedStyle,
+  } = props;
+
+  if (
+    typeof size === "string" ||
+    typeof dotStyle?.width === "string" ||
+    typeof dotStyle?.height === "string" ||
+    typeof activeDotStyle?.width === "string" ||
+    typeof activeDotStyle?.height === "string" 
+  )
+    throw new Error("size/width/height must be a number");
+  
+  const maxItemWidth = Math.max(size ?? 0, dotStyle?.width ?? 0, activeDotStyle?.width ?? 0);
+  const maxItemHeight = Math.max(size ?? 0, dotStyle?.height ?? 0, activeDotStyle?.height ?? 0);
+
+  return (
+    <View
+      style={[
+        {
+          justifyContent: "space-between",
+          alignSelf: "center",
+          minWidth: maxItemWidth,
+          minHeight: maxItemHeight,
+        },
+        horizontal
+          ? {
+            flexDirection: "row",
+          }
+          : {
+            flexDirection: "column",
+          },
+        containerStyle,
+      ]}
+    >
+      {data.map((item, index) => {
+        return (
+          <TouchableWithoutFeedback
+            key={index}
+            onPress={() => onPress?.(index)}
+          >
+            <PaginationItem
+              index={index}
+              size={size}
+              count={data.length}
+              dotStyle={dotStyle}
+              animValue={progress}
+              horizontal={!horizontal}
+              activeDotStyle={activeDotStyle}
+              customReanimatedStyle={customReanimatedStyle}
+            >
+              {renderItem?.(item, index)}
+            </PaginationItem>
+          </TouchableWithoutFeedback>
+        );
+      })}
+    </View>
+  );
+};
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
@@ -1,5 +1,7 @@
 import { Basic } from "./Basic";
+import { Custom } from "./Custom";
 
 export const Pagination = {
   Basic,
+  Custom,
 };
