@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
118 lines • 6.81 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