react-native-irano/lib/commonjs/components/toast.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _react = require("react");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const AnimatedPath = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Path);
const Icon = ({
  preset,
  animatedProps,
  pathAnimatedProps
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
  style: styles.icon,
  width: "30",
  height: "30",
  viewBox: "0 0 24 24",
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedPath, {
    d: preset === 'error' ? 'M6 18L18 6M6 6l12 12' : 'M5 12.5l5 5 10-10',
    stroke: "gray",
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeDasharray: "22",
    fill: "none",
    ...pathAnimatedProps,
    animatedProps: animatedProps
  })
});
const Toast = /*#__PURE__*/(0, _react.memo)(({
  title,
  subtitle,
  preset = 'success',
  pathProps,
  textContainerProps,
  textContainerStyle,
  toastContainerProps,
  toastContainerStyle,
  titleProps,
  titleStyle,
  subtitleProps,
  subtitleStyle,
  iconContainerStyle,
  toastMainContainerStyle,
  MAX_WIDTH = 340,
  autoHideDuration = 5000,
  position = 'top',
  onHide
}) => {
  const strokeDashoffset = (0, _reactNativeReanimated.useSharedValue)(22);
  const widthValue = (0, _reactNativeReanimated.useSharedValue)(55);
  (0, _react.useEffect)(() => {
    const animationTimeouts = [setTimeout(() => {
      strokeDashoffset.value = (0, _reactNativeReanimated.withTiming)(0, {
        duration: 300,
        easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
      });
    }, 400), setTimeout(() => {
      widthValue.value = (0, _reactNativeReanimated.withTiming)(MAX_WIDTH, {
        duration: 300,
        easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.elastic(0.7))
      });
    }, 600), setTimeout(() => {
      onHide();
    }, autoHideDuration)];
    return () => animationTimeouts.forEach(clearTimeout);
  }, [MAX_WIDTH, strokeDashoffset, widthValue, onHide, autoHideDuration]);
  const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => ({
    strokeDashoffset: strokeDashoffset.value
  }));
  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    width: widthValue.value
  }));
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
    style: [styles.toastContainer, position === 'bottom' ? styles.toastContainerBottom : styles.toastContainerTop, toastContainerStyle],
    entering: (position === 'top' ? _reactNativeReanimated.SlideInUp : _reactNativeReanimated.SlideInDown).springify().damping(10).mass(0.5),
    exiting: position === 'top' ? _reactNativeReanimated.SlideOutUp : _reactNativeReanimated.SlideOutDown,
    ...toastContainerProps,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
      style: [animatedStyle, styles.toastContent, toastMainContainerStyle],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        onTouchEnd: onHide,
        style: [styles.iconContainer, iconContainerStyle],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
          preset: preset,
          animatedProps: animatedProps,
          pathAnimatedProps: pathProps
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
        style: [styles.textContainer, {
          width: MAX_WIDTH * 0.75
        }, textContainerStyle],
        entering: _reactNativeReanimated.FadeIn.delay(900),
        ...textContainerProps,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          allowFontScaling: true,
          numberOfLines: 1,
          ellipsizeMode: "tail",
          style: [styles.text, titleStyle],
          ...titleProps,
          children: title
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          allowFontScaling: true,
          numberOfLines: 1,
          ellipsizeMode: "tail",
          style: [styles.subtitleStyle, subtitleStyle],
          ...subtitleProps,
          children: subtitle
        })]
      })]
    })
  });
});
const styles = _reactNative.StyleSheet.create({
  toastContainer: {
    position: 'absolute',
    width: '100%',
    alignItems: 'center'
  },
  toastContainerBottom: {
    bottom: '10%'
  },
  toastContainerTop: {
    top: '10%'
  },
  toastContent: {
    height: 55,
    backgroundColor: '#f0f0f0',
    borderRadius: 25,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8
  },
  icon: {
    margin: 2
  },
  iconContainer: {
    padding: 4,
    borderRadius: 100,
    backgroundColor: 'white'
  },
  textContainer: {
    width: 230,
    marginLeft: 10
  },
  text: {
    fontSize: 16,
    color: '#333',
    fontWeight: 'bold'
  },
  subtitleStyle: {
    fontSize: 14,
    color: '#666',
    marginTop: 2,
    textAlign: 'center'
  }
});
var _default = exports.default = Toast;
//# sourceMappingURL=toast.js.map