communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
64 lines • 4.5 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect, useRef, useState } from 'react';
import { Stack } from '@fluentui/react';
import { useLocale } from '../localization';
import { NotificationIconProps, dismissNotification, dropDismissalsForInactiveNotifications, notificationsToShow } from './utils';
import { Notification } from './Notification';
/**
* A component to show notifications on the UI.
* All strings that can be shown are accepted as the {@link NotificationStackProps.strings} so that they can be localized.
* Active notifications are selected by {@link NotificationStackProps.activeNotifications}.
*
* This component internally tracks dismissed by the user.
* * Notifications that have an associated timestamp: The notification is shown on the UI again if it occurs after being dismissed.
* * Notifications that do not have a timestamp: The notification is dismissed until it disappears from the props.
* If the notification recurs, it is shown in the UI.
*
*
* @public
*/
export const NotificationStack = (props) => {
var _a, _b;
const localeStrings = useLocale().strings.notificationStack;
const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
const maxNotificationsToShow = (_b = props.maxNotificationsToShow) !== null && _b !== void 0 ? _b : 2;
const trackDismissedNotificationsInternally = !props.onDismissNotification;
// Timestamp for when this comopnent is first mounted.
// Never updated through the lifecycle of this component.
const mountTimestamp = useRef(new Date(Date.now()));
const [dismissedNotifications, setDismissedNotifications] = useState([]);
// dropDismissalsForInactiveNotifications only returns a new object if `dismissedErrors` actually changes.
// Without this behaviour, this `useEffect` block would cause a render loop.
useEffect(() => {
trackDismissedNotificationsInternally &&
setDismissedNotifications(dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications));
}, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);
const activeNotifications = notificationsToShow(props.activeNotifications, dismissedNotifications, props.ignorePremountNotifications ? mountTimestamp.current : undefined);
return (React.createElement(Stack, { "data-ui-id": "notifications-stack", style: {
width: 'fit-content'
} }, activeNotifications.map((notification, index) => {
if (index < maxNotificationsToShow) {
const onDismiss = () => {
var _a;
trackDismissedNotificationsInternally
? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))
: (_a = props.onDismissNotification) === null || _a === void 0 ? void 0 : _a.call(props, notification);
notification.onDismiss && notification.onDismiss();
};
if (notification.type === 'assignedBreakoutRoomOpenedPromptJoin') {
// If notification is of type assignedBreakoutRoomOpenedPromptJoin then set onClickSecondaryButton to
// onDismiss if it is not defined
notification.onClickSecondaryButton = notification.onClickSecondaryButton
? notification.onClickSecondaryButton
: () => onDismiss();
}
return (React.createElement("div", { key: index, style: { marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}` } },
React.createElement(Notification, { notificationStrings: strings ? strings[notification.type] : undefined, notificationIconProps: NotificationIconProps(notification.type), onClickPrimaryButton: () => { var _a; return (_a = notification.onClickPrimaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onClickSecondaryButton: () => { var _a; return (_a = notification.onClickSecondaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onDismiss: onDismiss, showStackedEffect: index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow, autoDismiss: notification.autoDismiss, ariaLive: notification.ariaLive })));
}
else {
return React.createElement(React.Fragment, null);
}
})));
};
//# sourceMappingURL=NotificationStack.js.map