@crave/farmblocks-alert/lib/Alert.js

A React Component for displaying alert bar messages

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 * as React from "react";
import PropTypes from "prop-types";
import { GhostButton } from "@crave/farmblocks-button";
import { MdRemove } from "@crave/farmblocks-icon";
import StyledAlert from "./styledComponents/Alert";
import AlertTypes from "./constants/alertTypes";
import BrieflyDisplay from "./BrieflyDisplay";
const DEFAULT_Z_INDEX = 2500;

class Alert extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "dismissHandler", () => {
      this.setState({
        isVisible: false
      });
      this.props.onDismiss();
    });

    this.state = {
      isVisible: true
    };
  }

  render() {
    if (!this.state.isVisible && this.props.autoRemove) {
      return null;
    }

    const {
      visibleTime,
      autoRemove,
      onDismiss,
      zIndex,
      bottomAligned,
      className
    } = this.props;
    const alert = /*#__PURE__*/React.createElement(StyledAlert, {
      "data-testid": "alert-content",
      className: className,
      type: this.props.type,
      zIndex: zIndex,
      bottomAligned: bottomAligned
    }, /*#__PURE__*/React.createElement("p", null, this.props.text), this.props.dismissable && /*#__PURE__*/React.createElement("div", {
      className: "dismiss-button"
    }, /*#__PURE__*/React.createElement(GhostButton, {
      "data-testid": "alert-dismiss",
      icon: /*#__PURE__*/React.createElement(MdRemove, {
        size: 32
      }),
      onClick: this.dismissHandler
    })));

    if (!visibleTime) {
      return alert;
    }

    return /*#__PURE__*/React.createElement(BrieflyDisplay, {
      time: visibleTime,
      autoRemove: autoRemove,
      onTimeout: onDismiss
    }, alert);
  }

}

Alert.propTypes = {
  text: PropTypes.string.isRequired,
  type: PropTypes.oneOf(Object.keys(AlertTypes)),
  dismissable: PropTypes.bool,
  autoRemove: PropTypes.bool,
  onDismiss: PropTypes.func,
  visibleTime: PropTypes.number,
  zIndex: PropTypes.number,
  bottomAligned: PropTypes.bool,
  className: PropTypes.string
};
Alert.defaultProps = {
  type: AlertTypes.NEWS,
  dismissable: true,
  autoRemove: true,
  zIndex: DEFAULT_Z_INDEX,
  onDismiss: () => null,
  bottomAligned: false
};
export default Alert;