Stefan Hacker
383 lines
18 KiB
JavaScript
383 lines
18 KiB
JavaScript
"use strict";
|
|
var _a, _b, _c, _d, _e;
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var Utilities_1 = require("../../Utilities");
|
|
var Positioning_1 = require("../../Positioning");
|
|
var Styling_1 = require("../../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["".concat(Styling_1.HighContrastSelector, ", ").concat(Styling_1.HighContrastSelectorWhite.replace('@media ', ''))] = tslib_1.__assign({}, (0, Styling_1.getHighContrastNoAdjustStyle)()),
|
|
_a);
|
|
var highContrastItemAndTitleStateMixin = {
|
|
selectors: tslib_1.__assign((_b = {}, _b[Styling_1.HighContrastSelector] = (_c = {
|
|
backgroundColor: 'Highlight',
|
|
borderColor: 'Highlight',
|
|
color: 'HighlightText'
|
|
},
|
|
_c[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus:after")] = {
|
|
borderColor: 'HighlightText',
|
|
},
|
|
_c), _b['.ms-Checkbox-checkbox'] = (_d = {},
|
|
_d[Styling_1.HighContrastSelector] = {
|
|
borderColor: 'HighlightText',
|
|
},
|
|
_d), _b), highContrastAdjustMixin),
|
|
};
|
|
var highContrastBorderState = {
|
|
selectors: (_e = {},
|
|
_e[Styling_1.HighContrastSelector] = {
|
|
borderColor: 'Highlight',
|
|
},
|
|
_e),
|
|
};
|
|
var MinimumScreenSelector = (0, Styling_1.getScreenSelector)(0, Styling_1.ScreenWidthMinMedium);
|
|
var getStyles = function (props) {
|
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
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 = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
|
|
var rootHoverFocusActiveSelectorNeutralDarkMixin = {
|
|
color: semanticColors.menuItemTextHovered,
|
|
};
|
|
var rootHoverFocusActiveSelectorNeutralPrimaryMixin = {
|
|
color: semanticColors.menuItemText,
|
|
};
|
|
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: 0,
|
|
position: 'relative',
|
|
border: '1px solid transparent',
|
|
borderRadius: 0,
|
|
wordWrap: 'break-word',
|
|
overflowWrap: 'break-word',
|
|
textAlign: 'left',
|
|
'.ms-Button-flexContainer': {
|
|
width: '100%',
|
|
},
|
|
},
|
|
];
|
|
var dropdownHeaderStyle = [
|
|
globalClassnames.dropdownItemHeader,
|
|
tslib_1.__assign(tslib_1.__assign({}, fonts.medium), { fontWeight: Styling_1.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', selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
|
|
_a) }),
|
|
];
|
|
var selectedItemBackgroundColor = semanticColors.menuItemBackgroundPressed;
|
|
var itemSelectors = function (isSelected) {
|
|
var _a, _b;
|
|
if (isSelected === void 0) { isSelected = false; }
|
|
return {
|
|
selectors: (_a = {
|
|
'&:hover': [
|
|
{
|
|
color: semanticColors.menuItemTextHovered,
|
|
backgroundColor: !isSelected ? semanticColors.menuItemBackgroundHovered : selectedItemBackgroundColor,
|
|
},
|
|
highContrastItemAndTitleStateMixin,
|
|
],
|
|
'&.is-multi-select:hover': [
|
|
{ backgroundColor: !isSelected ? 'transparent' : selectedItemBackgroundColor },
|
|
highContrastItemAndTitleStateMixin,
|
|
],
|
|
'&:active:hover': [
|
|
{
|
|
color: semanticColors.menuItemTextHovered,
|
|
backgroundColor: !isSelected
|
|
? semanticColors.menuItemBackgroundPressed
|
|
: semanticColors.menuItemBackgroundHovered,
|
|
},
|
|
highContrastItemAndTitleStateMixin,
|
|
]
|
|
},
|
|
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus:after, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:after")] = (_b = {
|
|
left: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 0
|
|
},
|
|
_b[Styling_1.HighContrastSelector] = {
|
|
inset: '2px',
|
|
},
|
|
_b),
|
|
_a[Styling_1.HighContrastSelector] = {
|
|
border: 'none',
|
|
},
|
|
_a),
|
|
};
|
|
};
|
|
var dropdownItemSelected = tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownItemStyle, true), [
|
|
{
|
|
backgroundColor: selectedItemBackgroundColor,
|
|
color: semanticColors.menuItemTextHovered,
|
|
},
|
|
itemSelectors(true),
|
|
highContrastItemAndTitleStateMixin,
|
|
], false);
|
|
var dropdownItemDisabled = tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownItemStyle, true), [
|
|
{
|
|
color: semanticColors.disabledText,
|
|
cursor: 'default',
|
|
selectors: (_b = {},
|
|
_b[Styling_1.HighContrastSelector] = {
|
|
color: 'GrayText',
|
|
border: 'none',
|
|
},
|
|
_b),
|
|
},
|
|
], false);
|
|
var titleOpenBorderRadius = calloutRenderEdge === Positioning_1.RectangleEdge.bottom
|
|
? "".concat(effects.roundedCorner2, " ").concat(effects.roundedCorner2, " 0 0")
|
|
: "0 0 ".concat(effects.roundedCorner2, " ").concat(effects.roundedCorner2);
|
|
var calloutOpenBorderRadius = calloutRenderEdge === Positioning_1.RectangleEdge.bottom
|
|
? "0 0 ".concat(effects.roundedCorner2, " ").concat(effects.roundedCorner2)
|
|
: "".concat(effects.roundedCorner2, " ").concat(effects.roundedCorner2, " 0 0");
|
|
return {
|
|
root: [globalClassnames.root, className],
|
|
label: globalClassnames.label,
|
|
dropdown: [
|
|
globalClassnames.dropdown,
|
|
Styling_1.normalize,
|
|
fonts.medium,
|
|
{
|
|
color: semanticColors.menuItemText,
|
|
borderColor: semanticColors.focusBorder,
|
|
position: 'relative',
|
|
outline: 0,
|
|
userSelect: 'none',
|
|
selectors: (_c = {},
|
|
_c['&:hover .' + globalClassnames.title] = [
|
|
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
|
|
{ borderColor: isOpen ? palette.neutralSecondary : palette.neutralPrimary },
|
|
highContrastBorderState,
|
|
],
|
|
_c['&:focus .' + globalClassnames.title] = [
|
|
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
|
|
{ selectors: (_d = {}, _d[Styling_1.HighContrastSelector] = { color: 'Highlight' }, _d) },
|
|
],
|
|
_c['&:focus:after'] = [
|
|
{
|
|
pointerEvents: 'none',
|
|
content: "''",
|
|
position: 'absolute',
|
|
boxSizing: 'border-box',
|
|
top: '0px',
|
|
left: '0px',
|
|
width: '100%',
|
|
height: '100%',
|
|
// see https://github.com/microsoft/fluentui/pull/9182 for semantic color disc
|
|
border: !disabled ? "2px solid ".concat(palette.themePrimary) : 'none',
|
|
borderRadius: '2px',
|
|
selectors: (_e = {},
|
|
_e[Styling_1.HighContrastSelector] = {
|
|
color: 'Highlight',
|
|
},
|
|
_e),
|
|
},
|
|
],
|
|
_c['&:active .' + globalClassnames.title] = [
|
|
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
|
|
{ borderColor: palette.themePrimary },
|
|
highContrastBorderState,
|
|
],
|
|
_c['&:hover .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
|
|
_c['&:focus .' + globalClassnames.caretDown] = [
|
|
!disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
|
|
{ selectors: (_f = {}, _f[Styling_1.HighContrastSelector] = { color: 'Highlight' }, _f) },
|
|
],
|
|
_c['&:active .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
|
|
_c['&:hover .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
|
|
_c['&:focus .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
|
|
_c['&:active .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
|
|
_c['&:hover .' + globalClassnames.titleHasError] = borderColorError,
|
|
_c['&:active .' + globalClassnames.titleHasError] = borderColorError,
|
|
_c),
|
|
},
|
|
isOpen && 'is-open',
|
|
disabled && 'is-disabled',
|
|
required && 'is-required',
|
|
required &&
|
|
!hasLabel && {
|
|
selectors: (_g = {
|
|
':before': {
|
|
content: "'*'",
|
|
color: semanticColors.errorText,
|
|
position: 'absolute',
|
|
top: -5,
|
|
right: -10,
|
|
}
|
|
},
|
|
_g[Styling_1.HighContrastSelector] = {
|
|
selectors: {
|
|
':after': {
|
|
right: -14, // moving the * 4 pixel to right to alleviate border clipping in HC mode.
|
|
},
|
|
},
|
|
},
|
|
_g),
|
|
},
|
|
],
|
|
title: [
|
|
globalClassnames.title,
|
|
Styling_1.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: (_h = {},
|
|
_h[Styling_1.HighContrastSelector] = tslib_1.__assign({ border: '1px solid GrayText', color: 'GrayText', backgroundColor: 'Window' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
|
|
_h),
|
|
},
|
|
],
|
|
caretDownWrapper: [
|
|
globalClassnames.caretDownWrapper,
|
|
{
|
|
height: DROPDOWN_HEIGHT,
|
|
lineHeight: DROPDOWN_HEIGHT - 2, // height minus the border
|
|
paddingTop: 1,
|
|
position: 'absolute',
|
|
right: 8,
|
|
top: 0,
|
|
},
|
|
!disabled && {
|
|
cursor: 'pointer',
|
|
},
|
|
],
|
|
caretDown: [
|
|
globalClassnames.caretDown,
|
|
{ color: palette.neutralSecondary, fontSize: fonts.small.fontSize, pointerEvents: 'none' },
|
|
disabled && {
|
|
color: semanticColors.disabledText,
|
|
selectors: (_j = {},
|
|
_j[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
|
|
_j),
|
|
},
|
|
],
|
|
errorMessage: tslib_1.__assign(tslib_1.__assign({ color: semanticColors.errorText }, theme.fonts.small), { paddingTop: 5 }),
|
|
callout: [
|
|
globalClassnames.callout,
|
|
{
|
|
boxShadow: effects.elevation8,
|
|
borderRadius: calloutOpenBorderRadius,
|
|
selectors: (_k = {},
|
|
_k['.ms-Callout-main'] = { borderRadius: calloutOpenBorderRadius },
|
|
_k),
|
|
},
|
|
calloutClassName,
|
|
],
|
|
dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },
|
|
dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],
|
|
dropdownItem: tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownItemStyle, true), [itemSelectors()], false),
|
|
dropdownItemSelected: dropdownItemSelected,
|
|
dropdownItemDisabled: dropdownItemDisabled,
|
|
dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],
|
|
dropdownItemHidden: tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownItemStyle, true), [{ display: 'none' }], false),
|
|
dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],
|
|
dropdownDividerHidden: [globalClassnames.dropdownDivider, { display: 'none' }],
|
|
dropdownOptionText: [
|
|
globalClassnames.dropdownOptionText,
|
|
{
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
minWidth: 0,
|
|
maxWidth: '100%',
|
|
wordWrap: 'break-word',
|
|
overflowWrap: 'break-word',
|
|
margin: '1px',
|
|
},
|
|
],
|
|
dropdownItemHeader: dropdownHeaderStyle,
|
|
dropdownItemHeaderHidden: tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownHeaderStyle, true), [{ display: 'none' }], false),
|
|
subComponentStyles: {
|
|
label: { root: { display: 'inline-block' } },
|
|
multiSelectItem: {
|
|
root: {
|
|
padding: 0,
|
|
},
|
|
label: {
|
|
alignSelf: 'stretch',
|
|
padding: '0 8px',
|
|
width: '100%',
|
|
},
|
|
input: {
|
|
selectors: (_l = {},
|
|
// eslint-disable-next-line @fluentui/max-len
|
|
_l[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus + label::before, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus + label::before")] = {
|
|
outlineOffset: '0px',
|
|
},
|
|
_l),
|
|
},
|
|
},
|
|
panel: {
|
|
root: [panelClassName],
|
|
main: {
|
|
selectors: (_m = {},
|
|
// In case of extra small screen sizes
|
|
_m[MinimumScreenSelector] = {
|
|
// panelWidth xs
|
|
width: 272,
|
|
},
|
|
_m),
|
|
},
|
|
contentInner: { padding: '0 0 20px' },
|
|
},
|
|
},
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
//# sourceMappingURL=Dropdown.styles.js.map
|