@medway-ui/native 1.7.2 → 1.8.0

package/src/components/SegmentControl.tsx

@@ -0,0 +1,265 @@
+import {
+  Children,
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { Pressable, View, type Insets } from "react-native";
+import * as TabsPrimitive from "@rn-primitives/tabs";
+import { cva } from "class-variance-authority";
+
+import { Badge, type BadgeProps } from "@/components/Badge";
+import { Text } from "@/components/Text";
+import { RaisedSurface } from "@/lib/raised-surface";
+import { cn } from "@/lib/utils";
+
+type SegmentSize = "sm" | "md" | "lg";
+
+const SegmentControlContext = createContext<{ size: SegmentSize }>({
+  size: "md",
+});
+
+// `min-h` instead of the web's `max-h`: a larger system font grows the segment instead of clipping it.
+const segmentControlTriggerVariants = cva(
+  "shrink flex-row items-center justify-center",
+  {
+    variants: {
+      size: {
+        sm: "min-h-7 gap-2 px-3 py-1.5",
+        md: "min-h-9 gap-2.5 px-3.5 py-2",
+        lg: "min-h-11 gap-3 px-4 py-2.5",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+);
+
+// Up to the package's 44pt touch target (`MIN_TOUCH_TARGET`), vertically only: segments sit 2px apart.
+const TRIGGER_HIT_SLOP: Record<SegmentSize, Insets | undefined> = {
+  sm: { top: 8, bottom: 8 },
+  md: { top: 4, bottom: 4 },
+  lg: undefined,
+};
+
+const segmentControlTextVariants = cva("text-center", {
+  variants: {
+    size: {
+      sm: "text-xs leading-xs",
+      md: "text-sm leading-sm",
+      lg: "text-md leading-md",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+interface SegmentControlProps
+  extends Omit<TabsPrimitive.RootProps, "value" | "onValueChange"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  size?: SegmentSize;
+  className?: string;
+  children?: ReactNode;
+}
+
+function SegmentControl({
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  size = "md",
+  className,
+  children,
+  ...props
+}: SegmentControlProps) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const value = valueProp ?? uncontrolledValue;
+  const context = useMemo(() => ({ size }), [size]);
+
+  const handleValueChange = (next: string) => {
+    if (next === value) return;
+    if (valueProp === undefined) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <SegmentControlContext.Provider value={context}>
+      <TabsPrimitive.Root
+        asChild
+        value={value}
+        onValueChange={handleValueChange}
+        {...props}
+      >
+        <View className={cn("gap-2", className)}>{children}</View>
+      </TabsPrimitive.Root>
+    </SegmentControlContext.Provider>
+  );
+}
+
+interface SegmentControlListProps extends TabsPrimitive.ListProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+function SegmentControlList({
+  className,
+  children,
+  ...props
+}: SegmentControlListProps) {
+  return (
+    <TabsPrimitive.List asChild {...props}>
+      <View
+        className={cn(
+          "flex-row items-center gap-0.5 self-start rounded-md bg-gray-background-soft p-0.5",
+          className
+        )}
+      >
+        {children}
+      </View>
+    </TabsPrimitive.List>
+  );
+}
+
+interface SegmentControlTriggerProps extends TabsPrimitive.TriggerProps {
+  className?: string;
+  children?: ReactNode;
+  icon?: ReactNode;
+  badge?: number | string;
+  badgeVariant?: BadgeProps["variant"];
+}
+
+function shouldShowBadge(
+  badge: number | string | undefined,
+  disabled: boolean
+): badge is number | string {
+  return (
+    badge != null && badge !== 0 && badge !== "" && badge !== "0" && !disabled
+  );
+}
+
+// Strings and numbers, as in `Aulas {count}`, join into one label; anything else renders as is.
+function toLabel(children: ReactNode): string | null {
+  const parts = Children.toArray(children);
+  return parts.length > 0 &&
+    parts.every((part) => typeof part === "string" || typeof part === "number")
+    ? parts.join("")
+    : null;
+}
+
+function SegmentControlTrigger({
+  className,
+  children,
+  icon,
+  badge,
+  badgeVariant,
+  value,
+  disabled,
+  accessibilityLabel,
+  ...props
+}: SegmentControlTriggerProps) {
+  const { size } = useContext(SegmentControlContext);
+  const { value: activeValue } = TabsPrimitive.useRootContext();
+  const isActive = activeValue === value;
+  const isDisabled = !!disabled;
+  const showBadge = shouldShowBadge(badge, isDisabled);
+  const label = toLabel(children);
+
+  return (
+    <TabsPrimitive.Trigger asChild value={value} disabled={disabled} {...props}>
+      <Pressable
+        accessibilityLabel={
+          accessibilityLabel ??
+          (label != null
+            ? showBadge
+              ? `${label}, ${badge}`
+              : label
+            : undefined)
+        }
+        hitSlop={TRIGGER_HIT_SLOP[size]}
+        className={cn(segmentControlTriggerVariants({ size }), className)}
+      >
+        {({ pressed }) => (
+          <>
+            {isActive ? <RaisedSurface /> : null}
+            {icon ? <View className="shrink-0">{icon}</View> : null}
+            {label != null ? (
+              <View className="min-w-0 shrink">
+                {/* Holds the semibold width, so the row doesn't shift when the active segment changes. */}
+                <Text
+                  numberOfLines={1}
+                  accessibilityElementsHidden
+                  importantForAccessibility="no-hide-descendants"
+                  className={cn(
+                    segmentControlTextVariants({ size }),
+                    "font-semibold opacity-0"
+                  )}
+                >
+                  {label}
+                </Text>
+                <Text
+                  numberOfLines={1}
+                  className={cn(
+                    segmentControlTextVariants({ size }),
+                    "absolute inset-0",
+                    isActive ? "font-semibold" : "font-medium",
+                    isDisabled
+                      ? "text-gray-foreground-muted"
+                      : isActive
+                        ? pressed
+                          ? "text-primary-foreground-emphasis"
+                          : "text-primary-foreground"
+                        : pressed
+                          ? "text-gray-foreground-emphasis"
+                          : "text-gray-foreground"
+                  )}
+                >
+                  {label}
+                </Text>
+              </View>
+            ) : (
+              children
+            )}
+            {showBadge ? (
+              <Badge size={size} variant={badgeVariant}>
+                {String(badge)}
+              </Badge>
+            ) : null}
+          </>
+        )}
+      </Pressable>
+    </TabsPrimitive.Trigger>
+  );
+}
+
+interface SegmentControlContentProps extends TabsPrimitive.ContentProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+function SegmentControlContent({
+  className,
+  children,
+  ...props
+}: SegmentControlContentProps) {
+  return (
+    <TabsPrimitive.Content asChild {...props}>
+      <View className={cn("flex-1", className)}>{children}</View>
+    </TabsPrimitive.Content>
+  );
+}
+
+export {
+  SegmentControl,
+  SegmentControlContent,
+  SegmentControlList,
+  SegmentControlTrigger,
+  segmentControlTriggerVariants,
+};
+export type {
+  SegmentControlContentProps,
+  SegmentControlListProps,
+  SegmentControlProps,
+  SegmentControlTriggerProps,
+  SegmentSize,
+};