@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
61 lines • 3.51 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import classnames from 'classnames';
import { ToastContainer, cssTransition } from 'react-toastify';
import { dismiss, getContainerID, isActive, notify, update } from './NotificationSystem.utils';
import { ATTENTION, DEFAULTS, POSITION, STYLE } from './NotificationSystem.constants';
import 'react-toastify/dist/ReactToastify.css';
import './NotificationSystem.style.scss';
import ScreenReaderAnnouncer from '../ScreenReaderAnnouncer';
/**
* The `<NotificationSystem />` component allows consumers to trigger notifications on the defined position on the screen.
*
* This is a component written in the compound component pattern way, which means utils to trigger a notification for example
* are exposed on the component directly, like `NotificationSystem.notify` or `NotificationSystem.update`
*/
var NotificationSystem = function (props) {
var _a = props.position, position = _a === void 0 ? DEFAULTS.POSITION : _a, _b = props.zIndex, zIndex = _b === void 0 ? DEFAULTS.Z_INDEX : _b, className = props.className, id = props.id, style = props.style, limit = props.limit, _c = props.newestOnTop, newestOnTop = _c === void 0 ? DEFAULTS.NEWEST_ON_TOP : _c, _d = props.enterAnimation, enterAnimation = _d === void 0 ? DEFAULTS.ENTER_ANIMATION : _d, toastClassName = props.toastClassName, bodyClassName = props.bodyClassName, containerClassName = props.containerClassName, ariaLabel = props.ariaLabel;
var slideAndBlur = cssTransition({
enter: enterAnimation,
exit: 'fadeOut',
});
var commonProps = {
newestOnTop: newestOnTop,
enableMultiContainer: true,
transition: slideAndBlur,
hideProgressBar: true,
closeOnClick: false,
draggable: false,
closeButton: false,
toastClassName: toastClassName,
bodyClassName: bodyClassName,
className: containerClassName,
};
// get an attention order array to position the toastContainers correctly based on the `position` prop
var attentionOrder = position.includes('top')
? [ATTENTION.MEDIUM, ATTENTION.LOW]
: [ATTENTION.LOW, ATTENTION.MEDIUM];
return (React.createElement(React.Fragment, null,
React.createElement("section", { "data-position": position, className: classnames(STYLE.wrapper, className), style: __assign(__assign({}, style), { zIndex: zIndex }), "aria-label": ariaLabel },
React.createElement(ToastContainer, __assign({}, commonProps, { position: position, limit: limit, containerId: getContainerID(id, attentionOrder[0]) })),
React.createElement(ToastContainer, __assign({}, commonProps, { position: position, limit: limit, containerId: getContainerID(id, attentionOrder[1]) }))),
React.createElement(ScreenReaderAnnouncer, { identity: id })));
};
export default NotificationSystem;
NotificationSystem.notify = notify;
NotificationSystem.update = update;
NotificationSystem.dismiss = dismiss;
NotificationSystem.isActive = isActive;
NotificationSystem.ATTENTION = ATTENTION;
NotificationSystem.POSITION = POSITION;
//# sourceMappingURL=NotificationSystem.js.map