@shopgate/engage
Version:
Shopgate's ENGAGE library.
83 lines (82 loc) • 2.78 kB
JavaScript
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";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const 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}
*/
const MessageBar = ({
messages,
classNames,
raised,
showIcons
}) => {
const containerClass = React.useMemo(() => {
if (raised) {
return classnames(styles.containerRaised, classNames.containerRaised);
}
return classnames(styles.container, classNames.container);
}, [classNames.container, classNames.containerRaised, raised]);
return /*#__PURE__*/_jsx("div", {
className: containerClass,
role: messages.length > 0 ? 'alert' : null,
children: messages.map(item => {
const {
type = 'info',
message,
messageParams = null,
additionalParams = null,
translated = false
} = item;
let {
icon: Icon = null
} = item;
if (Icon === null && showIcons) {
Icon = iconMapping[type];
}
const messageOutput = !translated ? errorBehavior.getErrorMessage(message, messageParams || additionalParams) : message;
return /*#__PURE__*/_jsxs("div", {
className: classnames(styles[type] ? styles[type]() : null, classNames.message, Icon ? styles.withIcon : null),
"aria-live": "assertive",
"aria-atomic": "true",
children: [Icon && /*#__PURE__*/_jsx(Icon, {
className: classnames(classNames.icon, styles.icon)
}), /*#__PURE__*/_jsx("span", {
className: "sr-only",
children: `${i18n.text(`cart.message_type_${type}`)}: ${messageOutput}`
}), /*#__PURE__*/_jsx("span", {
"aria-hidden": true,
className: Icon ? styles.messageToIcon : null,
children: messageOutput
})]
}, `${type}-${message}`);
})
});
};
MessageBar.defaultProps = {
classNames: {
container: null,
containerRaised: null,
message: null,
icon: null
},
raised: false,
showIcons: false
};
export default /*#__PURE__*/React.memo(MessageBar);