@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
44 lines • 2.32 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.palette.themePrimary,
color: DefaultPalette.white,
':focus::after': {
outlineColor: `${DefaultPalette.white}`
}
},
rootCheckedHovered: {
background: theme.palette.themePrimary,
color: DefaultPalette.white,
':focus::after': {
outlineColor: `${DefaultPalette.white}`
}
},
labelChecked: {
color: DefaultPalette.white
}
});
//# sourceMappingURL=RaiseHandButton.js.map