office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
280 lines (278 loc) • 11.6 kB
JavaScript
define(["require", "exports", "tslib", "../../Styling", "../../Utilities"], function (require, exports, tslib_1, Styling_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MS_HIGHCONTRAST_ACTIVE = '@media screen and (-ms-high-contrast: active)';
var ComboBoxHeight = '32px';
var ComboBoxLineHeight = '30px';
var ComboxBoxCaretDownWidth = '32px';
var ComboBoxOptionHeight = '36px';
var getDisabledStyles = Utilities_1.memoizeFunction(function (theme) {
var semanticColors = theme.semanticColors, palette = theme.palette;
return _a = {
backgroundColor: semanticColors.disabledBackground,
borderColor: semanticColors.disabledBackground,
color: semanticColors.disabledText,
cursor: 'default'
},
_a[MS_HIGHCONTRAST_ACTIVE] = {
borderColor: 'GrayText',
color: 'GrayText'
},
_a;
var _a;
});
var getListOptionHighContrastStyles = Utilities_1.memoizeFunction(function (theme) {
var semanticColors = theme.semanticColors, palette = theme.palette;
return _a = {},
_a[MS_HIGHCONTRAST_ACTIVE] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
},
_a;
var _a;
});
exports.getOptionStyles = Utilities_1.memoizeFunction(function (theme, customStylesForAllOptions, customOptionStylesForCurrentOption) {
var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;
var ComboBoxOptionBackgroundSelected = semanticColors.menuItemBackgroundChecked;
var ComboBoxOptionBackgroundHovered = semanticColors.menuItemBackgroundHovered;
var ComboBoxOptionTextColorHovered = palette.black;
var ComboBoxOptionTextColorSelected = palette.black;
var ComboBoxOptionTextColorDisabled = semanticColors.disabledText;
var ComboBoxOptionBackgroundDisabled = semanticColors.disabledBackground;
var optionStyles = {
root: [
(_a = {
backgroundColor: 'transparent',
boxSizing: 'border-box',
cursor: 'pointer',
display: 'block',
width: '100%',
height: 'auto',
minHeight: ComboBoxOptionHeight,
lineHeight: '20px',
// padding: '5px 16px',
paddingTop: '5px',
paddingRight: '16px',
paddingBottom: '5px',
paddingLeft: '16px',
position: 'relative',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: 'transparent',
wordWrap: 'break-word',
overflowWrap: 'break-word',
textAlign: 'left'
},
_a[MS_HIGHCONTRAST_ACTIVE] = {
borderColor: 'Background'
},
_a),
Styling_1.getFocusStyle(theme),
],
rootHovered: tslib_1.__assign({ backgroundColor: ComboBoxOptionBackgroundHovered, color: ComboBoxOptionTextColorHovered }, getListOptionHighContrastStyles(theme)),
rootFocused: {
backgroundColor: ComboBoxOptionBackgroundHovered
},
rootPressed: {
backgroundColor: ComboBoxOptionBackgroundHovered,
color: ComboBoxOptionTextColorHovered
},
rootChecked: [
{
backgroundColor: ComboBoxOptionBackgroundSelected,
color: ComboBoxOptionTextColorSelected
},
Styling_1.getFocusStyle(theme),
getListOptionHighContrastStyles(theme)
],
rootCheckedHovered: {
backgroundColor: ComboBoxOptionBackgroundSelected
},
rootDisabled: {
backgroundColor: ComboBoxOptionBackgroundDisabled,
color: ComboBoxOptionTextColorDisabled,
cursor: 'default',
' .ms-Button-flexContainer': {
justifyContent: 'flex-start'
}
},
optionText: {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
minWidth: '0px',
maxWidth: '100%',
wordWrap: 'break-word',
overflowWrap: 'break-word',
// margin: '1px',
marginTop: '1px',
marginRight: '1px',
marginBottom: '1px',
marginLeft: '1px',
},
};
return Styling_1.mergeStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);
var _a;
});
exports.getCaretDownButtonStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;
var caretButtonTextColor = palette.neutralDark;
var caretButtonBackgroundHovered = palette.neutralQuaternaryAlt;
var caretButtonBackgroundActive = palette.neutralTertiaryAlt;
var styles = {
root: (_a = {
color: caretButtonTextColor,
fontSize: Styling_1.FontSizes.small,
position: 'absolute',
height: ComboBoxHeight,
lineHeight: ComboBoxLineHeight,
width: ComboxBoxCaretDownWidth,
textAlign: 'center',
cursor: 'default'
},
_a[MS_HIGHCONTRAST_ACTIVE] = {
backgroundColor: 'ButtonFace',
borderColor: 'ButtonText',
color: 'ButtonText',
},
_a),
rootHovered: {
backgroundColor: caretButtonBackgroundHovered
},
rootPressed: {
backgroundColor: caretButtonBackgroundActive
},
rootDisabled: getDisabledStyles(theme),
};
return Styling_1.mergeStyleSets(styles, customStyles);
var _a;
});
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;
var ComboBoxRootBackground = semanticColors.bodyBackground;
var ComboBoxRootTextColor = semanticColors.bodyText;
var ComboBoxRootBorderColor = palette.neutralTertiaryAlt;
var ComboBoxRootBorderColorHovered = semanticColors.inputFocusBorderAlt;
var ComboBoxRootColorErrored = semanticColors.errorText;
var ComboBoxCalloutBorderColor = palette.neutralLight;
var ComboBoxOptionHeaderTextColor = semanticColors.menuHeader;
var ComboBoxOptionDividerBorderColor = semanticColors.bodyDivider;
var styles = {
container: {},
label: {},
root: [
fonts.medium,
{
boxShadow: 'none',
// margin: '0 0 10px 0',
marginTop: '0',
marginRight: '0',
marginBottom: '10px',
marginLeft: '0',
// padding: '0',
paddingTop: '0',
paddingRight: ComboxBoxCaretDownWidth,
paddingBottom: '0',
paddingLeft: '0',
color: ComboBoxRootTextColor,
position: 'relative',
outline: '0',
userSelect: 'none',
backgroundColor: ComboBoxRootBackground,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: ComboBoxRootBorderColor,
cursor: 'text',
display: 'block',
height: ComboBoxHeight,
lineHeight: ComboBoxLineHeight,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
boxSizing: 'content-box',
' .ms-Label': {
display: 'inline-block',
marginBottom: '8px',
}
}
],
rootHovered: (_a = {
borderColor: ComboBoxRootBorderColorHovered
},
_a[MS_HIGHCONTRAST_ACTIVE] = {
color: 'HighlightText',
borderColor: 'Highlight'
},
_a),
rootFocused: (_b = {
borderColor: ComboBoxRootBorderColorHovered
},
_b[MS_HIGHCONTRAST_ACTIVE] = {
color: 'HighlightText',
borderColor: 'Highlight'
},
_b),
rootDisabled: getDisabledStyles(theme),
rootError: {
borderColor: ComboBoxRootColorErrored
},
rootDisallowFreeForm: {},
input: {
boxSizing: 'border-box',
width: '100%',
height: '100%',
borderStyle: 'none',
outline: 'none',
font: 'inherit',
textOverflow: 'ellipsis',
paddingLeft: '12px'
},
inputDisabled: getDisabledStyles(theme),
caretDownButtonStyles: null,
errorMessage: {
color: ComboBoxRootColorErrored,
':before': {
content: '* ',
}
},
callout: {
boxShadow: '0 0px 5px 0px rgba(0, 0, 0, 0.4)',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: ComboBoxCalloutBorderColor,
},
optionsContainer: {
display: 'block'
},
header: [
fonts.medium,
{
fontWeight: Styling_1.FontWeights.semibold,
color: ComboBoxOptionHeaderTextColor,
backgroundColor: 'none',
borderStyle: 'none',
height: ComboBoxOptionHeight,
lineHeight: ComboBoxOptionHeight,
cursor: 'default',
// padding: '0px 16px',
paddingTop: '0',
paddingRight: '16px',
paddingBottom: '0',
paddingLeft: '16px',
userSelect: 'none',
textAlign: 'left'
}
],
divider: {
borderWidth: '1px',
borderStyle: 'solid',
borderColor: ComboBoxOptionDividerBorderColor
},
optionDefaultStyles: null,
};
return Styling_1.mergeStyleSets(styles, customStyles);
var _a, _b;
});
});
//# sourceMappingURL=ComboBox.styles.js.map