react-native-toast-notifications/lib/commonjs/toast.js

[![Version][version-badge]][package] [![MIT License][license-badge]][license]

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _useDimensions = require("./utils/useDimensions");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const Toast = props => {
  let {
    id,
    onDestroy,
    icon,
    type = "normal",
    message,
    duration = 5000,
    style,
    textStyle,
    animationDuration = 250,
    animationType = "slide-in",
    successIcon,
    dangerIcon,
    warningIcon,
    successColor,
    dangerColor,
    warningColor,
    normalColor,
    placement,
    swipeEnabled,
    onPress
  } = props;
  const containerRef = (0, _react.useRef)(null);
  const [animation] = (0, _react.useState)(new _reactNative.Animated.Value(0));
  const panResponderRef = (0, _react.useRef)();
  const panResponderAnimRef = (0, _react.useRef)();
  const closeTimeoutRef = (0, _react.useRef)(null);
  const dims = (0, _useDimensions.useDimensions)();
  (0, _react.useEffect)(() => {
    _reactNative.Animated.timing(animation, {
      toValue: 1,
      useNativeDriver: _reactNative.Platform.OS !== "web",
      duration: animationDuration
    }).start();

    if (duration !== 0 && typeof duration === "number") {
      closeTimeoutRef.current = setTimeout(() => {
        handleClose();
      }, duration);
    }

    return () => {
      closeTimeoutRef.current && clearTimeout(closeTimeoutRef.current);
    };
  }, [duration]); // Handles hide & hideAll

  (0, _react.useEffect)(() => {
    if (!props.open) {
      // Unregister close timeout
      closeTimeoutRef.current && clearTimeout(closeTimeoutRef.current); // Close animation them remove from stack.

      handleClose();
    }
  }, [props.open]);

  const handleClose = () => {
    _reactNative.Animated.timing(animation, {
      toValue: 0,
      useNativeDriver: _reactNative.Platform.OS !== "web",
      duration: animationDuration
    }).start(() => onDestroy());
  };

  const panReleaseToLeft = gestureState => {
    _reactNative.Animated.timing(getPanResponderAnim(), {
      toValue: {
        x: -dims.width / 10 * 9,
        y: gestureState.dy
      },
      useNativeDriver: _reactNative.Platform.OS !== "web",
      duration: 250
    }).start(() => onDestroy());
  };

  const panReleaseToRight = gestureState => {
    _reactNative.Animated.timing(getPanResponderAnim(), {
      toValue: {
        x: dims.width / 10 * 9,
        y: gestureState.dy
      },
      useNativeDriver: _reactNative.Platform.OS !== "web",
      duration: 250
    }).start(() => onDestroy());
  };

  const getPanResponder = () => {
    if (panResponderRef.current) return panResponderRef.current;
    const swipeThreshold = _reactNative.Platform.OS === "android" ? 10 : 0;
    panResponderRef.current = _reactNative.PanResponder.create({
      onMoveShouldSetPanResponder: (_, gestureState) => {
        //return true if user is swiping, return false if it's a single click
        return Math.abs(gestureState.dx) > swipeThreshold || Math.abs(gestureState.dy) > swipeThreshold;
      },
      onPanResponderMove: (_, gestureState) => {
        var _getPanResponderAnim;

        (_getPanResponderAnim = getPanResponderAnim()) === null || _getPanResponderAnim === void 0 ? void 0 : _getPanResponderAnim.setValue({
          x: gestureState.dx,
          y: gestureState.dy
        });
      },
      onPanResponderRelease: (_, gestureState) => {
        if (gestureState.dx > 50) {
          panReleaseToRight(gestureState);
        } else if (gestureState.dx < -50) {
          panReleaseToLeft(gestureState);
        } else {
          _reactNative.Animated.spring(getPanResponderAnim(), {
            toValue: {
              x: 0,
              y: 0
            },
            useNativeDriver: _reactNative.Platform.OS !== "web"
          }).start();
        }
      }
    });
    return panResponderRef.current;
  };

  const getPanResponderAnim = () => {
    if (panResponderAnimRef.current) return panResponderAnimRef.current;
    panResponderAnimRef.current = new _reactNative.Animated.ValueXY({
      x: 0,
      y: 0
    });
    return panResponderAnimRef.current;
  };

  if (icon === undefined) {
    switch (type) {
      case "success":
        {
          if (successIcon) {
            icon = successIcon;
          }

          break;
        }

      case "danger":
        {
          if (dangerIcon) {
            icon = dangerIcon;
          }

          break;
        }

      case "warning":
        {
          if (warningIcon) {
            icon = warningIcon;
          }

          break;
        }
    }
  }

  let backgroundColor = "";

  switch (type) {
    case "success":
      backgroundColor = successColor || "rgb(46, 125, 50)";
      break;

    case "danger":
      backgroundColor = dangerColor || "rgb(211, 47, 47)";
      break;

    case "warning":
      backgroundColor = warningColor || "rgb(237, 108, 2)";
      break;

    default:
      backgroundColor = normalColor || "#333";
  }

  const animationStyle = {
    opacity: animation,
    transform: [{
      translateY: animation.interpolate({
        inputRange: [0, 1],
        outputRange: placement === "bottom" ? [20, 0] : [-20, 0] // 0 : 150, 0.5 : 75, 1 : 0

      })
    }]
  };

  if (swipeEnabled) {
    var _animationStyle$trans;

    (_animationStyle$trans = animationStyle.transform) === null || _animationStyle$trans === void 0 ? void 0 : _animationStyle$trans.push(getPanResponderAnim().getTranslateTransform()[0]);
  }

  if (animationType === "zoom-in") {
    var _animationStyle$trans2;

    (_animationStyle$trans2 = animationStyle.transform) === null || _animationStyle$trans2 === void 0 ? void 0 : _animationStyle$trans2.push({
      scale: animation.interpolate({
        inputRange: [0, 1],
        outputRange: [0.7, 1]
      })
    });
  }

  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
    pointerEvents: "box-none",
    ref: containerRef
  }, swipeEnabled ? getPanResponder().panHandlers : null, {
    style: [styles.container, animationStyle]
  }), props.renderType && props.renderType[type] ? props.renderType[type](props) : props.renderToast ? props.renderToast(props) : /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
    disabled: !onPress,
    onPress: () => onPress && onPress(id)
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.toastContainer, {
      maxWidth: dims.width / 10 * 9,
      backgroundColor
    }, style]
  }, icon ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.iconContainer
  }, icon) : null, /*#__PURE__*/_react.default.isValidElement(message) ? message : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: [styles.message, textStyle]
  }, message))));
};

const styles = _reactNative.StyleSheet.create({
  container: {
    width: "100%",
    alignItems: "center"
  },
  toastContainer: {
    paddingHorizontal: 12,
    paddingVertical: 12,
    borderRadius: 5,
    marginVertical: 5,
    flexDirection: "row",
    alignItems: "center",
    overflow: "hidden"
  },
  message: {
    color: "#fff",
    fontWeight: "500"
  },
  iconContainer: {
    marginRight: 5
  }
});

var _default = Toast;
exports.default = _default;
//# sourceMappingURL=toast.js.map