react-native-irano/lib/module/components/alert.js

A customizable cross-platform toast notification library for React Native.

"use strict";

import { useCallback, useEffect } from 'react';
import { View, Text, StyleSheet, Modal, ActivityIndicator } from 'react-native';
import { Svg, Path } from 'react-native-svg';
import Animated, { useSharedValue, useAnimatedProps, withTiming, Easing, ZoomIn, ZoomOut } from 'react-native-reanimated';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AnimatedPath = Animated.createAnimatedComponent(Path);
export const Alert = ({
  title,
  subtitle,
  onClose,
  visible,
  preset,
  animatedViewProps,
  pathAnimatedProps,
  titleStyle,
  subtitleStyle,
  cardStyle,
  overlayStyle,
  loadingIndicatorStyle,
  autoHide = true,
  autoHideDelay = 5000,
  delay = 400,
  duration = 400
}) => {
  const strokeDashoffset = useSharedValue(22);
  const handleDialogClose = useCallback(() => {
    strokeDashoffset.value = 22;
    onClose();
  }, [onClose, strokeDashoffset]);
  useEffect(() => {
    if (visible) {
      // Start checkmark animation after a delay
      setTimeout(() => {
        strokeDashoffset.value = withTiming(0, {
          duration: duration,
          easing: Easing.out(Easing.ease)
        });
      }, delay); // Delay after fade-in animation

      let autoCloseTimeout;
      if (autoHide) {
        autoCloseTimeout = setTimeout(() => {
          handleDialogClose();
        }, autoHideDelay);
      }
      return () => clearTimeout(autoCloseTimeout);
    }
    return; // Ensure all code paths return a value
  }, [autoHide, autoHideDelay, delay, duration, handleDialogClose, strokeDashoffset, visible]);
  const animatedProps = useAnimatedProps(() => ({
    strokeDashoffset: strokeDashoffset.value
  }));
  const renderContent = () => {
    if (preset === 'loading') {
      return /*#__PURE__*/_jsx(ActivityIndicator, {
        style: styles.loadingIndicator,
        size: "large",
        ...loadingIndicatorStyle
      });
    } else if (preset === 'error') {
      return /*#__PURE__*/_jsx(Svg, {
        style: styles.svgStyle,
        width: "120",
        height: "120",
        viewBox: "0 0 24 24",
        children: /*#__PURE__*/_jsx(AnimatedPath, {
          d: "M6 18L18 6M6 6l12 12" // X Path for error
          ,
          stroke: "gray",
          strokeWidth: "2",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeDasharray: "22",
          fill: "none",
          ...pathAnimatedProps,
          animatedProps: animatedProps
        })
      });
    } else {
      return /*#__PURE__*/_jsx(Svg, {
        style: styles.svgStyle,
        width: "120",
        height: "120",
        viewBox: "0 0 24 24",
        children: /*#__PURE__*/_jsx(AnimatedPath, {
          d: "M5 12.5l5 5 10-10" // Checkmark Path
          ,
          stroke: "gray",
          strokeWidth: "2",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeDasharray: "22",
          fill: "none",
          ...pathAnimatedProps,
          animatedProps: animatedProps
        })
      });
    }
  };
  return /*#__PURE__*/_jsx(Modal, {
    visible: visible,
    transparent: true,
    animationType: !visible ? 'fade' : 'none',
    onRequestClose: handleDialogClose,
    children: /*#__PURE__*/_jsx(View, {
      style: [styles.modalOverlay, overlayStyle],
      onTouchEnd: handleDialogClose,
      children: visible && /*#__PURE__*/_jsxs(Animated.View, {
        entering: ZoomIn.springify(),
        exiting: ZoomOut.duration(220).easing(Easing.linear),
        style: [styles.card, cardStyle],
        onTouchEnd: handleDialogClose,
        ...animatedViewProps,
        children: [renderContent(), /*#__PURE__*/_jsx(Text, {
          style: [styles.title, titleStyle],
          children: title
        }), /*#__PURE__*/_jsx(Text, {
          style: [styles.subtitle, subtitleStyle],
          children: subtitle
        })]
      })
    })
  });
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000'
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    justifyContent: 'center',
    alignItems: 'center'
  },
  card: {
    backgroundColor: '#F5F5F5',
    borderRadius: 12,
    padding: 20,
    alignItems: 'center',
    width: 250
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginTop: 10,
    textAlign: 'center'
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
    textAlign: 'center'
  },
  svgStyle: {
    padding: 20
  },
  loadingIndicator: {
    margin: 20
  }
});
//# sourceMappingURL=alert.js.map