UNPKG

office-ui-fabric-react

Version:

Reusable React components for building experiences for Microsoft 365.

195 lines • 6.89 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var tslib_1 = require("tslib"); var Styling_1 = require("../../../../Styling"); var BaseButton_classNames_1 = require("../../../Button/BaseButton.classNames"); var GlobalClassNames = { root: 'ms-PickerPersona-container', itemContent: 'ms-PickerItem-content', removeButton: 'ms-PickerItem-removeButton', isSelected: 'is-selected', isInvalid: 'is-invalid', }; var REMOVE_BUTTON_SIZE = 24; function getStyles(props) { var _a, _b, _c, _d, _e, _f, _g, _h; var className = props.className, theme = props.theme, selected = props.selected, invalid = props.invalid, disabled = props.disabled; var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts; var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme); var personaPrimaryTextStyles = [ selected && !invalid && !disabled && { color: palette.white, selectors: (_a = { ':hover': { color: palette.white, } }, _a[Styling_1.HighContrastSelector] = { color: 'HighlightText', }, _a), }, ((invalid && !selected) || (invalid && selected && disabled)) && { color: palette.redDark, borderBottom: "2px dotted " + palette.redDark, selectors: (_b = {}, _b["." + classNames.root + ":hover &"] = { // override Persona root:hover selector color: palette.redDark, }, _b), }, invalid && selected && !disabled && { color: palette.white, borderBottom: "2px dotted " + palette.white, }, disabled && { selectors: (_c = {}, _c[Styling_1.HighContrastSelector] = { color: 'GrayText', }, _c), }, ]; var personaSecondaryTextStyles = [ selected && !invalid && !disabled && { color: palette.white, selectors: (_d = { ':hover': { color: palette.white, } }, _d[Styling_1.HighContrastSelector] = { color: 'HighlightText', }, _d), }, ]; var personaCoinInitialsStyles = [ invalid && { fontSize: fonts.xLarge.fontSize, }, ]; return { root: [ classNames.root, Styling_1.getFocusStyle(theme, { inset: -2 }), { borderRadius: 15, display: 'inline-flex', alignItems: 'center', background: palette.neutralLighter, margin: '1px 2px', cursor: 'default', userSelect: 'none', maxWidth: 300, verticalAlign: 'middle', minWidth: 0, selectors: (_e = { ':hover': { background: !selected && !disabled ? palette.neutralLight : '', } }, _e[Styling_1.HighContrastSelector] = [{ border: '1px solid WindowText' }, disabled && { borderColor: 'GrayText' }], _e), }, selected && !disabled && [ classNames.isSelected, { background: palette.themePrimary, selectors: (_f = {}, _f[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'HighLight', background: 'Highlight' }, Styling_1.getHighContrastNoAdjustStyle()), _f), }, ], invalid && [classNames.isInvalid], invalid && selected && !disabled && { background: palette.redDark, }, className, ], itemContent: [ classNames.itemContent, { flex: '0 1 auto', minWidth: 0, // CSS below is needed for IE 11 to properly truncate long persona names in the picker // and to clip the presence indicator (in all browsers) maxWidth: '100%', overflow: 'hidden', }, ], removeButton: [ classNames.removeButton, { borderRadius: 15, color: palette.neutralPrimary, flex: '0 0 auto', width: REMOVE_BUTTON_SIZE, height: REMOVE_BUTTON_SIZE, selectors: { ':hover': { background: palette.neutralTertiaryAlt, color: palette.neutralDark, }, }, }, selected && [ { color: palette.white, selectors: (_g = { ':hover': { color: palette.white, background: palette.themeDark, }, ':active': { color: palette.white, background: palette.themeDarker, } }, _g[Styling_1.HighContrastSelector] = { color: 'HighlightText', }, _g), }, invalid && { selectors: { ':hover': { background: palette.red, }, ':active': { background: palette.redDark, }, }, }, ], disabled && { selectors: (_h = {}, _h["." + BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon] = { color: semanticColors.buttonText, }, _h), }, ], subComponentStyles: { persona: { primaryText: personaPrimaryTextStyles, secondaryText: personaSecondaryTextStyles, }, personaCoin: { initials: personaCoinInitialsStyles, }, }, }; } exports.getStyles = getStyles; //# sourceMappingURL=PeoplePickerItem.styles.js.map