office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
308 lines • 13.9 kB
JavaScript
var _a, _b, _c;
import * as tslib_1 from "tslib";
import { IsFocusVisibleClassName } from '../../Utilities';
import { RectangleEdge } from '../../utilities/positioning';
import { FontWeights, HighContrastSelector, getGlobalClassNames, normalize, HighContrastSelectorWhite, getScreenSelector, ScreenWidthMinMedium } from '../../Styling';
var GlobalClassNames = {
root: 'ms-Dropdown-container',
label: 'ms-Dropdown-label',
dropdown: 'ms-Dropdown',
title: 'ms-Dropdown-title',
caretDownWrapper: 'ms-Dropdown-caretDownWrapper',
caretDown: 'ms-Dropdown-caretDown',
callout: 'ms-Dropdown-callout',
panel: 'ms-Dropdown-panel',
dropdownItems: 'ms-Dropdown-items',
dropdownItem: 'ms-Dropdown-item',
dropdownDivider: 'ms-Dropdown-divider',
dropdownOptionText: 'ms-Dropdown-optionText',
dropdownItemHeader: 'ms-Dropdown-header',
titleIsPlaceHolder: 'ms-Dropdown-titleIsPlaceHolder',
titleHasError: 'ms-Dropdown-title--hasError'
};
var DROPDOWN_HEIGHT = 32;
var DROPDOWN_ITEM_HEIGHT = 36;
var highContrastAdjustMixin = (_a = {},
_a[HighContrastSelector + ", " + HighContrastSelectorWhite.replace('@media ', '')] = {
MsHighContrastAdjust: 'none'
},
_a);
var highContrastItemAndTitleStateMixin = {
selectors: tslib_1.__assign((_b = {}, _b[HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
selectors: {
':hover': {
color: 'HighlightText' // overrides the hover styling for buttons that are also selected
}
}
}, _b), highContrastAdjustMixin)
};
var highContrastBorderState = {
selectors: (_c = {},
_c[HighContrastSelector] = {
borderColor: 'Highlight'
},
_c)
};
var MinimumScreenSelector = getScreenSelector(0, ScreenWidthMinMedium);
export var getStyles = function (props) {
var _a, _b, _c, _d, _e, _f, _g;
var theme = props.theme, hasError = props.hasError, hasLabel = props.hasLabel, className = props.className, isOpen = props.isOpen, disabled = props.disabled, required = props.required, isRenderingPlaceholder = props.isRenderingPlaceholder, panelClassName = props.panelClassName, calloutClassName = props.calloutClassName, calloutRenderEdge = props.calloutRenderEdge;
if (!theme) {
throw new Error('theme is undefined or null in base Dropdown getStyles function.');
}
var globalClassnames = getGlobalClassNames(GlobalClassNames, theme);
var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
var rootHoverFocusActiveSelectorNeutralDarkMixin = {
color: semanticColors.menuItemTextHovered
};
var rootHoverFocusActiveSelectorNeutralPrimaryMixin = {
color: palette.neutralPrimary
};
var borderColorError = {
borderColor: semanticColors.errorText
};
var dropdownItemStyle = [
globalClassnames.dropdownItem,
{
backgroundColor: 'transparent',
boxSizing: 'border-box',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
padding: '0 8px',
width: '100%',
minHeight: DROPDOWN_ITEM_HEIGHT,
lineHeight: 20,
height: 'auto',
position: 'relative',
border: '1px solid transparent',
borderRadius: 0,
wordWrap: 'break-word',
overflowWrap: 'break-word',
textAlign: 'left'
}
];
var itemSelectors = function (isSelected) {
var _a;
if (isSelected === void 0) { isSelected = false; }
return {
selectors: (_a = {
'&:hover:focus': {
color: palette.neutralDark,
backgroundColor: !isSelected ? palette.neutralLighter : palette.neutralLight
},
'&:focus': {
backgroundColor: !isSelected ? 'transparent' : palette.neutralLight
},
'&:active': {
color: palette.neutralDark,
backgroundColor: !isSelected ? palette.neutralLighter : palette.neutralLight
}
},
_a[HighContrastSelector] = {
borderColor: 'Window'
},
_a["." + IsFocusVisibleClassName + " &:focus:after"] = {
left: 0,
top: 0,
bottom: 0,
right: 0
},
_a)
};
};
var dropdownItemSelected = dropdownItemStyle.concat([
{
backgroundColor: palette.neutralLight,
color: palette.neutralDark
},
itemSelectors(true),
highContrastItemAndTitleStateMixin
]);
var dropdownItemDisabled = dropdownItemStyle.concat([
{
color: semanticColors.disabledText,
cursor: 'default'
}
]);
var titleOpenBorderRadius = calloutRenderEdge === RectangleEdge.bottom
? effects.roundedCorner2 + " " + effects.roundedCorner2 + " 0 0"
: "0 0 " + effects.roundedCorner2 + " " + effects.roundedCorner2;
var calloutOpenBorderRadius = calloutRenderEdge === RectangleEdge.bottom
? "0 0 " + effects.roundedCorner2 + " " + effects.roundedCorner2
: effects.roundedCorner2 + " " + effects.roundedCorner2 + " 0 0";
return {
root: [globalClassnames.root, className],
label: globalClassnames.label,
dropdown: [
globalClassnames.dropdown,
normalize,
fonts.medium,
{
color: palette.neutralPrimary,
borderColor: palette.neutralSecondary,
position: 'relative',
outline: 0,
userSelect: 'none',
selectors: (_a = {},
_a['&:hover .' + globalClassnames.title] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{ borderColor: !isOpen ? palette.neutralPrimary : palette.themePrimary },
highContrastBorderState
],
_a['&:focus .' + globalClassnames.title] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{
borderColor: palette.themePrimary /* see https://github.com/OfficeDev/office-ui-fabric-react/pull/9182 for semantic color disc */
},
highContrastItemAndTitleStateMixin
],
_a['&:active .' + globalClassnames.title] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{ borderColor: palette.themePrimary },
highContrastBorderState
],
_a['&:hover .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_a['&:focus .' + globalClassnames.caretDown] = [
!disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
{ selectors: tslib_1.__assign((_b = {}, _b[HighContrastSelector] = { color: 'HighlightText' }, _b), highContrastAdjustMixin) }
],
_a['&:active .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_a['&:hover .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_a['&:focus .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_a['&:active .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_a['&:hover .' + globalClassnames.titleHasError] = borderColorError,
_a['&:active .' + globalClassnames.titleHasError] = borderColorError,
_a['&:focus .' + globalClassnames.titleHasError] = borderColorError,
_a)
},
isOpen && 'is-open',
disabled && 'is-disabled',
required && 'is-required',
required &&
!hasLabel && {
selectors: (_c = {
':after': {
content: "'*'",
color: semanticColors.errorText,
position: 'absolute',
top: -5,
right: -10
}
},
_c[HighContrastSelector] = {
selectors: {
':after': {
right: -14 // moving the * 4 pixel to right to alleviate border clipping in HC mode.
}
}
},
_c)
}
],
title: [
globalClassnames.title,
normalize,
{
backgroundColor: semanticColors.inputBackground,
borderWidth: 1,
borderStyle: 'solid',
borderColor: semanticColors.inputBorder,
borderRadius: isOpen ? titleOpenBorderRadius : effects.roundedCorner2,
cursor: 'pointer',
display: 'block',
height: DROPDOWN_HEIGHT,
lineHeight: DROPDOWN_HEIGHT - 2,
padding: "0 28px 0 8px",
position: 'relative',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
},
isRenderingPlaceholder && [globalClassnames.titleIsPlaceHolder, { color: semanticColors.inputPlaceholderText }],
hasError && [globalClassnames.titleHasError, borderColorError],
disabled && {
backgroundColor: semanticColors.disabledBackground,
border: 'none',
color: semanticColors.disabledText,
cursor: 'default',
selectors: (_d = {}, _d[HighContrastSelector] = { border: '1px solid GrayText', color: 'GrayText' }, _d)
}
],
caretDownWrapper: [
globalClassnames.caretDownWrapper,
{
position: 'absolute',
top: 1,
right: 8,
height: DROPDOWN_HEIGHT,
lineHeight: DROPDOWN_HEIGHT - 2 // height minus the border
},
!disabled && {
cursor: 'pointer'
}
],
caretDown: [
globalClassnames.caretDown,
{ color: palette.neutralSecondary, fontSize: fonts.small.fontSize, pointerEvents: 'none' },
disabled && { color: semanticColors.disabledText, selectors: (_e = {}, _e[HighContrastSelector] = { color: 'GrayText' }, _e) }
],
errorMessage: tslib_1.__assign({ color: semanticColors.errorText }, theme.fonts.small, { paddingTop: 5 }),
callout: [
globalClassnames.callout,
{
boxShadow: effects.elevation8,
borderRadius: calloutOpenBorderRadius,
selectors: (_f = {},
_f['.ms-Callout-main'] = { borderRadius: calloutOpenBorderRadius },
_f)
},
calloutClassName
],
dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },
dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],
dropdownItem: dropdownItemStyle.concat([itemSelectors()]),
dropdownItemSelected: dropdownItemSelected,
dropdownItemDisabled: dropdownItemDisabled,
dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],
dropdownItemHidden: dropdownItemStyle.concat([{ display: 'none' }]),
dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],
dropdownOptionText: [
globalClassnames.dropdownOptionText,
{
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
minWidth: 0,
maxWidth: '100%',
wordWrap: 'break-word',
overflowWrap: 'break-word',
margin: '1px'
}
],
dropdownItemHeader: [
globalClassnames.dropdownItemHeader,
tslib_1.__assign({}, fonts.medium, { fontWeight: FontWeights.semibold, color: semanticColors.menuHeader, background: 'none', backgroundColor: 'transparent', border: 'none', height: DROPDOWN_ITEM_HEIGHT, lineHeight: DROPDOWN_ITEM_HEIGHT, cursor: 'default', padding: '0 8px', userSelect: 'none', textAlign: 'left' })
],
subComponentStyles: {
label: { root: { display: 'inline-block' } },
panel: {
root: [panelClassName],
main: {
selectors: (_g = {},
// In case of extra small screen sizes
_g[MinimumScreenSelector] = {
// panelWidth xs
width: 272
},
_g)
},
contentInner: { padding: '0 0 20px' }
}
}
};
};
//# sourceMappingURL=Dropdown.styles.js.map