@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
153 lines (152 loc) • 7.25 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _is = _interopRequireDefault(require("is"));
var _index = _interopRequireDefault(require("../Collapse/index.js"));
var _index2 = _interopRequireDefault(require("../ButtonAlert/index.js"));
var _index3 = _interopRequireDefault(require("../EmergencyAlert/index.js"));
var _index4 = _interopRequireDefault(require("../EmergencyHeader/index.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, 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
*/
var EmergencyAlerts = function EmergencyAlerts(_ref) {
var _classNames, _classNames2, _classNames3, _classNames4, _classNames5;
var id = _ref.id,
emergencyHeader = _ref.emergencyHeader,
buttonAlert = _ref.buttonAlert,
alerts = _ref.alerts,
theme = _ref.theme,
buttonClose = _ref.buttonClose,
onButtonAlertClick = _ref.onButtonAlertClick,
onButtonCloseClick = _ref.onButtonCloseClick;
var _React$useState = _react["default"].useState({
open: false,
close: false
}),
state = _React$useState[0],
setState = _React$useState[1];
var handleClick = function handleClick(e) {
var currentTarget = e.currentTarget;
setState({
open: !state.open
});
if (_is["default"].fn(onButtonAlertClick)) {
onButtonAlertClick({
open: state.open,
currentTarget: currentTarget
});
}
};
var handleClose = function handleClose(e) {
var currentTarget = e.currentTarget;
setState({
close: !state.close
});
if (_is["default"].fn(onButtonCloseClick)) {
onButtonCloseClick({
close: state.close,
currentTarget: currentTarget
});
}
};
var sectionClasses = (0, _classnames["default"])((_classNames = {
'ma__emergency-alerts': true
}, _classNames["ma__emergency-alerts--" + theme] = theme, _classNames));
var alertsWrapperClasses = (0, _classnames["default"])((_classNames2 = {
'ma__emergency-alerts__content': true,
'js-accordion-content': true
}, _classNames2["ma__emergency-alerts__content--" + theme] = theme, _classNames2));
var headerClasses = (0, _classnames["default"])((_classNames3 = {
'ma__emergency-alerts__header': true
}, _classNames3["ma__emergency-alerts__header--" + theme] = theme, _classNames3));
var interfaceClasses = (0, _classnames["default"])((_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));
var hideButtonClasses = (0, _classnames["default"])((_classNames5 = {
'ma__emergency-alerts__hide': true,
'js-emergency-alerts-link': true
}, _classNames5["ma__emergency-alerts__hide--" + theme] = theme, _classNames5));
return /*#__PURE__*/_react["default"].createElement(_index["default"], {
"in": !state.close,
dimension: "height"
}, /*#__PURE__*/_react["default"].createElement("section", {
className: sectionClasses,
"data-id": id
}, /*#__PURE__*/_react["default"].createElement("div", {
className: headerClasses
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__emergency-alerts__container"
}, emergencyHeader && /*#__PURE__*/_react["default"].createElement(_index4["default"], _extends({}, emergencyHeader, {
theme: theme
})), alerts ? /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__emergency-alerts__header-interface js-accordion-link"
}, buttonAlert && /*#__PURE__*/_react["default"].createElement(_index2["default"], _extends({}, buttonAlert, {
onClick: handleClick,
isOpen: state.open
}))) : buttonClose && /*#__PURE__*/_react["default"].createElement("button", {
type: "button",
className: hideButtonClasses,
title: "hide alert",
"aria-label": "hide alert",
onClick: handleClose
}, "+"))), alerts && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_index["default"], {
"in": state.open,
dimension: "height"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: alertsWrapperClasses
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__emergency-alerts__container"
}, /* eslint-disable-next-line react/no-array-index-key */
alerts.map(function (alert, i) {
return /*#__PURE__*/_react["default"].createElement(_index3["default"], _extends({}, alert, {
theme: theme,
key: "alert-nested--" + i
}));
})))), /*#__PURE__*/_react["default"].createElement("div", {
className: interfaceClasses
}, buttonAlert && /*#__PURE__*/_react["default"].createElement(_index2["default"], _extends({}, buttonAlert, {
onClick: handleClick,
isOpen: state.open
}))))));
};
EmergencyAlerts.propTypes = process.env.NODE_ENV !== "production" ? {
/** The data-id of the organism */
id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
/** A string that controls different color themes for the component. */
theme: _propTypes["default"].oneOf(['c-warning', 'c-primary-alt', 'c-primary', 'c-gray', 'c-error']),
/** An on button alert click callback function */
onButtonAlertClick: _propTypes["default"].func,
/** An on button close click callback function */
onButtonCloseClick: _propTypes["default"].func,
/** The emergency header props */
emergencyHeader: _propTypes["default"].shape(_index4["default"].propTypes),
/** The props for the button alert */
buttonAlert: _propTypes["default"].shape(_index2["default"].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["default"].arrayOf(_propTypes["default"].shape({
message: _propTypes["default"].string.isRequired,
timeStamp: _propTypes["default"].string,
link: _propTypes["default"].func
})),
/** Whether or not to render a close button if not alerts are provided */
buttonClose: _propTypes["default"].bool
} : {};
EmergencyAlerts.defaultProps = {
theme: 'c-warning',
buttonClose: true
};
var _default = exports["default"] = EmergencyAlerts;
module.exports = exports.default;