@automattic/simple-components/cjs/notice/index.js

React components, as used on WordPress.com

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Notice = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

var _i18nCalypso = require("i18n-calypso");

var _gridicons = _interopRequireDefault(require("gridicons"));

/** @format */

/**
 * External dependencies
 */
var Notice =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Notice, _Component);

  function Notice() {
    var _ref;

    var _temp, _this;

    (0, _classCallCheck2.default)(this, Notice);

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

    return (0, _possibleConstructorReturn2.default)(_this, (_temp = _this = (0, _possibleConstructorReturn2.default)(this, (_ref = Notice.__proto__ || Object.getPrototypeOf(Notice)).call.apply(_ref, [this].concat(args))), _this.dismissTimeout = null, _temp));
  }

  (0, _createClass2.default)(Notice, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.duration > 0) {
        this.dismissTimeout = setTimeout(this.props.onDismissClick, this.props.duration);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.dismissTimeout) {
        clearTimeout(this.dismissTimeout);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      clearTimeout(this.dismissTimeout);

      if (this.props.duration > 0) {
        this.dismissTimeout = setTimeout(this.props.onDismissClick, this.props.duration);
      }
    }
  }, {
    key: "getIcon",
    value: function getIcon() {
      var icon;

      switch (this.props.status) {
        case 'is-info':
          icon = 'info';
          break;

        case 'is-success':
          icon = 'checkmark';
          break;

        case 'is-error':
          icon = 'notice';
          break;

        case 'is-warning':
          icon = 'notice';
          break;

        default:
          icon = 'info';
          break;
      }

      return icon;
    }
  }, {
    key: "render",
    value: function render() {
      var _props = this.props,
          children = _props.children,
          className = _props.className,
          icon = _props.icon,
          isCompact = _props.isCompact,
          isLoading = _props.isLoading,
          onDismissClick = _props.onDismissClick,
          _props$showDismiss = _props.showDismiss,
          showDismiss = _props$showDismiss === void 0 ? !isCompact : _props$showDismiss,
          status = _props.status,
          text = _props.text,
          translate = _props.translate;
      var classes = (0, _classnames.default)('notice', status, className, {
        'is-compact': isCompact,
        'is-loading': isLoading,
        'is-dismissable': showDismiss
      });
      return _react.default.createElement("div", {
        className: classes
      }, _react.default.createElement("span", {
        className: "notice__icon-wrapper"
      }, _react.default.createElement(_gridicons.default, {
        className: "notice__icon",
        icon: icon || this.getIcon(),
        size: 24
      })), _react.default.createElement("span", {
        className: "notice__content"
      }, _react.default.createElement("span", {
        className: "notice__text"
      }, text ? text : children)), text ? children : null, showDismiss && _react.default.createElement("span", {
        tabIndex: "0",
        className: "notice__dismiss",
        onClick: onDismissClick
      }, _react.default.createElement(_gridicons.default, {
        icon: "cross",
        size: 24
      }), _react.default.createElement("span", {
        className: "notice__screen-reader-text screen-reader-text"
      }, translate('Dismiss'))));
    }
  }]);
  return Notice;
}(_react.Component);

exports.Notice = Notice;
Notice.defaultProps = {
  className: '',
  duration: 0,
  icon: null,
  isCompact: false,
  isLoading: false,
  onDismissClick: _lodash.noop,
  status: null,
  text: null
};
Notice.propTypes = {
  className: _propTypes.default.string,
  duration: _propTypes.default.number,
  icon: _propTypes.default.string,
  isCompact: _propTypes.default.bool,
  isLoading: _propTypes.default.bool,
  onDismissClick: _propTypes.default.func,
  showDismiss: _propTypes.default.bool,
  status: _propTypes.default.oneOf(['is-error', 'is-info', 'is-success', 'is-warning', 'is-plain']),
  text: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])), _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])]),
  translate: _propTypes.default.func.isRequired
};

var _default = (0, _i18nCalypso.localize)(Notice);

exports.default = _default;