Stefan Hacker
197 lines
10 KiB
JavaScript
197 lines
10 KiB
JavaScript
define(["require", "exports", "../Divider/VerticalDivider.classNames", "./ContextualMenu.cnstyles", "../../Styling", "../../Utilities"], function (require, exports, VerticalDivider_classNames_1, ContextualMenu_cnstyles_1, Styling_1, Utilities_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getItemStyles = exports.getItemClassNames = exports.getSplitButtonVerticalDividerClassNames = void 0;
|
|
var CONTEXTUAL_SPLIT_MENU_MINWIDTH = '28px';
|
|
var MediumScreenSelector = (0, Styling_1.getScreenSelector)(0, Styling_1.ScreenWidthMaxMedium);
|
|
exports.getSplitButtonVerticalDividerClassNames = (0, Utilities_1.memoizeFunction)(
|
|
/* eslint-disable @typescript-eslint/no-deprecated */
|
|
function (theme) {
|
|
var _a;
|
|
return (0, Styling_1.mergeStyleSets)((0, VerticalDivider_classNames_1.getDividerClassNames)(theme), {
|
|
/* eslint-enable @typescript-eslint/no-deprecated */
|
|
wrapper: {
|
|
position: 'absolute',
|
|
right: 28, // width of the splitMenu based on the padding plus icon fontSize
|
|
selectors: (_a = {},
|
|
_a[MediumScreenSelector] = {
|
|
right: 32, // fontSize of the icon increased from 12px to 16px
|
|
},
|
|
_a),
|
|
},
|
|
divider: {
|
|
height: 16,
|
|
width: 1,
|
|
},
|
|
});
|
|
});
|
|
var GlobalClassNames = {
|
|
item: 'ms-ContextualMenu-item',
|
|
divider: 'ms-ContextualMenu-divider',
|
|
root: 'ms-ContextualMenu-link',
|
|
isChecked: 'is-checked',
|
|
isExpanded: 'is-expanded',
|
|
isDisabled: 'is-disabled',
|
|
linkContent: 'ms-ContextualMenu-linkContent',
|
|
linkContentMenu: 'ms-ContextualMenu-linkContent',
|
|
icon: 'ms-ContextualMenu-icon',
|
|
iconColor: 'ms-ContextualMenu-iconColor',
|
|
checkmarkIcon: 'ms-ContextualMenu-checkmarkIcon',
|
|
subMenuIcon: 'ms-ContextualMenu-submenuIcon',
|
|
label: 'ms-ContextualMenu-itemText',
|
|
secondaryText: 'ms-ContextualMenu-secondaryText',
|
|
splitMenu: 'ms-ContextualMenu-splitMenu',
|
|
screenReaderText: 'ms-ContextualMenu-screenReaderText',
|
|
};
|
|
/**
|
|
* @deprecated Will be removed in \>= 7.0.
|
|
* This is a package-internal method that has been depended on.
|
|
* It is being kept in this form for backwards compatibility.
|
|
* @internal
|
|
*/
|
|
// TODO: Audit perf. impact of and potentially remove memoizeFunction.
|
|
// https://github.com/microsoft/fluentui/issues/5534
|
|
exports.getItemClassNames = (0, Utilities_1.memoizeFunction)(function (theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className) {
|
|
var _a, _b, _c, _d;
|
|
var styles = (0, ContextualMenu_cnstyles_1.getMenuItemStyles)(theme);
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
return (0, Styling_1.mergeStyleSets)({
|
|
item: [classNames.item, styles.item, itemClassName],
|
|
divider: [classNames.divider, styles.divider, dividerClassName],
|
|
root: [
|
|
classNames.root,
|
|
styles.root,
|
|
checked && [classNames.isChecked, styles.rootChecked],
|
|
isAnchorLink && styles.anchorLink,
|
|
expanded && [classNames.isExpanded, styles.rootExpanded],
|
|
disabled && [classNames.isDisabled, styles.rootDisabled],
|
|
!disabled &&
|
|
!expanded && [
|
|
{
|
|
selectors: (_a = {
|
|
':hover': styles.rootHovered,
|
|
':active': styles.rootPressed
|
|
},
|
|
// eslint-disable-next-line @fluentui/max-len
|
|
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, .").concat(Utilities_1.IsFocusVisibleClassName, " &:focus:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:hover")] = styles.rootFocused,
|
|
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:hover")] = {
|
|
background: 'inherit;',
|
|
},
|
|
_a),
|
|
},
|
|
],
|
|
className,
|
|
],
|
|
splitPrimary: [
|
|
styles.root,
|
|
{
|
|
width: "calc(100% - ".concat(CONTEXTUAL_SPLIT_MENU_MINWIDTH, ")"),
|
|
},
|
|
checked && ['is-checked', styles.rootChecked],
|
|
(disabled || primaryDisabled) && ['is-disabled', styles.rootDisabled],
|
|
!(disabled || primaryDisabled) &&
|
|
!checked && [
|
|
{
|
|
selectors: (_b = {
|
|
':hover': styles.rootHovered
|
|
},
|
|
// when hovering over the splitPrimary also affect the splitMenu
|
|
_b[":hover ~ .".concat(classNames.splitMenu)] = styles.rootHovered,
|
|
_b[':active'] = styles.rootPressed,
|
|
// eslint-disable-next-line @fluentui/max-len
|
|
_b[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, .").concat(Utilities_1.IsFocusVisibleClassName, " &:focus:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:hover")] = styles.rootFocused,
|
|
_b[".".concat(Utilities_1.IsFocusVisibleClassName, " &:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:hover")] = {
|
|
background: 'inherit;',
|
|
},
|
|
_b),
|
|
},
|
|
],
|
|
],
|
|
splitMenu: [
|
|
classNames.splitMenu,
|
|
styles.root,
|
|
{
|
|
flexBasis: '0',
|
|
padding: '0 8px',
|
|
minWidth: CONTEXTUAL_SPLIT_MENU_MINWIDTH,
|
|
},
|
|
expanded && ['is-expanded', styles.rootExpanded],
|
|
disabled && ['is-disabled', styles.rootDisabled],
|
|
!disabled &&
|
|
!expanded && [
|
|
{
|
|
selectors: (_c = {
|
|
':hover': styles.rootHovered,
|
|
':active': styles.rootPressed
|
|
},
|
|
// eslint-disable-next-line @fluentui/max-len
|
|
_c[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, .").concat(Utilities_1.IsFocusVisibleClassName, " &:focus:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:hover")] = styles.rootFocused,
|
|
_c[".".concat(Utilities_1.IsFocusVisibleClassName, " &:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:hover")] = {
|
|
background: 'inherit;',
|
|
},
|
|
_c),
|
|
},
|
|
],
|
|
],
|
|
anchorLink: styles.anchorLink,
|
|
linkContent: [classNames.linkContent, styles.linkContent],
|
|
linkContentMenu: [
|
|
classNames.linkContentMenu,
|
|
styles.linkContent,
|
|
{
|
|
justifyContent: 'center',
|
|
},
|
|
],
|
|
icon: [
|
|
classNames.icon,
|
|
knownIcon && styles.iconColor,
|
|
styles.icon,
|
|
iconClassName,
|
|
disabled && [classNames.isDisabled, styles.iconDisabled],
|
|
],
|
|
iconColor: styles.iconColor,
|
|
checkmarkIcon: [classNames.checkmarkIcon, knownIcon && styles.checkmarkIcon, styles.icon, iconClassName],
|
|
subMenuIcon: [
|
|
classNames.subMenuIcon,
|
|
styles.subMenuIcon,
|
|
subMenuClassName,
|
|
expanded && { color: theme.palette.neutralPrimary },
|
|
disabled && [styles.iconDisabled],
|
|
],
|
|
label: [classNames.label, styles.label],
|
|
secondaryText: [classNames.secondaryText, styles.secondaryText],
|
|
splitContainer: [
|
|
styles.splitButtonFlexContainer,
|
|
!disabled &&
|
|
!checked && [
|
|
{
|
|
selectors: (_d = {},
|
|
// eslint-disable-next-line @fluentui/max-len
|
|
_d[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, .").concat(Utilities_1.IsFocusVisibleClassName, " &:focus:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:hover")] = styles.rootFocused,
|
|
_d),
|
|
},
|
|
],
|
|
],
|
|
screenReaderText: [
|
|
classNames.screenReaderText,
|
|
styles.screenReaderText,
|
|
Styling_1.hiddenContentStyle,
|
|
{ visibility: 'hidden' },
|
|
],
|
|
});
|
|
});
|
|
/**
|
|
* Wrapper function for generating ContextualMenuItem classNames which adheres to
|
|
* the getStyles API, but invokes memoized className generator function with
|
|
* primitive values.
|
|
*
|
|
* @param props - the ContextualMenuItem style props used to generate its styles.
|
|
*/
|
|
var getItemStyles = function (props) {
|
|
var theme = props.theme, disabled = props.disabled, expanded = props.expanded, checked = props.checked, isAnchorLink = props.isAnchorLink, knownIcon = props.knownIcon, itemClassName = props.itemClassName, dividerClassName = props.dividerClassName, iconClassName = props.iconClassName, subMenuClassName = props.subMenuClassName, primaryDisabled = props.primaryDisabled, className = props.className;
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
return (0, exports.getItemClassNames)(theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className);
|
|
};
|
|
exports.getItemStyles = getItemStyles;
|
|
});
|
|
//# sourceMappingURL=ContextualMenu.classNames.js.map
|