@times-components/message-bar/dist/message-bar.js

A component for showing user notifications

"use strict";

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

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

var _utils = require("@times-components/utils");

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

var _icons = require("@times-components/icons");

var _styles = _interopRequireWildcard(require("./styles"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

class MessageBar extends _react.Component {
  constructor(props) {
    super(props);
    this.closeMessage = this.closeMessage.bind(this);
    this.state = {
      closeActive: false
    };
  }

  componentDidMount() {
    const delay = this.props.delay;
    this.timeout = setTimeout(() => {
      this.closeMessage();
    }, delay);
  }

  componentDidUpdate(prevProps) {
    const newMessage = this.props.message;
    const message = prevProps.message,
          delay = prevProps.delay;

    if (message === newMessage) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.closeMessage();
      }, delay);
    }
  }

  componentWillUnmount() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  }

  closeMessage() {
    const close = this.props.close;
    this.setState({
      closeActive: true
    });
    this.timeout = setTimeout(() => {
      close();
    }, 250);
  }

  render() {
    const _this$props = this.props,
          message = _this$props.message,
          scale = _this$props.scale,
          breakpoint = _this$props.breakpoint;
    const styles = (0, _styles.default)(scale, breakpoint);
    const closeActive = this.state.closeActive;
    return /*#__PURE__*/_react.default.createElement(_styles.StyledAnimation, {
      "data-testid": "Styled Animation",
      className: closeActive ? " close" : ""
    }, /*#__PURE__*/_react.default.createElement(_utils.TcView, {
      "data-testid": "message-bar",
      style: styles.messageBarBodyContainer
    }, /*#__PURE__*/_react.default.createElement(_utils.TcView, {
      style: styles.messageBarBody
    }, /*#__PURE__*/_react.default.createElement(_utils.TcText, {
      style: styles.messageBarText
    }, message), /*#__PURE__*/_react.default.createElement(_styles.CloseButton, {
      style: styles.messageBarCloseButton,
      className: closeActive ? " active" : "",
      onClick: this.closeMessage
    }, /*#__PURE__*/_react.default.createElement(_icons.CloseIcon, {
      width: 28,
      height: 28,
      onClick: this.closeMessage
    })))));
  }

}

MessageBar.propTypes = {
  breakpoint: _propTypes.default.string.isRequired,
  close: _propTypes.default.func.isRequired,
  delay: _propTypes.default.number.isRequired,
  message: _propTypes.default.string.isRequired,
  scale: _propTypes.default.string.isRequired
};
var _default = MessageBar;
exports.default = _default;