communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
54 lines • 3.67 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect, useState } from 'react';
import { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';
import { useLocale } from '../localization';
import { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';
import { dismissError, dropDismissalsForInactiveErrors, errorsToShow, messageBarIconProps, messageBarType } from './utils';
import { messageBarLinkStyles } from './styles/MessageBarLink.styles';
/**
* @internal
* A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide
*/
export const _TroubleshootingGuideErrorBar = (props) => {
var _a;
const theme = useTheme();
// error bar strings
const localeStrings = useLocale().strings.errorBar;
const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
const [dismissedErrors, setDismissedErrors] = useState([]);
const { onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick, permissionsState = {
camera: 'denied',
microphone: 'denied'
}, troubleshootingGuideStrings } = props;
// dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
// Without this behaviour, this `useEffect` block would cause a render loop.
useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
return (React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map((error, i) => {
const devicePermissionErrorBar = (React.createElement("div", null,
strings[error.type],
' ',
onPermissionsTroubleshootingClick && (React.createElement(Link, { onClick: () => {
onPermissionsTroubleshootingClick(permissionsState);
} },
React.createElement("span", { className: messageBarLinkStyles(theme, true) }, troubleshootingGuideStrings.devicePermissionLinkText)))));
const networkErrorBar = (React.createElement("div", null,
strings[error.type],
' ',
onNetworkingTroubleshootingClick && (React.createElement(Link, { onClick: onNetworkingTroubleshootingClick, underline: true },
React.createElement("span", { className: messageBarLinkStyles(theme, true) }, troubleshootingGuideStrings.networkTroubleshootingLinkText)))));
return (React.createElement(MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: `${error.type} ${i}`, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React.createElement(MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
setDismissedErrors(dismissError(dismissedErrors, error));
}, ariaLabel: troubleshootingGuideStrings.dismissButtonText }), isMultiline: false, "aria-role": "alert", "aria-live": "assertive" }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)));
})));
};
const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {
if (errorType === 'callNetworkQualityLow') {
return networkErrorBar;
}
else {
return devicePermissionErrorBar;
}
};
//# sourceMappingURL=TroubleshootingGuideErrorBar.js.map