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.cnstyles';
import { mergeStyleSets } from '../../Styling';
import { memoizeFunction, IsFocusVisibleClassName } 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: (_a = {
                            ':hover': styles.rootHovered,
                            ':active': styles.rootPressed
                        },
                        _a["." + IsFocusVisibleClassName + " &:focus, ." + IsFocusVisibleClassName + " &:focus:hover"] = styles.rootFocused,
                        _a["." + IsFocusVisibleClassName + " &:hover"] = { background: 'inherit;' },
                        _a)
                }
            ]
        ],
        splitPrimary: [
            styles.root,
            checked && ['is-checked', styles.rootChecked],
            (disabled || primaryDisabled) && ['is-disabled', styles.rootDisabled],
            !(disabled || primaryDisabled) &&
                !checked && [
                {
                    selectors: (_b = {
                            ':hover': styles.rootHovered,
                            ':active': styles.rootPressed
                        },
                        _b["." + IsFocusVisibleClassName + " &:focus, ." + IsFocusVisibleClassName + " &:focus:hover"] = styles.rootFocused,
                        _b["." + IsFocusVisibleClassName + " &:hover"] = { background: 'inherit;' },
                        _b)
                }
            ]
        ],
        splitMenu: [
            styles.root,
            {
                width: 32
            },
            expanded && ['is-expanded', styles.rootExpanded],
            disabled && ['is-disabled', styles.rootDisabled],
            !disabled &&
                !expanded && [
                {
                    selectors: (_c = {
                            ':hover': styles.rootHovered,
                            ':active': styles.rootPressed
                        },
                        _c["." + IsFocusVisibleClassName + " &:focus, ." + IsFocusVisibleClassName + " &:focus:hover"] = styles.rootFocused,
                        _c["." + IsFocusVisibleClassName + " &:hover"] = { background: 'inherit;' },
                        _c)
                }
            ]
        ],
        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: (_d = {},
                        _d["." + IsFocusVisibleClassName + " &:focus, ." + IsFocusVisibleClassName + " &:focus:hover"] = styles.rootFocused,
                        _d)
                }
            ]
        ]
    });
    var _a, _b, _c, _d;
});
//# sourceMappingURL=ContextualMenu.classNames.js.map