office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
343 lines • 11.8 kB
JavaScript
import { AnimationClassNames, FontSizes, getGlobalClassNames, HighContrastSelector, normalize } from '../../Styling';
var globalClassNames = {
root: 'ms-TextField',
description: 'ms-TextField-description',
errorMessage: 'ms-TextField-errorMessage',
field: 'ms-TextField-field',
fieldGroup: 'ms-TextField-fieldGroup',
prefix: 'ms-TextField-prefix',
suffix: 'ms-TextField-suffix',
wrapper: 'ms-TextField-wrapper',
multiline: 'ms-TextField--multiline',
borderless: 'ms-TextField--borderless',
underlined: 'ms-TextField--underlined',
unresizable: 'ms-TextField--unresizable',
required: 'is-required',
disabled: 'is-disabled',
active: 'is-active'
};
function getLabelStyles(props) {
var underlined = props.underlined, disabled = props.disabled;
return function () { return ({
root: [
underlined &&
disabled && {
color: props.theme.palette.neutralTertiary
},
underlined && {
fontSize: FontSizes.medium,
marginRight: 8,
paddingLeft: 12,
paddingRight: 0,
lineHeight: '22px',
height: 32
}
]
}); };
}
export function getStyles(props) {
var theme = props.theme, className = props.className, disabled = props.disabled, focused = props.focused, required = props.required, multiline = props.multiline, hasLabel = props.hasLabel, borderless = props.borderless, underlined = props.underlined, hasIcon = props.hasIcon, resizable = props.resizable, hasErrorMessage = props.hasErrorMessage, iconClass = props.iconClass, inputClassName = props.inputClassName;
var semanticColors = theme.semanticColors, palette = theme.palette;
var classNames = getGlobalClassNames(globalClassNames, theme);
var fieldPrefixSuffix = {
background: palette.neutralLighter,
color: palette.neutralSecondary,
display: 'flex',
alignItems: 'center',
padding: '0 10px',
lineHeight: 1,
whiteSpace: 'nowrap'
};
return {
root: [
classNames.root,
required && classNames.required,
disabled && classNames.disabled,
focused && classNames.active,
multiline && classNames.multiline,
borderless && classNames.borderless,
underlined && classNames.underlined,
normalize,
{
position: 'relative',
selectors: (_a = {},
_a[HighContrastSelector] = {
borderWidth: 2
},
_a)
},
focused && {
borderColor: semanticColors.inputFocusBorderAlt
},
underlined &&
!focused && {
border: "0px solid " + semanticColors.inputBorder
},
underlined &&
!disabled &&
!focused && {
selectors: {
':hover': {
borderColor: semanticColors.inputBorderHovered
}
}
},
className
],
wrapper: [
classNames.wrapper,
underlined && {
display: 'flex',
borderBottomWidth: 1,
borderBottomStyle: 'solid',
borderBottomColor: 'inherit',
width: '100%'
},
hasErrorMessage && {
borderColor: semanticColors.errorText,
selectors: {
'&:focus, &:hover': {
borderColor: semanticColors.errorText
}
}
},
hasErrorMessage &&
underlined &&
!disabled && {
borderBottom: "1px solid " + semanticColors.errorText,
selectors: {
':focus': {
borderBottom: "1px solid " + semanticColors.errorText
},
':hover': {
borderBottom: "1px solid " + semanticColors.errorText
}
}
},
underlined &&
disabled && {
borderBottomColor: semanticColors.disabledBackground
},
underlined &&
!disabled && {
selectors: {
':hover': {
selectors: (_b = {},
_b[HighContrastSelector] = {
borderColor: 'Highlight'
},
_b)
}
}
},
underlined &&
focused && {
selectors: (_c = {},
_c[HighContrastSelector] = {
borderColor: 'Highlight'
},
_c)
}
],
fieldGroup: [
classNames.fieldGroup,
normalize,
{
border: "1px solid " + semanticColors.inputBorder,
background: semanticColors.bodyBackground,
height: 32,
display: 'flex',
flexDirection: 'row',
alignItems: 'stretch',
position: 'relative',
selectors: {
':hover': {
selectors: (_d = {},
_d[HighContrastSelector] = {
borderColor: 'Highlight'
},
_d)
}
}
},
multiline && {
minHeight: '60px',
height: 'auto',
display: 'flex'
},
borderless && {
borderColor: 'transparent',
borderWidth: 0
},
!focused &&
!disabled && {
selectors: {
':hover': {
borderColor: semanticColors.inputBorderHovered
}
}
},
focused && {
borderColor: semanticColors.inputFocusBorderAlt,
selectors: (_e = {},
_e[HighContrastSelector] = {
borderWidth: 2,
borderColor: 'Highlight'
},
_e)
},
disabled && {
backgroundColor: semanticColors.disabledBackground,
borderColor: semanticColors.disabledBackground
},
underlined && {
flex: '1 1 0px',
borderWidth: 0,
textAlign: 'left'
},
underlined &&
disabled && {
backgroundColor: 'transparent'
},
hasErrorMessage && {
borderColor: semanticColors.errorText,
selectors: {
'&:focus, &:hover': {
borderColor: semanticColors.errorText
}
}
},
hasErrorMessage &&
focused && {
borderColor: semanticColors.errorText
},
!hasLabel &&
required && {
selectors: {
':after': {
content: "'*'",
color: semanticColors.errorText,
position: 'absolute',
top: -5,
right: -10
}
}
}
],
field: [
classNames.field,
normalize,
{
fontSize: FontSizes.medium,
borderRadius: 0,
border: 'none',
background: 'none',
backgroundColor: 'transparent',
color: semanticColors.bodyText,
padding: '0 12px',
width: '100%',
minWidth: 0,
textOverflow: 'ellipsis',
outline: 0,
selectors: {
'&:active, &:focus, &:hover': { outline: 0 },
'::-ms-clear': {
display: 'none'
},
'::placeholder': {
color: semanticColors.inputPlaceholderText,
opacity: 1
},
':-ms-input-placeholder': {
color: semanticColors.inputPlaceholderText,
opacity: 1
}
}
},
multiline &&
!resizable && [
classNames.unresizable,
{
resize: 'none'
}
],
multiline && {
lineHeight: 17,
flexGrow: 1,
paddingTop: 6,
overflow: 'auto',
width: '100%'
},
hasIcon && {
paddingRight: 24
},
multiline &&
hasIcon && {
paddingRight: 40
},
disabled && {
backgroundColor: 'transparent',
borderColor: 'transparent'
},
underlined && {
textAlign: 'left'
},
underlined &&
disabled && {
backgroundColor: 'transparent',
color: semanticColors.disabledText
},
focused && {
selectors: (_f = {},
_f[HighContrastSelector] = {
padding: '0 11px 0 11px'
},
_f)
},
inputClassName
],
icon: [
multiline && {
paddingRight: 24,
paddingBottom: 8,
alignItems: 'flex-end'
},
{
pointerEvents: 'none',
position: 'absolute',
bottom: 5,
right: 8,
top: 'auto',
fontSize: 16,
lineHeight: 18
},
iconClass
],
description: [
classNames.description,
{
color: semanticColors.bodySubtext,
fontSize: FontSizes.xSmall
}
],
errorMessage: [
classNames.errorMessage,
AnimationClassNames.slideDownIn20,
theme.fonts.small,
{
color: semanticColors.errorText,
margin: 0,
paddingTop: 5,
display: 'flex',
alignItems: 'center'
}
],
prefix: [classNames.prefix, fieldPrefixSuffix],
suffix: [classNames.suffix, fieldPrefixSuffix],
subComponentStyles: {
label: getLabelStyles(props)
}
};
var _a, _b, _c, _d, _e, _f;
}
//# sourceMappingURL=TextField.styles.js.map