communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
47 lines • 2.98 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Stack } from '@fluentui/react';
import { _formatString } from "../../../../../acs-ui-common/src";
import React, { useCallback, useMemo } from 'react';
import { CallWithChatCompositeIcon } from '../../common/icons';
import { ChatButton } from './ChatButton';
import { useCallWithChatCompositeStrings } from '../hooks/useCallWithChatCompositeStrings';
import { NotificationIcon } from './NotificationIcon';
const filledIcon = React.createElement(CallWithChatCompositeIcon, { iconName: 'ControlBarChatButtonActive' });
const regularIcon = React.createElement(CallWithChatCompositeIcon, { iconName: 'ControlBarChatButtonInactive' });
/**
* @private
*/
export const ChatButtonWithUnreadMessagesBadge = (props) => {
var _a, _b, _c, _d;
const { newMessageLabel, unreadChatMessagesCount, hideUnreadChatMessagesBadge } = props;
const baseIcon = props.showLabel ? regularIcon : filledIcon;
const callWithChatStrings = useCallWithChatCompositeStrings();
const numberOfMsgToolTip = ((_a = props.strings) === null || _a === void 0 ? void 0 : _a.tooltipOffContent) && unreadChatMessagesCount > 0
? _formatString(callWithChatStrings.chatButtonTooltipClosedWithMessageCount, {
unreadMessagesCount: `${unreadChatMessagesCount}`
})
: undefined;
const chatStrings = useMemo(() => {
var _a, _b, _c;
return ({
label: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.label,
tooltipOffContent: numberOfMsgToolTip ? numberOfMsgToolTip : (_b = props.strings) === null || _b === void 0 ? void 0 : _b.tooltipOffContent,
tooltipOnContent: (_c = props.strings) === null || _c === void 0 ? void 0 : _c.tooltipOnContent
});
}, [numberOfMsgToolTip, (_b = props.strings) === null || _b === void 0 ? void 0 : _b.label, (_c = props.strings) === null || _c === void 0 ? void 0 : _c.tooltipOffContent, (_d = props.strings) === null || _d === void 0 ? void 0 : _d.tooltipOnContent]);
const onRenderOnIcon = useCallback(() => baseIcon, [baseIcon]);
const notificationOnIcon = useCallback(() => {
return (React.createElement(Stack, { styles: chatNotificationContainerStyles },
unreadChatMessagesCount > 0 && !hideUnreadChatMessagesBadge && (React.createElement(NotificationIcon, { chatMessagesCount: unreadChatMessagesCount, label: newMessageLabel })),
baseIcon));
}, [unreadChatMessagesCount, newMessageLabel, baseIcon, hideUnreadChatMessagesBadge]);
return (React.createElement(ChatButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-chat-button", onRenderOffIcon: notificationOnIcon, onRenderOnIcon: onRenderOnIcon, strings: chatStrings })));
};
const chatNotificationContainerStyles = {
root: {
display: 'inline',
position: 'relative'
}
};
//# sourceMappingURL=ChatButtonWithUnreadMessagesBadge.js.map