@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
53 lines • 4.48 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useState } from 'react';
import { Icon, IconButton, PrimaryButton, Stack, useTheme, Text, DefaultButton, Link } from '@fluentui/react';
import { cancelIcon } from './styles/ImageOverlay.style';
import { containerStyles, hiddenContainerStyles, messageTextStyles, notificationIconStyles, notificationLinkStyles, titleTextStyles } from './styles/Notification.styles';
/**
* A component to show notification messages on the UI.
*
* @public
*/
export const Notification = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
const strings = props.notificationStrings;
const theme = useTheme();
const [show, setShow] = useState(true);
const { ariaLive = 'assertive', role = 'alert' } = props;
if (props.autoDismiss) {
setTimeout(() => {
// After 5 seconds set the show value to false
setShow(false);
}, 5000);
if (!show) {
props.onDismiss && props.onDismiss();
return React.createElement(React.Fragment, null);
}
}
return React.createElement(Stack, { horizontalAlign: "center", "aria-live": ariaLive, role: role },
React.createElement(Stack, { "data-ui-id": "notification-bar", styles: (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : containerStyles(theme) },
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
React.createElement(Stack, { horizontal: true },
React.createElement(Icon, Object.assign({ styles: (_d = (_c = props.styles) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : notificationIconStyles(), iconName: (_f = (_e = props.notificationIconProps) === null || _e === void 0 ? void 0 : _e.iconName) !== null && _f !== void 0 ? _f : 'ErrorBadge' }, props.notificationIconProps)),
React.createElement(Text, { styles: (_h = (_g = props.styles) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : titleTextStyles() }, strings === null || strings === void 0 ? void 0 : strings.title)),
props.onDismiss && React.createElement(IconButton, { iconProps: cancelIcon, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.dismissButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
React.createElement("span", null,
React.createElement(Text, { styles: (_k = (_j = props.styles) === null || _j === void 0 ? void 0 : _j.content) !== null && _k !== void 0 ? _k : messageTextStyles(theme) },
" ", strings === null || strings === void 0 ? void 0 :
strings.message),
props.onClickLink && (strings === null || strings === void 0 ? void 0 : strings.linkLabel) && React.createElement(Link, { styles: (_m = (_l = props.styles) === null || _l === void 0 ? void 0 : _l.link) !== null && _m !== void 0 ? _m : notificationLinkStyles(theme), onClick: props.onClickLink }, strings === null || strings === void 0 ? void 0 : strings.linkLabel)),
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-evenly" },
(strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel) && React.createElement(DefaultButton, { onClick: props.onClickSecondaryButton, styles: (_p = (_o = props.styles) === null || _o === void 0 ? void 0 : _o.secondaryButton) !== null && _p !== void 0 ? _p : {
root: {
marginTop: '1rem'
}
} }, strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel),
(strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel) && React.createElement(PrimaryButton, { onClick: props.onClickPrimaryButton, styles: (_r = (_q = props.styles) === null || _q === void 0 ? void 0 : _q.primaryButton) !== null && _r !== void 0 ? _r : {
root: {
marginTop: '1rem'
}
} }, strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel))),
props.showStackedEffect && React.createElement(Stack, { className: hiddenContainerStyles(theme) }));
};
//# sourceMappingURL=Notification.js.map