related-ui-components 1.8.5 → 1.8.6

package/src/components/Wheel/Wheel.tsx

@@ -1,9 +1,4 @@
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  useMemo, // Added useMemo for wheelPaths
-} from "react";
+import React, { useState, useRef, useEffect } from "react";
 import {
   View,
   StyleSheet,
@@ -20,37 +15,15 @@ export interface SpinWheelItem {
   id: string | number;
   label: string;
   value?: any;
-  color: string; // Expect color to be provided, or handle default more explicitly
+  color: string;
   textColor?: string;
 }
 
-// Default random colors (can be used if item.color is not provided)
-const defaultColors = [
-  "#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",
+const colors = [
+  "#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 {
@@ -70,7 +43,7 @@ interface SpinWheelProps {
   wheelTextColor?: string;
   knobColor?: string;
   centerComponent?: React.ReactNode;
-  predeterminedWinnerId?: string | number | null; // New prop
+  winner?: SpinWheelItem | null; // Winner to spin to
 }
 
 const SpinWheel: React.FC<SpinWheelProps> = ({
@@ -89,33 +62,27 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
   actionButtonStyle,
   actionButtonTextStyle,
   wheelTextColor = "#FFFFFF",
-  centerComponent,
-  predeterminedWinnerId = null, // Default to null
+  winner,
 }) => {
-  const wheelItems = useMemo(
-    () => (items && items.length > 0 ? items : []),
-    [items]
-  );
-
+  const wheelItems = items.length > 0 ? items : [];
   const [spinning, setSpinning] = useState(false);
-  const [_winnerState, setWinnerState] = useState<SpinWheelItem | null>(null); // Renamed to avoid conflict
+  const [internalWinner, setInternalWinner] = useState<SpinWheelItem | null>(null);
   const rotateValue = useRef(new Animated.Value(0)).current;
-  const rotationRef = useRef(0); // Tracks cumulative rotation in "number of turns"
+  const rotationRef = useRef(0);
 
   useEffect(() => {
-    const listenerId = rotateValue.addListener(({ value }) => {
+    const listener = rotateValue.addListener(({ value }) => {
       rotationRef.current = value;
     });
     return () => {
-      rotateValue.removeListener(listenerId);
+      rotateValue.removeListener(listener);
     };
   }, [rotateValue]);
 
-  const anglePerItem =
-    wheelItems.length > 0 ? 360 / wheelItems.length : 0;
+  const anglePerItem = 360 / wheelItems.length;
 
-  const wheelPaths = useMemo(() => {
-    if (wheelItems.length === 0) return [];
+  // Generate wheel paths and text positions
+  const generateWheelPaths = () => {
     return wheelItems.map((item, index) => {
       const startAngle = index * anglePerItem;
       const endAngle = (index + 1) * anglePerItem;
@@ -125,15 +92,14 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
       const y1 = size / 2 + (size / 2) * Math.sin(startRad);
       const x2 = size / 2 + (size / 2) * Math.cos(endRad);
       const y2 = size / 2 + (size / 2) * Math.sin(endRad);
-      const largeArcFlag = anglePerItem <= 180 ? "0" : "1";
+      const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
       const pathData = [
         `M ${size / 2} ${size / 2}`,
         `L ${x1} ${y1}`,
         `A ${size / 2} ${size / 2} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
         "Z",
       ].join(" ");
-      const midAngle = startAngle + anglePerItem / 2;
-      const midRad = (midAngle * Math.PI) / 180;
+      const midRad = ((startAngle + endAngle) / 2) * (Math.PI / 180);
       const textX = size / 2 + size * 0.32 * Math.cos(midRad);
       const textY = size / 2 + size * 0.32 * Math.sin(midRad);
       return {
@@ -141,136 +107,75 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
         item,
         textX,
         textY,
-        angle: midAngle,
-        color: item.color || defaultColors[index % defaultColors.length],
+        angle: (startAngle + endAngle) / 2,
       };
     });
-  }, [wheelItems, anglePerItem, size]);
+  };
 
-  const handleSpin = () => {
-    if (spinning || !enabled || wheelItems.length === 0 || anglePerItem === 0) {
-      return;
-    }
+  const wheelPaths = generateWheelPaths();
+
+  // Helper: get index of a SpinWheelItem
+  const getItemIndex = (target: SpinWheelItem) =>
+    wheelItems.findIndex((item) => item.id === target.id);
 
+  // Helper: spin to a given index
+  const spinToIndex = (targetIndex: number, callbackItem: SpinWheelItem) => {
     setSpinning(true);
     onSpinStart?.();
 
-    let targetAnimationToValue: number;
-    let winnerToAnnounce: SpinWheelItem | null = null;
-
-    const currentWinnerId = predeterminedWinnerId; // Capture prop value at spin start
-    let targetWinnerItem: SpinWheelItem | null = null;
-
-    if (currentWinnerId != null) {
-      const foundItem = wheelItems.find((item) => item.id === currentWinnerId);
-      if (foundItem) {
-        targetWinnerItem = foundItem;
-      } else {
-        console.warn(
-          `SpinWheel: Predetermined winner with id "${currentWinnerId}" not found. Spinning randomly.`
-        );
-      }
-    }
-
-    if (targetWinnerItem) {
-      winnerToAnnounce = targetWinnerItem;
-      const winnerIndex = wheelItems.indexOf(targetWinnerItem);
-
-      // Calculate the middle angle of the target segment within the wheel's coordinate system
-      const targetSegmentMidAngle_deg = (winnerIndex + 0.5) * anglePerItem;
-
-      // The pointer is at 270 degrees (top). We want the targetSegmentMidAngle_deg
-      // to align with this pointer.
-      // If the wheel rotates by R, a point A on wheel is at (A+R)%360.
-      // So, (targetSegmentMidAngle_deg + R) % 360 = 270.
-      // R % 360 = (270 - targetSegmentMidAngle_deg + 360*k) % 360.
-      // This R % 360 is the target orientation for the wheel's 0-degree mark.
-      const targetWheelOrientation_deg =
-        (270 - targetSegmentMidAngle_deg + 360 * 10) % 360; // *10 to ensure positive
-
-      const currentWheelOrientation_deg = (rotationRef.current * 360) % 360;
+    // The pointer is at 270deg (top), so we want the winner to land there.
+    // The center of the segment is at: (index + 0.5) * anglePerItem
+    const winnerAngle =
+      360 - ((targetIndex + 0.5) * anglePerItem - 270);
 
-      // Additional rotation needed to reach the target orientation (shortest positive path)
-      const rotationToTarget_deg =
-        (targetWheelOrientation_deg - currentWheelOrientation_deg + 360) % 360;
-
-      const numFullRotations = 3 + Math.floor(Math.random() * 3); // 3 to 5 full spins
-      const totalAdditionalRotation_deg =
-        numFullRotations * 360 + rotationToTarget_deg;
-
-      targetAnimationToValue =
-        rotationRef.current + totalAdditionalRotation_deg / 360;
-    } else {
-      // Fallback to original random spin logic
-      const randomSpins = 3 + Math.random() * 2; // 3-5 full rotations
-      const randomAngleOffset = Math.random() * 360;
-      const totalRandomRotation_deg = 360 * randomSpins + randomAngleOffset;
-      targetAnimationToValue =
-        rotationRef.current + totalRandomRotation_deg / 360;
-    }
+    // Add extra spins for effect
+    const extraSpins = 3;
+    const currentRotation = rotationRef.current * 360;
+    const targetRotation = currentRotation + extraSpins * 360 + winnerAngle;
 
     Animated.timing(rotateValue, {
-      toValue: targetAnimationToValue,
+      toValue: targetRotation / 360,
       duration: spinDuration,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true,
     }).start(() => {
       setSpinning(false);
-
-      if (winnerToAnnounce) {
-        setWinnerState(winnerToAnnounce);
-        onSpinEnd?.(winnerToAnnounce);
-      } else {
-        // Calculate winner from random spin based on final rotation
-        const finalRotationDegrees = rotationRef.current * 360;
-        const pointerFixedAt_deg = 270; // Pointer is at the top
-
-        // Determine which original angle on the wheel is now under the pointer
-        const angleUnderPointer_orig =
-          (pointerFixedAt_deg - finalRotationDegrees + 360 * 10) % 360; // *10 for positive
-
-        let winningSegmentIndex = Math.floor(
-          angleUnderPointer_orig / anglePerItem
-        );
-        // Ensure index is within bounds
-        winningSegmentIndex = Math.max(
-          0,
-          Math.min(wheelItems.length - 1, winningSegmentIndex)
-        );
-
-        const calculatedWinner = wheelItems[winningSegmentIndex];
-
-        if (calculatedWinner) {
-          setWinnerState(calculatedWinner);
-          onSpinEnd?.(calculatedWinner);
-        } else if (wheelItems.length > 0) {
-          // Fallback, should not happen if items exist and calculation is correct
-          console.error(
-            "SpinWheel: Could not determine winner from random spin. Falling back to first item."
-          );
-          setWinnerState(wheelItems[0]);
-          onSpinEnd?.(wheelItems[0]);
-        }
-      }
+      setInternalWinner(callbackItem);
+      onSpinEnd?.(callbackItem);
     });
   };
 
-  const rotateStyle = rotateValue.interpolate({
+  // If winner prop changes, spin to it
+  useEffect(() => {
+    if (!winner || spinning) return;
+    const winnerIndex = getItemIndex(winner);
+    if (winnerIndex === -1) return;
+    spinToIndex(winnerIndex, winner);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [winner]);
+
+  // Handle random spin (if no winner is set)
+  const handleSpin = () => {
+    if (spinning || !enabled) return;
+    // If winner prop is set, ignore button (or you can allow override)
+    if (winner) return;
+
+    // Pick a random winner
+    const randomIndex = Math.floor(Math.random() * wheelItems.length);
+    const randomWinner = wheelItems[randomIndex];
+    spinToIndex(randomIndex, randomWinner);
+  };
+
+  // Animation interpolation for rotation
+  const rotate = rotateValue.interpolate({
     inputRange: [0, 1],
     outputRange: ["0deg", "360deg"],
   });
 
-  if (wheelItems.length === 0) {
-    return (
-      <View style={[styles.container, containerStyle, { height: size }]}>
-        <Text>No items to display in the wheel.</Text>
-      </View>
-    );
-  }
-
   return (
     <View style={[styles.container, containerStyle]}>
-      <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ width: size, height: size }}>
+        {/* The wheel */}
         <Animated.View
           style={[
             styles.wheelContainer,
@@ -278,66 +183,96 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
               width: size,
               height: size,
               borderRadius: size / 2,
-              transform: [{ rotate: rotateStyle }],
+              transform: [{ rotate }],
             },
           ]}
         >
           <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
             <G>
-              {wheelPaths.map(({ path, item, textX, textY, angle, color }) => (
-                <React.Fragment key={item.id}>
-                  <Path d={path} fill={color} stroke="#000000" strokeWidth={0.5} />
-                  <SvgText
-                    x={textX}
-                    y={textY}
-                    fill={item.textColor || wheelTextColor}
-                    fontSize={wheelTextStyle?.fontSize || Math.max(8, size / 25)} // Dynamic font size
-                    fontWeight={wheelTextStyle?.fontWeight || "bold"}
-                    textAnchor="middle"
-                    alignmentBaseline="central"
-                    transform={`rotate(${angle + 90}, ${textX}, ${textY} )`} // Adjusted rotation for readability
-                  >
-                    {item.label}
-                  </SvgText>
-                </React.Fragment>
-              ))}
+              {wheelPaths.map(
+                ({ path, item, textX, textY, angle }, index) => (
+                  <React.Fragment key={item.id}>
+                    <Path
+                      d={path}
+                      fill={
+                        !item.color
+                          ? colors[index % colors.length]
+                          : item.color
+                      }
+                      stroke="#000000"
+                      strokeWidth={1}
+                    />
+                    <SvgText
+                      x={textX}
+                      y={textY}
+                      fill={item.textColor || wheelTextColor}
+                      fontSize={wheelTextStyle?.fontSize || 14}
+                      fontWeight={wheelTextStyle?.fontWeight || "bold"}
+                      textAnchor="middle"
+                      alignmentBaseline="central"
+                      transform={`rotate(${angle + 180}, ${textX}, ${textY})`}
+                    >
+                      {item.label}
+                    </SvgText>
+                  </React.Fragment>
+                )
+              )}
             </G>
           </Svg>
         </Animated.View>
 
-        {centerComponent ? (
-          <View style={styles.centerComponentWrapper}>{centerComponent}</View>
-        ) : (
+        {/* The center circle */}
+        <View
+          style={[
+            styles.wheelCenter,
+            {
+              width: size / 5,
+              height: size / 5,
+              transform: [
+                { translateX: -size / 10 },
+                { translateY: -size / 10 },
+              ],
+              borderRadius: size / 5,
+            },
+            centerStyle,
+          ]}
+        >
+          {/** Optional: custom center component */}
+        </View>
+
+        {/* The pointer is a triangle on top */}
+        <View style={styles.pointerPosition}>
           <View
             style={[
-              styles.wheelCenter,
-              {
-                width: size / 5,
-                height: size / 5,
-                borderRadius: size / 10, // Should be half of width/height
-                // Centering is now handled by absolute positioning from parent
-              },
-              centerStyle,
+              styles.pointer,
+              { borderBottomColor: knobColor },
+              knobStyle,
             ]}
           />
-        )}
+        </View>
 
-        <View style={styles.pointerContainer}>
-          <View
-            style={[styles.pointer, { borderBottomColor: knobColor }, knobStyle]}
-          />
+        {/* Action Button */}
+        <View
+          style={{
+            position: "absolute",
+            width: "100%",
+            alignItems: "center",
+            justifyContent: "center",
+            bottom: -70,
+            zIndex: 2,
+          }}
+        >
+          <TouchableOpacity
+            onPress={handleSpin}
+            disabled={spinning || !enabled || !!winner}
+            style={[styles.actionButton, actionButtonStyle]}
+          >
+            <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
+              {spinButtonText}
+            </Text>
+          </TouchableOpacity>
         </View>
       </View>
-
-      <TouchableOpacity
-        onPress={handleSpin}
-        disabled={spinning || !enabled}
-        style={[styles.actionButton, actionButtonStyle]}
-      >
-        <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
-          {spinButtonText}
-        </Text>
-      </TouchableOpacity>
     </View>
   );
 };
@@ -346,58 +281,49 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     justifyContent: "center",
-    paddingVertical: 20, // Added padding
+    marginTop: 20,
+    marginBottom: 70,
   },
   wheelContainer: {
     overflow: "hidden",
-    backgroundColor: "transparent", // Ensure SVG is visible
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  centerComponentWrapper: { // For custom center component
-    position: 'absolute',
-    zIndex: 2,
+    backgroundColor: "transparent",
   },
-  wheelCenter: { // Default center circle
+  wheelCenter: {
     position: "absolute",
-    backgroundColor: "#333333", // Darker center
-    borderWidth: 2,
-    borderColor: "#FFFFFF", // White border for center
-    zIndex: 2, // Above wheel paths, below pointer
+    top: "50%",
+    left: "50%",
+    backgroundColor: "#000000",
+    borderWidth: 1,
+    borderColor: "#333333",
+    zIndex: 1,
   },
-  pointerContainer: { // Position the pointer correctly at the top center
+  pointerPosition: {
     position: "absolute",
-    top: -5, // Adjust to make pointer sit nicely on the edge
     left: "50%",
-    transform: [{ translateX: -10 }], // Half of pointer base width
-    zIndex: 3, // Above everything else on the wheel
+    transform: [{ translateX: -10 }, { rotate: "180deg" }],
+    zIndex: 2,
   },
   pointer: {
     width: 0,
     height: 0,
     backgroundColor: "transparent",
     borderStyle: "solid",
-    borderLeftWidth: 10, // Base of triangle
-    borderRightWidth: 10, // Base of triangle
-    borderBottomWidth: 20, // Height of triangle
+    borderLeftWidth: 10,
+    borderRightWidth: 10,
+    borderBottomWidth: 15,
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
-    // borderBottomColor is set by knobColor prop
+    borderBottomColor: "#D81E5B",
   },
   actionButton: {
-    marginTop: 30, // Space between wheel and button
     paddingHorizontal: 30,
     paddingVertical: 12,
     borderRadius: 25,
-    backgroundColor: "#4CAF50", // Example button color
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
+    shadowRadius: 3,
+    backgroundColor: "grey",
   },
   actionButtonText: {
-    color: "#FFFFFF",
     fontWeight: "bold",
     fontSize: 16,
   },