office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
163 lines • 6.5 kB
JavaScript
define(["require", "exports", "../../Utilities", "../../Styling", "./ContextualMenu.styles", "../Divider/VerticalDivider.classNames"], function (require, exports, Utilities_1, Styling_1, ContextualMenu_styles_1, VerticalDivider_classNames_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSplitButtonVerticalDividerClassNames = Utilities_1.memoizeFunction(function (theme) {
var semanticColors = theme.semanticColors;
var ContextualMenuDividerColor = semanticColors.bodyDivider;
return Styling_1.mergeStyleSets(VerticalDivider_classNames_1.getDividerClassNames(theme), {
divider: {
height: 16,
width: 1,
}
});
});
exports.getContextualMenuClassNames = Utilities_1.memoizeFunction(function (theme, className) {
var styles = ContextualMenu_styles_1.getStyles(theme);
return Styling_1.mergeStyleSets({
container: [
'ms-ContextualMenu-container',
styles.container,
className,
[{
selectors: {
':focus': { outline: 0 }
}
}]
],
root: [
'ms-ContextualMenu is-open',
styles.root
],
list: [
'ms-ContextualMenu-list is-open',
styles.list
],
header: [
'ms-ContextualMenu-header',
styles.header
],
title: styles.title
});
});
exports.getItemClassNames = Utilities_1.memoizeFunction(function (theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName) {
var semanticColors = theme.semanticColors;
var ContextualMenuIconColor = semanticColors.menuIcon;
var styles = ContextualMenu_styles_1.getMenuItemStyles(theme);
return Styling_1.mergeStyleSets({
item: [
'ms-ContextualMenu-item',
styles.item,
itemClassName,
],
divider: [
'ms-ContextualMenu-divider',
styles.divider,
dividerClassName,
],
root: [
'ms-ContextualMenu-link',
styles.root,
checked && [
'is-checked',
styles.rootChecked
],
isAnchorLink && styles.anchorLink,
expanded && [
'is-expanded',
styles.rootExpanded
],
disabled && [
'is-disabled',
styles.rootDisabled
],
!disabled && !expanded && [{
selectors: {
':hover': styles.rootHovered,
':active': styles.rootPressed,
'.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
'.ms-Fabric.is-focusVisible &:hover': { background: 'inherit;' }
}
}],
],
splitPrimary: [
styles.root,
checked && [
'is-checked',
styles.rootChecked
],
disabled && [
'is-disabled',
styles.rootDisabled
],
!disabled && !checked && [{
selectors: {
':hover': styles.rootHovered,
':active': styles.rootPressed,
'.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
'.ms-Fabric.is-focusVisible &:hover': { background: 'inherit;' }
}
}]
],
splitMenu: [
styles.root,
{
width: 32
},
expanded && [
'is-expanded',
styles.rootExpanded
],
disabled && [
'is-disabled',
styles.rootDisabled
],
!disabled && !expanded && [{
selectors: {
':hover': styles.rootHovered,
':active': styles.rootPressed,
'.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
'.ms-Fabric.is-focusVisible &:hover': { background: 'inherit;' }
}
}]
],
linkContent: [
'ms-ContextualMenu-linkContent',
styles.linkContent
],
linkContentMenu: [
'ms-ContextualMenu-linkContent',
styles.linkContent,
{
justifyContent: 'center',
}
],
icon: [
'ms-ContextualMenu-icon',
knownIcon && 'ms-ContextualMenu-iconColor ' && styles.iconColor,
styles.icon,
iconClassName,
disabled && [
'is-disabled',
styles.iconDisabled
]
],
checkmarkIcon: [
'ms-ContextualMenu-checkmarkIcon',
knownIcon && 'ms-ContextualMenu-checkmarkIcon ' && styles.checkmarkIcon,
styles.icon,
iconClassName,
],
subMenuIcon: [
'ms-ContextualMenu-submenuIcon',
styles.subMenuIcon,
subMenuClassName,
],
label: [
'ms-ContextualMenu-itemText',
styles.label
],
splitContainer: styles.splitButtonFlexContainer,
});
});
});
//# sourceMappingURL=ContextualMenu.classNames.js.map