@shopgate/engage/components/MessageBar/MessageBar.js

Shopgate's ENGAGE library.

import{hot}from'react-hot-loader/root';import*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{i18n,errorBehavior}from'@shopgate/engage/core/helpers';import StopIcon from'@shopgate/pwa-ui-shared/icons/StopIcon';import InfoIcon from'@shopgate/pwa-ui-shared/icons/InfoIcon';import WarningIcon from'@shopgate/pwa-ui-shared/icons/WarningIcon';import*as styles from"./MessageBar.style";var iconMapping={info:InfoIcon,warning:WarningIcon,error:StopIcon};/**
 * The MessageBar component.
 * @param {Object} props The component props.
 * @property {Array} props.messages The message content.
 * @property {Object} props.classNames Styling.
 * @property {boolean} props.raised whether to use specific styling.
 * @property {boolean} props.showIcons whether to show icons.
 * @return {JSX.Element}
 */var MessageBar=function MessageBar(_ref){var messages=_ref.messages,classNames=_ref.classNames,raised=_ref.raised,showIcons=_ref.showIcons;var containerClass=React.useMemo(function(){if(raised){return classnames(styles.containerRaised,classNames.containerRaised);}return classnames(styles.container,classNames.container);},[classNames.container,classNames.containerRaised,raised]);return React.createElement("div",{className:containerClass,role:messages.length>0?'alert':null},messages.map(function(item){var _item$type=item.type,type=_item$type===void 0?'info':_item$type,message=item.message,_item$messageParams=item.messageParams,messageParams=_item$messageParams===void 0?null:_item$messageParams,_item$additionalParam=item.additionalParams,additionalParams=_item$additionalParam===void 0?null:_item$additionalParam,_item$translated=item.translated,translated=_item$translated===void 0?false:_item$translated;var _item$icon=item.icon,Icon=_item$icon===void 0?null:_item$icon;if(Icon===null&&showIcons){Icon=iconMapping[type];}var messageOutput=!translated?errorBehavior.getErrorMessage(message,messageParams||additionalParams):message;return React.createElement("div",{key:"".concat(type,"-").concat(message),className:classnames(styles[type]?styles[type]():null,classNames.message,Icon?styles.withIcon:null),"aria-live":"assertive","aria-atomic":"true"},Icon&&React.createElement(Icon,{className:classnames(classNames.icon,styles.icon)}),React.createElement("span",{className:"sr-only"},"".concat(i18n.text("cart.message_type_".concat(type)),": ").concat(messageOutput)),React.createElement("span",{"aria-hidden":true,className:Icon?styles.messageToIcon:null},messageOutput));}));};MessageBar.defaultProps={classNames:{container:null,containerRaised:null,message:null,icon:null},raised:false,showIcons:false};export default hot(React.memo(MessageBar));