react-native-bread 0.6.0 → 0.7.0

package/src/toast-store.ts

@@ -0,0 +1,254 @@
+import type { Toast, ToastConfig, ToastOptions, ToastState, ToastTheme, ToastType, ToastTypeColors } from "./types";
+
+export type Listener = (state: ToastState) => void;
+
+const EXIT_DURATION = 350;
+
+const DEFAULT_THEME: ToastTheme = {
+  position: "top",
+  offset: 0,
+  rtl: false,
+  stacking: true,
+  maxStack: 3,
+  dismissible: true,
+  showCloseButton: true,
+  colors: {
+    success: { accent: "#28B770", background: "#FFFFFF" },
+    error: { accent: "#F05964", background: "#FFFFFF" },
+    info: { accent: "#EDBE43", background: "#FFFFFF" },
+    loading: { accent: "#232323", background: "#FFFFFF" },
+  },
+  icons: {},
+  toastStyle: {},
+  titleStyle: {},
+  descriptionStyle: {},
+  defaultDuration: 4000,
+};
+
+function mergeConfig(config: ToastConfig | undefined): ToastTheme {
+  if (!config) return DEFAULT_THEME;
+
+  const mergedColors = { ...DEFAULT_THEME.colors };
+  if (config.colors) {
+    for (const type of Object.keys(config.colors) as ToastType[]) {
+      const userColors = config.colors[type];
+      if (userColors) {
+        mergedColors[type] = {
+          ...DEFAULT_THEME.colors[type],
+          ...userColors,
+        } as ToastTypeColors;
+      }
+    }
+  }
+
+  return {
+    position: config.position ?? DEFAULT_THEME.position,
+    offset: config.offset ?? DEFAULT_THEME.offset,
+    rtl: config.rtl ?? DEFAULT_THEME.rtl,
+    stacking: config.stacking ?? DEFAULT_THEME.stacking,
+    maxStack: config.maxStack ?? DEFAULT_THEME.maxStack,
+    dismissible: config.dismissible ?? DEFAULT_THEME.dismissible,
+    showCloseButton: config.showCloseButton ?? DEFAULT_THEME.showCloseButton,
+    colors: mergedColors,
+    icons: { ...DEFAULT_THEME.icons, ...config.icons },
+    toastStyle: { ...DEFAULT_THEME.toastStyle, ...config.toastStyle },
+    titleStyle: { ...DEFAULT_THEME.titleStyle, ...config.titleStyle },
+    descriptionStyle: { ...DEFAULT_THEME.descriptionStyle, ...config.descriptionStyle },
+    defaultDuration: config.defaultDuration ?? DEFAULT_THEME.defaultDuration,
+  };
+}
+
+class ToastStore {
+  private state: ToastState = {
+    visibleToasts: [],
+  };
+
+  private theme: ToastTheme = DEFAULT_THEME;
+
+  private listeners = new Set<Listener>();
+  private toastIdCounter = 0;
+  private timeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+  subscribe = (listener: Listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  private emit() {
+    for (const listener of this.listeners) {
+      listener(this.state);
+    }
+  }
+
+  private setState(partial: Partial<ToastState>) {
+    this.state = { ...this.state, ...partial };
+    this.emit();
+  }
+
+  getState = () => this.state;
+
+  getTheme = () => this.theme;
+
+  setConfig = (config: ToastConfig | undefined) => {
+    this.theme = mergeConfig(config);
+  };
+
+  show = (
+    title: string,
+    description?: string,
+    type: ToastType = "success",
+    duration?: number,
+    options?: ToastOptions
+  ): string => {
+    const actualDuration = duration ?? options?.duration ?? this.theme.defaultDuration;
+    const maxToasts = this.theme.stacking ? this.theme.maxStack : 1;
+
+    const id = `toast-${++this.toastIdCounter}`;
+    const newToast: Toast = {
+      id,
+      title,
+      description: description ?? options?.description,
+      type,
+      duration: actualDuration,
+      createdAt: Date.now(),
+      isExiting: false,
+      options,
+    };
+
+    const { visibleToasts } = this.state;
+    const activeToasts = visibleToasts.filter(t => !t.isExiting);
+
+    if (activeToasts.length >= maxToasts) {
+      const toastsToRemove = activeToasts.slice(maxToasts - 1);
+
+      for (const toast of toastsToRemove) {
+        const timeout = this.timeouts.get(toast.id);
+        if (timeout) {
+          clearTimeout(timeout);
+          this.timeouts.delete(toast.id);
+        }
+      }
+
+      const removeIds = new Set(toastsToRemove.map(t => t.id));
+
+      if (this.theme.stacking) {
+        this.setState({
+          visibleToasts: visibleToasts.filter(t => !removeIds.has(t.id)),
+        });
+      } else {
+        this.setState({
+          visibleToasts: visibleToasts.map(t => (removeIds.has(t.id) ? { ...t, isExiting: true } : t)),
+        });
+
+        setTimeout(() => {
+          for (const toast of toastsToRemove) {
+            this.removeToast(toast.id);
+          }
+          this.addToast(newToast, actualDuration);
+        }, EXIT_DURATION - 220);
+
+        return id;
+      }
+    }
+
+    this.addToast(newToast, actualDuration);
+
+    return id;
+  };
+
+  private addToast(toast: Toast, duration: number) {
+    this.setState({
+      visibleToasts: [toast, ...this.state.visibleToasts.filter(t => !t.isExiting)],
+    });
+
+    this.scheduleTimeout(toast.id, duration, 0);
+    this.rescheduleAllTimeouts();
+  }
+
+  private scheduleTimeout(id: string, baseDuration: number, index: number) {
+    const existingTimeout = this.timeouts.get(id);
+    if (existingTimeout) {
+      clearTimeout(existingTimeout);
+    }
+
+    const duration = baseDuration * (index + 1);
+
+    const timeout = setTimeout(() => {
+      this.hide(id);
+    }, duration);
+
+    this.timeouts.set(id, timeout);
+  }
+
+  private rescheduleAllTimeouts() {
+    const { visibleToasts } = this.state;
+
+    visibleToasts.forEach((toast, index) => {
+      if (toast.isExiting || index === 0) return;
+
+      this.scheduleTimeout(toast.id, toast.duration, index);
+    });
+  }
+
+  hide = (id: string) => {
+    const { visibleToasts } = this.state;
+    const toast = visibleToasts.find(t => t.id === id);
+    if (!toast || toast.isExiting) return;
+
+    const timeout = this.timeouts.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(id);
+    }
+
+    this.setState({
+      visibleToasts: visibleToasts.map(t => (t.id === id ? { ...t, isExiting: true } : t)),
+    });
+
+    setTimeout(() => {
+      this.removeToast(id);
+    }, EXIT_DURATION);
+  };
+
+  private removeToast(id: string) {
+    const timeout = this.timeouts.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(id);
+    }
+
+    this.setState({
+      visibleToasts: this.state.visibleToasts.filter(t => t.id !== id),
+    });
+
+    this.rescheduleAllTimeouts();
+  }
+
+  updateToast = (id: string, data: Partial<Omit<Toast, "id" | "createdAt">>) => {
+    const { visibleToasts } = this.state;
+    const index = visibleToasts.findIndex(t => t.id === id);
+    if (index === -1) return;
+
+    this.setState({
+      visibleToasts: visibleToasts.map(t => (t.id === id ? { ...t, ...data } : t)),
+    });
+
+    if (data.duration !== undefined) {
+      this.scheduleTimeout(id, data.duration, index);
+    }
+  };
+
+  hideAll = () => {
+    for (const timeout of this.timeouts.values()) {
+      clearTimeout(timeout);
+    }
+    this.timeouts.clear();
+    this.setState({ visibleToasts: [] });
+  };
+}
+
+export const toastStore = new ToastStore();
+
+export type { Toast, ToastState, ToastType };

package/src/toast.tsx

@@ -0,0 +1,398 @@
+import { memo, useCallback, useEffect, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { scheduleOnRN } from "react-native-worklets";
+import {
+  DISMISS_THRESHOLD,
+  DISMISS_VELOCITY_THRESHOLD,
+  EASING,
+  ENTRY_DURATION,
+  ENTRY_OFFSET,
+  EXIT_DURATION,
+  EXIT_OFFSET,
+  ICON_ANIMATION_DURATION,
+  MAX_DRAG_CLAMP,
+  MAX_DRAG_RESISTANCE,
+  SPRING_BACK_DURATION,
+  STACK_OFFSET_PER_ITEM,
+  STACK_SCALE_PER_ITEM,
+  STACK_TRANSITION_DURATION,
+  SWIPE_EXIT_OFFSET,
+} from "./constants";
+import { CloseIcon } from "./icons";
+import { type AnimSlot, animationPool, getSlotIndex, releaseSlot, slotTrackers } from "./pool";
+import { AnimatedIcon, resolveIcon } from "./toast-icons";
+import { toastStore } from "./toast-store";
+import type { CustomContentRenderFn, ToastItemProps, TopToastRef } from "./types";
+import { useToastState } from "./use-toast-state";
+
+export const ToastContainer = () => {
+  const { top, bottom } = useSafeAreaInsets();
+  const { visibleToasts, theme, toastsWithIndex, isBottom, topToastMutable, isBottomMutable, isDismissibleMutable } =
+    useToastState();
+
+  const shouldDismiss = useSharedValue(false);
+
+  const panGesture = Gesture.Pan()
+    .onStart(() => {
+      "worklet";
+      shouldDismiss.set(false);
+    })
+    .onUpdate(event => {
+      "worklet";
+      if (!isDismissibleMutable.value) return;
+      const ref = topToastMutable.value;
+      if (!ref) return;
+
+      const { slot } = ref;
+      const bottom = isBottomMutable.value;
+      const rawY = event.translationY;
+      const dismissDrag = bottom ? rawY : -rawY;
+      const resistDrag = bottom ? -rawY : rawY;
+
+      if (dismissDrag > 0) {
+        const clampedY = bottom ? Math.min(rawY, MAX_DRAG_CLAMP) : Math.max(rawY, -MAX_DRAG_CLAMP);
+        slot.translationY.set(clampedY);
+
+        const shouldTriggerDismiss =
+          dismissDrag > DISMISS_THRESHOLD ||
+          (bottom ? event.velocityY > DISMISS_VELOCITY_THRESHOLD : event.velocityY < -DISMISS_VELOCITY_THRESHOLD);
+        shouldDismiss.set(shouldTriggerDismiss);
+      } else {
+        const exponentialDrag = MAX_DRAG_RESISTANCE * (1 - Math.exp(-resistDrag / 250));
+        slot.translationY.set(
+          bottom ? -Math.min(exponentialDrag, MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, MAX_DRAG_RESISTANCE)
+        );
+        shouldDismiss.set(false);
+      }
+    })
+    .onEnd(() => {
+      "worklet";
+      if (!isDismissibleMutable.value) return;
+      const ref = topToastMutable.value;
+      if (!ref) return;
+
+      const { slot } = ref;
+      const bottom = isBottomMutable.value;
+      if (shouldDismiss.value) {
+        slot.progress.set(withTiming(0, { duration: EXIT_DURATION, easing: EASING }));
+        const exitOffset = bottom ? SWIPE_EXIT_OFFSET : -SWIPE_EXIT_OFFSET;
+        slot.translationY.set(
+          withTiming(slot.translationY.value + exitOffset, { duration: EXIT_DURATION, easing: EASING })
+        );
+        scheduleOnRN(ref.dismiss);
+      } else {
+        slot.translationY.set(withTiming(0, { duration: SPRING_BACK_DURATION, easing: EASING }));
+      }
+    });
+
+  const registerTopToast = useCallback(
+    (values: TopToastRef | null) => {
+      topToastMutable.set(values);
+    },
+    [topToastMutable]
+  );
+
+  if (visibleToasts.length === 0) return null;
+
+  const inset = isBottom ? bottom : top;
+  const positionStyle = isBottom ? { bottom: inset + theme.offset + 2 } : { top: inset + theme.offset + 2 };
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <View style={[styles.container, positionStyle]} pointerEvents="box-none">
+        {toastsWithIndex.map(({ toast, index }) => (
+          <MemoizedToastItem
+            key={toast.id}
+            toast={toast}
+            index={index}
+            theme={theme}
+            position={theme.position}
+            isTopToast={index === 0}
+            registerTopToast={registerTopToast}
+          />
+        ))}
+      </View>
+    </GestureDetector>
+  );
+};
+
+const ToastItem = ({ toast, index, theme, position, isTopToast, registerTopToast }: ToastItemProps) => {
+  const [slotIdx] = useState(() => getSlotIndex(toast.id));
+  const slot = animationPool[slotIdx];
+  const tracker = slotTrackers[slotIdx];
+
+  const isBottom = position === "bottom";
+  const entryFromY = isBottom ? ENTRY_OFFSET : -ENTRY_OFFSET;
+  const exitToY = isBottom ? EXIT_OFFSET : -EXIT_OFFSET;
+
+  const [wasLoading, setWasLoading] = useState(toast.type === "loading");
+  const [showIcon, setShowIcon] = useState(false);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect
+  useEffect(() => {
+    slot.progress.set(0);
+    slot.translationY.set(0);
+    slot.stackIndex.set(index);
+    slot.progress.set(withTiming(1, { duration: ENTRY_DURATION, easing: EASING }));
+
+    const iconTimeout = setTimeout(() => setShowIcon(true), 50);
+
+    return () => {
+      clearTimeout(iconTimeout);
+      releaseSlot(toast.id);
+    };
+  }, []);
+
+  const dismissToast = useCallback(() => {
+    toastStore.hide(toast.id);
+  }, [toast.id]);
+
+  useEffect(() => {
+    let loadingTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    if (toast.isExiting && !tracker.wasExiting) {
+      tracker.wasExiting = true;
+      slot.progress.set(withTiming(0, { duration: EXIT_DURATION, easing: EASING }));
+      slot.translationY.set(withTiming(exitToY, { duration: EXIT_DURATION, easing: EASING }));
+    }
+
+    if (tracker.initialized && index !== tracker.prevIndex) {
+      slot.stackIndex.set(withTiming(index, { duration: STACK_TRANSITION_DURATION, easing: EASING }));
+    }
+    tracker.prevIndex = index;
+    tracker.initialized = true;
+
+    if (toast.type === "loading") {
+      setWasLoading(true);
+    } else if (wasLoading) {
+      loadingTimeout = setTimeout(() => setWasLoading(false), ICON_ANIMATION_DURATION + 50);
+    }
+
+    if (isTopToast) {
+      registerTopToast({ slot: slot as AnimSlot, dismiss: dismissToast });
+    }
+
+    return () => {
+      if (loadingTimeout) clearTimeout(loadingTimeout);
+      if (isTopToast) registerTopToast(null);
+    };
+  }, [
+    toast.isExiting,
+    index,
+    slot,
+    tracker,
+    exitToY,
+    toast.type,
+    wasLoading,
+    isTopToast,
+    registerTopToast,
+    dismissToast,
+  ]);
+
+  const shouldAnimateIcon = wasLoading && toast.type !== "loading";
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const baseTranslateY = interpolate(slot.progress.value, [0, 1], [entryFromY, 0]);
+    const stackOffsetY = isBottom
+      ? slot.stackIndex.value * STACK_OFFSET_PER_ITEM
+      : slot.stackIndex.value * -STACK_OFFSET_PER_ITEM;
+    const stackScale = 1 - slot.stackIndex.value * STACK_SCALE_PER_ITEM;
+
+    const finalTranslateY = baseTranslateY + slot.translationY.value + stackOffsetY;
+
+    const progressOpacity = interpolate(slot.progress.value, [0, 1], [0, 1]);
+    const dismissDirection = isBottom ? slot.translationY.value : -slot.translationY.value;
+    const dragOpacity = dismissDirection > 0 ? interpolate(dismissDirection, [0, 130], [1, 0], "clamp") : 1;
+    const opacity = progressOpacity * dragOpacity;
+
+    const dragScale = interpolate(Math.abs(slot.translationY.value), [0, 50], [1, 0.98], "clamp");
+    const scale = stackScale * dragScale;
+
+    return {
+      transform: [{ translateY: finalTranslateY }, { scale }],
+      opacity,
+      zIndex: 1000 - Math.round(slot.stackIndex.value),
+    };
+  });
+
+  const { options } = toast;
+  const colors = theme.colors[toast.type];
+
+  if (options?.customContent !== undefined) {
+    const content = options.customContent;
+    return (
+      <Animated.View
+        style={[
+          styles.toast,
+          styles.customContentToast,
+          isBottom ? styles.toastBottom : styles.toastTop,
+          { backgroundColor: colors.background },
+          theme.toastStyle,
+          options.style,
+          animatedStyle,
+        ]}
+      >
+        {typeof content === "function"
+          ? (content as CustomContentRenderFn)({
+              id: toast.id,
+              dismiss: dismissToast,
+              type: toast.type,
+              isExiting: !!toast.isExiting,
+            })
+          : content}
+      </Animated.View>
+    );
+  }
+
+  const shouldShowCloseButton = toast.type !== "loading" && (options?.showCloseButton ?? theme.showCloseButton);
+
+  return (
+    <Animated.View
+      style={[
+        styles.toast,
+        isBottom ? styles.toastBottom : styles.toastTop,
+        { backgroundColor: colors.background },
+        theme.rtl && styles.rtl,
+        theme.toastStyle,
+        options?.style,
+        animatedStyle,
+      ]}
+    >
+      <View style={styles.iconContainer}>
+        {showIcon &&
+          (shouldAnimateIcon ? (
+            <AnimatedIcon
+              key={toast.type}
+              type={toast.type}
+              color={colors.accent}
+              custom={options?.icon}
+              config={theme.icons[toast.type]}
+            />
+          ) : (
+            resolveIcon(toast.type, colors.accent, options?.icon, theme.icons[toast.type])
+          ))}
+      </View>
+      <View style={styles.textContainer}>
+        <Text
+          maxFontSizeMultiplier={1.35}
+          allowFontScaling={false}
+          style={[
+            styles.title,
+            { color: colors.accent },
+            theme.rtl && { textAlign: "right" },
+            theme.titleStyle,
+            options?.titleStyle,
+          ]}
+        >
+          {toast.title}
+        </Text>
+        {toast.description && (
+          <Text
+            allowFontScaling={false}
+            maxFontSizeMultiplier={1.35}
+            style={[
+              styles.description,
+              theme.rtl && { textAlign: "right" },
+              theme.descriptionStyle,
+              options?.descriptionStyle,
+            ]}
+          >
+            {toast.description}
+          </Text>
+        )}
+      </View>
+      {shouldShowCloseButton && (
+        <Pressable style={styles.closeButton} onPress={dismissToast} hitSlop={12}>
+          <CloseIcon width={20} height={20} />
+        </Pressable>
+      )}
+    </Animated.View>
+  );
+};
+
+const MemoizedToastItem = memo(ToastItem, (prev, next) => {
+  return (
+    prev.toast.id === next.toast.id &&
+    prev.toast.type === next.toast.type &&
+    prev.toast.title === next.toast.title &&
+    prev.toast.description === next.toast.description &&
+    prev.toast.isExiting === next.toast.isExiting &&
+    prev.index === next.index &&
+    prev.position === next.position &&
+    prev.theme === next.theme &&
+    prev.isTopToast === next.isTopToast
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    zIndex: 1000,
+  },
+  toast: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: 36,
+    borderRadius: 20,
+    borderCurve: "continuous",
+    position: "absolute",
+    left: 0,
+    right: 0,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.05,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  customContentToast: {
+    padding: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    overflow: "hidden",
+  },
+  rtl: {
+    flexDirection: "row-reverse",
+  },
+  toastTop: {
+    top: 0,
+  },
+  toastBottom: {
+    bottom: 0,
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 8,
+  },
+  textContainer: {
+    flex: 1,
+    gap: 1,
+    justifyContent: "center",
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "700",
+    lineHeight: 20,
+  },
+  description: {
+    color: "#6B7280",
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 16,
+  },
+  closeButton: {
+    padding: 4,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});