office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.classNames.js

Reusable React components for building experiences for Office 365.

import { getDividerClassNames } from '../Divider/VerticalDivider.classNames';
import { getMenuItemStyles, getStyles as getContextualMenuStyles } from './ContextualMenu.styles';
import { mergeStyleSets } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
export var getSplitButtonVerticalDividerClassNames = memoizeFunction(function (theme) {
    return mergeStyleSets(getDividerClassNames(theme), {
        divider: {
            height: 16,
            width: 1,
        }
    });
});
export var getContextualMenuClassNames = memoizeFunction(function (theme, className) {
    var styles = getContextualMenuStyles(theme);
    return 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
    });
});
export var getItemClassNames = memoizeFunction(function (theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled) {
    var styles = getMenuItemStyles(theme);
    return 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--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus:hover': styles.rootFocused,
                        '.ms-Fabric--isFocusVisible &:hover': { background: 'inherit;' }
                    }
                }],
        ],
        splitPrimary: [
            styles.root,
            checked && [
                'is-checked',
                styles.rootChecked
            ],
            (disabled || primaryDisabled) && [
                'is-disabled',
                styles.rootDisabled
            ],
            !(disabled || primaryDisabled) && !checked && [{
                    selectors: {
                        ':hover': styles.rootHovered,
                        ':active': styles.rootPressed,
                        '.ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus:hover': styles.rootFocused,
                        '.ms-Fabric--isFocusVisible &: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--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus:hover': styles.rootFocused,
                        '.ms-Fabric--isFocusVisible &: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
        ],
        secondaryText: [
            'ms-ContextualMenu-secondaryText',
            styles.secondaryText
        ],
        splitContainer: [
            styles.splitButtonFlexContainer,
            !disabled && !checked && [{
                    selectors: {
                        '.ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus:hover': styles.rootFocused,
                    }
                }]
        ]
    });
});
//# sourceMappingURL=ContextualMenu.classNames.js.map