communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
133 lines • 5.76 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, Icon } from '@fluentui/react';
import { mergeStyles } from '@fluentui/react';
import React, { useCallback } from 'react';
import { useLocale } from '../localization';
import { useTheme } from '../theming';
import { darkTheme, lightTheme } from '../theming/themes';
import { isDarkThemed } from '../theming/themeUtils';
import { ControlBarButton } from './ControlBarButton';
import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui-common/src";
const spacerClass = mergeStyles({
width: 4
});
/**
* A button to end an ongoing call.
*
* Can be used with {@link ControlBar}.
*
* @public
*/
export const EndCallButton = (props) => {
var _a, _b;
const { styles, enableEndCallMenu, onHangUp } = props;
const localeStrings = useLocale().strings.endCallButton;
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
const theme = useTheme();
const isDarkTheme = isDarkThemed(theme);
const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, enableEndCallMenu ? menupButtonPadding : {}, styles !== null && styles !== void 0 ? styles : {});
const onRenderEndCallIcon = useCallback(() => (React.createElement(React.Fragment, null,
React.createElement(Icon, { iconName: "ControlButtonEndCall" }),
enableEndCallMenu && React.createElement("span", { className: spacerClass }))), [enableEndCallMenu]);
const defaultMenuProps = {
items: [
{
key: 'endForSelf',
text: localeStrings.leaveOption,
title: localeStrings.leaveOption,
onClick: () => {
onHangUp && onHangUp(false);
}
},
{
key: 'endForEveryone',
text: localeStrings.endCallOption,
title: localeStrings.endCallOption,
onClick: () => {
onHangUp && onHangUp(true);
}
}
],
styles: props.styles,
calloutProps: {
styles: {
root: {
maxWidth: '95%'
}
},
preventDismissOnEvent
}
};
return (React.createElement(React.Fragment, null,
React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: enableEndCallMenu ? defaultMenuProps : props.menuProps, onClick: onHangUp ? () => onHangUp() : props.onClick, styles: componentStyles, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderEndCallIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'endCallButtonLabel' }))));
};
const getButtonStyles = (theme) => {
var _a;
return ({
regular: {
color: theme.callingPalette.iconWhite,
background: theme.callingPalette.callRed,
'@media (forced-colors: active)': {
forcedColorAdjust: 'auto',
border: `1px ${(_a = theme.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternaryAlt} solid`
},
' i': {
color: theme.callingPalette.iconWhite
},
':focus::after': { outlineColor: `${theme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
},
pressed: {
color: theme.callingPalette.iconWhite,
background: theme.callingPalette.callRedDarker,
border: 'none',
' i': {
color: theme.callingPalette.iconWhite
},
'@media (forced-colors: active)': {
forcedColorAdjust: 'auto'
}
},
hovered: {
color: theme.callingPalette.iconWhite,
background: theme.callingPalette.callRedDark,
border: 'none',
' i': {
color: theme.callingPalette.iconWhite
},
'@media (forced-colors: active)': {
forcedColorAdjust: 'auto'
}
}
});
};
const darkThemeButtonStyles = getButtonStyles(darkTheme);
const lightThemeButtonStyles = getButtonStyles(lightTheme);
// using media query to prevent windows from overwriting the button color
const darkThemeCallButtonStyles = {
root: darkThemeButtonStyles.regular,
rootHovered: darkThemeButtonStyles.hovered,
rootPressed: darkThemeButtonStyles.pressed,
label: {
color: darkTheme.callingPalette.iconWhite
},
splitButtonMenuButton: Object.assign(Object.assign({}, darkThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': darkThemeButtonStyles.hovered }),
splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,
splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed
};
const lightThemeCallButtonStyles = {
root: lightThemeButtonStyles.regular,
rootHovered: lightThemeButtonStyles.hovered,
rootPressed: lightThemeButtonStyles.pressed,
splitButtonMenuButton: Object.assign(Object.assign({}, lightThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': lightThemeButtonStyles.hovered }),
splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,
splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,
splitButtonMenuFocused: lightThemeButtonStyles.pressed,
label: {
color: lightTheme.callingPalette.iconWhite
}
};
const menupButtonPadding = {
root: { padding: '0 0.75rem' }
};
//# sourceMappingURL=EndCallButton.js.map