@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
69 lines • 5.14 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Callout, concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';
import React, { useRef, useState } from 'react';
import { ControlBarButton } from './ControlBarButton';
import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
import { useLocale } from '../localization';
import { emojiStyles, reactionButtonCalloutStyles, reactionButtonStyles, reactionItemButtonStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';
import { isDarkThemed } from '../theming/themeUtils';
import { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';
/**
* A button to send reactions.
*
* Can be used with {@link ControlBar}.
*
* @public
*/
export const ReactionButton = (props) => {
var _a, _b, _c, _d, _e, _f, _g;
const localeStrings = useLocale().strings.reactionButton;
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
const theme = useTheme();
const styles = reactionButtonStyles(theme);
const onRenderIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ReactionButtonIcon" });
const emojis = ['like', 'heart', 'applause', 'laugh', 'surprised'];
const emojiButtonTooltip = new Map([['like', strings.likeReactionTooltipContent], ['heart', strings.heartReactionTooltipContent], ['applause', strings.applauseReactionTooltipContent], ['laugh', strings.laughReactionTooltipContent], ['surprised', strings.surprisedReactionTooltipContent]]);
const emojiResource = new Map([['like', (_a = props.reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.url], ['heart', (_b = props.reactionResources.heartReaction) === null || _b === void 0 ? void 0 : _b.url], ['applause', (_c = props.reactionResources.applauseReaction) === null || _c === void 0 ? void 0 : _c.url], ['laugh', (_d = props.reactionResources.laughReaction) === null || _d === void 0 ? void 0 : _d.url], ['surprised', (_e = props.reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]]);
const calloutStyle = {
root: {
padding: 0
},
calloutMain: {
padding: '0.5rem'
}
};
const calloutProps = {
styles: calloutStyle,
backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
};
const reactionButtonCalloutRef = useRef(null);
const reactionButtonRef = useRef(null);
const [calloutIsVisible, setCalloutIsVisible] = useState(false);
return React.createElement(Stack, null,
calloutIsVisible && React.createElement(Callout, { "data-ui-id": "reaction-sub-menu", isBeakVisible: false, styles: reactionButtonCalloutStyles, target: reactionButtonCalloutRef.current, onDismiss: () => {
var _a;
(_a = reactionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
setCalloutIsVisible(false);
} },
React.createElement(FocusZone, { shouldFocusOnMount: true, style: {
height: '100%'
} },
React.createElement(Stack, { horizontal: true, style: {
height: 'inherit'
} }, emojis.map((emoji, index) => {
const resourceUrl = emojiResource.get(emoji);
const frameCount = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;
const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));
return React.createElement(TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
React.createElement(DefaultButton, { role: "menuitem", key: index, onClick: () => {
var _a;
props.onReactionClick(emoji);
(_a = reactionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
setCalloutIsVisible(false);
}, className: classname, styles: reactionItemButtonStyles, "aria-label": emojiButtonTooltip.get(emoji) }));
})))),
React.createElement("div", { ref: reactionButtonCalloutRef },
React.createElement(ControlBarButton, Object.assign({}, props, { componentRef: reactionButtonRef, styles: concatStyleSets(styles, props.styles), onClick: () => setCalloutIsVisible(!calloutIsVisible), onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, split: true, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled, ariaLabel: strings.ariaLabel }))));
};
//# sourceMappingURL=ReactionButton.js.map