communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
70 lines • 5.1 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