react-toastify/lib/components/Toast.js

React notification made easy

'use strict';

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

var _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; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _ProgressBar = require('./ProgressBar');

var _ProgressBar2 = _interopRequireDefault(_ProgressBar);

var _constant = require('./../utils/constant');

var _propValidator = require('./../utils/propValidator');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function getX(e) {
  return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientX : e.clientX;
}

function getY(e) {
  return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientY : e.clientY;
}

var noop = function noop() {};

var Toast = function (_Component) {
  _inherits(Toast, _Component);

  function Toast() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Toast);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Toast.__proto__ || Object.getPrototypeOf(Toast)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      isRunning: true,
      preventExitTransition: false
    }, _this.flag = {
      canCloseOnClick: true,
      canDrag: false
    }, _this.drag = {
      start: 0,
      x: 0,
      y: 0,
      deltaX: 0,
      removalDistance: 0
    }, _this.ref = null, _this.pauseToast = function () {
      _this.setState({ isRunning: false });
    }, _this.playToast = function () {
      _this.setState({ isRunning: true });
    }, _this.onDragStart = function (e) {
      _this.flag.canCloseOnClick = true;
      _this.flag.canDrag = true;

      _this.ref.style.transition = '';

      _this.drag.start = _this.drag.x = getX(e.nativeEvent);
      _this.drag.removalDistance = _this.ref.offsetWidth * (_this.props.draggablePercent / 100);
    }, _this.onDragMove = function (e) {
      if (_this.flag.canDrag) {
        if (_this.state.isRunning) {
          _this.pauseToast();
        }

        _this.drag.x = getX(e);
        _this.drag.deltaX = _this.drag.x - _this.drag.start;

        // prevent false positif during a toast click
        _this.drag.start !== _this.drag.x && (_this.flag.canCloseOnClick = false);

        _this.ref.style.transform = 'translateX(' + _this.drag.deltaX + 'px)';
        _this.ref.style.opacity = 1 - Math.abs(_this.drag.deltaX / _this.drag.removalDistance);
      }
    }, _this.onDragEnd = function (e) {
      if (_this.flag.canDrag) {
        _this.flag.canDrag = false;

        if (Math.abs(_this.drag.deltaX) > _this.drag.removalDistance) {
          _this.setState({
            preventExitTransition: true
          }, _this.props.closeToast);
          return;
        }

        _this.drag.y = getY(e);
        _this.ref.style.transition = 'transform 0.2s, opacity 0.2s';
        _this.ref.style.transform = 'translateX(0)';
        _this.ref.style.opacity = 1;
      }
    }, _this.onDragTransitionEnd = function () {
      var _this$ref$getBounding = _this.ref.getBoundingClientRect(),
          top = _this$ref$getBounding.top,
          bottom = _this$ref$getBounding.bottom,
          left = _this$ref$getBounding.left,
          right = _this$ref$getBounding.right;

      if (_this.props.pauseOnHover && _this.drag.x >= left && _this.drag.x <= right && _this.drag.y >= top && _this.drag.y <= bottom) {
        _this.pauseToast();
      } else {
        _this.playToast();
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Toast, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.props.onOpen(this.props.children.props);

      if (this.props.draggable) {
        document.addEventListener('mousemove', this.onDragMove);
        document.addEventListener('mouseup', this.onDragEnd);

        document.addEventListener('touchmove', this.onDragMove);
        document.addEventListener('touchend', this.onDragEnd);
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.props.onClose(this.props.children.props);

      if (this.props.draggable) {
        document.removeEventListener('mousemove', this.onDragMove);
        document.removeEventListener('mouseup', this.onDragEnd);

        document.removeEventListener('touchmove', this.onDragMove);
        document.removeEventListener('touchend', this.onDragEnd);
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.isDocumentHidden !== nextProps.isDocumentHidden) {
        this.setState({
          isRunning: !nextProps.isDocumentHidden
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          closeButton = _props.closeButton,
          children = _props.children,
          autoClose = _props.autoClose,
          pauseOnHover = _props.pauseOnHover,
          closeOnClick = _props.closeOnClick,
          type = _props.type,
          hideProgressBar = _props.hideProgressBar,
          closeToast = _props.closeToast,
          Transition = _props.transition,
          position = _props.position,
          onExited = _props.onExited,
          className = _props.className,
          bodyClassName = _props.bodyClassName,
          progressClassName = _props.progressClassName,
          updateId = _props.updateId,
          role = _props.role,
          rtl = _props.rtl;


      var toastProps = {
        className: (0, _classnames2.default)('Toastify__toast', 'Toastify__toast--' + type, {
          'Toastify__toast--rtl': rtl
        }, className)
      };

      if (autoClose && pauseOnHover) {
        toastProps.onMouseEnter = this.pauseToast;
        toastProps.onMouseLeave = this.playToast;
      }

      // prevent toast from closing when user drags the toast
      if (closeOnClick) {
        toastProps.onClick = function () {
          return _this2.flag.canCloseOnClick && closeToast();
        };
      }

      return _react2.default.createElement(
        Transition,
        {
          'in': this.props.in,
          appear: true,
          unmountOnExit: true,
          onExited: onExited,
          position: position,
          preventExitTransition: this.state.preventExitTransition
        },
        _react2.default.createElement(
          'div',
          _extends({}, toastProps, {
            ref: function ref(_ref2) {
              return _this2.ref = _ref2;
            },
            onMouseDown: this.onDragStart,
            onTouchStart: this.onDragStart,
            onTransitionEnd: this.onDragTransitionEnd
          }),
          _react2.default.createElement(
            'div',
            _extends({}, this.props.in && { role: role }, {
              className: (0, _classnames2.default)('Toastify__toast-body', bodyClassName)
            }),
            children
          ),
          closeButton !== false && closeButton,
          autoClose !== false && _react2.default.createElement(_ProgressBar2.default, {
            key: 'pb-' + updateId,
            rtl: rtl,
            delay: autoClose,
            isRunning: this.state.isRunning,
            closeToast: closeToast,
            hide: hideProgressBar,
            type: type,
            className: progressClassName
          })
        )
      );
    }
  }]);

  return Toast;
}(_react.Component);

Toast.propTypes = {
  closeButton: _propValidator.falseOrElement.isRequired,
  autoClose: _propValidator.falseOrDelay.isRequired,
  children: _propTypes2.default.node.isRequired,
  closeToast: _propTypes2.default.func.isRequired,
  position: _propTypes2.default.oneOf((0, _propValidator.objectValues)(_constant.POSITION)).isRequired,
  pauseOnHover: _propTypes2.default.bool.isRequired,
  closeOnClick: _propTypes2.default.bool.isRequired,
  transition: _propTypes2.default.func.isRequired,
  isDocumentHidden: _propTypes2.default.bool.isRequired,
  rtl: _propTypes2.default.bool.isRequired,
  hideProgressBar: _propTypes2.default.bool.isRequired,
  draggable: _propTypes2.default.bool.isRequired,
  draggablePercent: _propTypes2.default.number.isRequired,
  in: _propTypes2.default.bool,
  onExited: _propTypes2.default.func,
  onOpen: _propTypes2.default.func,
  onClose: _propTypes2.default.func,
  type: _propTypes2.default.oneOf((0, _propValidator.objectValues)(_constant.TYPE)),
  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
  bodyClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
  progressClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
  updateId: _propTypes2.default.number,
  ariaLabel: _propTypes2.default.string
};
Toast.defaultProps = {
  type: _constant.TYPE.DEFAULT,
  in: true,
  onOpen: noop,
  onClose: noop,
  className: null,
  bodyClassName: null,
  progressClassName: null,
  updateId: null,
  role: 'alert'
};
exports.default = Toast;