communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
52 lines • 3.13 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles, Stack } from '@fluentui/react';
import React from 'react';
import { useTheme } from '../../theming/FluentThemeProvider';
import { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';
import { IconButton } from '@fluentui/react';
/**
* Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
*
* @internal
*/
export const _ReactionDrawerMenuItem = (props) => {
var _a, _b, _c, _d, _e;
const theme = useTheme();
const resources = props.reactionResources;
const emojiResource = new Map([
['like', (_a = resources === null || resources === void 0 ? void 0 : resources.likeReaction) === null || _a === void 0 ? void 0 : _a.url],
['heart', (_b = resources === null || resources === void 0 ? void 0 : resources.heartReaction) === null || _b === void 0 ? void 0 : _b.url],
['laugh', (_c = resources === null || resources === void 0 ? void 0 : resources.laughReaction) === null || _c === void 0 ? void 0 : _c.url],
['applause', (_d = resources === null || resources === void 0 ? void 0 : resources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url],
['surprised', (_e = resources === null || resources === void 0 ? void 0 : resources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]
]);
const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
const borderRadius = useTheme().effects.roundedCorner4;
const modifiedFirstItemStyle = {
root: {
borderTopRightRadius: borderRadius,
borderTopLeftRadius: borderRadius,
marginTop: '12px'
}
};
return (React.createElement(Stack, { "data-ui-id": "reaction-mobile-drawer-menu-item", id: "reaction", role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root) },
React.createElement("div", { style: mobileViewMenuItemStyle() }, emojis.map((emoji, index) => {
const resourceUrl = emojiResource.get(emoji.toString());
return (React.createElement(IconButton, { key: index, onClick: () => {
var _a;
(_a = props.onReactionClick) === null || _a === void 0 ? void 0 : _a.call(props, emoji);
}, style: mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running') }));
}))));
};
const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
background: hoverBackground
} }));
const disabledDrawerMenuItemRootStyles = (background) => ({
pointerEvents: 'none',
background: background,
':hover, :focus': {
background: background
}
});
//# sourceMappingURL=ReactionDrawerMenuItem.js.map