@fluentui/react
Version:
Reusable React components for building web experiences.
167 lines • 7.02 kB
JavaScript
define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = getStyles;
var GlobalClassNames = {
root: 'ms-BasePicker',
label: 'ms-BasePicker-label',
text: 'ms-BasePicker-text',
itemsWrapper: 'ms-BasePicker-itemsWrapper',
input: 'ms-BasePicker-input',
error: 'ms-BasePicker-error',
};
function getStyles(props) {
var _a, _b, _c;
var className = props.className, theme = props.theme, isFocused = props.isFocused, inputClassName = props.inputClassName, disabled = props.disabled, hasErrorMessage = props.hasErrorMessage;
if (!theme) {
throw new Error('theme is undefined or null in base BasePicker getStyles function.');
}
var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
var inputBorder = semanticColors.inputBorder, inputBorderHovered = semanticColors.inputBorderHovered, inputFocusBorderAlt = semanticColors.inputFocusBorderAlt;
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
// placeholder style constants
var placeholderStyles = [
fonts.medium,
{
color: semanticColors.inputPlaceholderText,
opacity: 1,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
color: 'GrayText',
},
_a),
},
];
var disabledPlaceholderStyles = {
color: semanticColors.disabledText,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
color: 'GrayText',
},
_b),
};
// The following lines are to create a semi-transparent color overlay for the disabled state with designer's approval.
// @todo: investigate the performance cost of the calculation below and apply if negligible.
// Replacing with a static color for now.
// const rgbColor: IRGB | undefined = cssColor(palette.neutralQuaternaryAlt);
// const disabledOverlayColor = rgbColor ? `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.29)` : 'transparent';
var disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';
var focusColor = isFocused && !disabled && (hasErrorMessage ? semanticColors.errorText : inputFocusBorderAlt);
return {
root: [classNames.root, className, { position: 'relative' }],
error: [
classNames.error,
{
fontSize: 12,
fontWeight: 400,
color: semanticColors.errorText,
margin: 0,
paddingTop: 5,
display: hasErrorMessage ? 'flex' : 'none',
alignItems: 'center',
},
],
text: [
classNames.text,
{
display: 'flex',
position: 'relative',
flexWrap: 'wrap',
alignItems: 'center',
boxSizing: 'border-box',
minWidth: 180,
minHeight: 30,
border: "1px solid ".concat(inputBorder),
borderRadius: effects.roundedCorner2,
},
!isFocused &&
!disabled && {
selectors: {
':hover': {
borderColor: inputBorderHovered,
},
},
},
focusColor && (0, Styling_1.getInputFocusStyle)(focusColor, effects.roundedCorner2),
disabled && {
borderColor: disabledOverlayColor,
selectors: (_c = {
':after': {
content: '""',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
background: disabledOverlayColor,
}
},
_c[Styling_1.HighContrastSelector] = {
borderColor: 'GrayText',
selectors: {
':after': {
background: 'none',
},
},
},
_c),
},
hasErrorMessage && {
borderColor: semanticColors.errorText,
selectors: {
':hover': {
borderColor: semanticColors.errorText,
},
},
},
],
itemsWrapper: [
classNames.itemsWrapper,
{
display: 'flex',
flexWrap: 'wrap',
maxWidth: '100%',
},
],
input: [
classNames.input,
fonts.medium,
{
height: 30,
border: 'none',
flexGrow: 1,
outline: 'none',
padding: '0 6px 0',
alignSelf: 'flex-end',
borderRadius: effects.roundedCorner2,
backgroundColor: 'transparent',
color: semanticColors.inputText,
selectors: {
'::-ms-clear': {
display: 'none',
},
'&:placeholder-shown': {
textOverflow: 'ellipsis',
},
},
},
(0, Styling_1.getPlaceholderStyles)(placeholderStyles),
disabled && (0, Styling_1.getPlaceholderStyles)(disabledPlaceholderStyles),
inputClassName,
],
screenReaderText: Styling_1.hiddenContentStyle,
subComponentStyles: {
label: {},
callout: {
// Picker suggestions already manage overflow and scrolling items into view
// for this to work at all screen sizes, we need Callout to not also have overflow
calloutMain: {
overflow: 'unset',
maxHeight: '100%',
},
},
},
};
}
});
//# sourceMappingURL=BasePicker.styles.js.map