communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
105 lines • 6.61 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { DefaultButton, IconButton, Persona, PersonaSize, PrimaryButton, Stack, Text, useTheme } from '@fluentui/react';
import React from 'react';
import { useLocale } from '../localization';
import { _formatString } from "../../../acs-ui-common/src";
/**
* A Notification component that is to be used to represent incoming calls to the end user.
* Allows the user to accept or reject the incoming call.
* @public
*/
export const IncomingCallNotification = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const { callerName, alertText, avatarImage, onAcceptWithAudio, onAcceptWithVideo, onReject, onDismiss, personaSize, styles, strings, acceptOptions } = props;
const theme = useTheme();
const localeStrings = useLocale().strings.IncomingCallNotification;
const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName
? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })
: callerName;
const acceptManuOptions = acceptOptions.showAcceptWithVideo
? {
items: [
{
key: 'audio',
text: (_a = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _a !== void 0 ? _a : localeStrings.incomingCallNotificationAcceptButtonLabel,
onClick: () => onAcceptWithAudio()
},
{
key: 'video',
text: (_b = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAccceptWithVideoButtonLabel) !== null && _b !== void 0 ? _b : localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,
onClick: () => onAcceptWithVideo()
}
]
}
: undefined;
return (React.createElement(Stack, { tokens: { childrenGap: '0.5rem' }, verticalAlign: "center", styles: (styles === null || styles === void 0 ? void 0 : styles.root) ? styles.root : incomingCallToastStyle(theme) },
React.createElement(Stack, { horizontal: true, verticalAlign: "center", tokens: { childrenGap: personaSize ? '0.5rem' : '0rem' } },
React.createElement(Stack, { horizontalAlign: "start", styles: (styles === null || styles === void 0 ? void 0 : styles.avatarContainer) ? styles.avatarContainer : incomingCallToastAvatarContainerStyle },
React.createElement(Persona, { imageUrl: avatarImage, text: callerName, size: PersonaSize.size24, coinSize: personaSize, hidePersonaDetails: true, "aria-label": callerName })),
React.createElement(Stack, { grow: true, horizontalAlign: "center", style: { alignItems: 'flex-start', fontFamily: 'Segoe UI' } },
React.createElement(Text, { tabIndex: 0, "aria-live": 'assertive', "aria-label": alertText !== null && alertText !== void 0 ? alertText : formattedMessageString }, (_c = alertText !== null && alertText !== void 0 ? alertText : strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationPlaceholderAlert) !== null && _c !== void 0 ? _c : formattedMessageString)),
React.createElement(IconButton, { ariaLabel: (_d = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationDismissButtonAriaLabel) !== null && _d !== void 0 ? _d : localeStrings.incomingCallNotificationDismissButtonAriaLabel, iconProps: { iconName: 'cancel' }, onClick: onDismiss, styles: dismissButtonStyle(theme) })),
React.createElement(Stack, { horizontal: true, horizontalAlign: 'center', tokens: { childrenGap: '0.5rem' } },
React.createElement(PrimaryButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: { iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }, ariaLabel: (_e = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationAcceptWithAudioAriaLabel) !== null && _e !== void 0 ? _e : localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel, menuProps: acceptManuOptions }, (_f = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _f !== void 0 ? _f : localeStrings.incomingCallNotificationAcceptButtonLabel),
React.createElement(DefaultButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: { iconName: 'IncomingCallNotificationRejectIcon' }, ariaLabel: (_g = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationRejectAriaLabel) !== null && _g !== void 0 ? _g : localeStrings.incomingCallNoticicationRejectAriaLabel }, (_h = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationRejectButtonLabel) !== null && _h !== void 0 ? _h : localeStrings.incomingCallNotificationRejectButtonLabel))));
};
const incomingCallToastStyle = (theme) => {
return {
root: {
width: '20rem',
background: theme.palette.white,
opacity: 0.95,
borderRadius: '0.5rem',
boxShadow: theme.effects.elevation8,
padding: '1rem'
}
};
};
const incomingCallToastAvatarContainerStyle = {
root: {
marginRight: '0.5rem'
}
};
const dismissButtonStyle = (theme) => {
return {
root: {
color: theme.palette.neutralPrimary,
width: '1rem',
height: '1rem'
},
rootHovered: {
color: theme.palette.neutralDark
}
};
};
const incomingCallAcceptButtonStyle = (theme) => {
return {
root: {
color: theme.palette.white,
border: 'none',
borderRadius: theme.effects.roundedCorner4,
width: '100%',
maxWidth: '8.875rem'
},
rootHovered: {
color: theme.palette.white
},
icon: {
height: '1.25rem'
}
};
};
const incomingCallRejectButtonStyle = (theme) => {
return {
root: {
borderRadius: theme.effects.roundedCorner4,
maxWidth: '8.875rem',
width: '100%'
},
icon: {
height: '1.25rem'
}
};
};
//# sourceMappingURL=IncomingCallNotification.js.map