communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
50 lines • 2.96 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useLocale } from '../localization';
import { ControlBarButton } from './ControlBarButton';
import { concatStyleSets, DefaultPalette, useTheme } from '@fluentui/react';
import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
/**
* A button to start / stop screen sharing.
*
* Can be used with {@link ControlBar}.
*
* @public
*/
export const RaiseHandButton = (props) => {
var _a, _b, _c, _d;
const localeStrings = useLocale().strings.raiseHandButton;
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
const theme = useTheme();
const styles = raiseHandButtonStyles(theme);
const onRenderRaiseHandIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonRaiseHand" }));
const onRenderLowerHandIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonLowerHand" }));
return (React.createElement(ControlBarButton, Object.assign({}, props, { styles: concatStyleSets(styles, props.styles), onClick: (_a = props.onToggleRaiseHand) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderLowerHandIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderRaiseHandIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'raiseHandButtonLabel', "aria-label": props.checked ? strings.onLabel : strings.offLabel, "aria-description": props.checked ? strings.tooltipOnContent : strings.tooltipOffContent, disabled: props.disabled })));
};
const raiseHandButtonStyles = (theme) => ({
rootChecked: {
background: theme.semanticColors.primaryButtonBackground,
color: theme.semanticColors.primaryButtonText,
':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
'@media (forced-colors: active)': {
border: '1px solid',
borderColor: theme.palette.black
}
},
rootCheckedHovered: {
background: theme.semanticColors.primaryButtonBackgroundHovered,
color: theme.semanticColors.primaryButtonTextHovered,
':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
'@media (forced-colors: active)': {
border: '1px solid',
borderColor: theme.palette.black
}
},
rootCheckedPressed: {
background: theme.semanticColors.primaryButtonBackgroundPressed,
color: theme.semanticColors.primaryButtonTextPressed
},
labelChecked: { color: theme.semanticColors.primaryButtonText }
});
//# sourceMappingURL=RaiseHandButton.js.map