communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
77 lines • 3.37 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { SendBoxErrorBar } from '../SendBoxErrorBar';
/**
* @private
*/
export const RichTextSendBoxErrors = (props) => {
const {
/* @conditional-compile-remove(file-sharing-acs) */
attachmentProgressError,
/* @conditional-compile-remove(file-sharing-acs) */
attachmentUploadsPendingError, systemMessage, textValidationErrorMessage } = props;
const [sendBoxError, setSendBoxError] = useState(undefined);
useEffect(() => {
if (systemMessage && !isMessageEmpty(systemMessage)) {
setSendBoxError({ message: systemMessage, timestamp: Date.now() });
}
}, [systemMessage]);
useEffect(() => {
if (textValidationErrorMessage && !isMessageEmpty(textValidationErrorMessage)) {
setSendBoxError({ message: textValidationErrorMessage, timestamp: Date.now() });
}
}, [textValidationErrorMessage]);
useEffect(() => {
if ((textValidationErrorMessage === undefined || isMessageEmpty(textValidationErrorMessage)) &&
(systemMessage === undefined || isMessageEmpty(systemMessage))) {
setSendBoxError(undefined);
}
}, [systemMessage, textValidationErrorMessage]);
useEffect(() => {
setSendBoxError((prev) => {
const errors = [];
if (prev) {
errors.push(prev);
}
/* @conditional-compile-remove(file-sharing-acs) */
if (attachmentUploadsPendingError) {
errors.push(attachmentUploadsPendingError);
}
/* @conditional-compile-remove(file-sharing-acs) */
if (attachmentProgressError) {
errors.push(attachmentProgressError);
}
if (errors.length === 0) {
return undefined;
}
// sort to get the latest error
const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);
return sortedErrors[0];
});
}, [
/* @conditional-compile-remove(file-sharing-acs) */ attachmentProgressError,
/* @conditional-compile-remove(file-sharing-acs) */ attachmentUploadsPendingError
]);
const onDismiss = useCallback(() => {
if (systemMessage && !isMessageEmpty(systemMessage)) {
setSendBoxError({ message: systemMessage, timestamp: Date.now() });
return;
}
/* @conditional-compile-remove(rich-text-editor-image-upload) */
setSendBoxError(undefined);
}, [systemMessage]);
const dismissAfterMs = useMemo(() => {
const delayInMs = 10 * 1000;
// don't dismiss the system message
if (systemMessage) {
return (sendBoxError === null || sendBoxError === void 0 ? void 0 : sendBoxError.message) !== systemMessage ? delayInMs : undefined;
}
return delayInMs;
}, [sendBoxError === null || sendBoxError === void 0 ? void 0 : sendBoxError.message, systemMessage]);
return React.createElement(SendBoxErrorBar, { error: sendBoxError, dismissAfterMs: dismissAfterMs, onDismiss: onDismiss });
};
const isMessageEmpty = (message) => {
return message.trim().length === 0;
};
//# sourceMappingURL=RichTextSendBoxErrors.js.map