related-ui-components 1.8.6 → 1.8.8

package/src/components/Wheel/Wheel.tsx

@@ -19,20 +19,53 @@ export interface SpinWheelItem {
   textColor?: string;
 }
 
+//default random colors
 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"
+  "#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;
@@ -40,14 +73,19 @@ interface SpinWheelProps {
   knobStyle?: ViewStyle;
   actionButtonStyle?: ViewStyle;
   actionButtonTextStyle?: TextStyle;
+
+  // Custom colors
+  wheelBorderColor?: string; 
   wheelTextColor?: string;
   knobColor?: string;
-  centerComponent?: React.ReactNode;
-  winner?: SpinWheelItem | null; // Winner to spin to
+
+  // 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,
@@ -61,52 +99,72 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
   knobColor = "#D81E5B",
   actionButtonStyle,
   actionButtonTextStyle,
+  wheelBorderColor,
   wheelTextColor = "#FFFFFF",
-  winner,
 }) => {
   const wheelItems = items.length > 0 ? items : [];
+
   const [spinning, setSpinning] = useState(false);
-  const [internalWinner, setInternalWinner] = useState<SpinWheelItem | null>(null);
+  const [_, setWinner] = useState<SpinWheelItem | null>(null);
   const rotateValue = useRef(new Animated.Value(0)).current;
+
+  // Track rotation manually for calculations
   const rotationRef = useRef(0);
 
+  // Update tracked rotation when animation completes
   useEffect(() => {
     const listener = rotateValue.addListener(({ value }) => {
       rotationRef.current = value;
     });
+
     return () => {
       rotateValue.removeListener(listener);
     };
   }, [rotateValue]);
 
-  const anglePerItem = 360 / wheelItems.length;
+  // Calculate angle for each segment
+  const anglePerItem =
+    wheelItems.length > 0 ? 360 / wheelItems.length : 0;
 
-  // Generate wheel paths and text positions
+  // 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 = 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 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,
+        // decorationX,
+        // decorationY,
         angle: (startAngle + endAngle) / 2,
       };
     });
@@ -114,56 +172,82 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
 
   const wheelPaths = generateWheelPaths();
 
-  // Helper: get index of a SpinWheelItem
-  const getItemIndex = (target: SpinWheelItem) =>
-    wheelItems.findIndex((item) => item.id === target.id);
+  // Handle spin button press
+  const handleSpin = () => {
+    if (spinning || !enabled || wheelItems.length === 0) return;
 
-  // Helper: spin to a given index
-  const spinToIndex = (targetIndex: number, callbackItem: SpinWheelItem) => {
     setSpinning(true);
     onSpinStart?.();
 
-    // 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);
+    let targetRotation = 0;
+    let winnerTargetIndex = -1;
+
+    if (predeterminedWinner) {
+      const winnerId =
+        typeof predeterminedWinner === "object"
+          ? predeterminedWinner.id
+          : predeterminedWinner;
+      winnerTargetIndex = wheelItems.findIndex((item) => item.id === winnerId);
+    }
+
+    if (winnerTargetIndex !== -1) {
+      const targetSegmentCenterAngle =
+        (winnerTargetIndex + 0.5) * anglePerItem;
+
+      const targetNormalizedAngle =
+        (270 - targetSegmentCenterAngle + 360) % 360;
+
+      const currentAbsoluteAngle = rotationRef.current * 360;
+      const currentNormalizedAngle = (currentAbsoluteAngle % 360 + 360) % 360;
+
+      // Additional angle needed to reach the targetNormalizedAngle from currentNormalizedAngle
+      const angleOffset =
+        (targetNormalizedAngle - currentNormalizedAngle + 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;
+
+      // Ensure minimum rotation if already aligned (e.g. if angleOffset is 0)
+      if (targetRotation < 360) {
+        targetRotation += 360 * (3 + Math.floor(Math.random() * 3));
+      }
 
-    // Add extra spins for effect
-    const extraSpins = 3;
-    const currentRotation = rotationRef.current * 360;
-    const targetRotation = currentRotation + extraSpins * 360 + winnerAngle;
+    } else {
+      const randomSpins = 3 + Math.random() * 2;
+      const randomAngle = Math.random() * 360;
+      targetRotation = 360 * randomSpins + randomAngle;
+    }
 
     Animated.timing(rotateValue, {
-      toValue: targetRotation / 360,
+      toValue: rotationRef.current + targetRotation / 360,
       duration: spinDuration,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true,
-    }).start(() => {
-      setSpinning(false);
-      setInternalWinner(callbackItem);
-      onSpinEnd?.(callbackItem);
-    });
+    }).start(() => handleSpinEnd());
   };
 
-  // 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);
+  // 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
@@ -190,32 +274,38 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
           <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
             <G>
               {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>
-                )
+                ({ 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>
@@ -232,13 +322,11 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
                 { translateX: -size / 10 },
                 { translateY: -size / 10 },
               ],
-              borderRadius: size / 5,
+              borderRadius: size / 5, // Should be (size / 5) / 2 for a circle
             },
             centerStyle,
           ]}
-        >
-          {/** Optional: custom center component */}
-        </View>
+        />
 
         {/* The pointer is a triangle on top */}
         <View style={styles.pointerPosition}>
@@ -264,7 +352,7 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
         >
           <TouchableOpacity
             onPress={handleSpin}
-            disabled={spinning || !enabled || !!winner}
+            disabled={spinning || !enabled || wheelItems.length === 0}
             style={[styles.actionButton, actionButtonStyle]}
           >
             <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
@@ -282,7 +370,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     marginTop: 20,
-    marginBottom: 70,
+    marginBottom: 70, // Space for the button
   },
   wheelContainer: {
     overflow: "hidden",
@@ -310,10 +398,9 @@ const styles = StyleSheet.create({
     borderStyle: "solid",
     borderLeftWidth: 10,
     borderRightWidth: 10,
-    borderBottomWidth: 15,
+    borderBottomWidth: 15, 
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
-    borderBottomColor: "#D81E5B",
   },
   actionButton: {
     paddingHorizontal: 30,

package/src/components/index.ts

@@ -14,4 +14,5 @@ export * from "./Wheel";
 export * from "./CloseIcon";
 export * from "./Marquee";
 export * from "./RedeemedVoucher";
-export * from "./Button";
+export * from "./Button";
+export * from "./Skeleton";

package/src/theme/Colors.ts

@@ -49,6 +49,8 @@ export interface ThemeType {
     secondary?: string[];
     [key: string]: string[] | undefined;
   };
+  skeletonBackgroundColor? : string;
+  skeletonItemColor?: string;
 }
 
 // Updated Light Theme - True black and white oriented, less muted
@@ -96,6 +98,9 @@ export const lightTheme: ThemeType = {
     xl: 32,
     xxl: 64,
   },
+
+  skeletonBackgroundColor: "#e0e0e0",
+  skeletonItemColor: "#2c2c2c"
 };
 
 // Updated Dark Theme - True black and white oriented, less muted
@@ -143,4 +148,7 @@ export const darkTheme: ThemeType = {
     xl: 32,
     xxl: 64,
   },
+
+  skeletonBackgroundColor: "#f5f5f5",
+  skeletonItemColor: "#444444"
 };