communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
91 lines • 4.28 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { MessageBar } from '@fluentui/react';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { MessageBarType } from '@fluentui/react';
import React, { useEffect } from 'react';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { useMemo } from 'react';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { useLocale } from '../localization';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
/**
* @beta
* Error bar type for {@link SendBoxErrorBarError}
*/
export var SendBoxErrorBarType;
(function (SendBoxErrorBarType) {
/** Info styled MessageBar */
SendBoxErrorBarType[SendBoxErrorBarType["info"] = 0] = "info";
/** Error styled MessageBar */
SendBoxErrorBarType[SendBoxErrorBarType["error"] = 1] = "error";
/** Blocked styled MessageBar */
SendBoxErrorBarType[SendBoxErrorBarType["blocked"] = 2] = "blocked";
/** SevereWarning styled MessageBar */
SendBoxErrorBarType[SendBoxErrorBarType["severeWarning"] = 3] = "severeWarning";
/** Success styled MessageBar */
SendBoxErrorBarType[SendBoxErrorBarType["success"] = 4] = "success";
/** Warning styled MessageBar */
SendBoxErrorBarType[SendBoxErrorBarType["warning"] = 5] = "warning";
})(SendBoxErrorBarType || (SendBoxErrorBarType = {}));
/**
* @private
*/
export const SendBoxErrorBar = (props) => {
const { error, dismissAfterMs, onDismiss } = props;
/* @conditional-compile-remove(rich-text-editor-image-upload) */
const strings = useLocale().strings.errorBar;
const [errorMessage, setErrorMessage] = React.useState(error === null || error === void 0 ? void 0 : error.message);
// Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const timeoutRef = React.useRef();
React.useEffect(() => {
setErrorMessage(error === null || error === void 0 ? void 0 : error.message);
}, [error]);
useEffect(() => {
if (error && dismissAfterMs !== undefined) {
timeoutRef.current = setTimeout(() => {
setErrorMessage(undefined);
onDismiss && onDismiss();
}, dismissAfterMs);
}
return () => {
timeoutRef.current && clearTimeout(timeoutRef.current);
};
}, [dismissAfterMs, onDismiss, error]);
/* @conditional-compile-remove(rich-text-editor-image-upload) */
const messageBarType = useMemo(() => {
switch (error === null || error === void 0 ? void 0 : error.errorBarType) {
case SendBoxErrorBarType.info:
return MessageBarType.info;
case SendBoxErrorBarType.error:
return MessageBarType.error;
case SendBoxErrorBarType.blocked:
return MessageBarType.blocked;
case SendBoxErrorBarType.severeWarning:
return MessageBarType.severeWarning;
case SendBoxErrorBarType.success:
return MessageBarType.success;
case SendBoxErrorBarType.warning:
default:
return MessageBarType.warning;
}
}, [error]);
if (errorMessage) {
return (React.createElement(MessageBar, { role: "alert", "aria-label": errorMessage, "data-testid": 'send-box-message-bar',
/* @conditional-compile-remove(rich-text-editor-image-upload) */
messageBarType: messageBarType,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
isMultiline: true,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
key: (error === null || error === void 0 ? void 0 : error.errorBarType) || SendBoxErrorBarType.warning,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onDismiss: onDismiss,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
dismissButtonAriaLabel: strings.dismissButtonAriaLabel }, errorMessage));
}
else {
return React.createElement(React.Fragment, null);
}
};
//# sourceMappingURL=SendBoxErrorBar.js.map