@lonelyplanet/dotcom-core/dist/components/toast/index.js

This package is meant to house some of our more common UI and shared libs across dotcom applications.

"use strict";

var __extends = this && this.__extends || function () {
  var extendStatics = Object.setPrototypeOf || {
    __proto__: []
  } instanceof Array && function (d, b) {
    d.__proto__ = b;
  } || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  };

  return function (d, b) {
    extendStatics(d, b);

    function __() {
      this.constructor = d;
    }

    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();

Object.defineProperty(exports, "__esModule", {
  value: true
});

var toast_1 = require("backpack-ui/dist/components/toast");

var React = require("react");

var Component = React.Component;

var GlobalToast =
/** @class */
function (_super) {
  __extends(GlobalToast, _super);

  function GlobalToast(props) {
    var _this = _super.call(this, props) || this;

    _this.state = {
      hasAnimated: props.visible,
      isVisible: props.visible
    };
    _this.open = _this.open.bind(_this);
    _this.close = _this.close.bind(_this);
    _this.triggerAnimation = _this.triggerAnimation.bind(_this);
    return _this;
  }

  GlobalToast.prototype.componentDidMount = function () {
    var _a = this.props,
        message = _a.message,
        type = _a.type;

    if (message && type) {
      this.triggerAnimation();
    }
  };

  GlobalToast.prototype.triggerAnimation = function () {
    var _this = this;

    this.open();
    setTimeout(function () {
      _this.close();
    }, this.props.duration);
  };

  GlobalToast.prototype.componentWillReceiveProps = function (nextProps) {
    if (nextProps.visible !== this.props.visible) {
      if (nextProps.visible) {
        this.triggerAnimation();
      }
    }
  };

  GlobalToast.prototype.open = function () {
    var _this = this;

    var animationDuration = this.props.animationDuration;
    this.setState({
      isVisible: true
    });
    setTimeout(function () {
      _this.setState({
        hasAnimated: true
      });
    }, animationDuration);
  };

  GlobalToast.prototype.close = function () {
    var _this = this;

    var _a = this.props,
        onClose = _a.onClose,
        animationDuration = _a.animationDuration;
    this.setState({
      hasAnimated: false
    });
    setTimeout(function () {
      _this.setState({
        isVisible: false
      });

      if (onClose && typeof onClose === "function") {
        onClose();
      }
    }, animationDuration);
  };

  GlobalToast.prototype.render = function () {
    var _a = this.props,
        message = _a.message,
        title = _a.title,
        type = _a.type,
        buttonLabel = _a.buttonLabel,
        url = _a.url;
    return React.createElement(toast_1.default, {
      visible: this.state.hasAnimated,
      onClose: this.close,
      direction: "bottom",
      title: title,
      buttonLabel: buttonLabel,
      url: url,
      type: type,
      affixed: true
    }, message);
  };

  return GlobalToast;
}(React.Component);

exports.default = GlobalToast;