communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
67 lines • 4.11 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { FocusZone, FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';
import React from 'react';
import { useTheme } from '../../theming/FluentThemeProvider';
import { submitWithKeyboard } from '../utils/keyboardNavigation';
/**
* Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
*
* @private
*/
export const DrawerMenuItem = (props) => {
var _a;
const theme = useTheme();
const onClick = (ev) => props.onItemClick && props.onItemClick(ev, props.itemKey);
const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
const secondaryIcon = props.secondaryIconProps ? (React.createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps))) : props.subMenuProps ? (React.createElement(MenuItemIcon, { iconName: "ChevronRight" })) : undefined;
return (React.createElement(FocusZone, { shouldFocusOnMount: props.shouldFocusOnMount },
React.createElement(Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id, "aria-label": props.ariaLabel },
props.iconProps && (React.createElement(Stack.Item, { role: "presentation", styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined },
React.createElement(MenuItemIcon, Object.assign({}, props.iconProps)))),
React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
React.createElement(Text, { styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined }, props.text)),
props.secondaryText && (React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, className: mergeStyles(secondaryTextStyles) },
React.createElement(Text, { styles: {
root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }
} }, props.secondaryText))),
props.secondaryComponent && React.createElement(Stack.Item, null, props.secondaryComponent),
secondaryIcon && React.createElement(Stack.Item, null, secondaryIcon))));
};
const MenuItemIcon = (props) => (React.createElement(FontIcon, Object.assign({ className: mergeStyles(iconStyles) }, props)));
const menuItemChildrenGap = { childrenGap: '0.5rem' };
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
}
});
/** Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */
const drawerMenuItemTextStyles = {
root: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}
};
const iconStyles = {
// Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.
display: 'flex',
alignItems: 'center',
height: '100%',
// This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)
' span': {
display: 'flex',
alignItems: 'center',
height: '100%'
}
};
const secondaryTextStyles = {
// limit width for secondaryText in the menu item so it does not overlap with text on left.
maxWidth: '50%'
};
//# sourceMappingURL=DrawerMenuItem.js.map