office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
360 lines • 13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var ComboBoxHeight = 32;
var ComboBoxLineHeight = 30;
var ComboBoxCaretDownWidth = 32;
var ComboBoxOptionHeight = 36;
var getDisabledStyles = Utilities_1.memoizeFunction(function (theme) {
var _a;
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.disabledBackground,
borderColor: semanticColors.disabledBackground,
color: semanticColors.disabledText,
cursor: 'default',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
borderColor: 'GrayText',
color: 'GrayText'
},
_a)
};
});
var getListOptionHighContrastStyles = Utilities_1.memoizeFunction(function (theme) {
var _a;
return {
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
MsHighContrastAdjust: 'none'
},
_a)
};
});
exports.getOptionStyles = Utilities_1.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[Styling_1.HighContrastSelector] = {
borderColor: 'Background'
},
_a['&.ms-Checkbox'] = {
display: 'flex',
alignItems: 'center'
},
_a['&.ms-Button--command:hover:active'] = {
backgroundColor: option.backgroundPressedColor
},
_a)
}
],
rootHovered: {
backgroundColor: option.backgroundHoveredColor,
color: option.textHoveredColor
},
rootFocused: {
backgroundColor: option.backgroundHoveredColor
},
rootChecked: [
{
backgroundColor: 'transparent',
color: option.textSelectedColor,
selectors: {
':hover': {
backgroundColor: option.backgroundHoveredColor
}
}
},
Styling_1.getFocusStyle(theme, { inset: -1, isFocusedOnly: false }),
getListOptionHighContrastStyles(theme)
],
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 Styling_1.concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);
});
exports.getCaretDownButtonStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
var _a;
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 styles = {
root: {
color: caret.buttonTextColor,
fontSize: fonts.small.fontSize,
position: 'absolute',
// The negative positioning accounts for the 1px root border now that box-sizing is border-box
top: '-1px',
right: '-1px',
height: ComboBoxHeight,
lineHeight: ComboBoxLineHeight,
width: ComboBoxCaretDownWidth,
textAlign: 'center',
cursor: 'default',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
backgroundColor: 'ButtonFace',
borderColor: 'ButtonText',
color: 'ButtonText',
MsHighContrastAdjust: 'none'
},
_a)
},
icon: {
fontSize: fonts.small.fontSize
},
rootHovered: {
backgroundColor: caret.buttonBackgroundHoveredColor,
color: caret.buttonTextHoveredCheckedColor,
cursor: 'pointer'
},
rootPressed: {
backgroundColor: caret.buttonBackgroundCheckedColor,
color: caret.buttonTextHoveredCheckedColor
},
rootChecked: {
backgroundColor: caret.buttonBackgroundCheckedColor,
color: caret.buttonTextHoveredCheckedColor
},
rootCheckedHovered: {
backgroundColor: caret.buttonBackgroundCheckedHoveredColor,
color: caret.buttonTextHoveredCheckedColor
},
rootDisabled: getDisabledStyles(theme)
};
return Styling_1.concatStyleSets(styles, customStyles);
});
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles, comboBoxOptionWidth) {
var _a, _b, _c, _d;
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 placeholderStyles = {
color: semanticColors.inputPlaceholderText
};
var placeholderStylesHovered = {
color: semanticColors.inputTextHovered
};
var disabledPlaceholderStyles = {
color: semanticColors.disabledText
};
var ComboBoxRootHighContrastFocused = {
color: 'HighlightText',
borderColor: 'Highlight',
backgroundColor: 'Window',
borderWidth: '2px',
MsHighContrastAdjust: 'none',
paddingLeft: '11px',
paddingTop: '0',
paddingBottom: '0',
selectors: {
'.ms-ComboBox-CaretDown-button': {
// Negative positioning to account for the 2px border
right: '-2px',
top: '-2px'
}
}
};
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,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: root.borderColor,
borderRadius: effects.roundedCorner2,
cursor: 'text',
display: 'block',
height: ComboBoxHeight,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
boxSizing: 'border-box',
selectors: {
'.ms-Label': {
display: 'inline-block',
marginBottom: '8px'
},
'&.is-open': {
borderColor: root.borderColor,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
_a)
}
}
}
],
rootHovered: {
borderColor: root.borderHoveredColor,
selectors: (_b = {
'.ms-ComboBox-Input': [{ color: semanticColors.inputTextHovered }, Styling_1.getPlaceholderStyles(placeholderStylesHovered)]
},
_b[Styling_1.HighContrastSelector] = {
color: 'HighlightText',
borderColor: 'Highlight',
backgroundColor: 'Window',
MsHighContrastAdjust: 'none'
},
_b)
},
rootPressed: {
borderColor: root.borderPressedColor,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
_c)
},
rootFocused: {
borderColor: root.borderFocusedColor,
selectors: (_d = {
'.ms-ComboBox-Input': {
color: semanticColors.inputTextHovered
}
},
_d[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
_d)
},
rootDisabled: getDisabledStyles(theme),
rootError: {
borderColor: root.erroredColor,
marginBottom: '5px'
},
rootDisallowFreeForm: {},
input: [
Styling_1.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'
}
}
}
],
inputDisabled: [getDisabledStyles(theme), Styling_1.getPlaceholderStyles(disabledPlaceholderStyles)],
errorMessage: [
theme.fonts.small,
{
color: root.erroredColor
}
],
callout: {
boxShadow: effects.elevation8
},
optionsContainerWrapper: {
width: comboBoxOptionWidth
},
optionsContainer: {
display: 'block'
},
header: [
fonts.medium,
{
fontWeight: Styling_1.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 Styling_1.concatStyleSets(styles, customStyles);
});
//# sourceMappingURL=ComboBox.styles.js.map