@mehul214/react-native-flash-toast 0.0.0-stage → 1.0.1

package/dist/index.mjs

@@ -0,0 +1,730 @@
+import React, { useState, useRef, useCallback, useImperativeHandle, useEffect, createContext, useMemo, useContext } from 'react';
+import { StyleSheet, Platform, Animated, PanResponder, View, Pressable, Text, Dimensions, StatusBar } from 'react-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/FlashMessage.tsx
+
+// src/FlashMessageManager.ts
+var FlashMessageManager = class {
+  constructor() {
+    this.defaultInstance = null;
+    this.instances = /* @__PURE__ */ new Map();
+    this.pendingQueue = [];
+  }
+  register(ref, id = "default") {
+    this.instances.set(id, ref);
+    if (!this.defaultInstance || id === "default") {
+      this.defaultInstance = ref;
+    }
+    if (this.pendingQueue.length > 0) {
+      const next = this.pendingQueue.shift();
+      if (next) {
+        ref.showMessage(next);
+      }
+    }
+  }
+  unregister(id = "default") {
+    this.instances.delete(id);
+    if (this.defaultInstance === this.instances.get(id)) {
+      this.defaultInstance = this.instances.values().next().value || null;
+    }
+  }
+  showMessage(options, targetId) {
+    const target = targetId ? this.instances.get(targetId) : this.defaultInstance;
+    if (target) {
+      target.showMessage(options);
+    } else {
+      this.pendingQueue.push(options);
+    }
+  }
+  hideMessage(targetId) {
+    const target = targetId ? this.instances.get(targetId) : this.defaultInstance;
+    if (target) {
+      target.hideMessage();
+    }
+  }
+};
+var flashManager = new FlashMessageManager();
+function showMessage(options) {
+  flashManager.showMessage(options);
+}
+function hideMessage() {
+  flashManager.hideMessage();
+}
+var flash = showMessage;
+var dismissFlash = hideMessage;
+var BuiltInIcon = ({
+  type,
+  size = 18,
+  color = "#FFFFFF"
+}) => {
+  switch (type) {
+    case "success": {
+      const checkWidth = size * 0.36;
+      const checkHeight = size * 0.65;
+      const stroke = Math.max(2, size * 0.12);
+      return /* @__PURE__ */ jsx(View, { style: [styles.center, { width: size, height: size }], children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            width: checkWidth,
+            height: checkHeight,
+            borderColor: color,
+            borderBottomWidth: stroke,
+            borderRightWidth: stroke,
+            borderRadius: 1,
+            transform: [{ rotate: "45deg" }, { translateY: -size * 0.08 }]
+          }
+        }
+      ) });
+    }
+    case "danger": {
+      const crossThickness = Math.max(2, size * 0.12);
+      const crossLength = size * 0.72;
+      return /* @__PURE__ */ jsxs(View, { style: [styles.center, { width: size, height: size }], children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.crossBar,
+              {
+                width: crossLength,
+                height: crossThickness,
+                backgroundColor: color,
+                borderRadius: crossThickness / 2,
+                transform: [{ rotate: "45deg" }]
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.crossBar,
+              {
+                width: crossLength,
+                height: crossThickness,
+                backgroundColor: color,
+                borderRadius: crossThickness / 2,
+                transform: [{ rotate: "-45deg" }]
+              }
+            ]
+          }
+        )
+      ] });
+    }
+    case "warning": {
+      const warnThickness = Math.max(2, size * 0.13);
+      const dotSize = warnThickness * 1.1;
+      return /* @__PURE__ */ jsxs(View, { style: [styles.center, { width: size, height: size }], children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: warnThickness,
+              height: size * 0.46,
+              backgroundColor: color,
+              borderRadius: warnThickness / 2,
+              marginBottom: size * 0.14
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: dotSize,
+              height: dotSize,
+              borderRadius: dotSize / 2,
+              backgroundColor: color
+            }
+          }
+        )
+      ] });
+    }
+    case "info": {
+      const infoThickness = Math.max(2, size * 0.13);
+      const infoDotSize = infoThickness * 1.1;
+      return /* @__PURE__ */ jsxs(View, { style: [styles.center, { width: size, height: size }], children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: infoDotSize,
+              height: infoDotSize,
+              borderRadius: infoDotSize / 2,
+              backgroundColor: color,
+              marginBottom: size * 0.14
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: infoThickness,
+              height: size * 0.46,
+              backgroundColor: color,
+              borderRadius: infoThickness / 2
+            }
+          }
+        )
+      ] });
+    }
+    case "default":
+    default: {
+      const defaultDot = size * 0.44;
+      return /* @__PURE__ */ jsx(View, { style: [styles.center, { width: size, height: size }], children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            width: defaultDot,
+            height: defaultDot,
+            borderRadius: defaultDot / 2,
+            backgroundColor: color
+          }
+        }
+      ) });
+    }
+  }
+};
+var styles = StyleSheet.create({
+  center: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  crossBar: {
+    position: "absolute"
+  }
+});
+var COLORS = {
+  default: {
+    background: "#1F2937",
+    // Slate 800
+    text: "#FFFFFF",
+    icon: "#9CA3AF"
+  },
+  success: {
+    background: "#059669",
+    // Emerald 600
+    text: "#FFFFFF",
+    icon: "#D1FAE5"
+  },
+  danger: {
+    background: "#DC2626",
+    // Red 600
+    text: "#FFFFFF",
+    icon: "#FEE2E2"
+  },
+  warning: {
+    background: "#D97706",
+    // Amber 600
+    text: "#FFFFFF",
+    icon: "#FEF3C7"
+  },
+  info: {
+    background: "#2563EB",
+    // Blue 600
+    text: "#FFFFFF",
+    icon: "#DBEAFE"
+  }
+};
+var styles2 = StyleSheet.create({
+  rootOverlay: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    zIndex: 99999,
+    elevation: 99999
+  },
+  rootTop: {
+    top: 0
+  },
+  rootBottom: {
+    bottom: 0
+  },
+  rootCenter: {
+    top: 0,
+    bottom: 0,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  toastContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    overflow: "hidden",
+    ...Platform.select({
+      ios: {
+        shadowColor: "#000000",
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: 0.2,
+        shadowRadius: 14
+      },
+      android: {
+        elevation: 8
+      },
+      web: {
+        boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15)"
+      }
+    })
+  },
+  floatingContainer: {
+    marginHorizontal: 16,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.16)"
+  },
+  edgeToEdgeContainer: {
+    marginHorizontal: 0,
+    borderRadius: 0
+  },
+  contentWrapper: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 13,
+    paddingHorizontal: 16
+  },
+  iconContainer: {
+    marginRight: 12,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  iconBadge: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "rgba(255, 255, 255, 0.22)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  titleText: {
+    fontSize: 15,
+    fontWeight: "600",
+    letterSpacing: -0.2,
+    lineHeight: 20,
+    color: "#FFFFFF"
+  },
+  descriptionText: {
+    fontSize: 13,
+    fontWeight: "400",
+    color: "rgba(255, 255, 255, 0.9)",
+    marginTop: 2,
+    lineHeight: 18
+  },
+  actionButton: {
+    marginLeft: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: "rgba(255, 255, 255, 0.22)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.2)"
+  },
+  actionButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#FFFFFF"
+  },
+  progressBarContainer: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 3,
+    backgroundColor: "rgba(255, 255, 255, 0.2)"
+  },
+  progressBarFill: {
+    height: "100%",
+    backgroundColor: "rgba(255, 255, 255, 0.9)"
+  }
+});
+function getDefaultSafeAreaInsets() {
+  const { width, height } = Dimensions.get("window");
+  const isLandscape = width > height;
+  if (Platform.OS === "android") {
+    return {
+      top: StatusBar.currentHeight ?? 24,
+      bottom: 16,
+      left: 0,
+      right: 0
+    };
+  }
+  if (Platform.OS === "ios") {
+    const isModernIphone = !Platform.isPad && !Platform.isTV && (height >= 812 || width >= 812);
+    return {
+      top: isModernIphone ? isLandscape ? 0 : 50 : 20,
+      bottom: isModernIphone ? 34 : 0,
+      left: 0,
+      right: 0
+    };
+  }
+  return {
+    top: 16,
+    bottom: 16,
+    left: 0,
+    right: 0
+  };
+}
+var FlashMessage = React.forwardRef(
+  (props, ref) => {
+    const {
+      position: defaultPosition = "top",
+      duration: defaultDuration = 3e3,
+      floating: defaultFloating = true,
+      statusBarOffset,
+      bottomOffset,
+      style: containerCustomStyle
+    } = props;
+    const [currentMessage, setCurrentMessage] = useState(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const currentMessageRef = useRef(null);
+    const translateY = useRef(new Animated.Value(-150)).current;
+    const opacity = useRef(new Animated.Value(0)).current;
+    const progress = useRef(new Animated.Value(1)).current;
+    const hideTimeoutRef = useRef(null);
+    const progressAnimationRef = useRef(null);
+    const remainingTimeRef = useRef(0);
+    const timerStartedAtRef = useRef(0);
+    const safeInsets = getDefaultSafeAreaInsets();
+    const clearTimers = useCallback(() => {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+      }
+      if (progressAnimationRef.current) {
+        progressAnimationRef.current.stop();
+        progressAnimationRef.current = null;
+      }
+    }, []);
+    const animateHide = useCallback(
+      (callback) => {
+        clearTimers();
+        const pos = currentMessageRef.current?.position ?? defaultPosition;
+        const targetY = pos === "top" ? -180 : pos === "bottom" ? 180 : 0;
+        Animated.parallel([
+          Animated.timing(translateY, {
+            toValue: targetY,
+            duration: 220,
+            useNativeDriver: true
+          }),
+          Animated.timing(opacity, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: true
+          })
+        ]).start(() => {
+          setIsVisible(false);
+          const onHide = currentMessageRef.current?.onHide;
+          currentMessageRef.current = null;
+          setCurrentMessage(null);
+          if (onHide) {
+            onHide();
+          }
+          callback?.();
+        });
+      },
+      [clearTimers, defaultPosition, opacity, translateY]
+    );
+    const startAutoHideTimer = useCallback(
+      (durationMs) => {
+        clearTimers();
+        if (durationMs <= 0) return;
+        remainingTimeRef.current = durationMs;
+        timerStartedAtRef.current = Date.now();
+        progress.setValue(1);
+        progressAnimationRef.current = Animated.timing(progress, {
+          toValue: 0,
+          duration: durationMs,
+          useNativeDriver: false
+        });
+        progressAnimationRef.current.start();
+        hideTimeoutRef.current = setTimeout(() => {
+          animateHide();
+        }, durationMs);
+      },
+      [animateHide, clearTimers, progress]
+    );
+    const pauseTimer = useCallback(() => {
+      if (hideTimeoutRef.current && timerStartedAtRef.current > 0) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+        const elapsed = Date.now() - timerStartedAtRef.current;
+        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+        if (progressAnimationRef.current) {
+          progressAnimationRef.current.stop();
+        }
+      }
+    }, []);
+    const resumeTimer = useCallback(() => {
+      if (remainingTimeRef.current > 0) {
+        startAutoHideTimer(remainingTimeRef.current);
+      }
+    }, [startAutoHideTimer]);
+    const show = useCallback(
+      (options) => {
+        clearTimers();
+        currentMessageRef.current = options;
+        setCurrentMessage(options);
+        setIsVisible(true);
+        const pos = options.position ?? defaultPosition;
+        const initialY = pos === "top" ? -150 : pos === "bottom" ? 150 : 0;
+        translateY.setValue(initialY);
+        opacity.setValue(0);
+        progress.setValue(1);
+        Animated.parallel([
+          Animated.spring(translateY, {
+            toValue: 0,
+            tension: 70,
+            friction: 9,
+            useNativeDriver: true
+          }),
+          Animated.timing(opacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true
+          })
+        ]).start(() => {
+          if (options.onShow) {
+            options.onShow();
+          }
+        });
+        const shouldAutoHide = options.autoHide ?? true;
+        const dur = shouldAutoHide ? options.duration !== void 0 ? options.duration : defaultDuration : 0;
+        if (dur > 0) {
+          startAutoHideTimer(dur);
+        }
+      },
+      [clearTimers, defaultDuration, defaultPosition, opacity, progress, startAutoHideTimer, translateY]
+    );
+    const showRef = useRef(show);
+    const animateHideRef = useRef(animateHide);
+    showRef.current = show;
+    animateHideRef.current = animateHide;
+    useImperativeHandle(
+      ref,
+      () => ({
+        showMessage: (options) => showRef.current(options),
+        hideMessage: () => animateHideRef.current()
+      }),
+      []
+    );
+    useEffect(() => {
+      const instanceRef = {
+        showMessage: (options) => showRef.current(options),
+        hideMessage: () => animateHideRef.current()
+      };
+      flashManager.register(instanceRef);
+      return () => {
+        flashManager.unregister();
+        clearTimers();
+      };
+    }, [clearTimers]);
+    const panResponder = useRef(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+          const swipeEnabled = currentMessageRef.current?.swipeToDismiss ?? true;
+          return swipeEnabled && Math.abs(gestureState.dy) > 8;
+        },
+        onPanResponderGrant: () => {
+          if (currentMessageRef.current?.pauseOnPress ?? true) {
+            pauseTimer();
+          }
+        },
+        onPanResponderMove: (_, gestureState) => {
+          if (!(currentMessageRef.current?.swipeToDismiss ?? true)) return;
+          const pos = currentMessageRef.current?.position ?? defaultPosition;
+          if (pos === "top" && gestureState.dy < 0) {
+            translateY.setValue(gestureState.dy);
+          } else if (pos === "bottom" && gestureState.dy > 0) {
+            translateY.setValue(gestureState.dy);
+          }
+        },
+        onPanResponderRelease: (_, gestureState) => {
+          const pos = currentMessageRef.current?.position ?? defaultPosition;
+          const swipeThreshold = 30;
+          const isDismissGesture = pos === "top" && gestureState.dy < -swipeThreshold || pos === "bottom" && gestureState.dy > swipeThreshold;
+          if (isDismissGesture && (currentMessageRef.current?.swipeToDismiss ?? true)) {
+            animateHide();
+          } else {
+            Animated.spring(translateY, {
+              toValue: 0,
+              tension: 80,
+              friction: 8,
+              useNativeDriver: true
+            }).start();
+            if (currentMessageRef.current?.pauseOnPress ?? true) {
+              resumeTimer();
+            }
+          }
+        }
+      })
+    ).current;
+    if (!isVisible || !currentMessage) {
+      return null;
+    }
+    const position = currentMessage.position ?? defaultPosition;
+    const isTop = position === "top";
+    const isBottom = position === "bottom";
+    const type = currentMessage.type ?? "default";
+    const typeColors = COLORS[type];
+    const backgroundColor = currentMessage.backgroundColor ?? typeColors.background;
+    const textColor = currentMessage.color ?? typeColors.text;
+    const floating = currentMessage.floating ?? defaultFloating;
+    const topInset = currentMessage.statusBarHeight ?? statusBarOffset ?? (isTop ? safeInsets.top + (floating ? 8 : 0) : 0);
+    const bottomInset = bottomOffset ?? (isBottom ? safeInsets.bottom + (floating ? 8 : 0) : 0);
+    const rootPositionStyle = isTop ? [styles2.rootTop, { paddingTop: topInset }] : isBottom ? [styles2.rootBottom, { paddingBottom: bottomInset }] : styles2.rootCenter;
+    const renderIcon = () => {
+      if (currentMessage.icon === "none") return null;
+      if (typeof currentMessage.icon === "function") {
+        return /* @__PURE__ */ jsx(View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsx(View, { style: styles2.iconBadge, children: currentMessage.icon({ size: 18, color: textColor }) }) });
+      }
+      if (React.isValidElement(currentMessage.icon)) {
+        return /* @__PURE__ */ jsx(View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsx(View, { style: styles2.iconBadge, children: currentMessage.icon }) });
+      }
+      const iconType = typeof currentMessage.icon === "string" ? currentMessage.icon : type;
+      return /* @__PURE__ */ jsx(View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsx(View, { style: styles2.iconBadge, children: /* @__PURE__ */ jsx(BuiltInIcon, { type: iconType, color: textColor, size: 18 }) }) });
+    };
+    const handlePress = () => {
+      if (currentMessage.onPress) {
+        currentMessage.onPress();
+      }
+      if (currentMessage.hideOnPress ?? true) {
+        animateHide();
+      }
+    };
+    const progressWidthInterpolation = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0%", "100%"]
+    });
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        pointerEvents: "box-none",
+        style: [styles2.rootOverlay, rootPositionStyle, containerCustomStyle],
+        children: /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            ...panResponder.panHandlers,
+            style: [
+              styles2.toastContainer,
+              floating ? styles2.floatingContainer : styles2.edgeToEdgeContainer,
+              { backgroundColor },
+              currentMessage.style,
+              {
+                transform: [{ translateY }],
+                opacity
+              }
+            ],
+            children: [
+              currentMessage.customComponent ? currentMessage.customComponent(currentMessage, () => animateHide()) : /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  onPress: handlePress,
+                  onPressIn: () => {
+                    if (currentMessage.pauseOnPress ?? true) {
+                      pauseTimer();
+                    }
+                  },
+                  onPressOut: () => {
+                    if (currentMessage.pauseOnPress ?? true) {
+                      resumeTimer();
+                    }
+                  },
+                  onLongPress: currentMessage.onLongPress,
+                  style: styles2.contentWrapper,
+                  children: [
+                    renderIcon(),
+                    /* @__PURE__ */ jsxs(View, { style: styles2.textContainer, children: [
+                      typeof currentMessage.message === "string" ? /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          style: [styles2.titleText, { color: textColor }, currentMessage.titleStyle],
+                          numberOfLines: 2,
+                          children: currentMessage.message
+                        }
+                      ) : currentMessage.message,
+                      currentMessage.description ? typeof currentMessage.description === "string" ? /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          style: [
+                            styles2.descriptionText,
+                            { color: textColor },
+                            currentMessage.textStyle
+                          ],
+                          numberOfLines: 3,
+                          children: currentMessage.description
+                        }
+                      ) : currentMessage.description : null
+                    ] }),
+                    currentMessage.action ? /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        onPress: () => {
+                          currentMessage.action?.onPress();
+                          animateHide();
+                        },
+                        style: [styles2.actionButton, currentMessage.action.style],
+                        children: /* @__PURE__ */ jsx(Text, { style: [styles2.actionButtonText, currentMessage.action.textStyle], children: currentMessage.action.label })
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              currentMessage.showProgressBar && /* @__PURE__ */ jsx(View, { style: styles2.progressBarContainer, children: /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  style: [
+                    styles2.progressBarFill,
+                    { width: progressWidthInterpolation }
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+FlashMessage.displayName = "FlashMessage";
+var FlashMessageContext = createContext(null);
+var FlashMessageProvider = ({
+  children,
+  ...containerProps
+}) => {
+  const contextValue = useMemo(
+    () => ({
+      show: (options) => flashManager.showMessage(options),
+      hide: () => flashManager.hideMessage()
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsxs(FlashMessageContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx(FlashMessage, { ...containerProps })
+  ] });
+};
+function useFlashMessage() {
+  const context = useContext(FlashMessageContext);
+  if (!context) {
+    return {
+      show: (options) => flashManager.showMessage(options),
+      hide: () => flashManager.hideMessage()
+    };
+  }
+  return context;
+}
+
+// src/index.ts
+var index_default = FlashMessage;
+
+export { BuiltInIcon, COLORS, FlashMessage, FlashMessageProvider, index_default as default, dismissFlash, flash, flashManager, hideMessage, showMessage, styles2 as styles, useFlashMessage };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map