@medway-ui/native 1.7.2 → 1.8.1

package/src/components/Switch.tsx

@@ -1,57 +1,109 @@
-import { useState, useEffect, type ReactNode } from "react";
-import { View, type ViewStyle } from "react-native";
+import {
+  cloneElement,
+  isValidElement,
+  memo,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { StyleSheet, type ViewStyle } from "react-native";
+import { cssInterop } from "nativewind";
 import * as SwitchPrimitive from "@rn-primitives/switch";
 import Animated, {
-  useSharedValue,
+  Easing,
+  interpolateColor,
   useAnimatedStyle,
+  useSharedValue,
   withTiming,
-  Easing,
+  type SharedValue,
 } from "react-native-reanimated";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { getMinTouchHitSlop } from "@/lib/touch-target";
-import { useThemeColor } from "@/hooks/useThemeColor";
+import { useThemeColor, withAlpha } from "@/hooks/useThemeColor";
 
-interface SwitchProps
-  extends Omit<
-      SwitchPrimitive.RootProps,
-      "checked" | "onCheckedChange" | "children"
-    >,
-    VariantProps<typeof switchVariants> {
-  checked?: boolean;
-  defaultChecked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  checkedIcon?: ReactNode;
-  uncheckedIcon?: ReactNode;
-}
+// `@rn-primitives/switch` renders a plain Pressable — cssInterop makes `className` work.
+const StyledSwitchRoot = cssInterop(SwitchPrimitive.Root, {
+  className: "style",
+});
 
-const THUMB_SIZES: Record<"sm" | "md" | "lg", number> = {
+type SwitchSize = "sm" | "md" | "lg";
+
+type SwitchIconProps = {
+  color?: string;
+  width?: number;
+  height?: number;
+};
+
+const BORDER_WIDTH = 2;
+/** Gap between thumb and inner edge of the track border (web `translate-x-0.5`). */
+const THUMB_INSET = 2;
+const CENTER: ViewStyle = { alignItems: "center", justifyContent: "center" };
+
+const THUMB_SIZES: Record<SwitchSize, number> = {
   sm: 8,
   md: 12,
   lg: 16,
 };
 
-const THUMB_TRANSLATE: Record<"sm" | "md" | "lg", number> = {
-  sm: 11,
-  md: 15,
-  lg: 19,
+const ICON_SIZES: Record<SwitchSize, number> = {
+  sm: 8,
+  md: 12,
+  lg: 14,
 };
 
-const SWITCH_DIMENSIONS: Record<"sm" | "md" | "lg", { width: number; height: number }> = {
-  sm: { width: 24, height: 16 },
-  md: { width: 32, height: 20 },
-  lg: { width: 40, height: 24 },
-};
+/** Same scale as web `h-4 w-6` / `h-5 w-8` / `h-6 w-10` at 16px rem. */
+const SWITCH_DIMENSIONS: Record<SwitchSize, { width: number; height: number }> =
+  {
+    sm: { width: 24, height: 16 },
+    md: { width: 32, height: 20 },
+    lg: { width: 40, height: 24 },
+  };
+
+/**
+ * Thumb is a sibling of the bordered track (not a child of it), so offsets are
+ * from the root's outer box. That avoids Yoga content-box quirks where absolute
+ * children of a bordered view shift the knob down / past the right edge.
+ *
+ * off  = border + inset
+ * on   = width - border - inset - thumb
+ * on+disabled keeps a 1px tighter right inset, matching web.
+ */
+function getThumbTranslateX(
+  trackWidth: number,
+  thumbSize: number,
+  checked: boolean,
+  disabled: boolean
+): number {
+  const off = BORDER_WIDTH + THUMB_INSET;
+  if (!checked) return off;
+  const on = trackWidth - BORDER_WIDTH - THUMB_INSET - thumbSize;
+  return disabled ? on - 1 : on;
+}
+
+/**
+ * Even curve. A strong ease-out spends the last frames crawling, which reads
+ * as the thumb catching. Track and thumb colors ride the same curve.
+ */
+const THUMB_MOTION = {
+  duration: 250,
+  easing: Easing.inOut(Easing.cubic),
+} as const;
 
-const switchVariants = cva("rounded-full border-2 items-center shrink-0", {
+// Px, not `h-6 w-10`: NativeWind resolves rem as 14px on native, which shrinks
+// the track below SWITCH_DIMENSIONS and pushes the thumb down and out the right.
+const switchVariants = cva("shrink-0", {
   variants: {
     variant: {
       regular: "",
     },
     size: {
-      sm: "h-4 w-6",
-      md: "h-5 w-8",
-      lg: "h-6 w-10",
+      sm: "h-[16px] w-[24px]",
+      md: "h-[20px] w-[32px]",
+      lg: "h-[24px] w-[40px]",
     },
   },
   defaultVariants: {
@@ -60,119 +112,255 @@ const switchVariants = cva("rounded-full border-2 items-center shrink-0", {
   },
 });
 
-function Switch({
+interface SwitchProps
+  extends Omit<
+      SwitchPrimitive.RootProps,
+      "checked" | "onCheckedChange" | "children"
+    >,
+    VariantProps<typeof switchVariants> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  checkedIcon?: ReactNode;
+  uncheckedIcon?: ReactNode;
+}
+
+function renderThumbIcon(icon: ReactNode, color: string, size: number) {
+  if (!isValidElement<SwitchIconProps>(icon)) return icon;
+
+  return cloneElement(icon as ReactElement<SwitchIconProps>, {
+    color: icon.props.color ?? color,
+    width: icon.props.width ?? size,
+    height: icon.props.height ?? size,
+  });
+}
+
+type SwitchThumbIconsProps = {
+  progress: SharedValue<number>;
+  checkedIcon: ReactNode;
+  uncheckedIcon: ReactNode;
+  checkedIconColor: string;
+  uncheckedIconColor: string;
+  iconSize: number;
+};
+
+function SwitchThumbIcons({
+  progress,
+  checkedIcon,
+  uncheckedIcon,
+  checkedIconColor,
+  uncheckedIconColor,
+  iconSize,
+}: SwitchThumbIconsProps) {
+  const checkedIconStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+  }));
+  const uncheckedIconStyle = useAnimatedStyle(() => ({
+    opacity: 1 - progress.value,
+  }));
+
+  return (
+    <>
+      <Animated.View
+        style={[StyleSheet.absoluteFill, CENTER, uncheckedIconStyle]}
+      >
+        {renderThumbIcon(uncheckedIcon, uncheckedIconColor, iconSize)}
+      </Animated.View>
+      <Animated.View
+        style={[StyleSheet.absoluteFill, CENTER, checkedIconStyle]}
+      >
+        {renderThumbIcon(checkedIcon, checkedIconColor, iconSize)}
+      </Animated.View>
+    </>
+  );
+}
+
+const Switch = memo(function Switch({
   className,
   size = "md",
-  variant,
+  variant = "regular",
   checkedIcon,
   uncheckedIcon,
   checked,
   defaultChecked,
   onCheckedChange,
-  disabled,
+  disabled = false,
   style,
   ...props
 }: SwitchProps) {
   const resolvedSize = size ?? "md";
   const dimensions = SWITCH_DIMENSIONS[resolvedSize];
-  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+  const thumbSize = THUMB_SIZES[resolvedSize];
+  const iconSize = ICON_SIZES[resolvedSize];
+  const [internalChecked, setInternalChecked] = useState(
+    defaultChecked ?? false
+  );
   const isControlled = checked !== undefined;
-  const isChecked = isControlled ? (checked ?? false) : internalChecked;
-
-  const trackOn = useThemeColor("primary-background-fill");
-  const trackOff = useThemeColor("surface-card");
-  const trackDisabled = useThemeColor("gray-background-soft-muted");
-  const trackBorder = useThemeColor("gray-stroke-muted");
-  const thumbOn = useThemeColor("primary-foreground-onfill");
-  const thumbOff = useThemeColor("gray-foreground-muted");
-  const thumbDisabled = useThemeColor("gray-background-fill-muted");
-
-  const translateX = useSharedValue(isChecked ? THUMB_TRANSLATE[resolvedSize] : 2);
-
-  useEffect(() => {
-    translateX.value = withTiming(isChecked ? THUMB_TRANSLATE[resolvedSize] : 2, {
-      duration: 180,
-      easing: Easing.out(Easing.ease),
-    });
-  }, [isChecked, resolvedSize, translateX]);
-
-  const thumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
-  }));
-
+  const isChecked = isControlled ? checked : internalChecked;
   const hasIcons = Boolean(checkedIcon || uncheckedIcon);
-  const thumbSize = THUMB_SIZES[resolvedSize];
+
+  const checkedIconColor = useThemeColor(
+    disabled ? "gray-300" : "primary-foreground-onfill"
+  );
+  const uncheckedIconColor = useThemeColor(
+    disabled ? "gray-300" : "gray-foreground"
+  );
+  const trackOffColor = useThemeColor(
+    disabled ? "gray-background-soft-muted" : "surface-card"
+  );
+  const trackOnColor = useThemeColor(
+    disabled ? "gray-background-soft-muted" : "primary-background-fill"
+  );
+  const borderOffColor = useThemeColor("gray-stroke-muted");
+  const borderOnColor = disabled ? borderOffColor : withAlpha(borderOffColor, 0);
+  const thumbDisabledColor = useThemeColor("gray-background-fill-muted");
+  const thumbOnToken = useThemeColor("primary-foreground-onfill");
+  const thumbOffToken = useThemeColor("gray-foreground-muted");
+  const thumbOffColor = hasIcons
+    ? "rgba(0, 0, 0, 0)"
+    : disabled
+      ? thumbDisabledColor
+      : thumbOffToken;
+  const thumbOnColor = hasIcons
+    ? "rgba(0, 0, 0, 0)"
+    : disabled
+      ? thumbDisabledColor
+      : thumbOnToken;
+
+  const offX = getThumbTranslateX(dimensions.width, thumbSize, false, disabled);
+  const onX = getThumbTranslateX(dimensions.width, thumbSize, true, disabled);
+  // Root has no border — center against the outer height.
+  const thumbTop = (dimensions.height - thumbSize) / 2;
+
+  // Single UI-thread driver for position, colors and icons. In controlled mode
+  // the visual only moves when `checked` changes (same as the web Radix switch).
+  const progress = useSharedValue(isChecked ? 1 : 0);
+  const targetRef = useRef(isChecked);
+
+  const animateTo = (next: boolean) => {
+    if (targetRef.current === next) return;
+    targetRef.current = next;
+    progress.value = withTiming(next ? 1 : 0, THUMB_MOTION);
+  };
+
+  useLayoutEffect(() => {
+    animateTo(isChecked);
+  }, [isChecked]);
 
   const handleCheckedChange = (nextChecked: boolean) => {
-    if (!isControlled) setInternalChecked(nextChecked);
+    if (!isControlled) {
+      animateTo(nextChecked);
+      setInternalChecked(nextChecked);
+    }
     onCheckedChange?.(nextChecked);
   };
 
-  const trackBackgroundColor = disabled
-    ? trackDisabled
-    : isChecked
-      ? trackOn
-      : trackOff;
-
-  const trackBorderColor = disabled || !isChecked ? trackBorder : "transparent";
-
-  const thumbBackgroundColor = disabled
-    ? thumbDisabled
-    : hasIcons
-      ? "transparent"
-      : isChecked
-        ? thumbOn
-        : thumbOff;
-
-  const rootStyle: ViewStyle = {
-    width: dimensions.width,
-    height: dimensions.height,
-    minWidth: dimensions.width,
-    minHeight: dimensions.height,
-    borderRadius: dimensions.height / 2,
-    borderWidth: 2,
-    alignItems: "flex-start",
-    justifyContent: "center",
-    backgroundColor: trackBackgroundColor,
-    borderColor: trackBorderColor,
-  };
+  const trackMotionStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [trackOffColor, trackOnColor]
+    ),
+    borderColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [borderOffColor, borderOnColor]
+    ),
+  }));
+
+  const thumbMotionStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: offX + (onX - offX) * progress.value }],
+  }), [offX, onX]);
+
+  const thumbColorStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [thumbOffColor, thumbOnColor]
+    ),
+  }));
+
+  const baseRootStyle = useMemo<ViewStyle>(
+    () => ({
+      width: dimensions.width,
+      height: dimensions.height,
+      minWidth: dimensions.width,
+      minHeight: dimensions.height,
+      borderRadius: dimensions.height / 2,
+      borderWidth: 0,
+      padding: 0,
+      overflow: "visible",
+    }),
+    [dimensions.height, dimensions.width]
+  );
+
+  const trackStyle = useMemo<ViewStyle>(
+    () => ({
+      ...StyleSheet.absoluteFill,
+      borderRadius: dimensions.height / 2,
+      borderWidth: BORDER_WIDTH,
+    }),
+    [dimensions.height]
+  );
+
+  const thumbStyle = useMemo<ViewStyle>(
+    () => ({
+      position: "absolute",
+      top: thumbTop,
+      left: 0,
+      width: thumbSize,
+      height: thumbSize,
+      borderRadius: thumbSize / 2,
+      alignItems: "center",
+      justifyContent: "center",
+    }),
+    [thumbSize, thumbTop]
+  );
+
+  const hitSlop = useMemo(
+    () => getMinTouchHitSlop(dimensions.width, dimensions.height),
+    [dimensions.height, dimensions.width]
+  );
 
   return (
-    <SwitchPrimitive.Root
+    <StyledSwitchRoot
+      hitSlop={hitSlop}
+      {...props}
       checked={isChecked}
       onCheckedChange={handleCheckedChange}
       disabled={disabled}
-      hitSlop={getMinTouchHitSlop(dimensions.width, dimensions.height)}
+      className={cn(
+        switchVariants({ size: resolvedSize, variant }),
+        className
+      )}
       style={(state) => [
-        rootStyle,
+        baseRootStyle,
         typeof style === "function" ? style(state) : style,
       ]}
-      className={cn(switchVariants({ size, variant }), className)}
-      {...props}
     >
-      <SwitchPrimitive.Thumb asChild>
-        <Animated.View
-          style={[
-            thumbStyle,
-            {
-              width: thumbSize,
-              height: thumbSize,
-              borderRadius: thumbSize / 2,
-              backgroundColor: thumbBackgroundColor,
-            },
-          ]}
-        >
-          {hasIcons ? (
-            <View className="flex-1 items-center justify-center">
-              {isChecked && checkedIcon}
-              {!isChecked && uncheckedIcon}
-            </View>
-          ) : null}
-        </Animated.View>
-      </SwitchPrimitive.Thumb>
-    </SwitchPrimitive.Root>
+      <Animated.View
+        pointerEvents="none"
+        style={[trackStyle, trackMotionStyle]}
+      />
+      <Animated.View
+        pointerEvents="none"
+        collapsable={false}
+        style={[thumbStyle, thumbMotionStyle, thumbColorStyle]}
+      >
+        {hasIcons ? (
+          <SwitchThumbIcons
+            progress={progress}
+            checkedIcon={checkedIcon}
+            uncheckedIcon={uncheckedIcon}
+            checkedIconColor={checkedIconColor}
+            uncheckedIconColor={uncheckedIconColor}
+            iconSize={iconSize}
+          />
+        ) : null}
+      </Animated.View>
+    </StyledSwitchRoot>
   );
-}
+});
 
 export { Switch, switchVariants };
 export type { SwitchProps };