related-ui-components 1.8.3 → 1.8.5

package/src/components/RedeemedVoucher/RedeemedVoucherSheet.tsx

@@ -165,6 +165,14 @@ const RedeemedVoucherSheet: React.FC<Props> = (props) => {
       onCopyCode(code);
     }
   };
+  const closeBottomSheet = useCallback(
+    () => {
+      bottomSheetRef.current?.close();
+    },
+    [
+      /* onClose */
+    ]
+  );
 
   // Custom backdrop component
   const renderBackdrop = useCallback(
@@ -346,7 +354,10 @@ const RedeemedVoucherSheet: React.FC<Props> = (props) => {
         {onMyVouchersButtonPress && (
           <TouchableOpacity
             style={styles.vouchersButton}
-            onPress={onMyVouchersButtonPress}
+            onPress={() => {
+              closeBottomSheet();
+              onMyVouchersButtonPress()
+            }}
           >
             <LinearGradient
               colors={primaryButtonColors as any}

package/src/components/Wheel/Wheel.tsx

@@ -1,4 +1,9 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useMemo, // Added useMemo for wheelPaths
+} from "react";
 import {
   View,
   StyleSheet,
@@ -15,56 +20,46 @@ export interface SpinWheelItem {
   id: string | number;
   label: string;
   value?: any;
-  color: string;
+  color: string; // Expect color to be provided, or handle default more explicitly
   textColor?: string;
 }
 
-//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
+// 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",
 ];
 
 interface SpinWheelProps {
-  // Data
   items: SpinWheelItem[];
-
-  // Dimensions
   size?: number;
-
-  // Behavior
   spinDuration?: number;
-  friction?: number;
   enabled?: boolean;
-
-  // Events
   onSpinStart?: () => void;
   onSpinEnd?: (item: SpinWheelItem) => void;
-
-  // Styling
   containerStyle?: ViewStyle;
   centerStyle?: ViewStyle;
   spinButtonText?: string;
@@ -72,14 +67,10 @@ interface SpinWheelProps {
   knobStyle?: ViewStyle;
   actionButtonStyle?: ViewStyle;
   actionButtonTextStyle?: TextStyle;
-
-  // Custom colors
-  wheelBorderColor?: string;
   wheelTextColor?: string;
   knobColor?: string;
-
-  // Custom components
   centerComponent?: React.ReactNode;
+  predeterminedWinnerId?: string | number | null; // New prop
 }
 
 const SpinWheel: React.FC<SpinWheelProps> = ({
@@ -98,127 +89,188 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
   actionButtonStyle,
   actionButtonTextStyle,
   wheelTextColor = "#FFFFFF",
+  centerComponent,
+  predeterminedWinnerId = null, // Default to null
 }) => {
-  const wheelItems = items.length > 0 ? items : [];
+  const wheelItems = useMemo(
+    () => (items && items.length > 0 ? items : []),
+    [items]
+  );
 
   const [spinning, setSpinning] = useState(false);
-  const [_, setWinner] = useState<SpinWheelItem | null>(null);
+  const [_winnerState, setWinnerState] = useState<SpinWheelItem | null>(null); // Renamed to avoid conflict
   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 listener = rotateValue.addListener(({ value }) => {
+    const listenerId = rotateValue.addListener(({ value }) => {
       rotationRef.current = value;
     });
-
     return () => {
-      rotateValue.removeListener(listener);
+      rotateValue.removeListener(listenerId);
     };
   }, [rotateValue]);
 
-  // Calculate angle for each segment
-  const anglePerItem = 360 / wheelItems.length;
+  const anglePerItem =
+    wheelItems.length > 0 ? 360 / wheelItems.length : 0;
 
-  // Create wheel segments
-  const generateWheelPaths = () => {
+  const wheelPaths = useMemo(() => {
+    if (wheelItems.length === 0) return [];
     return wheelItems.map((item, index) => {
       const startAngle = index * anglePerItem;
       const endAngle = (index + 1) * anglePerItem;
-
-      // Calculate path for segment
       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 = endAngle - startAngle <= 180 ? "0" : "1";
-
+      const largeArcFlag = anglePerItem <= 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(" ");
-
-      // Calculate coordinates for text and decoration
-      const midRad = ((startAngle + endAngle) / 2) * (Math.PI / 180);
+      const midAngle = startAngle + anglePerItem / 2;
+      const midRad = (midAngle * Math.PI) / 180;
       const textX = size / 2 + size * 0.32 * Math.cos(midRad);
       const textY = size / 2 + size * 0.32 * Math.sin(midRad);
-
-      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,
+        angle: midAngle,
+        color: item.color || defaultColors[index % defaultColors.length],
       };
     });
-  };
-
-  const wheelPaths = generateWheelPaths();
+  }, [wheelItems, anglePerItem, size]);
 
-  // Handle spin button press
   const handleSpin = () => {
-    if (spinning || !enabled) return;
+    if (spinning || !enabled || wheelItems.length === 0 || anglePerItem === 0) {
+      return;
+    }
 
     setSpinning(true);
     onSpinStart?.();
 
-    // Random number of spins (3-5 full rotations) plus random angle
-    const randomSpins = 3 + Math.random() * 2;
-    const randomAngle = Math.random() * 360;
-    const targetRotation = 360 * randomSpins + randomAngle;
+    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;
+
+      // 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;
+    }
 
     Animated.timing(rotateValue, {
-      toValue: rotationRef.current + targetRotation / 360,
+      toValue: targetAnimationToValue,
       duration: spinDuration,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true,
-    }).start(() => handleSpinEnd());
-  };
-
-  // Handle spin completion
-  const handleSpinEnd = () => {
-    setSpinning(false);
-
-    // Calculate winning segment based on final rotation with pointer at 270 degrees
-    const normalizedAngle = (rotationRef.current * 360) % 360;
-    // Adjust calculation to account for pointer at 270 degrees (instead of 0)
-    const winningIndex = Math.floor(
-      ((normalizedAngle - 270) % 360) / anglePerItem
-    );
-    const adjustedIndex =
-      (wheelItems.length - 1 - winningIndex) % wheelItems.length;
-    const winningItem =
-      wheelItems[
-        adjustedIndex >= 0 ? adjustedIndex : wheelItems.length + adjustedIndex
-      ];
-
-    setWinner(winningItem);
-    onSpinEnd?.(winningItem);
+    }).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]);
+        }
+      }
+    });
   };
 
-  // Animation interpolation for rotation
-  const rotate = rotateValue.interpolate({
+  const rotateStyle = 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 }}>
-        {/* The wheel */}
+      <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
         <Animated.View
           style={[
             styles.wheelContainer,
@@ -226,93 +278,66 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
               width: size,
               height: size,
               borderRadius: size / 2,
-              transform: [{ rotate }],
+              transform: [{ rotate: rotateStyle }],
             },
           ]}
         >
           <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
             <G>
-              {wheelPaths.map(
-                (
-                  { path, item, textX, textY, decorationX, decorationY, angle },
-                  index
-                ) => {
-                  return (
-                    <React.Fragment key={item.id}>
-                      <Path
-                        d={path}
-                        fill={item.color == "" || null ? colors[Math.floor(Math.random() * colors.length)] : item.color}
-                        stroke="#000000"
-                        strokeWidth={1}
-                      />
-
-                      {/* Fixed text rendering */}
-                      <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>
-                  );
-                }
-              )}
+              {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>
+              ))}
             </G>
           </Svg>
         </Animated.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
-          ]}
-        />
-
-        {/* The pointer is a triangle on top */}
-        <View style={styles.pointerPosition}>
-          <View style={[styles.pointer, { borderBottomColor: knobColor }, knobStyle]} />
-        </View>
-
-        {/* Action Button */}
-        <View
-          style={{
-            position: "absolute",
-            width: "100%",
-            alignItems: "center",
-            justifyContent: "center",
-            bottom: -70,
-            zIndex: 2,
-          }}
-        >
-          <TouchableOpacity
-            onPress={handleSpin}
-            disabled={spinning || !enabled}
-            style={[styles.actionButton,  actionButtonStyle]}
-          >
-            <Text
-              style={[styles.actionButtonText, actionButtonTextStyle]}
-            >
-              {spinButtonText}
-            </Text>
-          </TouchableOpacity>
+        {centerComponent ? (
+          <View style={styles.centerComponentWrapper}>{centerComponent}</View>
+        ) : (
+          <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,
+            ]}
+          />
+        )}
+
+        <View style={styles.pointerContainer}>
+          <View
+            style={[styles.pointer, { borderBottomColor: knobColor }, knobStyle]}
+          />
         </View>
       </View>
+
+      <TouchableOpacity
+        onPress={handleSpin}
+        disabled={spinning || !enabled}
+        style={[styles.actionButton, actionButtonStyle]}
+      >
+        <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
+          {spinButtonText}
+        </Text>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -321,52 +346,61 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     justifyContent: "center",
-    marginTop: 20,
-    marginBottom: 70, // Space for the button
+    paddingVertical: 20, // Added padding
   },
   wheelContainer: {
     overflow: "hidden",
-    backgroundColor: "transparent",
+    backgroundColor: "transparent", // Ensure SVG is visible
+    alignItems: "center",
+    justifyContent: "center",
   },
-  wheelCenter: {
+  centerComponentWrapper: { // For custom center component
+    position: 'absolute',
+    zIndex: 2,
+  },
+  wheelCenter: { // Default center circle
     position: "absolute",
-    top: "50%",
-    left: "50%",
-    backgroundColor: "#000000",
-    borderWidth: 1,
-    borderColor: "#333333",
-    zIndex: 1,
+    backgroundColor: "#333333", // Darker center
+    borderWidth: 2,
+    borderColor: "#FFFFFF", // White border for center
+    zIndex: 2, // Above wheel paths, below pointer
   },
-  pointerPosition: {
+  pointerContainer: { // Position the pointer correctly at the top center
     position: "absolute",
+    top: -5, // Adjust to make pointer sit nicely on the edge
     left: "50%",
-    transform: [{ translateX: -10 }, { rotate: "180deg" }],
-    zIndex: 2,
+    transform: [{ translateX: -10 }], // Half of pointer base width
+    zIndex: 3, // Above everything else on the wheel
   },
   pointer: {
     width: 0,
     height: 0,
     backgroundColor: "transparent",
     borderStyle: "solid",
-    borderLeftWidth: 10,
-    borderRightWidth: 10,
-    borderBottomWidth: 15,
+    borderLeftWidth: 10, // Base of triangle
+    borderRightWidth: 10, // Base of triangle
+    borderBottomWidth: 20, // Height of triangle
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
-    borderBottomColor: "#D81E5B",
+    // 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",
-    shadowRadius: 3,
-    backgroundColor: "grey"
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
   },
   actionButtonText: {
+    color: "#FFFFFF",
     fontWeight: "bold",
     fontSize: 16,
-  }
+  },
 });
 
 export default SpinWheel;