@massds/mayflower-react/dist/EmergencyAlerts/index.mjs

React versions of Mayflower design system UI components

function _extends() { _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; }; return _extends.apply(this, arguments); }

/**
 * EmergencyAlerts module.
 * @module @massds/mayflower-react/EmergencyAlerts
 * @requires module:@massds/mayflower-assets/scss/03-organisms/emergency-alerts
 * @requires module:@massds/mayflower-assets/scss/02-molecules/emergency-alert
 * @requires module:@massds/mayflower-assets/scss/02-molecules/emergency-header
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import is from "is";
import Collapse from "../Collapse/index.mjs";
import ButtonAlert from "../ButtonAlert/index.mjs";
import EmergencyAlert from "../EmergencyAlert/index.mjs";
import EmergencyHeader from "../EmergencyHeader/index.mjs";

const EmergencyAlerts = (_ref) => {
  var _classNames, _classNames2, _classNames3, _classNames4, _classNames5;

  let id = _ref.id,
      emergencyHeader = _ref.emergencyHeader,
      buttonAlert = _ref.buttonAlert,
      alerts = _ref.alerts,
      theme = _ref.theme,
      buttonClose = _ref.buttonClose,
      onButtonAlertClick = _ref.onButtonAlertClick,
      onButtonCloseClick = _ref.onButtonCloseClick;

  const _React$useState = React.useState({
    open: false,
    close: false
  }),
        state = _React$useState[0],
        setState = _React$useState[1];

  const handleClick = e => {
    const currentTarget = e.currentTarget;
    setState({
      open: !state.open
    });

    if (is.fn(onButtonAlertClick)) {
      onButtonAlertClick({
        open: state.open,
        currentTarget: currentTarget
      });
    }
  };

  const handleClose = e => {
    const currentTarget = e.currentTarget;
    setState({
      close: !state.close
    });

    if (is.fn(onButtonCloseClick)) {
      onButtonCloseClick({
        close: state.close,
        currentTarget: currentTarget
      });
    }
  };

  const sectionClasses = classNames((_classNames = {
    'ma__emergency-alerts': true
  }, _classNames["ma__emergency-alerts--" + theme] = theme, _classNames));
  const alertsWrapperClasses = classNames((_classNames2 = {
    'ma__emergency-alerts__content': true,
    'js-accordion-content': true
  }, _classNames2["ma__emergency-alerts__content--" + theme] = theme, _classNames2));
  const headerClasses = classNames((_classNames3 = {
    'ma__emergency-alerts__header': true
  }, _classNames3["ma__emergency-alerts__header--" + theme] = theme, _classNames3));
  const interfaceClasses = classNames((_classNames4 = {
    'ma__emergency-alerts__interface': true,
    'js-accordion-link': true
  }, _classNames4["ma__emergency-alerts__interface--" + theme] = theme, _classNames4.open = state.open, _classNames4.closed = !state.open, _classNames4));
  const hideButtonClasses = classNames((_classNames5 = {
    'ma__emergency-alerts__hide': true,
    'js-emergency-alerts-link': true
  }, _classNames5["ma__emergency-alerts__hide--" + theme] = theme, _classNames5));
  return /*#__PURE__*/React.createElement(Collapse, {
    "in": !state.close,
    dimension: "height"
  }, /*#__PURE__*/React.createElement("section", {
    className: sectionClasses,
    "data-id": id
  }, /*#__PURE__*/React.createElement("div", {
    className: headerClasses
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__emergency-alerts__container"
  }, emergencyHeader && /*#__PURE__*/React.createElement(EmergencyHeader, _extends({}, emergencyHeader, {
    theme: theme
  })), alerts ? /*#__PURE__*/React.createElement("div", {
    className: "ma__emergency-alerts__header-interface js-accordion-link"
  }, buttonAlert && /*#__PURE__*/React.createElement(ButtonAlert, _extends({}, buttonAlert, {
    onClick: handleClick,
    isOpen: state.open
  }))) : buttonClose && /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: hideButtonClasses,
    title: "hide alert",
    "aria-label": "hide alert",
    onClick: handleClose
  }, "+"))), alerts && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Collapse, {
    "in": state.open,
    dimension: "height"
  }, /*#__PURE__*/React.createElement("div", {
    className: alertsWrapperClasses
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__emergency-alerts__container"
  },
  /* eslint-disable-next-line react/no-array-index-key */
  alerts.map((alert, i) => /*#__PURE__*/React.createElement(EmergencyAlert, _extends({}, alert, {
    theme: theme,
    key: "alert-nested--" + i
  })))))), /*#__PURE__*/React.createElement("div", {
    className: interfaceClasses
  }, buttonAlert && /*#__PURE__*/React.createElement(ButtonAlert, _extends({}, buttonAlert, {
    onClick: handleClick,
    isOpen: state.open
  }))))));
};

EmergencyAlerts.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The data-id of the organism */
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,

  /** A string that controls different color themes for the component. */
  theme: PropTypes.oneOf(['c-warning', 'c-primary-alt', 'c-primary', 'c-gray', 'c-error']),

  /** An on button alert click callback function */
  onButtonAlertClick: PropTypes.func,

  /** An on button close click callback function */
  onButtonCloseClick: PropTypes.func,

  /** The emergency header props */
  emergencyHeader: PropTypes.shape(EmergencyHeader.propTypes),

  /** The props for the button alert */
  buttonAlert: PropTypes.shape(ButtonAlert.propTypes),

  /** An array of alert messages: <br />
   * `message:` A message describing the event.<br />
   * `timeStamp:` A string representing the time of the event.<br />
   * `link:` An optional function whose return value is a link to take the user to page with more information.
  */
  alerts: PropTypes.arrayOf(PropTypes.shape({
    message: PropTypes.string.isRequired,
    timeStamp: PropTypes.string,
    link: PropTypes.func
  })),

  /** Whether or not to render a close button if not alerts are provided */
  buttonClose: PropTypes.bool
} : {};
EmergencyAlerts.defaultProps = {
  theme: 'c-warning',
  buttonClose: true
};
export default EmergencyAlerts;