related-ui-components 3.2.8 → 3.3.0

package/src/components/Wheel/Wheel.tsx

@@ -22,55 +22,25 @@ export interface SpinWheelItem {
 
 //default random colors
 const colors = [
-  "#FF0000", // Red
-  "#FFA500", // Orange
-  "#FFFF00", // Yellow
-  "#008000", // Green
-  "#0000FF", // Blue
-  "#800080", // Purple
-  "#FFC0CB", // Pink
-  "#00FFFF", // Cyan
-  "#FF00FF", // Magenta
-  "#00FF00", // Lime
-  "#4B0082", // Indigo
-  "#EE82EE", // Violet
-  "#40E0D0", // Turquoise
-  "#FFD700", // Gold
-  "#C0C0C0", // Silver
-  "#FFDAB9", // Peach
-  "#E6E6FA", // Lavender
-  "#008080", // Teal
-  "#FF7F50", // Coral
-  "#DC143C", // Crimson
-  "#87CEEB", // Sky Blue
-  "#7FFF00", // Chartreuse
-  "#CCCCFF", // Periwinkle
-  "#FF6347", // Tomato
-  "#FA8072", // Salmon
+  "#FF0000", "#FFA500", "#FFFF00", "#008000", "#0000FF", "#800080",
+  "#FFC0CB", "#00FFFF", "#FF00FF", "#00FF00", "#4B0082", "#EE82EE",
+  "#40E0D0", "#FFD700", "#C0C0C0", "#FFDAB9", "#E6E6FA", "#008080",
+  "#FF7F50", "#DC143C", "#87CEEB", "#7FFF00", "#CCCCFF", "#FF6347",
+  "#FA8072",
 ];
 
 interface SpinWheelProps {
-  // Data
   items: SpinWheelItem[];
   predeterminedWinner?: SpinWheelItem | string | number;
-
-  // Dimensions
   size?: number;
-
-  startSpin?: boolean; // start spinning immediately
-  winner?: SpinWheelItem | string | number; // winner from API
-  minSpinDuration?: number; // buffer in ms before stopping
-
-  // Behavior
+  startSpin?: boolean;
+  winner?: SpinWheelItem | string | number;
+  minSpinDuration?: number;
   spinDuration?: number;
   friction?: number;
   enabled?: boolean;
-
-  // Events
   onSpinStart?: () => void;
   onSpinEnd?: (item: SpinWheelItem) => void;
-
-  // Styling
   containerStyle?: ViewStyle;
   centerStyle?: ViewStyle;
   spinButtonText?: string;
@@ -79,17 +49,19 @@ interface SpinWheelProps {
   actionButtonStyle?: ViewStyle;
   actionButtonTextStyle?: TextStyle;
   actionButtonProps?: Partial<Omit<AppButtonProps, "title" | "onPress">>;
-
   wheelBorderColor?: string;
   wheelBorderWidth?: number;
   wheelTextColor?: string;
   knobColor?: string;
-
   centerSize?: number;
-
-  centerComponent?: React.ReactNode; // Note: centerComponent prop is declared but not used
+  centerComponent?: React.ReactNode;
 }
 
+// Constants for consistent animation
+const ROTATION_DURATION = 2500; // Duration for one full rotation
+const DECEL_DURATION = 3000; // Duration for deceleration phase
+const EXTRA_SPINS = 3; // Number of extra full rotations before stopping
+
 const SpinWheel: React.FC<SpinWheelProps> = ({
   items,
   size = 300,
@@ -119,19 +91,16 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
 
   const [spinning, setSpinning] = useState(false);
   const rotateValue = useRef(new Animated.Value(0)).current;
-
-  // Track rotation manually for calculations
   const rotationRef = useRef(0);
 
   const startInfiniteSpin = () => {
     rotateValue.setValue(rotationRef.current);
-
     spinStartTime.current = Date.now();
 
     spinLoop.current = Animated.loop(
       Animated.timing(rotateValue, {
-        toValue: rotationRef.current + 1, // 1 = full rotation
-        duration: 2500,
+        toValue: rotationRef.current + 1,
+        duration: ROTATION_DURATION,
         easing: Easing.linear,
         useNativeDriver: true,
       })
@@ -154,26 +123,38 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
     const index = items.findIndex((i) => i.id === winnerId);
     if (index === -1) return;
 
+    // Calculate target angle (pointer at top = 270 degrees)
+    const anglePerItem = 360 / items.length;
     const segmentCenter = (index + 0.5) * anglePerItem;
     const targetAngle = (270 - segmentCenter + 360) % 360;
 
-    const currentAngle = (rotationRef.current * 360) % 360;
-    const offset = (targetAngle - currentAngle + 360) % 360;
-
-    const finalRotation = rotationRef.current + (offset + 3 * 360) / 360;
-
+    // Get current rotation position
+    const currentRotation = rotationRef.current;
+    const currentAngle = (currentRotation * 360) % 360;
+    
+    // Calculate shortest path to target
+    let offset = (targetAngle - currentAngle + 360) % 360;
+    
+    // Add extra full rotations for dramatic effect
+    const extraRotations = EXTRA_SPINS * 360;
+    const totalRotation = offset + extraRotations;
+    
+    // Final rotation value
+    const finalRotation = currentRotation + totalRotation / 360;
+
+    // Use ease-out cubic for smooth deceleration
     Animated.timing(rotateValue, {
       toValue: finalRotation,
-      duration: 2500,
+      duration: DECEL_DURATION,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true,
     }).start(() => {
+      rotationRef.current = finalRotation;
       setSpinning(false);
       onSpinEnd?.(items[index]);
     });
   };
 
-  // Update tracked rotation when animation completes
   useEffect(() => {
     const listener = rotateValue.addListener(({ value }) => {
       rotationRef.current = value;
@@ -184,10 +165,8 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
     };
   }, [rotateValue]);
 
-  // Calculate angle for each segment
   const anglePerItem = wheelItems.length > 0 ? 360 / wheelItems.length : 0;
 
-  // Create wheel segments
   const generateWheelPaths = () => {
     if (wheelItems.length === 0) return [];
     return wheelItems.map((item, index) => {
@@ -215,17 +194,11 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
       const textX = size / 2 + size * 0.32 * Math.cos(midRad);
       const textY = size / 2 + size * 0.32 * Math.sin(midRad);
 
-      // decorationX and decorationY are calculated but not used in the provided JSX
-      // const decorationX = size / 2 + size * 0.43 * Math.cos(midRad);
-      // const decorationY = size / 2 + size * 0.43 * Math.sin(midRad);
-
       return {
         path: pathData,
         item,
         textX,
         textY,
-        // decorationX,
-        // decorationY,
         angle: (startAngle + endAngle) / 2,
       };
     });
@@ -244,9 +217,8 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
     }, delay);
 
     return () => clearTimeout(timeout);
-  }, [winner]);
+  }, [winner, spinning]);
 
-  // Animation interpolation for rotation
   const rotate = rotateValue.interpolate({
     inputRange: [0, 1],
     outputRange: ["0deg", "360deg"],
@@ -257,7 +229,6 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={{ width: size, height: size }}>
-        {/* The wheel */}
         <Animated.View
           style={[
             styles.wheelContainer,
@@ -271,7 +242,7 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
         >
           <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
             <G>
-              {wheelPaths.map(({ path, item, textX, textY, angle }, index) => {
+              {wheelPaths.map(({ path, item, textX, textY, angle }) => {
                 return (
                   <React.Fragment key={item.id}>
                     <Path
@@ -281,8 +252,6 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
                           ? colors[Math.floor(Math.random() * colors.length)]
                           : item.color
                       }
-                      // stroke="#FA8072"
-                      // strokeWidth={1}
                     />
                     <SvgText
                       x={textX}
@@ -292,7 +261,7 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
                       fontWeight={(wheelTextStyle?.fontWeight as any) || "bold"}
                       textAnchor="middle"
                       alignmentBaseline="central"
-                      transform={`rotate(${angle + 180}, ${textX}, ${textY} )`}
+                      transform={`rotate(${angle + 180}, ${textX}, ${textY})`}
                     >
                       {item.label}
                     </SvgText>
@@ -314,14 +283,12 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
           </Svg>
         </Animated.View>
 
-        {/* The center circle */}
         {centerComponent ? (
           <View
             style={{
               position: "absolute",
               top: "50%",
               left: "50%",
-              // Center the component perfectly
               transform: [
                 { translateX: -(actualCenterSize / 2) },
                 { translateY: -(actualCenterSize / 2) },
@@ -349,7 +316,6 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
           />
         )}
 
-        {/* The pointer is a triangle on top */}
         <View
           style={[
             styles.pointerPosition,
@@ -365,7 +331,6 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
           />
         </View>
 
-        {/* Action Button */}
         <View
           style={{
             position: "absolute",
@@ -384,15 +349,6 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
             textStyle={[styles.actionButtonText, actionButtonTextStyle]}
             {...actionButtonProps}
           />
-          {/* <TouchableOpacity
-            onPress={handleSpin}
-            disabled={spinning || !enabled || wheelItems.length === 0}
-            style={[styles.actionButton, actionButtonStyle]}
-          >
-            <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
-              {spinButtonText}
-            </Text>
-          </TouchableOpacity> */}
         </View>
       </View>
     </View>
@@ -404,7 +360,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     marginTop: 20,
-    marginBottom: 70, // Space for the button
+    marginBottom: 70,
   },
   wheelContainer: {
     overflow: "hidden",