stitch-ui/src/core/components/Banner.js

import PropTypes from "prop-types";
import React from "react"; // eslint-disable-line no-unused-vars
import classNames from "classnames";

const warningIcon = (
  <i className="fa fa-exclamation-triangle section-banner-icon" />
);

const errorIcon = (
  <i className="fa fa-exclamation-circle section-banner-icon" />
);

const infoIcon = <i className="fa fa-info-circle section-banner-icon" />;

function getIcon(icon) {
  if (icon.warning) {
    return warningIcon;
  } else if (icon.error) {
    return errorIcon;
  } else if (icon.info) {
    return infoIcon;
  }
  return null;
}

export default function Banner({
  message,
  warning,
  error,
  info,
  clearable,
  onClear,
  small
}) {
  if (!message) {
    return null;
  }

  const config = {
    message,
    clearable,
    onClear,
    className: classNames("banner", {
      "banner-warning": warning,
      "banner-error": error,
      "banner-info": info,
      "banner-is-small": small
    }),
    icon: getIcon({ warning, error, info }),
    clearClassName: "banner-clear",
    warning: warning && warningIcon,
    error: error && errorIcon,
    info: info && infoIcon
  };

  return (
    <div className="section-banner">
      <div className={config.className}>
        {config.icon}
        {config.message}
        {config.clearable &&
          <div className={config.clearClassName} onClick={config.onClear}>
            <i className="fa fa-times-circle-o" />
          </div>}
      </div>
    </div>
  );
}

Banner.propTypes = {
  message: PropTypes.string,
  clearable: PropTypes.bool,
  onClear: PropTypes.func,
  warning: PropTypes.bool,
  error: PropTypes.bool,
  info: PropTypes.bool,
  small: PropTypes.bool
};

Banner.defaultProps = {
  message: "",
  clearable: false,
  onClear: () => {},
  warning: false,
  error: false,
  info: false,
  small: false
};