@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
48 lines • 2.22 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { memoizeFunction, Stack, useTheme, Text } from '@fluentui/react';
/**
* @private
*/
export const NotificationIcon = (props) => {
const { chatMessagesCount, label } = props;
const theme = useTheme();
const renderNumber = (numberOfMessages) => {
if (numberOfMessages < 1) {
return React.createElement(React.Fragment, null);
}
else {
const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';
return React.createElement(Text, { role: 'status', "aria-label": textNumberOfMessages + (label !== null && label !== void 0 ? label : ''), styles: notificationTextStyles(theme) }, textNumberOfMessages);
}
};
return React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-chat-button-unread-icon", horizontalAlign: "center", verticalAlign: "center", styles: notificationIconContainerStyles(theme) },
React.createElement(Stack, null, renderNumber(chatMessagesCount)));
};
const notificationIconPaddingREM = 0.225;
const notificationSizeREM = 1;
const notificationIconContainerStyles = memoizeFunction((theme) => ({
root: {
borderRadius: `${notificationSizeREM}rem`,
// Create a css circle. This should match the height.
height: `${notificationSizeREM}rem`,
minWidth: `${notificationSizeREM}rem`,
// use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)
background: theme.palette.themePrimary,
border: `0.0625rem solid white`,
// border should always be white
padding: `${notificationIconPaddingREM}rem`,
// positioning to place the badge within the button appropriately.
position: 'absolute',
top: `-${0.5 - notificationIconPaddingREM / 2}rem`,
left: `${0.5 + notificationIconPaddingREM / 2}rem`
}
}));
const notificationTextStyles = memoizeFunction((theme) => ({
root: {
color: 'white',
fontSize: theme.fonts.xSmall.fontSize
}
}));
//# sourceMappingURL=NotificationIcon.js.map