react-native-terra-ui 0.1.0

package/src/components/toast/ToastProvider.tsx

@@ -0,0 +1,403 @@
+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,
+  ToastId,
+  ToastItem,
+  ToastManager,
+  ToastPlacement,
+  ToastProviderProps,
+  ToastShowConfig,
+  ToastShowOptions,
+  ToastShowOptionsWithComponent,
+} from './types';
+import { setToastManager } from './utils/controller';
+
+type ToastAction =
+  | { type: 'show'; item: ToastItem }
+  | { type: 'hide'; ids: ToastId[] }
+  | { type: 'hideAll' }
+  | { type: 'hidePlacement'; placement: ToastPlacement };
+
+const DEFAULT_DURATION = 4000;
+const DEFAULT_MAX_VISIBLE_TOASTS = 3;
+
+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':
+      return state.filter((toast) => !action.ids.some((id) => id === toast.id));
+    case 'hideAll':
+      return [];
+    case 'hidePlacement':
+      return state.filter((toast) => toast.placement !== action.placement);
+  }
+}
+
+function createDefaultToastComponent(
+  config: ToastShowConfig,
+  manager: ToastManager
+) {
+  return ({ id, hide }: ToastComponentProps) => (
+    <DefaultToast
+      id={id}
+      hide={(toastId) => hide(String(toastId))}
+      variant={config.variant}
+      label={config.label}
+      description={config.description}
+      icon={config.icon}
+      actionLabel={config.actionLabel}
+      showCloseButton={config.showCloseButton}
+      onActionPress={() => config.onActionPress?.(manager)}
+    />
+  );
+}
+
+function isCustomToast(
+  options: ToastShowOptions
+): options is ToastShowOptionsWithComponent {
+  return (
+    typeof options === 'object' && options !== null && 'component' in options
+  );
+}
+
+function normalizePlacement(
+  placement: ToastPlacement | undefined,
+  fallback: ToastPlacement
+): ToastPlacement {
+  return placement ?? fallback;
+}
+
+function normalizeDuration(
+  duration: ToastDuration | undefined,
+  fallback: number
+): ToastDuration {
+  return duration ?? fallback;
+}
+
+function toastId(counter: number): ToastId {
+  return `toast-${Date.now()}-${counter}`;
+}
+
+export function ToastProvider({
+  children,
+  defaultPlacement = 'top',
+  defaultDuration = DEFAULT_DURATION,
+  maxVisibleToasts = DEFAULT_MAX_VISIBLE_TOASTS,
+  offset,
+}: ToastProviderProps) {
+  const [toasts, dispatch] = useReducer(toastReducer, []);
+  const toastsRef = useRef<ToastItem[]>([]);
+  const counterRef = useRef(0);
+  const timeoutsRef = useRef<Map<ToastId, ReturnType<typeof setTimeout>>>(
+    new Map()
+  );
+
+  useEffect(() => {
+    toastsRef.current = toasts;
+  }, [toasts]);
+
+  const clearToastTimeout = useCallback((id: ToastId) => {
+    const timeout = timeoutsRef.current.get(id);
+    if (timeout) clearTimeout(timeout);
+    timeoutsRef.current.delete(id);
+  }, []);
+
+  const hide = useCallback<ToastManager['hide']>(
+    (id) => {
+      if (id === 'all') {
+        for (const toast of toastsRef.current) {
+          clearToastTimeout(toast.id);
+          toast.onHide?.();
+        }
+        toastsRef.current = [];
+        dispatch({ type: 'hideAll' });
+        return;
+      }
+      const lastToastId = toastsRef.current[toastsRef.current.length - 1]?.id;
+      const ids =
+        id === undefined
+          ? lastToastId
+            ? [lastToastId]
+            : []
+          : Array.isArray(id)
+            ? id
+            : [id];
+
+      if (ids.length === 0) return;
+
+      for (const toastId of ids) {
+        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 });
+    },
+    [clearToastTimeout]
+  );
+
+  const managerRef = useRef<ToastManager>({
+    show: () => '',
+    hide,
+  });
+
+  const show = useCallback<ToastManager['show']>(
+    (options) => {
+      const nextId =
+        typeof options === 'object' && options !== null && 'id' in options
+          ? (options.id ?? toastId(counterRef.current++))
+          : toastId(counterRef.current++);
+
+      const item =
+        typeof options === 'string'
+          ? {
+              id: nextId,
+              component: createDefaultToastComponent(
+                { label: options },
+                managerRef.current
+              ),
+              duration: defaultDuration,
+              placement: defaultPlacement,
+            }
+          : isCustomToast(options)
+            ? {
+                id: nextId,
+                component: options.component,
+                duration: normalizeDuration(options.duration, defaultDuration),
+                placement: normalizePlacement(
+                  options.placement,
+                  defaultPlacement
+                ),
+                onHide: options.onHide,
+              }
+            : {
+                id: nextId,
+                component: createDefaultToastComponent(
+                  options,
+                  managerRef.current
+                ),
+                duration: normalizeDuration(options.duration, defaultDuration),
+                placement: normalizePlacement(
+                  options.placement,
+                  defaultPlacement
+                ),
+                onHide: options.onHide,
+              };
+
+      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 });
+      }
+
+      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
+      ) {
+        options.onShow?.();
+      }
+
+      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);
+      }
+
+      return item.id;
+    },
+    [clearToastTimeout, defaultDuration, defaultPlacement, hide]
+  );
+
+  const manager = useMemo<ToastManager>(() => ({ show, hide }), [show, hide]);
+  managerRef.current = manager;
+
+  useEffect(() => {
+    setToastManager(manager);
+    return () => {
+      setToastManager(null);
+      for (const timeout of timeoutsRef.current.values()) {
+        clearTimeout(timeout);
+      }
+      timeoutsRef.current.clear();
+    };
+  }, [manager]);
+
+  const topToasts = toasts.filter((toast) => toast.placement === 'top');
+  const bottomToasts = toasts.filter((toast) => toast.placement === 'bottom');
+
+  return (
+    <ToastManagerContext.Provider value={manager}>
+      {children}
+      <ToastViewport
+        placement="top"
+        toasts={topToasts}
+        manager={manager}
+        maxVisibleToasts={maxVisibleToasts}
+        offset={offset}
+      />
+      <ToastViewport
+        placement="bottom"
+        toasts={bottomToasts}
+        manager={manager}
+        maxVisibleToasts={maxVisibleToasts}
+        offset={offset}
+      />
+    </ToastManagerContext.Provider>
+  );
+}
+
+interface ToastViewportProps {
+  placement: ToastPlacement;
+  toasts: ToastItem[];
+  manager: ToastManager;
+  maxVisibleToasts: number;
+  offset?: ToastProviderProps['offset'];
+}
+
+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);
+
+  useEffect(() => {
+    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);
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      keyboardHeight.value = withTiming(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [keyboardHeight, placement]);
+
+  const gap = Platform.OS === 'ios' ? 6 : 12;
+
+  const keyboardStyle = useAnimatedStyle(() => {
+    if (placement === 'top') return { top: baseTop };
+    if (keyboardHeight.value > 0) {
+      return { bottom: keyboardHeight.value + gap };
+    }
+    return { bottom: baseBottom };
+  });
+
+  useEffect(() => {
+    total.value = toasts.length;
+    const activeIds = new Set(toasts.map((toast) => toast.id));
+    const nextHeights: Record<ToastId, number> = {};
+    for (const [id, height] of Object.entries(heights.value)) {
+      if (activeIds.has(id)) {
+        nextHeights[id] = height;
+      }
+    }
+    heights.value = nextHeights;
+  }, [heights, toasts, total]);
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <Animated.View
+      pointerEvents="box-none"
+      style={[
+        {
+          position: 'absolute',
+          zIndex: 9999,
+          elevation: 9999,
+          left: offset?.left ?? safeAreaInsets.left + 12,
+          right: offset?.right ?? safeAreaInsets.right + 12,
+        },
+        keyboardStyle,
+      ]}
+    >
+      {toasts.map((toast, index) => (
+        <ToastAnimatedItem
+          key={toast.id}
+          heights={heights}
+          id={toast.id}
+          index={index}
+          maxVisibleToasts={maxVisibleToasts}
+          placement={placement}
+          total={total}
+        >
+          {toast.component({
+            id: toast.id,
+            index,
+            hide: manager.hide,
+            show: manager.show,
+          })}
+        </ToastAnimatedItem>
+      ))}
+    </Animated.View>
+  );
+}
+
+export function useToast(): ToastManager {
+  const manager = useContext(ToastManagerContext);
+  if (!manager) {
+    throw new Error('useToast must be used within <TerraUIProvider>.');
+  }
+  return manager;
+}

package/src/components/toast/index.ts

@@ -0,0 +1,26 @@
+export type {
+  DefaultToastProps,
+  ToastActionProps,
+  ToastCloseProps,
+  ToastControls,
+  ToastDescriptionProps,
+  ToastIconProps,
+  ToastProps,
+  ToastTitleProps,
+  ToastVariant,
+} from './Toast';
+export { DefaultToast, Toast } from './Toast';
+export { ToastProvider, useToast } from './ToastProvider';
+export type {
+  ToastActionHelpers,
+  ToastComponentProps,
+  ToastDuration,
+  ToastId,
+  ToastItem,
+  ToastManager,
+  ToastPlacement,
+  ToastProviderProps,
+  ToastShowConfig,
+  ToastShowOptions,
+  ToastShowOptionsWithComponent,
+} from './types';

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

@@ -0,0 +1,184 @@
+import type { ReactElement } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Animated, {
+  Easing,
+  Extrapolation,
+  interpolate,
+  Keyframe,
+  type SharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import type { ToastId, ToastPlacement } from '../types';
+
+export interface ToastAnimatedItemProps {
+  children: ReactElement;
+  heights: SharedValue<Record<ToastId, number>>;
+  id: ToastId;
+  index: number;
+  maxVisibleToasts: number;
+  placement: ToastPlacement;
+  total: SharedValue<number>;
+}
+
+export const enteringTop = new Keyframe({
+  0: {
+    opacity: 1,
+    transform: [{ translateY: -100 }],
+  },
+  100: {
+    opacity: 1,
+    transform: [{ translateY: 0 }],
+    easing: Easing.out(Easing.cubic),
+  },
+}).duration(260);
+
+export const exitingTop = new Keyframe({
+  0: {
+    opacity: 1,
+    transform: [{ translateY: 0 }, { scale: 1 }],
+  },
+  100: {
+    opacity: 0.5,
+    transform: [{ translateY: -100 }, { scale: 0.97 }],
+    easing: Easing.bezier(0.4, 0, 1, 1),
+  },
+}).duration(150);
+
+export const enteringBottom = new Keyframe({
+  0: {
+    opacity: 1,
+    transform: [{ translateY: 100 }],
+  },
+  100: {
+    opacity: 1,
+    transform: [{ translateY: 0 }],
+    easing: Easing.out(Easing.cubic),
+  },
+}).duration(260);
+
+export const exitingBottom = new Keyframe({
+  0: {
+    opacity: 1,
+    transform: [{ translateY: 0 }, { scale: 1 }],
+  },
+  100: {
+    opacity: 0.5,
+    transform: [{ translateY: 100 }, { scale: 0.97 }],
+    easing: Easing.bezier(0.4, 0, 1, 1),
+  },
+}).duration(150);
+
+const opacityValue = [1, 0] as [number, number];
+const opacityTimingConfig = { duration: 300 };
+const translateYValue = [0, 10] as [number, number];
+const translateYTimingConfig = { duration: 300 };
+const scaleValue = [1, 0.97] as [number, number];
+const scaleTimingConfig = { duration: 300 };
+
+export function ToastAnimatedItem({
+  children,
+  heights,
+  id,
+  index,
+  maxVisibleToasts,
+  placement,
+  total,
+}: ToastAnimatedItemProps) {
+  const containerStyle = useAnimatedStyle(() => {
+    const heightEntries = Object.entries(heights.value);
+    const lastToastId = heightEntries[heightEntries.length - 1]?.[0];
+    const lastToastHeight = lastToastId
+      ? heights.value[lastToastId]
+      : undefined;
+    const totalValue = total.value;
+    const sign = placement === 'top' ? 1 : -1;
+
+    const inputRange = [totalValue - 1, totalValue - 2];
+    const opacityInputRange = [
+      totalValue - maxVisibleToasts,
+      totalValue - maxVisibleToasts - 1,
+    ];
+
+    const opacity = interpolate(index, opacityInputRange, opacityValue);
+    const translateY = interpolate(
+      index,
+      inputRange,
+      [translateYValue[0], translateYValue[1] * sign],
+      Extrapolation.CLAMP
+    );
+    const scale = interpolate(index, inputRange, scaleValue, {
+      extrapolateLeft: Extrapolation.CLAMP,
+    });
+
+    return {
+      height: lastToastHeight
+        ? withSpring(lastToastHeight, {
+            damping: 100,
+            stiffness: 1200,
+            mass: 3,
+          })
+        : undefined,
+      pointerEvents: opacity === 0 ? 'none' : 'auto',
+      opacity: withTiming(opacity, opacityTimingConfig),
+      transform: [
+        { translateY: withTiming(translateY, translateYTimingConfig) },
+        { scale: withTiming(scale, scaleTimingConfig) },
+      ],
+      zIndex: 1000 + index,
+    };
+  });
+
+  return (
+    <Animated.View
+      entering={placement === 'top' ? enteringTop : enteringBottom}
+      exiting={placement === 'top' ? exitingTop : exitingBottom}
+      pointerEvents="box-none"
+      style={[
+        styles.position,
+        placement === 'top' ? styles.top : styles.bottom,
+      ]}
+    >
+      <Animated.View style={containerStyle}>{children}</Animated.View>
+      <View
+        pointerEvents="none"
+        aria-hidden
+        importantForAccessibility="no-hide-descendants"
+        accessibilityElementsHidden
+        style={styles.measurement}
+        onLayout={(event) => {
+          const measuredHeight = event.nativeEvent.layout.height;
+          heights.value = {
+            ...heights.value,
+            [id]: measuredHeight,
+          };
+        }}
+      >
+        {process.env.NODE_ENV === 'test' ? null : children}
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  position: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  top: {
+    top: 0,
+  },
+  bottom: {
+    bottom: 0,
+  },
+  measurement: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    opacity: 0,
+  },
+});

package/src/components/toast/types.ts

@@ -0,0 +1,75 @@
+import type { ReactElement, ReactNode } from 'react';
+
+import type { ToastProps, ToastVariant } from './Toast';
+
+export type ToastId = string;
+export type ToastDuration = number | 'persistent';
+export type ToastPlacement = 'top' | 'bottom';
+
+export interface ToastActionHelpers {
+  show: ToastManager['show'];
+  hide: ToastManager['hide'];
+}
+
+export interface ToastShowConfig extends Pick<ToastProps, 'variant'> {
+  id?: ToastId;
+  label?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode | false;
+  actionLabel?: ReactNode;
+  onActionPress?: (helpers: ToastActionHelpers) => void;
+  duration?: ToastDuration;
+  placement?: ToastPlacement;
+  showCloseButton?: boolean;
+  onShow?: () => void;
+  onHide?: () => void;
+}
+
+export interface ToastComponentProps {
+  id: ToastId;
+  index: number;
+  hide: ToastManager['hide'];
+  show: ToastManager['show'];
+}
+
+export interface ToastShowOptionsWithComponent {
+  id?: ToastId;
+  component: (props: ToastComponentProps) => ReactElement;
+  duration?: ToastDuration;
+  placement?: ToastPlacement;
+  onShow?: () => void;
+  onHide?: () => void;
+}
+
+export type ToastShowOptions =
+  | ToastShowConfig
+  | ToastShowOptionsWithComponent
+  | string;
+
+export interface ToastItem {
+  id: ToastId;
+  component: (props: ToastComponentProps) => ReactElement;
+  duration: ToastDuration;
+  placement: ToastPlacement;
+  onHide?: () => void;
+}
+
+export interface ToastManager {
+  show: (options: ToastShowOptions) => ToastId;
+  hide: (id?: ToastId | ToastId[] | 'all') => void;
+}
+
+export interface ToastProviderProps {
+  children?: ReactNode;
+  defaultPlacement?: ToastPlacement;
+  defaultDuration?: number;
+  maxVisibleToasts?: number;
+  offset?: {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+  };
+}
+
+export type { ToastVariant };

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

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