alert-toast-react-native/lib/commonjs/containers/Toast.js

## Example Dialog Box

"use strict";

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

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

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

var _reactNativeSafeAreaContext = require("react-native-safe-area-context");

var _ENV = _interopRequireWildcard(require("../config/ENV"));

var _service = require("../service");

var _color = _interopRequireDefault(require("../service/color"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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; }

class Toast extends React.Component {
  /**
   * @type {React.Context<EdgeInsets | null>}
   */

  /**
   * @type {React.RefObject<Toast>}
   */

  /**
   * @param {IConfig} args
   */

  /**
   *
   */

  /**
   * @type {React.ContextType<typeof SafeAreaInsetsContext>}
   */

  /**
   * @type {Animated.Value}
   * @private
   */

  /**
   * @type {number}
   * @private
   */

  /**
   * @type {NodeJS.Timeout}
   * @private
   */

  /**
   * @param {IProps} props
   * @param {React.ContextType<typeof SafeAreaInsetsContext>} context
   */
  constructor(props, context) {
    super(props, context);

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

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

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

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

    _defineProperty(this, "componentDidUpdate", prevProps => {
      if (prevProps.isDark !== this.props.isDark) {
        // eslint-disable-next-line react/no-did-update-set-state
        this.setState(prevState => ({ ...prevState,
          styles: __styles(this.props.isDark)
        }));
      }
    });

    _defineProperty(this, "_open", async args => {
      var _this$state$config, _this$state$config2, _this$props$config, _this$state$config3, _this$state$config3$o;

      if (this.state.visible) {
        if (this._timeout) {
          clearTimeout(this._timeout);
        }

        await this._startAnimation(_ENV.ACTION.CLOSE);
      }

      this._positionToast = new _reactNative.Animated.Value(-500);
      await new Promise(resolve => this.setState(prevState => ({ ...prevState,
        visible: true,
        config: args
      }), resolve));
      await this._startAnimation(_ENV.ACTION.OPEN);
      const autoClose = ((_this$state$config = this.state.config) === null || _this$state$config === void 0 ? void 0 : _this$state$config.autoClose) !== undefined ? (_this$state$config2 = this.state.config) === null || _this$state$config2 === void 0 ? void 0 : _this$state$config2.autoClose : (_this$props$config = this.props.config) === null || _this$props$config === void 0 ? void 0 : _this$props$config.autoClose;

      if (autoClose || autoClose === undefined) {
        const duration = typeof autoClose === 'number' ? autoClose : _ENV.default.AUTO_CLOSE;
        this._timeout = setTimeout(() => this._close(), duration);
      }

      (_this$state$config3 = this.state.config) === null || _this$state$config3 === void 0 ? void 0 : (_this$state$config3$o = _this$state$config3.onShow) === null || _this$state$config3$o === void 0 ? void 0 : _this$state$config3$o.call(_this$state$config3);
    });

    _defineProperty(this, "_close", async () => {
      var _this$state$config4;

      await this._startAnimation(_ENV.ACTION.CLOSE);
      const onHide = (_this$state$config4 = this.state.config) === null || _this$state$config4 === void 0 ? void 0 : _this$state$config4.onShow;
      await new Promise(resolve => this.setState(prevState => ({ ...prevState,
        visible: false,
        config: undefined
      }), resolve));
      onHide === null || onHide === void 0 ? void 0 : onHide();
    });

    _defineProperty(this, "_startAnimation", action => {
      return new Promise(resolve => {
        var _this$context$top, _this$context;

        _reactNative.Animated.timing(this._positionToast, {
          toValue: action === _ENV.ACTION.OPEN ? (_this$context$top = (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.top) !== null && _this$context$top !== void 0 ? _this$context$top : 0 : -this._cardHeight,
          duration: 250,
          useNativeDriver: true
        }).start(() => resolve());
      });
    });

    _defineProperty(this, "_CardRender", () => {
      const {
        styles
      } = this.state;

      if (this.state.config) {
        const {
          type,
          title,
          textBody,
          onPress,
          onLongPress
        } = this.state.config;
        return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
          onLayout: ({
            nativeEvent: {
              layout: {
                height
              }
            }
          }) => this._cardHeight = height,
          style: _reactNative.StyleSheet.flatten([styles.cardRow, {
            transform: [{
              translateY: this._positionToast
            }]
          }])
        }, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
          style: styles.cardContainer,
          onPress: onPress,
          onLongPress: onLongPress
        }, type && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
          style: styles.backendImage
        }), /*#__PURE__*/React.createElement(_reactNative.Image, {
          source: (0, _service.getImage)(type),
          resizeMode: "contain",
          style: _reactNative.StyleSheet.flatten([styles.image, styles[`${type}Image`]])
        })), /*#__PURE__*/React.createElement(_reactNative.View, {
          style: {
            overflow: 'hidden',
            flex: 1
          }
        }, title && /*#__PURE__*/React.createElement(_reactNative.Text, {
          style: styles.titleLabel
        }, title), textBody && /*#__PURE__*/React.createElement(_reactNative.Text, {
          style: styles.descLabel
        }, textBody))));
      }

      return /*#__PURE__*/React.createElement(React.Fragment, null);
    });

    _defineProperty(this, "render", () => {
      const {
        visible
      } = this.state;
      const {
        _CardRender
      } = this;

      if (!visible) {
        return /*#__PURE__*/React.createElement(React.Fragment, null);
      }

      return /*#__PURE__*/React.createElement(_CardRender, null);
    });

    this._cardHeight = 0;
    this._positionToast = new _reactNative.Animated.Value(-500);
    this.state = {
      styles: __styles(props.isDark),
      visible: false,
      cardHeight: 0
    };
  }
  /**
   * @param {Readonly<IProps>} prevProps
   */


}

_defineProperty(Toast, "contextType", _reactNativeSafeAreaContext.SafeAreaInsetsContext);

_defineProperty(Toast, "instance", /*#__PURE__*/React.createRef());

_defineProperty(Toast, "show", args => {
  var _Toast$instance$curre;

  (_Toast$instance$curre = Toast.instance.current) === null || _Toast$instance$curre === void 0 ? void 0 : _Toast$instance$curre._open(args);
});

_defineProperty(Toast, "hide", () => {
  var _Toast$instance$curre2;

  (_Toast$instance$curre2 = Toast.instance.current) === null || _Toast$instance$curre2 === void 0 ? void 0 : _Toast$instance$curre2._close();
});

const __styles = isDark => _reactNative.StyleSheet.create({
  backgroundContainer: { ..._reactNative.StyleSheet.absoluteFillObject,
    backgroundColor: '#00000070'
  },
  container: {
    position: 'absolute',
    backgroundColor: '#00000030',
    top: 0,
    left: 0,
    right: 0
  },
  cardRow: {
    zIndex: 9999,
    position: 'absolute',
    left: 0,
    right: 0
  },
  cardContainer: {
    flexDirection: 'row',
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingTop: 12,
    paddingBottom: 12,
    marginHorizontal: 12,
    marginBottom: 12,
    backgroundColor: _color.default.get('card', isDark)
  },
  titleLabel: {
    fontWeight: 'bold',
    fontSize: 18,
    color: _color.default.get('label', isDark)
  },
  descLabel: {
    color: _color.default.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
  },
  [`${_ENV.ALERT_TYPE.SUCCESS}Image`]: {
    tintColor: _color.default.get('success', isDark)
  },
  [`${_ENV.ALERT_TYPE.DANGER}Image`]: {
    tintColor: _color.default.get('danger', isDark)
  },
  [`${_ENV.ALERT_TYPE.WARNING}Image`]: {
    tintColor: _color.default.get('warning', isDark)
  }
});

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