react-native-terra-ui 0.5.1 → 0.7.0

package/src/components/toast/Toast.tsx

@@ -6,29 +6,22 @@ import {
   useContext,
   useId,
   useMemo,
-} from 'react';
-import type { GestureResponderEvent, PressableProps, View } from 'react-native';
-import { Pressable, StyleSheet } from 'react-native';
-
-import { useUnistyles } from 'react-native-unistyles';
-
-import type { TerraIconName, TerraTheme } from '#theme/types';
-
-import { Box } from '../box';
-import { Button, type ButtonProps } from '../button';
-import { Icon, type IconProps } from '../icon';
-import { Surface, type SurfaceProps } from '../surface';
-import { Text, type TextProps } from '../text';
-import type { ToastId as StackToastId, ToastShowOptions } from './types';
-import { hideToast, showToast } from './utils/controller';
-
-export type ToastVariant =
-  | 'default'
-  | 'accent'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger';
+} from "react";
+import type { GestureResponderEvent, PressableProps, View } from "react-native";
+import { Pressable, StyleSheet } from "react-native";
+
+import { useUnistyles } from "react-native-unistyles";
+
+import type { TerraIconName, TerraTheme } from "#theme/types";
+import { Box } from "../box";
+import { Button, type ButtonProps } from "../button";
+import { Icon, type IconProps } from "../icon";
+import { Surface, type SurfaceProps } from "../surface";
+import { Text, type TextProps } from "../text";
+import type { ToastId as StackToastId, ToastShowOptions } from "./types";
+import { hideToast, showToast } from "./utils/controller";
+
+export type ToastVariant = "default" | "accent" | "info" | "success" | "warning" | "danger";
 
 type ToastInstanceId = string | number;
 
@@ -48,9 +41,7 @@ const ToastContext = createContext<ToastContextValue | null>(null);
 function useToastContext(): ToastContextValue {
   const context = useContext(ToastContext);
   if (!context) {
-    throw new Error(
-      'Toast compound components must be rendered inside <Toast>.'
-    );
+    throw new Error("Toast compound components must be rendered inside <Toast>.");
   }
   return context;
 }
@@ -67,26 +58,26 @@ interface ToastColors {
 
 function getToastColors(variant: ToastVariant, theme: TerraTheme): ToastColors {
   const c = theme.color as unknown as Record<string, string | undefined>;
-  const get = (key: string): string => c[key] ?? '';
+  const get = (key: string): string => c[key] ?? "";
   const base = {
-    bg: get('surface.default'),
-    border: get('border.subtle'),
-    description: get('text.muted'),
+    bg: get("surface.default"),
+    border: get("border.subtle"),
+    description: get("text.muted"),
   };
 
   switch (variant) {
-    case 'accent':
+    case "accent":
       return {
         ...base,
-        title: get('action.fg.primary.subtle'),
-        icon: get('text.accent'),
-        actionBg: get('action.bg.primary'),
-        actionFg: get('action.fg.primary'),
+        title: get("action.fg.primary.subtle"),
+        icon: get("text.accent"),
+        actionBg: get("action.bg.primary"),
+        actionFg: get("action.fg.primary"),
       };
-    case 'info':
-    case 'success':
-    case 'warning':
-    case 'danger':
+    case "info":
+    case "success":
+    case "warning":
+    case "danger":
       return {
         ...base,
         title: get(`status.${variant}.bg`),
@@ -94,18 +85,18 @@ function getToastColors(variant: ToastVariant, theme: TerraTheme): ToastColors {
         actionBg: get(`status.${variant}.bg`),
         actionFg: get(`status.${variant}.fg`),
       };
-    case 'default':
+    case "default":
       return {
         ...base,
-        title: get('text.default'),
-        icon: get('text.subtle'),
-        actionBg: get('action.bg.secondary'),
-        actionFg: get('action.fg.secondary'),
+        title: get("text.default"),
+        icon: get("text.subtle"),
+        actionBg: get("action.bg.secondary"),
+        actionFg: get("action.fg.secondary"),
       };
   }
 }
 
-export interface ToastProps extends Omit<SurfaceProps, 'id' | 'variant'> {
+export interface ToastProps extends Omit<SurfaceProps, "id" | "variant"> {
   /** Visual tone for the toast. Defaults to `default`. */
   variant?: ToastVariant;
   /** Optional identifier passed back to `hide` when `Toast.Close` is pressed. */
@@ -116,101 +107,64 @@ export interface ToastProps extends Omit<SurfaceProps, 'id' | 'variant'> {
   onClose?: () => void;
 }
 
-const ToastRoot = forwardRef<ComponentRef<typeof View>, ToastProps>(
-  function Toast(
-    {
-      variant = 'default',
-      id,
-      hide,
-      onClose,
-      children,
-      nativeID: nativeIDProp,
-      style,
-      accessibilityRole = 'alert',
-      ...rest
-    },
-    ref
-  ) {
-    const { theme } = useUnistyles();
-    const generatedNativeID = useId();
-    const nativeID = nativeIDProp ?? String(id ?? generatedNativeID);
-    const colors = getToastColors(variant, theme);
-    const contextValue = useMemo<ToastContextValue>(
-      () => ({ nativeID, variant, id, hide, onClose }),
-      [nativeID, variant, id, hide, onClose]
-    );
-
-    return (
-      <ToastContext.Provider value={contextValue}>
-        <Surface
-          ref={ref}
-          variant="raised"
-          elevation="md"
-          radius="xl"
-          p="4"
-          row
-          align="center"
-          gap="2"
-          accessibilityRole={accessibilityRole}
-          accessibilityLiveRegion="polite"
-          borderWidth="hairline"
-          nativeID={nativeID}
-          style={[
-            styles.root,
-            {
-              backgroundColor: colors.bg,
-              borderColor: colors.border,
-            },
-            style,
-          ]}
-          {...rest}
-        >
-          {children}
-        </Surface>
-      </ToastContext.Provider>
-    );
-  }
-);
-
-export interface ToastTitleProps extends TextProps {}
-
-const ToastTitle = forwardRef<ComponentRef<typeof Text>, ToastTitleProps>(
-  function ToastTitle(
-    {
-      accessibilityRole = 'header',
-      color,
-      nativeID,
-      variant = 'label-lg',
-      weight,
-      ...rest
-    },
-    ref
-  ) {
-    const { theme } = useUnistyles();
-    const { nativeID: rootNativeID, variant: toastVariant } = useToastContext();
-    const colors = getToastColors(toastVariant, theme);
+const ToastRoot = forwardRef<ComponentRef<typeof View>, ToastProps>(function Toast(
+  {
+    variant = "default",
+    id,
+    hide,
+    onClose,
+    children,
+    nativeID: nativeIDProp,
+    style,
+    accessibilityRole = "alert",
+    ...rest
+  },
+  ref
+) {
+  const { theme } = useUnistyles();
+  const generatedNativeID = useId();
+  const nativeID = nativeIDProp ?? String(id ?? generatedNativeID);
+  const colors = getToastColors(variant, theme);
+  const contextValue = useMemo<ToastContextValue>(
+    () => ({ nativeID, variant, id, hide, onClose }),
+    [nativeID, variant, id, hide, onClose]
+  );
 
-    return (
-      <Text
+  return (
+    <ToastContext.Provider value={contextValue}>
+      <Surface
         ref={ref}
+        variant="raised"
+        elevation="md"
+        radius="xl"
+        p="4"
+        row
+        align="center"
+        gap="2"
         accessibilityRole={accessibilityRole}
-        color={color ?? colors.title}
-        nativeID={nativeID ?? `${rootNativeID}_label`}
-        variant={variant}
-        weight={weight ?? 'semibold'}
+        accessibilityLiveRegion="polite"
+        borderWidth="hairline"
+        nativeID={nativeID}
+        style={[
+          styles.root,
+          {
+            backgroundColor: colors.bg,
+            borderColor: colors.border,
+          },
+          style,
+        ]}
         {...rest}
-      />
-    );
-  }
-);
+      >
+        {children}
+      </Surface>
+    </ToastContext.Provider>
+  );
+});
 
-export interface ToastDescriptionProps extends TextProps {}
+export interface ToastTitleProps extends TextProps {}
 
-const ToastDescription = forwardRef<
-  ComponentRef<typeof Text>,
-  ToastDescriptionProps
->(function ToastDescription(
-  { color, nativeID, variant = 'body-sm', ...rest },
+const ToastTitle = forwardRef<ComponentRef<typeof Text>, ToastTitleProps>(function ToastTitle(
+  { accessibilityRole = "header", color, nativeID, variant = "label-lg", weight, ...rest },
   ref
 ) {
   const { theme } = useUnistyles();
@@ -220,27 +174,48 @@ const ToastDescription = forwardRef<
   return (
     <Text
       ref={ref}
-      color={color ?? colors.description}
-      nativeID={nativeID ?? `${rootNativeID}_desc`}
+      accessibilityRole={accessibilityRole}
+      color={color ?? colors.title}
+      nativeID={nativeID ?? `${rootNativeID}_label`}
       variant={variant}
+      weight={weight ?? "semibold"}
       {...rest}
     />
   );
 });
 
-export interface ToastActionProps
-  extends Omit<PressableProps, 'children' | 'disabled' | 'style'> {
+export interface ToastDescriptionProps extends TextProps {}
+
+const ToastDescription = forwardRef<ComponentRef<typeof Text>, ToastDescriptionProps>(
+  function ToastDescription({ color, nativeID, variant = "body-sm", ...rest }, ref) {
+    const { theme } = useUnistyles();
+    const { nativeID: rootNativeID, variant: toastVariant } = useToastContext();
+    const colors = getToastColors(toastVariant, theme);
+
+    return (
+      <Text
+        ref={ref}
+        color={color ?? colors.description}
+        nativeID={nativeID ?? `${rootNativeID}_desc`}
+        variant={variant}
+        {...rest}
+      />
+    );
+  }
+);
+
+export interface ToastActionProps extends Omit<PressableProps, "children" | "disabled" | "style"> {
   children?: ReactNode;
   /** Override the action button colour. Defaults to the parent Toast variant. */
   variant?: ToastVariant;
   fullWidth?: boolean;
   isDisabled?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-  style?: PressableProps['style'];
+  size?: "sm" | "md" | "lg";
+  style?: PressableProps["style"];
 }
 
 function renderActionChildren(children: ReactNode, color: string): ReactNode {
-  if (typeof children === 'string' || typeof children === 'number') {
+  if (typeof children === "string" || typeof children === "number") {
     return (
       <Text variant="label-md" weight="semibold" style={{ color }}>
         {children}
@@ -250,20 +225,8 @@ function renderActionChildren(children: ReactNode, color: string): ReactNode {
   return children;
 }
 
-const ToastAction = forwardRef<
-  ComponentRef<typeof Pressable>,
-  ToastActionProps
->(function ToastAction(
-  {
-    children,
-    variant,
-    fullWidth = false,
-    isDisabled = false,
-    size = 'sm',
-    style,
-    onPress,
-    ...rest
-  },
+const ToastAction = forwardRef<ComponentRef<typeof Pressable>, ToastActionProps>(function ToastAction(
+  { children, variant, fullWidth = false, isDisabled = false, size = "sm", style, onPress, ...rest },
   ref
 ) {
   const { theme } = useUnistyles();
@@ -285,13 +248,9 @@ const ToastAction = forwardRef<
         {
           backgroundColor: colors.actionBg,
           opacity:
-            state.pressed && !isDisabled
-              ? theme.opacity.pressed
-              : isDisabled
-                ? theme.opacity.disabled
-                : 1,
+            state.pressed && !isDisabled ? theme.opacity.pressed : isDisabled ? theme.opacity.disabled : 1,
         },
-        typeof style === 'function' ? style(state) : style,
+        typeof style === "function" ? style(state) : style,
       ]}
     >
       {renderActionChildren(children, colors.actionFg)}
@@ -299,92 +258,83 @@ const ToastAction = forwardRef<
   );
 });
 
-export interface ToastCloseProps extends Omit<ButtonProps, 'children'> {
+export interface ToastCloseProps extends Omit<ButtonProps, "children"> {
   children?: ReactNode;
-  iconProps?: Omit<IconProps, 'name'>;
+  iconProps?: Omit<IconProps, "name">;
 }
 
-const ToastClose = forwardRef<ComponentRef<typeof Button>, ToastCloseProps>(
-  function ToastClose(
-    {
-      children,
-      iconProps,
-      size = 'sm',
-      fullWidth = false,
-      isIconOnly = true,
-      variant = 'ghost',
-      accessibilityLabel = 'Close',
-      onPress,
-      ...rest
-    },
-    ref
-  ) {
-    const { theme } = useUnistyles();
-    const { id, hide, onClose, variant: toastVariant } = useToastContext();
-    const colors = getToastColors(toastVariant, theme);
-    const handlePress = (event: GestureResponderEvent) => {
-      if (id !== undefined) hide?.(id);
-      onClose?.();
-      onPress?.(event);
-    };
+const ToastClose = forwardRef<ComponentRef<typeof Button>, ToastCloseProps>(function ToastClose(
+  {
+    children,
+    iconProps,
+    size = "sm",
+    fullWidth = false,
+    isIconOnly = true,
+    variant = "ghost",
+    accessibilityLabel = "Close",
+    onPress,
+    ...rest
+  },
+  ref
+) {
+  const { theme } = useUnistyles();
+  const { id, hide, onClose, variant: toastVariant } = useToastContext();
+  const colors = getToastColors(toastVariant, theme);
+  const handlePress = (event: GestureResponderEvent) => {
+    if (id !== undefined) hide?.(id);
+    onClose?.();
+    onPress?.(event);
+  };
 
-    return (
-      <Button
-        ref={ref}
-        accessibilityLabel={accessibilityLabel}
-        fullWidth={fullWidth}
-        isIconOnly={isIconOnly}
-        onPress={handlePress}
-        size={size}
-        compact
-        variant={variant}
-        {...rest}
-      >
-        {children ?? (
-          <Icon
-            name="navigation.close"
-            size={iconProps?.size ?? 20}
-            color={iconProps?.color ?? colors.icon}
-            strokeWidth={iconProps?.strokeWidth}
-            style={iconProps?.style}
-          />
-        )}
-      </Button>
-    );
-  }
-);
+  return (
+    <Button
+      ref={ref}
+      accessibilityLabel={accessibilityLabel}
+      fullWidth={fullWidth}
+      isIconOnly={isIconOnly}
+      onPress={handlePress}
+      size={size}
+      compact
+      variant={variant}
+      {...rest}
+    >
+      {children ?? (
+        <Icon
+          name="navigation.close"
+          size={iconProps?.size ?? 20}
+          color={iconProps?.color ?? colors.icon}
+          strokeWidth={iconProps?.strokeWidth}
+          style={iconProps?.style}
+        />
+      )}
+    </Button>
+  );
+});
 
-export interface ToastIconProps extends Omit<IconProps, 'name'> {
+export interface ToastIconProps extends Omit<IconProps, "name"> {
   name?: TerraIconName;
 }
 
 const VARIANT_ICON: Partial<Record<ToastVariant, TerraIconName>> = {
-  info: 'status.info',
-  success: 'status.success',
-  warning: 'status.warning',
-  danger: 'status.danger',
+  info: "status.info",
+  success: "status.success",
+  warning: "status.warning",
+  danger: "status.danger",
 };
 
-const ToastIcon = forwardRef<ComponentRef<typeof View>, ToastIconProps>(
-  function ToastIcon({ name, color, size = 20, ...rest }, ref) {
-    const { theme } = useUnistyles();
-    const { variant } = useToastContext();
-    const colors = getToastColors(variant, theme);
-    const iconName = name ?? VARIANT_ICON[variant] ?? 'status.info';
+const ToastIcon = forwardRef<ComponentRef<typeof View>, ToastIconProps>(function ToastIcon(
+  { name, color, size = 20, ...rest },
+  ref
+) {
+  const { theme } = useUnistyles();
+  const { variant } = useToastContext();
+  const colors = getToastColors(variant, theme);
+  const iconName = name ?? VARIANT_ICON[variant] ?? "status.info";
 
-    return (
-      <Icon
-        ref={ref}
-        color={color ?? colors.icon}
-        name={iconName}
-        size={size}
-        {...rest}
-      />
-    );
-  }
-);
+  return <Icon ref={ref} color={color ?? colors.icon} name={iconName} size={size} {...rest} />;
+});
 
-export interface DefaultToastProps extends Omit<ToastProps, 'children'> {
+export interface DefaultToastProps extends Omit<ToastProps, "children"> {
   label?: ReactNode;
   description?: ReactNode;
   actionLabel?: ReactNode;
@@ -402,28 +352,22 @@ export function DefaultToast({
   showCloseButton,
   id,
   hide,
-  variant = 'default',
+  variant = "default",
   ...rest
 }: DefaultToastProps) {
-  const shouldRenderIcon = icon !== false && (icon || variant !== 'default');
+  const shouldRenderIcon = icon !== false && (icon || variant !== "default");
   const handleActionPress = () => {
     onActionPress?.({ id, hide });
   };
 
   return (
     <ToastRoot id={id} hide={hide} variant={variant} {...rest}>
-      {shouldRenderIcon ? (
-        <Box alignSelf="start">{icon ?? <ToastIcon />}</Box>
-      ) : null}
+      {shouldRenderIcon ? <Box alignSelf="start">{icon ?? <ToastIcon />}</Box> : null}
       <Box flex={1} gap="0">
         {label ? <ToastTitle>{label}</ToastTitle> : null}
-        {description ? (
-          <ToastDescription>{description}</ToastDescription>
-        ) : null}
+        {description ? <ToastDescription>{description}</ToastDescription> : null}
       </Box>
-      {actionLabel ? (
-        <ToastAction onPress={handleActionPress}>{actionLabel}</ToastAction>
-      ) : null}
+      {actionLabel ? <ToastAction onPress={handleActionPress}>{actionLabel}</ToastAction> : null}
       {showCloseButton ? <ToastClose /> : null}
     </ToastRoot>
   );
@@ -436,7 +380,7 @@ type ToastComponent = typeof ToastRoot & {
   Close: typeof ToastClose;
   Icon: typeof ToastIcon;
   show: (options: ToastShowOptions) => StackToastId;
-  hide: (id?: StackToastId | StackToastId[] | 'all') => void;
+  hide: (id?: StackToastId | StackToastId[] | "all") => void;
 };
 
 export const Toast = ToastRoot as ToastComponent;
@@ -450,14 +394,14 @@ Toast.hide = hideToast;
 
 const styles = StyleSheet.create({
   root: {
-    alignSelf: 'stretch',
+    alignSelf: "stretch",
     minHeight: 64,
   },
   action: {
-    alignItems: 'center',
-    alignSelf: 'flex-start',
+    alignItems: "center",
+    alignSelf: "flex-start",
     borderRadius: 9999,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   action_sm: {
     minHeight: 36,
@@ -472,6 +416,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
   },
   actionFullWidth: {
-    alignSelf: 'stretch',
+    alignSelf: "stretch",
   },
 });