office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
439 lines • 15.1 kB
JavaScript
var _a, _b;
import { FontWeights, concatStyleSets, getFocusStyle, HighContrastSelector, getPlaceholderStyles } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
var ComboBoxHeight = 32;
var ComboBoxLineHeight = 30;
var ComboBoxCaretDownWidth = 32;
var ComboBoxOptionHeight = 36;
var getDisabledStyles = memoizeFunction(function (theme) {
var _a;
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.disabledBackground,
borderColor: semanticColors.disabledBackground,
color: semanticColors.disabledText,
cursor: 'default',
selectors: (_a = {},
_a[HighContrastSelector] = {
borderColor: 'GrayText',
color: 'GrayText'
},
_a)
};
});
var listOptionHighContrastStyles = {
selectors: (_a = {},
_a[HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
MsHighContrastAdjust: 'none'
},
_a)
};
var inputHighContrastStyles = {
selectors: (_b = {},
_b[HighContrastSelector] = {
color: 'WindowText',
backgroundColor: 'Window',
MsHighContrastAdjust: 'none'
},
_b)
};
export var getOptionStyles = memoizeFunction(function (theme, customStylesForAllOptions, customOptionStylesForCurrentOption, isPending, isHidden) {
var _a;
var palette = theme.palette, semanticColors = theme.semanticColors;
var option = {
textHoveredColor: semanticColors.menuItemTextHovered,
textSelectedColor: palette.neutralDark,
textDisabledColor: semanticColors.disabledText,
backgroundHoveredColor: semanticColors.menuItemBackgroundHovered,
backgroundPressedColor: semanticColors.menuItemBackgroundPressed
};
var optionStyles = {
root: [
theme.fonts.medium,
{
backgroundColor: isPending ? option.backgroundHoveredColor : 'transparent',
boxSizing: 'border-box',
cursor: 'pointer',
display: isHidden ? 'none' : 'block',
width: '100%',
height: 'auto',
minHeight: ComboBoxOptionHeight,
lineHeight: '20px',
padding: '0 8px',
position: 'relative',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: 'transparent',
borderRadius: 0,
wordWrap: 'break-word',
overflowWrap: 'break-word',
textAlign: 'left',
selectors: (_a = {},
_a[HighContrastSelector] = {
borderColor: 'Background'
},
_a['&.ms-Checkbox'] = {
display: 'flex',
alignItems: 'center'
},
_a['&.ms-Button--command:hover:active'] = {
backgroundColor: option.backgroundPressedColor
},
_a['.ms-Checkbox-label'] = {
width: '100%'
},
_a)
}
],
rootHovered: {
backgroundColor: option.backgroundHoveredColor,
color: option.textHoveredColor
},
rootFocused: {
backgroundColor: option.backgroundHoveredColor
},
rootChecked: [
{
backgroundColor: 'transparent',
color: option.textSelectedColor,
selectors: {
':hover': [
{
backgroundColor: option.backgroundHoveredColor
},
listOptionHighContrastStyles
]
}
},
getFocusStyle(theme, { inset: -1, isFocusedOnly: false }),
listOptionHighContrastStyles
],
rootDisabled: {
color: option.textDisabledColor,
cursor: 'default'
},
optionText: {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
minWidth: '0px',
maxWidth: '100%',
wordWrap: 'break-word',
overflowWrap: 'break-word',
display: 'inline-block'
},
optionTextWrapper: {
maxWidth: '100%',
display: 'flex',
alignItems: 'center'
}
};
return concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);
});
export var getCaretDownButtonStyles = memoizeFunction(function (theme, customStyles) {
var _a, _b;
var semanticColors = theme.semanticColors, fonts = theme.fonts;
var caret = {
buttonTextColor: semanticColors.bodySubtext,
buttonTextHoveredCheckedColor: semanticColors.buttonTextChecked,
buttonBackgroundHoveredColor: semanticColors.listItemBackgroundHovered,
buttonBackgroundCheckedColor: semanticColors.listItemBackgroundChecked,
buttonBackgroundCheckedHoveredColor: semanticColors.listItemBackgroundCheckedHovered
};
var buttonHighContrastStyles = {
selectors: (_a = {},
_a[HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
MsHighContrastAdjust: 'none'
},
_a)
};
var styles = {
root: {
color: caret.buttonTextColor,
fontSize: fonts.small.fontSize,
position: 'absolute',
height: ComboBoxHeight,
lineHeight: ComboBoxLineHeight,
width: ComboBoxCaretDownWidth,
textAlign: 'center',
cursor: 'default',
selectors: (_b = {},
_b[HighContrastSelector] = {
backgroundColor: 'ButtonFace',
borderColor: 'ButtonText',
color: 'ButtonText',
MsHighContrastAdjust: 'none'
},
_b)
},
icon: {
fontSize: fonts.small.fontSize
},
rootHovered: [
{
backgroundColor: caret.buttonBackgroundHoveredColor,
color: caret.buttonTextHoveredCheckedColor,
cursor: 'pointer'
},
buttonHighContrastStyles
],
rootPressed: [
{
backgroundColor: caret.buttonBackgroundCheckedColor,
color: caret.buttonTextHoveredCheckedColor
},
buttonHighContrastStyles
],
rootChecked: [
{
backgroundColor: caret.buttonBackgroundCheckedColor,
color: caret.buttonTextHoveredCheckedColor
},
buttonHighContrastStyles
],
rootCheckedHovered: [
{
backgroundColor: caret.buttonBackgroundCheckedHoveredColor,
color: caret.buttonTextHoveredCheckedColor
},
buttonHighContrastStyles
],
rootDisabled: getDisabledStyles(theme)
};
return concatStyleSets(styles, customStyles);
});
export var getStyles = memoizeFunction(function (theme, customStyles, comboBoxOptionWidth) {
var _a, _b, _c, _d, _e;
var semanticColors = theme.semanticColors, fonts = theme.fonts, effects = theme.effects;
var root = {
textColor: semanticColors.bodyText,
borderColor: semanticColors.inputBorder,
borderHoveredColor: semanticColors.inputBorderHovered,
borderPressedColor: semanticColors.inputFocusBorderAlt,
borderFocusedColor: semanticColors.inputFocusBorderAlt,
backgroundColor: semanticColors.bodyBackground,
erroredColor: semanticColors.errorText
};
var option = {
headerTextColor: semanticColors.menuHeader,
dividerBorderColor: semanticColors.bodyDivider
};
// placeholder style variables
var placeholderHighContrastStyles = {
selectors: (_a = {},
_a[HighContrastSelector] = {
color: 'GrayText'
},
_a)
};
var placeholderStyles = [
{
color: semanticColors.inputPlaceholderText
},
placeholderHighContrastStyles
];
var placeholderStylesHovered = [
{
color: semanticColors.inputTextHovered
},
placeholderHighContrastStyles
];
var disabledPlaceholderStyles = [
{
color: semanticColors.disabledText
},
placeholderHighContrastStyles
];
var ComboBoxRootHighContrastFocused = {
color: 'HighlightText',
borderColor: 'Highlight',
backgroundColor: 'Window',
MsHighContrastAdjust: 'none'
};
var getFocusBorder = function (color) {
var _a;
return ({
borderColor: color,
selectors: {
':after': {
pointerEvents: 'none',
content: "''",
position: 'absolute',
left: -1,
top: -1,
bottom: -1,
right: -1,
border: '2px solid ' + color,
borderRadius: effects.roundedCorner2,
selectors: (_a = {},
_a[HighContrastSelector] = {
borderColor: 'Highlight'
},
_a)
}
}
});
};
var styles = {
container: {},
label: {},
labelDisabled: {},
root: [
theme.fonts.medium,
{
boxShadow: 'none',
marginLeft: '0',
paddingTop: 1,
paddingBottom: 1,
paddingRight: ComboBoxCaretDownWidth,
paddingLeft: 8,
color: root.textColor,
position: 'relative',
outline: '0',
userSelect: 'none',
backgroundColor: root.backgroundColor,
cursor: 'text',
display: 'block',
height: ComboBoxHeight,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
boxSizing: 'border-box',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: root.borderColor,
borderRadius: effects.roundedCorner2,
selectors: {
'.ms-Label': {
display: 'inline-block',
marginBottom: '8px'
},
'&.is-open': {
borderColor: root.borderColor,
selectors: (_b = {},
_b[HighContrastSelector] = ComboBoxRootHighContrastFocused,
_b)
}
}
}
],
rootHovered: {
borderColor: root.borderHoveredColor,
selectors: (_c = {
'.ms-ComboBox-Input': [
{
color: semanticColors.inputTextHovered
},
getPlaceholderStyles(placeholderStylesHovered),
inputHighContrastStyles
]
},
_c[HighContrastSelector] = {
color: 'HighlightText',
backgroundColor: 'Window',
MsHighContrastAdjust: 'none',
borderColor: 'Highlight'
},
_c)
},
rootPressed: [
{
position: 'relative',
selectors: (_d = {},
_d[HighContrastSelector] = ComboBoxRootHighContrastFocused,
_d)
},
getFocusBorder(root.borderPressedColor)
],
rootFocused: [
{
selectors: (_e = {
'.ms-ComboBox-Input': [
{
color: semanticColors.inputTextHovered
},
inputHighContrastStyles
]
},
_e[HighContrastSelector] = ComboBoxRootHighContrastFocused,
_e)
},
getFocusBorder(root.borderFocusedColor)
],
rootDisabled: getDisabledStyles(theme),
rootError: {
borderColor: root.erroredColor,
selectors: {
':hover': {
borderColor: semanticColors.inputBorderHovered
}
}
},
rootDisallowFreeForm: {},
input: [
getPlaceholderStyles(placeholderStyles),
{
backgroundColor: root.backgroundColor,
color: root.textColor,
boxSizing: 'border-box',
width: '100%',
height: '28px',
borderStyle: 'none',
outline: 'none',
font: 'inherit',
textOverflow: 'ellipsis',
padding: '0',
selectors: {
'::-ms-clear': {
display: 'none'
}
}
},
inputHighContrastStyles
],
inputDisabled: [getDisabledStyles(theme), getPlaceholderStyles(disabledPlaceholderStyles)],
errorMessage: [
theme.fonts.small,
{
color: root.erroredColor,
marginTop: '5px'
}
],
callout: {
boxShadow: effects.elevation8
},
optionsContainerWrapper: {
width: comboBoxOptionWidth
},
optionsContainer: {
display: 'block'
},
header: [
fonts.medium,
{
fontWeight: FontWeights.semibold,
color: option.headerTextColor,
backgroundColor: 'none',
borderStyle: 'none',
height: ComboBoxOptionHeight,
lineHeight: ComboBoxOptionHeight,
cursor: 'default',
padding: '0 8px',
userSelect: 'none',
textAlign: 'left'
}
],
divider: {
height: 1,
backgroundColor: option.dividerBorderColor
}
};
return concatStyleSets(styles, customStyles);
});
//# sourceMappingURL=ComboBox.styles.js.map