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

wix-style-react

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;

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

import React, { Children } from 'react';
import PropTypes from 'prop-types';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import classNames from 'classnames';

import WixComponent from '../BaseComponents/WixComponent';
import * as Composite from '../Composite';
import CloseButton from '../CloseButton';
import TextLabel from './TextLabel';
import ActionButton from './ActionButton';
import css from './Notification.scss';
import { allValidators, extendPropTypes } from '../utils/propTypes';
import deprecationLog from '../utils/deprecationLog';

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

export var 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 = Children.toArray(props.children);
  return childrenArray[0] || null;
}

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

  if (childrenArray.length === 3) {
    return {
      label: childrenArray[0],
      ctaButton: childrenArray[1],
      closeButton: React.cloneElement(childrenArray[2], { size: 'small' })
    };
  } else {
    return {
      label: childrenArray[0],
      closeButton: React.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 React.createElement(
        CSSTransition,
        {
          classNames: {
            enter: css.notificationAnimationEnter,
            enterActive: css.notificationAnimationEnterActive,
            exit: css.notificationAnimationExit,
            exitActive: css.notificationAnimationExitActive
          },
          timeout: animationsTimeouts
        },
        React.createElement(
          'div',
          {
            'data-hook': 'notification-wrapper',
            style: { zIndex: zIndex },
            className: classNames(css.notification, css[theme + 'Theme'], css[notificationTypeToPosition[type] + 'Position']),
            role: 'alert',
            'aria-labelledby': 'notification-label',
            'aria-live': 'polite'
          },
          React.createElement('div', {
            id: 'notification-label',
            className: css.label,
            children: childrenComponents.label
          }),
          childrenComponents.ctaButton && React.createElement('div', {
            className: css.button,
            children: childrenComponents.ctaButton
          }),
          React.createElement('div', {
            'data-hook': 'notification-close-button',
            className: css.closeButton,
            onClick: this.hideNotificationOnCloseClick,
            children: childrenComponents.closeButton
          })
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        { className: css.root },
        React.createElement(
          TransitionGroup,
          { component: FirstChild },
          this.shouldShowNotification() ? this.renderNotification() : null
        )
      );
    }
  }]);

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


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

Notification.propTypes = {
  show: PropTypes.bool,
  theme: PropTypes.oneOf(['standard', 'error', 'success', 'warning', 'premium']),
  type: PropTypes.oneOf([GLOBAL_NOTIFICATION, LOCAL_NOTIFICATION, STICKY_NOTIFICATION]),
  /** @deprecated use autoHideTimeout instead */
  timeout: PropTypes.number,
  /** When provided, then the Notification will be hidden after the specified timeout. */
  autoHideTimeout: PropTypes.number,
  zIndex: PropTypes.number,
  onClose: PropTypes.func,
  children: Composite.children(Composite.once(TextLabel), Composite.optional(ActionButton), 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: PropTypes.bool
};

extendPropTypes(Notification, {
  upgrade: allValidators(PropTypes.bool, function (props, propName) {
    if (!props[propName]) {
      deprecationLog('Notification: New API! Please upgrade by passing the prop \'upgrade=true\', and refer to documentation.');
    }
  }),
  timeout: allValidators(PropTypes.number, function (props, propName) {
    if (props[propName]) {
      deprecationLog('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 = TextLabel;
Notification.ActionButton = ActionButton;

export default Notification;