communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
73 lines • 5.38 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles, TooltipHost } from '@fluentui/react';
import { _formatString } from "../../../acs-ui-common/src";
import React, { useState } from 'react';
import { useLocale } from '../localization';
import { useTheme } from '../theming';
import { isDarkThemed } from '../theming/themeUtils';
import { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';
import { MessageStatusIcon } from './MessageStatusIcon';
/**
* Component to display the status of a sent message.
*
* Adds an icon and tooltip corresponding to the message status.
*
* @internal
*/
export const MessageStatusIndicatorInternal = (props) => {
const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount, shouldAnnounce } = props;
const localeStrings = useLocale().strings.messageStatusIndicator;
const [isTooltipToggled, setIsTooltipToggled] = useState(false);
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
const theme = useTheme();
const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
// Place callout with no gap between it and the button.
const calloutProps = {
gapSpace: 0,
styles: calloutStyle,
backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
};
switch (status) {
case 'failed':
return (React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageFailed", iconClassName: mergeStyles(MessageStatusIndicatorErrorIconStyle, { color: isDarkThemed(theme) ? theme.semanticColors.errorText : theme.palette.redDark }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.failedToSendAriaLabel })));
case 'sending':
return (React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSending", iconClassName: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.sendingAriaLabel })));
case 'seen':
return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content:
// when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'
// when readCount is 0, we have a bug, show 'seen' to cover up as a fall back
// when participant count is 0, we have a bug, show 'seen' to cover up as a fall back
readCount === 0 ||
(remoteParticipantsCount && remoteParticipantsCount <= 1) ||
!readCount ||
!remoteParticipantsCount ||
strings.readByTooltipText === undefined
? strings.seenTooltipText
: _formatString(strings.readByTooltipText, {
messageThreadReadCount: `${readCount}`,
remoteParticipantsCount: `${remoteParticipantsCount}`
}), onTooltipToggle: () => {
if (onToggleToolTip) {
onToggleToolTip(!isTooltipToggled);
setIsTooltipToggled(!isTooltipToggled);
}
} },
React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSeen", iconClassName: mergeStyles({ color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.seenAriaLabel })));
case 'delivered':
return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageDelivered", iconClassName: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.deliveredAriaLabel })));
default:
return React.createElement(React.Fragment, null);
}
};
// The TooltipHost root uses display: inline by default.
// To prevent sizing issues or tooltip positioning issues, we override to inline-block.
// For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
const hostStyles = { root: { display: 'inline-block' } };
const MemoMessageStatusIcon = React.memo((obj) => {
return React.createElement(MessageStatusIcon, Object.assign({}, obj));
});
//# sourceMappingURL=MessageStatusIndicatorInternal.js.map