related-ui-components 1.8.5 → 1.8.7

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,46 +15,57 @@ 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",
+//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
 ];
 
 interface SpinWheelProps {
+  // Data
   items: SpinWheelItem[];
+  predeterminedWinner?: SpinWheelItem | string | number; // New prop
+
+  // Dimensions
   size?: number;
+
+  // Behavior
   spinDuration?: number;
+  friction?: number; // Note: friction prop is declared but not used in original logic
   enabled?: boolean;
+
+  // Events
   onSpinStart?: () => void;
   onSpinEnd?: (item: SpinWheelItem) => void;
+
+  // Styling
   containerStyle?: ViewStyle;
   centerStyle?: ViewStyle;
   spinButtonText?: string;
@@ -67,14 +73,19 @@ interface SpinWheelProps {
   knobStyle?: ViewStyle;
   actionButtonStyle?: ViewStyle;
   actionButtonTextStyle?: TextStyle;
+
+  // Custom colors
+  wheelBorderColor?: string; 
   wheelTextColor?: string;
   knobColor?: string;
-  centerComponent?: React.ReactNode;
-  predeterminedWinnerId?: string | number | null; // New prop
+
+  // Custom components
+  centerComponent?: React.ReactNode; // Note: centerComponent prop is declared but not used
 }
 
 const SpinWheel: React.FC<SpinWheelProps> = ({
   items,
+  predeterminedWinner, // Destructure new prop
   size = 300,
   spinDuration = 5000,
   enabled = true,
@@ -88,189 +99,167 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
   knobColor = "#D81E5B",
   actionButtonStyle,
   actionButtonTextStyle,
+  wheelBorderColor,
   wheelTextColor = "#FFFFFF",
-  centerComponent,
-  predeterminedWinnerId = null, // Default to null
 }) => {
-  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 [_, setWinner] = useState<SpinWheelItem | null>(null);
   const rotateValue = useRef(new Animated.Value(0)).current;
-  const rotationRef = useRef(0); // Tracks cumulative rotation in "number of turns"
 
+  // Track rotation manually for calculations
+  const rotationRef = useRef(0);
+
+  // Update tracked rotation when animation completes
   useEffect(() => {
-    const listenerId = rotateValue.addListener(({ value }) => {
+    const listener = rotateValue.addListener(({ value }) => {
       rotationRef.current = value;
     });
+
     return () => {
-      rotateValue.removeListener(listenerId);
+      rotateValue.removeListener(listener);
     };
   }, [rotateValue]);
 
+  // Calculate angle for each segment
   const anglePerItem =
     wheelItems.length > 0 ? 360 / wheelItems.length : 0;
 
-  const wheelPaths = useMemo(() => {
+  // Create wheel segments
+  const generateWheelPaths = () => {
     if (wheelItems.length === 0) return [];
     return wheelItems.map((item, index) => {
       const startAngle = index * anglePerItem;
       const endAngle = (index + 1) * anglePerItem;
+
       const startRad = (startAngle * Math.PI) / 180;
       const endRad = (endAngle * Math.PI) / 180;
+
       const x1 = size / 2 + (size / 2) * Math.cos(startRad);
       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);
+
+      // 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,
-        angle: midAngle,
-        color: item.color || defaultColors[index % defaultColors.length],
+        // decorationX,
+        // decorationY,
+        angle: (startAngle + endAngle) / 2,
       };
     });
-  }, [wheelItems, anglePerItem, size]);
+  };
+
+  const wheelPaths = generateWheelPaths();
 
+  // Handle spin button press
   const handleSpin = () => {
-    if (spinning || !enabled || wheelItems.length === 0 || anglePerItem === 0) {
-      return;
-    }
+    if (spinning || !enabled || wheelItems.length === 0) return;
 
     setSpinning(true);
     onSpinStart?.();
 
-    let targetAnimationToValue: number;
-    let winnerToAnnounce: SpinWheelItem | null = null;
+    let targetRotation = 0;
+    let winnerTargetIndex = -1;
 
-    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 (predeterminedWinner) {
+      const winnerId =
+        typeof predeterminedWinner === "object"
+          ? predeterminedWinner.id
+          : predeterminedWinner;
+      winnerTargetIndex = wheelItems.findIndex((item) => item.id === winnerId);
     }
 
-    if (targetWinnerItem) {
-      winnerToAnnounce = targetWinnerItem;
-      const winnerIndex = wheelItems.indexOf(targetWinnerItem);
+    if (winnerTargetIndex !== -1) {
+      const targetSegmentCenterAngle =
+        (winnerTargetIndex + 0.5) * anglePerItem;
 
-      // Calculate the middle angle of the target segment within the wheel's coordinate system
-      const targetSegmentMidAngle_deg = (winnerIndex + 0.5) * anglePerItem;
+      const targetNormalizedAngle =
+        (270 - targetSegmentCenterAngle + 360) % 360;
 
-      // 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 currentAbsoluteAngle = rotationRef.current * 360;
+      const currentNormalizedAngle = (currentAbsoluteAngle % 360 + 360) % 360;
 
-      const currentWheelOrientation_deg = (rotationRef.current * 360) % 360;
+      // Additional angle needed to reach the targetNormalizedAngle from currentNormalizedAngle
+      const angleOffset =
+        (targetNormalizedAngle - currentNormalizedAngle + 360) % 360;
 
-      // Additional rotation needed to reach the target orientation (shortest positive path)
-      const rotationToTarget_deg =
-        (targetWheelOrientation_deg - currentWheelOrientation_deg + 360) % 360;
+      // Number of full spins (e.g., 3 to 5)
+      const numberOfFullSpins = 3 + Math.floor(Math.random() * 3); // 3, 4, or 5 spins
+      targetRotation = numberOfFullSpins * 360 + angleOffset;
 
-      const numFullRotations = 3 + Math.floor(Math.random() * 3); // 3 to 5 full spins
-      const totalAdditionalRotation_deg =
-        numFullRotations * 360 + rotationToTarget_deg;
+      // Ensure minimum rotation if already aligned (e.g. if angleOffset is 0)
+      if (targetRotation < 360) {
+        targetRotation += 360 * (3 + Math.floor(Math.random() * 3));
+      }
 
-      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;
+      const randomSpins = 3 + Math.random() * 2;
+      const randomAngle = Math.random() * 360;
+      targetRotation = 360 * randomSpins + randomAngle;
     }
 
     Animated.timing(rotateValue, {
-      toValue: targetAnimationToValue,
+      toValue: rotationRef.current + 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]);
-        }
-      }
-    });
+    }).start(() => handleSpinEnd());
   };
 
-  const rotateStyle = rotateValue.interpolate({
+  // Handle spin completion
+  const handleSpinEnd = () => {
+    setSpinning(false);
+
+    const normalizedAngle = (rotationRef.current * 360) % 360;
+    const winningIndex = Math.floor(
+      ((normalizedAngle - 270) % 360) / anglePerItem
+    );
+    const adjustedIndex =
+      (wheelItems.length - 1 - winningIndex) % wheelItems.length;
+
+    const finalWinnerIndex =
+      adjustedIndex >= 0 ? adjustedIndex : wheelItems.length + adjustedIndex;
+
+    if (finalWinnerIndex >= 0 && finalWinnerIndex < wheelItems.length) {
+      const winningItem = wheelItems[finalWinnerIndex];
+      setWinner(winningItem);
+      onSpinEnd?.(winningItem);
+    } else if (wheelItems.length > 0) {
+      onSpinEnd?.(wheelItems[0]); 
+    }
+  };
+
+  // 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 +267,100 @@ 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) => {
+                  return (
+                    <React.Fragment key={item.id}>
+                      <Path
+                        d={path}
+                        fill={
+                          item.color == "" || item.color == null
+                            ? colors[
+                                Math.floor(Math.random() * colors.length)
+                              ]
+                            : item.color
+                        }
+                        stroke="#000000"
+                        strokeWidth={1}
+                      />
+                      <SvgText
+                        x={textX}
+                        y={textY}
+                        fill={item.textColor || wheelTextColor}
+                        fontSize={wheelTextStyle?.fontSize || 14}
+                        fontWeight={
+                          (wheelTextStyle?.fontWeight as any) || "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, // Should be (size / 5) / 2 for a circle
+            },
+            centerStyle,
+          ]}
+        />
+
+        {/* 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 || wheelItems.length === 0}
+            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 +369,48 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     justifyContent: "center",
-    paddingVertical: 20, // Added padding
+    marginTop: 20,
+    marginBottom: 70, // Space for the button
   },
   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
   },
   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,
   },

package/src/index.ts

@@ -1,10 +1,10 @@
-// import { registerRootComponent } from 'expo';
-// import "react-native-reanimated";
+import { registerRootComponent } from 'expo';
+import "react-native-reanimated";
 
 
-// import App from "./app";
+import App from "./app";
 
-// registerRootComponent(App);
+registerRootComponent(App);
 
 export * from "./theme"
 export * from "./components";