react-native-terra-ui 0.5.1 → 0.6.0

package/src/components/toast/ToastProvider.tsx

@@ -1,22 +1,11 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-} from 'react';
-import { Keyboard, Platform } from 'react-native';
-
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ToastAnimatedItem } from './parts/ToastAnimatedItem';
-import { DefaultToast } from './Toast';
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
+import { Keyboard, Platform } from "react-native";
+
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { ToastAnimatedItem } from "./parts/ToastAnimatedItem";
+import { DefaultToast } from "./Toast";
 import type {
   ToastComponentProps,
   ToastDuration,
@@ -28,14 +17,14 @@ import type {
   ToastShowConfig,
   ToastShowOptions,
   ToastShowOptionsWithComponent,
-} from './types';
-import { setToastManager } from './utils/controller';
+} from "./types";
+import { setToastManager } from "./utils/controller";
 
 type ToastAction =
-  | { type: 'show'; item: ToastItem }
-  | { type: 'hide'; ids: ToastId[] }
-  | { type: 'hideAll' }
-  | { type: 'hidePlacement'; placement: ToastPlacement };
+  | { type: "show"; item: ToastItem }
+  | { type: "hide"; ids: ToastId[] }
+  | { type: "hideAll" }
+  | { type: "hidePlacement"; placement: ToastPlacement };
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE_TOASTS = 3;
@@ -44,24 +33,18 @@ const ToastManagerContext = createContext<ToastManager | null>(null);
 
 function toastReducer(state: ToastItem[], action: ToastAction): ToastItem[] {
   switch (action.type) {
-    case 'show':
-      return [
-        ...state.filter((toast) => toast.id !== action.item.id),
-        action.item,
-      ];
-    case 'hide':
+    case "show":
+      return [...state.filter((toast) => toast.id !== action.item.id), action.item];
+    case "hide":
       return state.filter((toast) => !action.ids.some((id) => id === toast.id));
-    case 'hideAll':
+    case "hideAll":
       return [];
-    case 'hidePlacement':
+    case "hidePlacement":
       return state.filter((toast) => toast.placement !== action.placement);
   }
 }
 
-function createDefaultToastComponent(
-  config: ToastShowConfig,
-  manager: ToastManager
-) {
+function createDefaultToastComponent(config: ToastShowConfig, manager: ToastManager) {
   return ({ id, hide }: ToastComponentProps) => (
     <DefaultToast
       id={id}
@@ -77,25 +60,15 @@ function createDefaultToastComponent(
   );
 }
 
-function isCustomToast(
-  options: ToastShowOptions
-): options is ToastShowOptionsWithComponent {
-  return (
-    typeof options === 'object' && options !== null && 'component' in options
-  );
+function isCustomToast(options: ToastShowOptions): options is ToastShowOptionsWithComponent {
+  return typeof options === "object" && options !== null && "component" in options;
 }
 
-function normalizePlacement(
-  placement: ToastPlacement | undefined,
-  fallback: ToastPlacement
-): ToastPlacement {
+function normalizePlacement(placement: ToastPlacement | undefined, fallback: ToastPlacement): ToastPlacement {
   return placement ?? fallback;
 }
 
-function normalizeDuration(
-  duration: ToastDuration | undefined,
-  fallback: number
-): ToastDuration {
+function normalizeDuration(duration: ToastDuration | undefined, fallback: number): ToastDuration {
   return duration ?? fallback;
 }
 
@@ -105,7 +78,7 @@ function toastId(counter: number): ToastId {
 
 export function ToastProvider({
   children,
-  defaultPlacement = 'top',
+  defaultPlacement = "top",
   defaultDuration = DEFAULT_DURATION,
   maxVisibleToasts = DEFAULT_MAX_VISIBLE_TOASTS,
   offset,
@@ -113,9 +86,7 @@ export function ToastProvider({
   const [toasts, dispatch] = useReducer(toastReducer, []);
   const toastsRef = useRef<ToastItem[]>([]);
   const counterRef = useRef(0);
-  const timeoutsRef = useRef<Map<ToastId, ReturnType<typeof setTimeout>>>(
-    new Map()
-  );
+  const timeoutsRef = useRef<Map<ToastId, ReturnType<typeof setTimeout>>>(new Map());
 
   useEffect(() => {
     toastsRef.current = toasts;
@@ -127,26 +98,19 @@ export function ToastProvider({
     timeoutsRef.current.delete(id);
   }, []);
 
-  const hide = useCallback<ToastManager['hide']>(
+  const hide = useCallback<ToastManager["hide"]>(
     (id) => {
-      if (id === 'all') {
+      if (id === "all") {
         for (const toast of toastsRef.current) {
           clearToastTimeout(toast.id);
           toast.onHide?.();
         }
         toastsRef.current = [];
-        dispatch({ type: 'hideAll' });
+        dispatch({ type: "hideAll" });
         return;
       }
       const lastToastId = toastsRef.current[toastsRef.current.length - 1]?.id;
-      const ids =
-        id === undefined
-          ? lastToastId
-            ? [lastToastId]
-            : []
-          : Array.isArray(id)
-            ? id
-            : [id];
+      const ids = id === undefined ? (lastToastId ? [lastToastId] : []) : Array.isArray(id) ? id : [id];
 
       if (ids.length === 0) return;
 
@@ -154,34 +118,29 @@ export function ToastProvider({
         clearToastTimeout(toastId);
         toastsRef.current.find((toast) => toast.id === toastId)?.onHide?.();
       }
-      toastsRef.current = toastsRef.current.filter(
-        (toast) => !ids.some((toastId) => toastId === toast.id)
-      );
-      dispatch({ type: 'hide', ids });
+      toastsRef.current = toastsRef.current.filter((toast) => !ids.some((toastId) => toastId === toast.id));
+      dispatch({ type: "hide", ids });
     },
     [clearToastTimeout]
   );
 
   const managerRef = useRef<ToastManager>({
-    show: () => '',
+    show: () => "",
     hide,
   });
 
-  const show = useCallback<ToastManager['show']>(
+  const show = useCallback<ToastManager["show"]>(
     (options) => {
       const nextId =
-        typeof options === 'object' && options !== null && 'id' in options
+        typeof options === "object" && options !== null && "id" in options
           ? (options.id ?? toastId(counterRef.current++))
           : toastId(counterRef.current++);
 
       const item =
-        typeof options === 'string'
+        typeof options === "string"
           ? {
               id: nextId,
-              component: createDefaultToastComponent(
-                { label: options },
-                managerRef.current
-              ),
+              component: createDefaultToastComponent({ label: options }, managerRef.current),
               duration: defaultDuration,
               placement: defaultPlacement,
             }
@@ -190,60 +149,36 @@ export function ToastProvider({
                 id: nextId,
                 component: options.component,
                 duration: normalizeDuration(options.duration, defaultDuration),
-                placement: normalizePlacement(
-                  options.placement,
-                  defaultPlacement
-                ),
+                placement: normalizePlacement(options.placement, defaultPlacement),
                 onHide: options.onHide,
               }
             : {
                 id: nextId,
-                component: createDefaultToastComponent(
-                  options,
-                  managerRef.current
-                ),
+                component: createDefaultToastComponent(options, managerRef.current),
                 duration: normalizeDuration(options.duration, defaultDuration),
-                placement: normalizePlacement(
-                  options.placement,
-                  defaultPlacement
-                ),
+                placement: normalizePlacement(options.placement, defaultPlacement),
                 onHide: options.onHide,
               };
 
-      const oppositePlacement = item.placement === 'top' ? 'bottom' : 'top';
-      const oppositeToasts = toastsRef.current.filter(
-        (t) => t.placement === oppositePlacement
-      );
+      const oppositePlacement = item.placement === "top" ? "bottom" : "top";
+      const oppositeToasts = toastsRef.current.filter((t) => t.placement === oppositePlacement);
       if (oppositeToasts.length > 0) {
         for (const t of oppositeToasts) {
           clearToastTimeout(t.id);
           t.onHide?.();
         }
-        toastsRef.current = toastsRef.current.filter(
-          (t) => t.placement !== oppositePlacement
-        );
-        dispatch({ type: 'hidePlacement', placement: oppositePlacement });
+        toastsRef.current = toastsRef.current.filter((t) => t.placement !== oppositePlacement);
+        dispatch({ type: "hidePlacement", placement: oppositePlacement });
       }
 
       clearToastTimeout(item.id);
-      toastsRef.current = [
-        ...toastsRef.current.filter((toast) => toast.id !== item.id),
-        item,
-      ];
-      dispatch({ type: 'show', item });
-      if (
-        typeof options === 'object' &&
-        options !== null &&
-        'onShow' in options
-      ) {
+      toastsRef.current = [...toastsRef.current.filter((toast) => toast.id !== item.id), item];
+      dispatch({ type: "show", item });
+      if (typeof options === "object" && options !== null && "onShow" in options) {
         options.onShow?.();
       }
 
-      if (
-        item.duration !== 'persistent' &&
-        Number.isFinite(item.duration) &&
-        item.duration > 0
-      ) {
+      if (item.duration !== "persistent" && Number.isFinite(item.duration) && item.duration > 0) {
         const timeout = setTimeout(() => hide(item.id), item.duration);
         timeoutsRef.current.set(item.id, timeout);
       }
@@ -267,8 +202,8 @@ export function ToastProvider({
     };
   }, [manager]);
 
-  const topToasts = toasts.filter((toast) => toast.placement === 'top');
-  const bottomToasts = toasts.filter((toast) => toast.placement === 'bottom');
+  const topToasts = toasts.filter((toast) => toast.placement === "top");
+  const bottomToasts = toasts.filter((toast) => toast.placement === "bottom");
 
   return (
     <ToastManagerContext.Provider value={manager}>
@@ -296,32 +231,22 @@ interface ToastViewportProps {
   toasts: ToastItem[];
   manager: ToastManager;
   maxVisibleToasts: number;
-  offset?: ToastProviderProps['offset'];
+  offset?: ToastProviderProps["offset"];
 }
 
-function ToastViewport({
-  placement,
-  toasts,
-  manager,
-  maxVisibleToasts,
-  offset,
-}: ToastViewportProps) {
+function ToastViewport({ placement, toasts, manager, maxVisibleToasts, offset }: ToastViewportProps) {
   const safeAreaInsets = useSafeAreaInsets();
   const heights = useSharedValue<Record<ToastId, number>>({});
   const total = useSharedValue(0);
   const keyboardHeight = useSharedValue(0);
 
-  const baseBottom =
-    offset?.bottom ?? safeAreaInsets.bottom + (Platform.OS === 'ios' ? 6 : 12);
-  const baseTop =
-    offset?.top ?? safeAreaInsets.top + (Platform.OS === 'ios' ? 0 : 12);
+  const baseBottom = offset?.bottom ?? safeAreaInsets.bottom + (Platform.OS === "ios" ? 6 : 12);
+  const baseTop = offset?.top ?? safeAreaInsets.top + (Platform.OS === "ios" ? 0 : 12);
 
   useEffect(() => {
-    if (placement !== 'bottom') return;
-    const showEvent =
-      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent =
-      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    if (placement !== "bottom") return;
+    const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
     const showSub = Keyboard.addListener(showEvent, (e) => {
       keyboardHeight.value = withTiming(e.endCoordinates.height);
     });
@@ -334,10 +259,10 @@ function ToastViewport({
     };
   }, [keyboardHeight, placement]);
 
-  const gap = Platform.OS === 'ios' ? 6 : 12;
+  const gap = Platform.OS === "ios" ? 6 : 12;
 
   const keyboardStyle = useAnimatedStyle(() => {
-    if (placement === 'top') return { top: baseTop };
+    if (placement === "top") return { top: baseTop };
     if (keyboardHeight.value > 0) {
       return { bottom: keyboardHeight.value + gap };
     }
@@ -363,7 +288,7 @@ function ToastViewport({
       pointerEvents="box-none"
       style={[
         {
-          position: 'absolute',
+          position: "absolute",
           zIndex: 9999,
           elevation: 9999,
           left: offset?.left ?? safeAreaInsets.left + 12,
@@ -397,7 +322,7 @@ function ToastViewport({
 export function useToast(): ToastManager {
   const manager = useContext(ToastManagerContext);
   if (!manager) {
-    throw new Error('useToast must be used within <TerraUIProvider>.');
+    throw new Error("useToast must be used within <TerraUIProvider>.");
   }
   return manager;
 }

package/src/components/toast/index.ts

@@ -8,9 +8,9 @@ export type {
   ToastProps,
   ToastTitleProps,
   ToastVariant,
-} from './Toast';
-export { DefaultToast, Toast } from './Toast';
-export { ToastProvider, useToast } from './ToastProvider';
+} from "./Toast";
+export { DefaultToast, Toast } from "./Toast";
+export { ToastProvider, useToast } from "./ToastProvider";
 export type {
   ToastActionHelpers,
   ToastComponentProps,
@@ -23,4 +23,4 @@ export type {
   ToastShowConfig,
   ToastShowOptions,
   ToastShowOptionsWithComponent,
-} from './types';
+} from "./types";

package/src/components/toast/parts/ToastAnimatedItem.tsx

@@ -1,5 +1,5 @@
-import type { ReactElement } from 'react';
-import { StyleSheet, View } from 'react-native';
+import type { ReactElement } from "react";
+import { StyleSheet, View } from "react-native";
 
 import Animated, {
   Easing,
@@ -10,9 +10,9 @@ import Animated, {
   useAnimatedStyle,
   withSpring,
   withTiming,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
 
-import type { ToastId, ToastPlacement } from '../types';
+import type { ToastId, ToastPlacement } from "../types";
 
 export interface ToastAnimatedItemProps {
   children: ReactElement;
@@ -91,17 +91,12 @@ export function ToastAnimatedItem({
   const containerStyle = useAnimatedStyle(() => {
     const heightEntries = Object.entries(heights.value);
     const lastToastId = heightEntries[heightEntries.length - 1]?.[0];
-    const lastToastHeight = lastToastId
-      ? heights.value[lastToastId]
-      : undefined;
+    const lastToastHeight = lastToastId ? heights.value[lastToastId] : undefined;
     const totalValue = total.value;
-    const sign = placement === 'top' ? 1 : -1;
+    const sign = placement === "top" ? 1 : -1;
 
     const inputRange = [totalValue - 1, totalValue - 2];
-    const opacityInputRange = [
-      totalValue - maxVisibleToasts,
-      totalValue - maxVisibleToasts - 1,
-    ];
+    const opacityInputRange = [totalValue - maxVisibleToasts, totalValue - maxVisibleToasts - 1];
 
     const opacity = interpolate(index, opacityInputRange, opacityValue);
     const translateY = interpolate(
@@ -122,7 +117,7 @@ export function ToastAnimatedItem({
             mass: 3,
           })
         : undefined,
-      pointerEvents: opacity === 0 ? 'none' : 'auto',
+      pointerEvents: opacity === 0 ? "none" : "auto",
       opacity: withTiming(opacity, opacityTimingConfig),
       transform: [
         { translateY: withTiming(translateY, translateYTimingConfig) },
@@ -134,13 +129,10 @@ export function ToastAnimatedItem({
 
   return (
     <Animated.View
-      entering={placement === 'top' ? enteringTop : enteringBottom}
-      exiting={placement === 'top' ? exitingTop : exitingBottom}
+      entering={placement === "top" ? enteringTop : enteringBottom}
+      exiting={placement === "top" ? exitingTop : exitingBottom}
       pointerEvents="box-none"
-      style={[
-        styles.position,
-        placement === 'top' ? styles.top : styles.bottom,
-      ]}
+      style={[styles.position, placement === "top" ? styles.top : styles.bottom]}
     >
       <Animated.View style={containerStyle}>{children}</Animated.View>
       <View
@@ -157,7 +149,7 @@ export function ToastAnimatedItem({
           };
         }}
       >
-        {process.env.NODE_ENV === 'test' ? null : children}
+        {process.env.NODE_ENV === "test" ? null : children}
       </View>
     </Animated.View>
   );
@@ -165,7 +157,7 @@ export function ToastAnimatedItem({
 
 const styles = StyleSheet.create({
   position: {
-    position: 'absolute',
+    position: "absolute",
     left: 0,
     right: 0,
   },
@@ -176,7 +168,7 @@ const styles = StyleSheet.create({
     bottom: 0,
   },
   measurement: {
-    position: 'absolute',
+    position: "absolute",
     left: 0,
     right: 0,
     opacity: 0,

package/src/components/toast/types.ts

@@ -1,17 +1,17 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from "react";
 
-import type { ToastProps, ToastVariant } from './Toast';
+import type { ToastProps, ToastVariant } from "./Toast";
 
 export type ToastId = string;
-export type ToastDuration = number | 'persistent';
-export type ToastPlacement = 'top' | 'bottom';
+export type ToastDuration = number | "persistent";
+export type ToastPlacement = "top" | "bottom";
 
 export interface ToastActionHelpers {
-  show: ToastManager['show'];
-  hide: ToastManager['hide'];
+  show: ToastManager["show"];
+  hide: ToastManager["hide"];
 }
 
-export interface ToastShowConfig extends Pick<ToastProps, 'variant'> {
+export interface ToastShowConfig extends Pick<ToastProps, "variant"> {
   id?: ToastId;
   label?: ReactNode;
   description?: ReactNode;
@@ -28,8 +28,8 @@ export interface ToastShowConfig extends Pick<ToastProps, 'variant'> {
 export interface ToastComponentProps {
   id: ToastId;
   index: number;
-  hide: ToastManager['hide'];
-  show: ToastManager['show'];
+  hide: ToastManager["hide"];
+  show: ToastManager["show"];
 }
 
 export interface ToastShowOptionsWithComponent {
@@ -41,10 +41,7 @@ export interface ToastShowOptionsWithComponent {
   onHide?: () => void;
 }
 
-export type ToastShowOptions =
-  | ToastShowConfig
-  | ToastShowOptionsWithComponent
-  | string;
+export type ToastShowOptions = ToastShowConfig | ToastShowOptionsWithComponent | string;
 
 export interface ToastItem {
   id: ToastId;
@@ -56,7 +53,7 @@ export interface ToastItem {
 
 export interface ToastManager {
   show: (options: ToastShowOptions) => ToastId;
-  hide: (id?: ToastId | ToastId[] | 'all') => void;
+  hide: (id?: ToastId | ToastId[] | "all") => void;
 }
 
 export interface ToastProviderProps {

package/src/components/toast/utils/controller.ts

@@ -1,4 +1,4 @@
-import type { ToastId, ToastManager, ToastShowOptions } from '../types';
+import type { ToastId, ToastManager, ToastShowOptions } from "../types";
 
 let activeManager: ToastManager | null = null;
 
@@ -9,15 +9,13 @@ export function setToastManager(manager: ToastManager | null): void {
 export function showToast(options: ToastShowOptions): ToastId {
   if (!activeManager) {
     if (__DEV__) {
-      console.warn(
-        '[react-native-terra-ui] Toast.show() called before <TerraUIProvider> mounted.'
-      );
+      console.warn("[react-native-terra-ui] Toast.show() called before <TerraUIProvider> mounted.");
     }
-    return '';
+    return "";
   }
   return activeManager.show(options);
 }
 
-export function hideToast(id?: ToastId | ToastId[] | 'all'): void {
+export function hideToast(id?: ToastId | ToastId[] | "all"): void {
   activeManager?.hide(id);
 }