communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
58 lines • 3.21 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect, useRef, useState } from 'react';
import { MessageBar, Stack } from '@fluentui/react';
import { useLocale } from '../localization';
import { dismissError, dropDismissalsForInactiveErrors, errorsToShow, messageBarIconProps, messageBarType } from './utils';
/**
* A component to show error messages on the UI.
* All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.
* Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.
*
* This component internally tracks dismissed by the user.
* * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.
* * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.
* If the error recurs, it is shown in the UI.
*
* Uses {@link @fluentui/react#MessageBar} UI element.
*
* @public
*/
export const ErrorBar = (props) => {
var _a;
const localeStrings = useLocale().strings.errorBar;
const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
const trackDismissedErrorsInternally = !props.onDismissError;
// Timestamp for when this comopnent is first mounted.
// Never updated through the lifecycle of this component.
const mountTimestamp = useRef(new Date(Date.now()));
const [dismissedErrors, setDismissedErrors] = useState([]);
// dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
// Without this behaviour, this `useEffect` block would cause a render loop.
useEffect(() => {
trackDismissedErrorsInternally &&
setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));
}, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);
const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors, props.ignorePremountErrors ? mountTimestamp.current : undefined);
return (React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map((error) => (React.createElement(MessageBar, Object.assign({}, props, { styles: {
innerText: {
alignSelf: 'center'
},
icon: {
height: 0
},
content: {
lineHeight: 'inherit'
},
dismissal: {
height: '2rem',
paddingBottom: '0.8rem'
}
}, key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => {
var _a;
return trackDismissedErrorsInternally
? setDismissedErrors(dismissError(dismissedErrors, error))
: (_a = props.onDismissError) === null || _a === void 0 ? void 0 : _a.call(props, error);
}, dismissButtonAriaLabel: `${strings[error.type]}, ${strings.dismissButtonAriaLabel}`, dismissIconProps: { iconName: 'ErrorBarClear' } }), strings[error.type])))));
};
//# sourceMappingURL=ErrorBar.js.map