@fluentui/react
Version:
Reusable React components for building web experiences.
227 lines • 9.17 kB
JavaScript
define(["require", "exports", "tslib", "../../../../Styling", "../../../Button/BaseButton.classNames"], function (require, exports, tslib_1, Styling_1, BaseButton_classNames_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
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;
var PICKER_PERSONA_RADIUS = 15;
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 = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
var personaRootStyles = {
color: 'inherit',
};
// set text color to inherit to allow focus styles to control persona text colors
var personaPrimaryTextStyles = [
selected &&
!invalid &&
!disabled && {
color: 'inherit',
selectors: (_a = {
':hover': {
color: 'inherit',
}
},
_a[Styling_1.HighContrastSelector] = {
color: 'HighlightText',
},
_a),
},
((invalid && !selected) || (invalid && selected && disabled)) && {
color: 'inherit',
borderBottom: "2px dotted currentColor",
selectors: (_b = {},
_b[".".concat(classNames.root, ":hover &")] = {
// override Persona root:hover selector
color: 'inherit',
},
_b),
},
invalid &&
selected &&
!disabled && {
color: 'inherit',
borderBottom: "2px dotted currentColor",
selectors: {
':hover': {
color: 'inherit',
},
},
},
disabled && {
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
color: 'GrayText',
},
_c),
},
];
var personaSecondaryTextStyles = [
selected &&
!invalid &&
!disabled && {
color: 'inherit',
selectors: (_d = {
':hover': {
color: 'inherit',
}
},
_d[Styling_1.HighContrastSelector] = {
color: 'HighlightText',
},
_d),
},
];
var personaCoinInitialsStyles = [
invalid && {
fontSize: fonts.xLarge.fontSize,
},
];
return {
root: [
classNames.root,
(0, Styling_1.getFocusStyle)(theme, { inset: -2 }),
{
borderRadius: PICKER_PERSONA_RADIUS,
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,
{
selectors: (_f = {
':focus-within': {
background: palette.themePrimary,
color: palette.white,
}
},
_f[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'HighLight', background: 'Highlight' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_f),
},
],
invalid && [classNames.isInvalid],
invalid &&
selected &&
!disabled && {
':focus-within': {
background: palette.redDark,
color: palette.white,
},
},
((invalid && !selected) || (invalid && selected && disabled)) && {
color: 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: PICKER_PERSONA_RADIUS,
color: palette.neutralPrimary,
flex: '0 0 auto',
width: REMOVE_BUTTON_SIZE,
height: REMOVE_BUTTON_SIZE,
selectors: {
':hover': {
background: palette.neutralTertiaryAlt,
color: palette.neutralDark,
},
},
},
selected && [
(0, Styling_1.getFocusStyle)(theme, {
inset: 2,
borderColor: 'transparent',
highContrastStyle: { inset: 2, left: 1, top: 1, bottom: 1, right: 1, outlineColor: 'ButtonText' },
outlineColor: palette.white,
borderRadius: PICKER_PERSONA_RADIUS,
}),
{
selectors: (_g = {
':hover': {
color: palette.white,
background: palette.themeDark,
},
':active': {
color: palette.white,
background: palette.themeDarker,
},
':focus': {
color: palette.white,
}
},
_g[Styling_1.HighContrastSelector] = {
color: 'HighlightText',
},
_g),
},
invalid && {
selectors: {
':hover': {
color: palette.white,
background: palette.red,
},
':active': {
color: palette.white,
background: palette.redDark,
},
},
},
],
disabled && {
selectors: (_h = {},
_h[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = {
color: semanticColors.buttonText,
},
_h),
},
],
subComponentStyles: {
persona: {
root: personaRootStyles,
primaryText: personaPrimaryTextStyles,
secondaryText: personaSecondaryTextStyles,
},
personaCoin: {
initials: personaCoinInitialsStyles,
},
},
};
}
exports.getStyles = getStyles;
});
//# sourceMappingURL=PeoplePickerItem.styles.js.map