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

package/dist/index.js

@@ -0,0 +1,613 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactNative = require('react-native');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// 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 = 22,
+  color = "#FFFFFF"
+}) => {
+  const containerStyle = [
+    styles.circle,
+    {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderColor: color
+    }
+  ];
+  switch (type) {
+    case "success":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "\u2713" }) });
+    case "danger":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "\u2715" }) });
+    case "warning":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "!" }) });
+    case "info":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "\u2139" }) });
+    case "default":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.symbol, { color, fontSize: size * 0.6 }], children: "\u25CF" }) });
+  }
+};
+var styles = reactNative.StyleSheet.create({
+  circle: {
+    borderWidth: 1.5,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  symbol: {
+    fontWeight: "800",
+    textAlign: "center",
+    includeFontPadding: false,
+    lineHeight: 22
+  }
+});
+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 = reactNative.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",
+    ...reactNative.Platform.select({
+      ios: {
+        shadowColor: "#000000",
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: 0.18,
+        shadowRadius: 12
+      },
+      android: {
+        elevation: 8
+      },
+      web: {
+        boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+      }
+    })
+  },
+  floatingContainer: {
+    marginHorizontal: 16,
+    borderRadius: 14,
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(255, 255, 255, 0.15)"
+  },
+  edgeToEdgeContainer: {
+    marginHorizontal: 0,
+    borderRadius: 0
+  },
+  contentWrapper: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 14,
+    paddingHorizontal: 16
+  },
+  iconContainer: {
+    marginRight: 12,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  titleText: {
+    fontSize: 15,
+    fontWeight: "600",
+    letterSpacing: -0.2,
+    color: "#FFFFFF"
+  },
+  descriptionText: {
+    fontSize: 13,
+    fontWeight: "400",
+    color: "rgba(255, 255, 255, 0.88)",
+    marginTop: 2,
+    lineHeight: 18
+  },
+  actionButton: {
+    marginLeft: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: "rgba(255, 255, 255, 0.2)"
+  },
+  actionButtonText: {
+    fontSize: 13,
+    fontWeight: "700",
+    color: "#FFFFFF"
+  },
+  progressBarContainer: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 3,
+    backgroundColor: "rgba(255, 255, 255, 0.25)"
+  },
+  progressBarFill: {
+    height: "100%",
+    backgroundColor: "#FFFFFF"
+  }
+});
+function getDefaultSafeAreaInsets() {
+  const { width, height } = reactNative.Dimensions.get("window");
+  const isLandscape = width > height;
+  if (reactNative.Platform.OS === "android") {
+    return {
+      top: reactNative.StatusBar.currentHeight ?? 24,
+      bottom: 16,
+      left: 0,
+      right: 0
+    };
+  }
+  if (reactNative.Platform.OS === "ios") {
+    const isModernIphone = !reactNative.Platform.isPad && !reactNative.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__default.default.forwardRef(
+  (props, ref) => {
+    const {
+      position: defaultPosition = "top",
+      duration: defaultDuration = 3e3,
+      floating: defaultFloating = true,
+      statusBarOffset,
+      bottomOffset,
+      style: containerCustomStyle
+    } = props;
+    const [currentMessage, setCurrentMessage] = React.useState(null);
+    const [isVisible, setIsVisible] = React.useState(false);
+    const translateY = React.useRef(new reactNative.Animated.Value(-150)).current;
+    const opacity = React.useRef(new reactNative.Animated.Value(0)).current;
+    const progress = React.useRef(new reactNative.Animated.Value(1)).current;
+    const hideTimeoutRef = React.useRef(null);
+    const progressAnimationRef = React.useRef(null);
+    const remainingTimeRef = React.useRef(0);
+    const timerStartedAtRef = React.useRef(0);
+    const safeInsets = getDefaultSafeAreaInsets();
+    const position = currentMessage?.position ?? defaultPosition;
+    const isTop = position === "top";
+    const isBottom = position === "bottom";
+    const clearTimers = React.useCallback(() => {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+      }
+      if (progressAnimationRef.current) {
+        progressAnimationRef.current.stop();
+        progressAnimationRef.current = null;
+      }
+    }, []);
+    const animateHide = React.useCallback(
+      (callback) => {
+        clearTimers();
+        const targetY = isTop ? -180 : isBottom ? 180 : 0;
+        reactNative.Animated.parallel([
+          reactNative.Animated.timing(translateY, {
+            toValue: targetY,
+            duration: 220,
+            useNativeDriver: true
+          }),
+          reactNative.Animated.timing(opacity, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: true
+          })
+        ]).start(() => {
+          setIsVisible(false);
+          if (currentMessage?.onHide) {
+            currentMessage.onHide();
+          }
+          setCurrentMessage(null);
+          callback?.();
+        });
+      },
+      [clearTimers, isTop, isBottom, opacity, translateY, currentMessage]
+    );
+    const startAutoHideTimer = React.useCallback(
+      (durationMs) => {
+        clearTimers();
+        if (durationMs <= 0) return;
+        remainingTimeRef.current = durationMs;
+        timerStartedAtRef.current = Date.now();
+        progress.setValue(1);
+        progressAnimationRef.current = reactNative.Animated.timing(progress, {
+          toValue: 0,
+          duration: durationMs,
+          useNativeDriver: false
+          // width needs layout or scaleX
+        });
+        progressAnimationRef.current.start();
+        hideTimeoutRef.current = setTimeout(() => {
+          animateHide();
+        }, durationMs);
+      },
+      [animateHide, clearTimers, progress]
+    );
+    const pauseTimer = React.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 = React.useCallback(() => {
+      if (remainingTimeRef.current > 0) {
+        startAutoHideTimer(remainingTimeRef.current);
+      }
+    }, [startAutoHideTimer]);
+    const show = React.useCallback(
+      (options) => {
+        clearTimers();
+        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);
+        reactNative.Animated.parallel([
+          reactNative.Animated.spring(translateY, {
+            toValue: 0,
+            tension: 70,
+            friction: 9,
+            useNativeDriver: true
+          }),
+          reactNative.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 ?? defaultDuration : 0;
+        if (dur > 0) {
+          startAutoHideTimer(dur);
+        }
+      },
+      [clearTimers, defaultDuration, defaultPosition, opacity, progress, startAutoHideTimer, translateY]
+    );
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        showMessage: show,
+        hideMessage: () => animateHide()
+      }),
+      [show, animateHide]
+    );
+    React.useEffect(() => {
+      const instanceRef = {
+        showMessage: show,
+        hideMessage: () => animateHide()
+      };
+      flashManager.register(instanceRef);
+      return () => {
+        flashManager.unregister();
+        clearTimers();
+      };
+    }, [show, animateHide, clearTimers]);
+    const panResponder = React.useRef(
+      reactNative.PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+          return Math.abs(gestureState.dy) > 5;
+        },
+        onPanResponderGrant: () => {
+          if (currentMessage?.pauseOnPress ?? true) {
+            pauseTimer();
+          }
+        },
+        onPanResponderMove: (_, gestureState) => {
+          if (!(currentMessage?.swipeToDismiss ?? true)) return;
+          if (isTop && gestureState.dy < 0) {
+            translateY.setValue(gestureState.dy);
+          } else if (isBottom && gestureState.dy > 0) {
+            translateY.setValue(gestureState.dy);
+          }
+        },
+        onPanResponderRelease: (_, gestureState) => {
+          const swipeThreshold = 30;
+          const isDismissGesture = isTop && gestureState.dy < -swipeThreshold || isBottom && gestureState.dy > swipeThreshold;
+          if (isDismissGesture && (currentMessage?.swipeToDismiss ?? true)) {
+            animateHide();
+          } else {
+            reactNative.Animated.spring(translateY, {
+              toValue: 0,
+              tension: 80,
+              friction: 8,
+              useNativeDriver: true
+            }).start();
+            if (currentMessage?.pauseOnPress ?? true) {
+              resumeTimer();
+            }
+          }
+        }
+      })
+    ).current;
+    if (!isVisible || !currentMessage) {
+      return null;
+    }
+    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__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconContainer, children: currentMessage.icon({ size: 22, color: textColor }) });
+      }
+      if (React__default.default.isValidElement(currentMessage.icon)) {
+        return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconContainer, children: currentMessage.icon });
+      }
+      const iconType = typeof currentMessage.icon === "string" ? currentMessage.icon : type;
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsxRuntime.jsx(BuiltInIcon, { type: iconType, color: textColor, size: 22 }) });
+    };
+    const handlePress = () => {
+      if (currentMessage.onPress) {
+        currentMessage.onPress();
+      }
+      if (currentMessage.hideOnPress ?? true) {
+        animateHide();
+      }
+    };
+    const progressWidthInterpolation = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0%", "100%"]
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        pointerEvents: "box-none",
+        style: [styles2.rootOverlay, rootPositionStyle, containerCustomStyle],
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.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__ */ jsxRuntime.jsxs(
+                reactNative.Pressable,
+                {
+                  onPress: handlePress,
+                  onLongPress: currentMessage.onLongPress,
+                  style: styles2.contentWrapper,
+                  children: [
+                    renderIcon(),
+                    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.textContainer, children: [
+                      typeof currentMessage.message === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                        reactNative.Text,
+                        {
+                          style: [styles2.titleText, { color: textColor }, currentMessage.titleStyle],
+                          numberOfLines: 2,
+                          children: currentMessage.message
+                        }
+                      ) : currentMessage.message,
+                      currentMessage.description ? typeof currentMessage.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                        reactNative.Text,
+                        {
+                          style: [
+                            styles2.descriptionText,
+                            { color: textColor },
+                            currentMessage.textStyle
+                          ],
+                          numberOfLines: 3,
+                          children: currentMessage.description
+                        }
+                      ) : currentMessage.description : null
+                    ] }),
+                    currentMessage.action ? /* @__PURE__ */ jsxRuntime.jsx(
+                      reactNative.Pressable,
+                      {
+                        onPress: () => {
+                          currentMessage.action?.onPress();
+                          animateHide();
+                        },
+                        style: [styles2.actionButton, currentMessage.action.style],
+                        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.actionButtonText, currentMessage.action.textStyle], children: currentMessage.action.label })
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              currentMessage.showProgressBar && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.progressBarContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Animated.View,
+                {
+                  style: [
+                    styles2.progressBarFill,
+                    { width: progressWidthInterpolation }
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+FlashMessage.displayName = "FlashMessage";
+var FlashMessageContext = React.createContext(null);
+var FlashMessageProvider = ({
+  children,
+  ...containerProps
+}) => {
+  const contextValue = React.useMemo(
+    () => ({
+      show: (options) => flashManager.showMessage(options),
+      hide: () => flashManager.hideMessage()
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(FlashMessageContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(FlashMessage, { ...containerProps })
+  ] });
+};
+function useFlashMessage() {
+  const context = React.useContext(FlashMessageContext);
+  if (!context) {
+    return {
+      show: (options) => flashManager.showMessage(options),
+      hide: () => flashManager.hideMessage()
+    };
+  }
+  return context;
+}
+
+// src/index.ts
+var index_default = FlashMessage;
+
+exports.BuiltInIcon = BuiltInIcon;
+exports.COLORS = COLORS;
+exports.FlashMessage = FlashMessage;
+exports.FlashMessageProvider = FlashMessageProvider;
+exports.default = index_default;
+exports.dismissFlash = dismissFlash;
+exports.flash = flash;
+exports.flashManager = flashManager;
+exports.hideMessage = hideMessage;
+exports.showMessage = showMessage;
+exports.styles = styles2;
+exports.useFlashMessage = useFlashMessage;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map