wix-style-react/dist/src/Notification/Notification.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.notificationTypeToPosition = exports.DEFAULT_AUTO_HIDE_TIMEOUT = exports.STICKY_NOTIFICATION = exports.GLOBAL_NOTIFICATION = exports.LOCAL_NOTIFICATION = undefined;

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 _notificationTypeToPo, _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactTransitionGroup = require('react-transition-group');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _WixComponent2 = require('../BaseComponents/WixComponent');

var _WixComponent3 = _interopRequireDefault(_WixComponent2);

var _Composite = require('../Composite');

var Composite = _interopRequireWildcard(_Composite);

var _CloseButton = require('../CloseButton');

var _CloseButton2 = _interopRequireDefault(_CloseButton);

var _TextLabel = require('./TextLabel');

var _TextLabel2 = _interopRequireDefault(_TextLabel);

var _ActionButton = require('./ActionButton');

var _ActionButton2 = _interopRequireDefault(_ActionButton);

var _Notification = require('./Notification.scss');

var _Notification2 = _interopRequireDefault(_Notification);

var _propTypes3 = require('../utils/propTypes');

var _deprecationLog = require('../utils/deprecationLog');

var _deprecationLog2 = _interopRequireDefault(_deprecationLog);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

var LOCAL_NOTIFICATION = exports.LOCAL_NOTIFICATION = 'local';
var GLOBAL_NOTIFICATION = exports.GLOBAL_NOTIFICATION = 'global';
var STICKY_NOTIFICATION = exports.STICKY_NOTIFICATION = 'sticky';
var DEFAULT_AUTO_HIDE_TIMEOUT = exports.DEFAULT_AUTO_HIDE_TIMEOUT = 6000;

var notificationTypeToPosition = exports.notificationTypeToPosition = (_notificationTypeToPo = {}, _defineProperty(_notificationTypeToPo, LOCAL_NOTIFICATION, 'absolute'), _defineProperty(_notificationTypeToPo, GLOBAL_NOTIFICATION, 'relative'), _defineProperty(_notificationTypeToPo, STICKY_NOTIFICATION, 'fixed'), _notificationTypeToPo);

var animationsTimeouts = {
  enter: 500,
  exit: 350
};

function FirstChild(props) {
  var childrenArray = _react.Children.toArray(props.children);
  return childrenArray[0] || null;
}

function mapChildren(children) {
  var childrenArray = _react.Children.toArray(children);

  if (childrenArray.length === 3) {
    return {
      label: childrenArray[0],
      ctaButton: childrenArray[1],
      closeButton: _react2.default.cloneElement(childrenArray[2], { size: 'small' })
    };
  } else {
    return {
      label: childrenArray[0],
      closeButton: _react2.default.cloneElement(childrenArray[1], { size: 'small' })
    };
  }
}

var Notification = (_temp = _class = function (_WixComponent) {
  _inherits(Notification, _WixComponent);

  function Notification(props) {
    _classCallCheck(this, Notification);

    var _this = _possibleConstructorReturn(this, (Notification.__proto__ || Object.getPrototypeOf(Notification)).call(this, props));

    _this.hideNotificationOnCloseClick = function () {
      _this.setState({ hideByCloseClick: true });

      setTimeout(function () {
        return _this.props.onClose && _this.props.onClose('hide-by-close-click');
      }, animationsTimeouts.exit + 100);
    };

    _this.hideNotificationOnTimeout = function () {
      _this.setState({ hideByTimer: true });

      setTimeout(function () {
        return _this.props.onClose && _this.props.onClose('hide-by-timer');
      }, animationsTimeouts.exit + 100);
    };

    _this.state = {
      hideByCloseClick: false,
      hideByTimer: false
    };

    _this.startCloseTimer(props);
    return _this;
  }

  _createClass(Notification, [{
    key: 'startCloseTimer',
    value: function startCloseTimer(_ref) {
      var _this2 = this;

      var type = _ref.type,
          timeout = _ref.timeout,
          autoHideTimeout = _ref.autoHideTimeout,
          upgrade = _ref.upgrade;

      var _timeout = timeout || autoHideTimeout;
      if (_timeout || type !== GLOBAL_NOTIFICATION && !upgrade) {
        this.closeTimeout = setTimeout(function () {
          return _this2.hideNotificationOnTimeout();
        }, _timeout || DEFAULT_AUTO_HIDE_TIMEOUT);
      }
    }
  }, {
    key: 'clearCloseTimeout',
    value: function clearCloseTimeout() {
      if (this.closeTimeout) {
        clearTimeout(this.closeTimeout);
        this.closeTimeout = null;
      }
    }
  }, {
    key: 'bypassCloseFlags',
    value: function bypassCloseFlags() {
      this.setState({
        hideByCloseClick: false,
        hideByTimer: false
      });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.show) {
        this.bypassCloseFlags();
        this.clearCloseTimeout();
        this.startCloseTimer(nextProps);
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.clearCloseTimeout();
    }
  }, {
    key: 'shouldShowNotification',
    value: function shouldShowNotification() {
      return this.props.show && !this.state.hideByCloseClick && !this.state.hideByTimer;
    }
  }, {
    key: 'renderNotification',
    value: function renderNotification() {
      var _props = this.props,
          zIndex = _props.zIndex,
          children = _props.children,
          type = _props.type,
          theme = _props.theme;

      var childrenComponents = mapChildren(children);

      return _react2.default.createElement(
        _reactTransitionGroup.CSSTransition,
        {
          classNames: {
            enter: _Notification2.default.notificationAnimationEnter,
            enterActive: _Notification2.default.notificationAnimationEnterActive,
            exit: _Notification2.default.notificationAnimationExit,
            exitActive: _Notification2.default.notificationAnimationExitActive
          },
          timeout: animationsTimeouts
        },
        _react2.default.createElement(
          'div',
          {
            'data-hook': 'notification-wrapper',
            style: { zIndex: zIndex },
            className: (0, _classnames2.default)(_Notification2.default.notification, _Notification2.default[theme + 'Theme'], _Notification2.default[notificationTypeToPosition[type] + 'Position']),
            role: 'alert',
            'aria-labelledby': 'notification-label',
            'aria-live': 'polite'
          },
          _react2.default.createElement('div', {
            id: 'notification-label',
            className: _Notification2.default.label,
            children: childrenComponents.label
          }),
          childrenComponents.ctaButton && _react2.default.createElement('div', {
            className: _Notification2.default.button,
            children: childrenComponents.ctaButton
          }),
          _react2.default.createElement('div', {
            'data-hook': 'notification-close-button',
            className: _Notification2.default.closeButton,
            onClick: this.hideNotificationOnCloseClick,
            children: childrenComponents.closeButton
          })
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: _Notification2.default.root },
        _react2.default.createElement(
          _reactTransitionGroup.TransitionGroup,
          { component: FirstChild },
          this.shouldShowNotification() ? this.renderNotification() : null
        )
      );
    }
  }]);

  return Notification;
}(_WixComponent3.default), _class.displayName = 'Notification', _temp);


var Close = function Close(props) {
  return _react2.default.createElement(_CloseButton2.default, _extends({ skin: 'lightFilled' }, props));
};
Close.displayName = 'Notification.CloseButton';

Notification.propTypes = {
  show: _propTypes2.default.bool,
  theme: _propTypes2.default.oneOf(['standard', 'error', 'success', 'warning', 'premium']),
  type: _propTypes2.default.oneOf([GLOBAL_NOTIFICATION, LOCAL_NOTIFICATION, STICKY_NOTIFICATION]),
  /** @deprecated use autoHideTimeout instead */
  timeout: _propTypes2.default.number,
  /** When provided, then the Notification will be hidden after the specified timeout. */
  autoHideTimeout: _propTypes2.default.number,
  zIndex: _propTypes2.default.number,
  onClose: _propTypes2.default.func,
  children: Composite.children(Composite.once(_TextLabel2.default), Composite.optional(_ActionButton2.default), Composite.optional(Close)),
  /** When true, then there will not be a default close timeout. Meaning, if not `timeout` is provided, then the notificiation will be persistent. */
  upgrade: _propTypes2.default.bool
};

(0, _propTypes3.extendPropTypes)(Notification, {
  upgrade: (0, _propTypes3.allValidators)(_propTypes2.default.bool, function (props, propName) {
    if (!props[propName]) {
      (0, _deprecationLog2.default)('Notification: New API! Please upgrade by passing the prop \'upgrade=true\', and refer to documentation.');
    }
  }),
  timeout: (0, _propTypes3.allValidators)(_propTypes2.default.number, function (props, propName) {
    if (props[propName]) {
      (0, _deprecationLog2.default)('Notification: \'timeout\' prop is deprecated. Use \'autoHideTimeout\' prop instead. (This is just a rename)');
    }
  })
});

Notification.defaultProps = {
  theme: 'standard',
  type: GLOBAL_NOTIFICATION,
  onClose: null
};

Notification.CloseButton = Close;
Notification.TextLabel = _TextLabel2.default;
Notification.ActionButton = _ActionButton2.default;

exports.default = Notification;