react-native-alert-notification/lib/module/containers/ToastRender.js

Toast notification and dialog box notification for react native

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from 'react';
import { Animated, Image, PanResponder, Platform, StyleSheet, Text, View } from 'react-native';
import { Color, getImage } from '../service';
import { ALERT_TYPE } from '../config';
export class ToastRender extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "_heightContainer", void 0);

    _defineProperty(this, "_positionToast", void 0);

    _defineProperty(this, "_pressStart", void 0);

    _defineProperty(this, "_countdown", void 0);

    _defineProperty(this, "componentDidUpdate", async (prevProps, prevState) => {
      if (!prevState.isInit && this.state.isInit) {
        await new Promise(resolve => this._animatedTiming(0).start(resolve));

        this._autoCloseHandler();
      }

      if (prevProps.isDark !== this.props.isDark) {
        this.setState({ ...prevState,
          styles: __styles(this.props.isDark)
        });
      }
    });

    _defineProperty(this, "componentWillUnmount", () => {
      var _this$_countdown;

      (_this$_countdown = this._countdown) === null || _this$_countdown === void 0 ? void 0 : _this$_countdown.call(this);
    });

    _defineProperty(this, "_animatedTiming", toValue => {
      return Animated.timing(this._positionToast, {
        toValue,
        duration: 250,
        useNativeDriver: true
      });
    });

    _defineProperty(this, "_autoCloseHandler", () => {
      var _this$_countdown2;

      (_this$_countdown2 = this._countdown) === null || _this$_countdown2 === void 0 ? void 0 : _this$_countdown2.call(this);

      if (this.props.timeout) {
        this._countdown = (() => {
          const _timeout = setTimeout(() => this._animatedTiming(-this._heightContainer).start(this.props.onClose), this.props.timeout);

          return () => clearTimeout(_timeout);
        })();
      }
    });

    _defineProperty(this, "_layoutHandler", event => {
      if (this.state.isInit) {
        return;
      }

      const {
        height
      } = event.nativeEvent.layout;
      this._heightContainer = height;

      this._positionToast.setValue(-height);

      this.setState(prevState => ({ ...prevState,
        isInit: true
      }));
    });

    _defineProperty(this, "_panResponder", PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onStartShouldSetPanResponderCapture: () => false,
      onMoveShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponderCapture: () => true,
      onPanResponderMove: (_, _ref) => {
        let {
          dy
        } = _ref;

        if (dy < 0) {
          this._positionToast.setValue(dy);
        }
      },
      onPanResponderTerminationRequest: () => true,
      onPanResponderStart: (_, _ref2) => {
        var _this$_countdown3;

        let {
          dy: startY
        } = _ref2;
        this._pressStart = {
          startY,
          startAt: Date.now()
        };
        (_this$_countdown3 = this._countdown) === null || _this$_countdown3 === void 0 ? void 0 : _this$_countdown3.call(this);
      },
      onPanResponderEnd: async (_, _ref3) => {
        let {
          dy
        } = _ref3;
        let heightContainer = this._heightContainer;
        const {
          startY,
          startAt
        } = this._pressStart;
        this._pressStart = null;

        if (startAt + 500 >= Date.now() && Math.abs(dy - startY) < 7) {
          var _this$props, _this$props$onPress;

          (_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$onPress = _this$props.onPress) === null || _this$props$onPress === void 0 ? void 0 : _this$props$onPress.call(_this$props);

          this._autoCloseHandler();
        } else if (dy < -(heightContainer / 3)) {
          this._animatedTiming(-heightContainer).start(this.props.onClose);
        } else {
          this._animatedTiming(0).start(this._autoCloseHandler);
        }
      }
    }));

    _defineProperty(this, "_ModelRender", () => {
      const {
        type,
        title,
        description,
        titleStyle,
        textBodyStyle
      } = this.props;
      const {
        styles
      } = this.state; // if (model) {
      //   return model({ isDark, type, title, description });
      // }

      return /*#__PURE__*/React.createElement(View, {
        style: styles.cardContainer
      }, type && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
        style: styles.backendImage
      }), /*#__PURE__*/React.createElement(Image, {
        source: getImage(type),
        resizeMode: "contain",
        style: StyleSheet.flatten([styles.image, styles[`${type}Image`]])
      })), /*#__PURE__*/React.createElement(View, {
        style: styles.labelContainer
      }, title && /*#__PURE__*/React.createElement(Text, {
        style: StyleSheet.flatten([styles.titleLabel, titleStyle])
      }, title), description && /*#__PURE__*/React.createElement(Text, {
        style: StyleSheet.flatten([styles.descLabel, textBodyStyle])
      }, description)));
    });

    this._heightContainer = 0;
    this._pressStart = null;
    this._positionToast = new Animated.Value(0);
    this._countdown = null;
    this.state = {
      isInit: false,
      styles: __styles(props.isDark)
    };
  }

  render() {
    const paddingTop = this.props.paddingTop || 0;
    const {
      isInit,
      styles
    } = this.state;
    const {
      _ModelRender
    } = this;
    return /*#__PURE__*/React.createElement(Animated.View, _extends({
      collapsable: false,
      onLayout: this._layoutHandler
    }, this._panResponder.panHandlers, {
      style: StyleSheet.flatten([styles.container, {
        paddingTop,
        zIndex: isInit ? 99999 : -1,
        transform: [{
          translateY: this._positionToast
        }]
      }])
    }), /*#__PURE__*/React.createElement(_ModelRender, null));
  }

}

const __styles = isDark => StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    right: 0
  },
  cardContainer: {
    flexDirection: 'row',
    paddingHorizontal: 12,
    paddingTop: 12,
    paddingBottom: 12,
    backgroundColor: Color.get('card', isDark),
    ...Platform.select({
      ios: {
        borderRadius: 12,
        marginHorizontal: 12
      },
      android: {
        marginTop: 6,
        marginHorizontal: 6,
        borderRadius: 6
      }
    })
  },
  labelContainer: {
    overflow: 'hidden',
    flex: 1
  },
  titleLabel: {
    fontWeight: 'bold',
    fontSize: 18,
    color: Color.get('label', isDark)
  },
  descLabel: {
    color: Color.get('label', isDark)
  },
  backendImage: {
    position: 'absolute',
    alignSelf: 'center',
    height: 12,
    width: 12,
    backgroundColor: '#FBFBFB',
    borderRadius: 100,
    left: 12 + 7
  },
  image: {
    alignSelf: 'center',
    width: 25,
    aspectRatio: 1,
    marginRight: 12
  },
  [`${ALERT_TYPE.SUCCESS}Image`]: {
    tintColor: Color.get('success', isDark)
  },
  [`${ALERT_TYPE.DANGER}Image`]: {
    tintColor: Color.get('danger', isDark)
  },
  [`${ALERT_TYPE.WARNING}Image`]: {
    tintColor: Color.get('warning', isDark)
  }
});
//# sourceMappingURL=ToastRender.js.map