react-native-toast-notifications/lib/module/toast-container.js

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

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); }

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 React, { Component } from "react";
import { StyleSheet, KeyboardAvoidingView, Platform, Dimensions, SafeAreaView } from "react-native";
import Toast from "./toast";
const {
  height,
  width
} = Dimensions.get("window");

class ToastContainer extends Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "show", (message, toastOptions) => {
      let id = (toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.id) || Math.random().toString();

      const onDestroy = () => {
        (toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.onClose) && (toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.onClose());
        this.setState({
          toasts: this.state.toasts.filter(t => t.id !== id)
        });
      };

      requestAnimationFrame(() => {
        this.setState({
          toasts: [{
            id,
            onDestroy,
            message,
            open: true,
            onHide: () => this.hide(id),
            ...this.props,
            ...toastOptions
          }, ...this.state.toasts.filter(t => t.open)]
        });
      });
      return id;
    });

    _defineProperty(this, "update", (id, message, toastOptions) => {
      this.setState({
        toasts: this.state.toasts.map(toast => toast.id === id ? { ...toast,
          message,
          ...toastOptions
        } : toast)
      });
    });

    _defineProperty(this, "hide", id => {
      this.setState({
        toasts: this.state.toasts.map(t => t.id === id ? { ...t,
          open: false
        } : t)
      });
    });

    _defineProperty(this, "hideAll", () => {
      this.setState({
        toasts: this.state.toasts.map(t => ({ ...t,
          open: false
        }))
      });
    });

    _defineProperty(this, "isOpen", id => {
      return this.state.toasts.some(t => t.id === id && t.open);
    });

    this.state = {
      toasts: []
    };
  }

  renderBottomToasts() {
    const {
      toasts
    } = this.state;
    let {
      offset,
      offsetBottom
    } = this.props;
    let style = {
      bottom: offsetBottom || offset,
      width: width,
      justifyContent: "flex-end",
      flexDirection: "column"
    };
    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
      behavior: Platform.OS === "ios" ? "position" : undefined,
      style: [styles.container, style],
      pointerEvents: "box-none"
    }, /*#__PURE__*/React.createElement(SafeAreaView, null, toasts.filter(t => !t.placement || t.placement === "bottom").map(toast => /*#__PURE__*/React.createElement(Toast, _extends({
      key: toast.id
    }, toast)))));
  }

  renderTopToasts() {
    const {
      toasts
    } = this.state;
    let {
      offset,
      offsetTop
    } = this.props;
    let style = {
      top: offsetTop || offset,
      width: width,
      justifyContent: "flex-start",
      flexDirection: "column-reverse"
    };
    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
      behavior: Platform.OS === "ios" ? "position" : undefined,
      style: [styles.container, style],
      pointerEvents: "box-none"
    }, /*#__PURE__*/React.createElement(SafeAreaView, null, toasts.filter(t => t.placement === "top").map(toast => /*#__PURE__*/React.createElement(Toast, _extends({
      key: toast.id
    }, toast)))));
  }

  renderCenterToasts() {
    const {
      toasts
    } = this.state;
    let {
      offset,
      offsetTop
    } = this.props;
    let style = {
      top: offsetTop || offset,
      height: height,
      width: width,
      justifyContent: "center",
      flexDirection: "column-reverse"
    };
    const data = toasts.filter(t => t.placement === "center");
    const foundToast = data.length > 0;
    if (!foundToast) return null;
    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
      behavior: Platform.OS === "ios" ? "position" : undefined,
      style: [styles.container, style],
      pointerEvents: "box-none"
    }, toasts.filter(t => t.placement === "center").map(toast => /*#__PURE__*/React.createElement(Toast, _extends({
      key: toast.id
    }, toast))));
  }

  render() {
    return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderTopToasts(), this.renderBottomToasts(), this.renderCenterToasts());
  }

}

_defineProperty(ToastContainer, "defaultProps", {
  placement: "bottom",
  offset: 10,
  swipeEnabled: true
});

const styles = StyleSheet.create({
  container: {
    flex: 0,
    // @ts-ignore: fixed is available on web.
    position: Platform.OS === "web" ? "fixed" : "absolute",
    maxWidth: "100%",
    zIndex: 999999,
    elevation: 999999,
    alignSelf: 'center',
    ...(Platform.OS === "web" ? {
      overflow: "hidden",
      userSelect: 'none'
    } : null)
  },
  message: {
    color: "#333"
  }
});
export default ToastContainer;
//# sourceMappingURL=toast-container.js.map