Stefan Hacker
409 lines
15 KiB
JavaScript
409 lines
15 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var Styling_1 = require("../../../Styling");
|
|
var Utilities_1 = require("../../../Utilities");
|
|
var GlobalClassNames = {
|
|
root: 'ms-ChoiceField',
|
|
choiceFieldWrapper: 'ms-ChoiceField-wrapper',
|
|
input: 'ms-ChoiceField-input',
|
|
field: 'ms-ChoiceField-field',
|
|
innerField: 'ms-ChoiceField-innerField',
|
|
imageWrapper: 'ms-ChoiceField-imageWrapper',
|
|
iconWrapper: 'ms-ChoiceField-iconWrapper',
|
|
labelWrapper: 'ms-ChoiceField-labelWrapper',
|
|
checked: 'is-checked',
|
|
};
|
|
var labelWrapperLineHeight = 15;
|
|
var labelWrapperHeight = labelWrapperLineHeight * 2 + 2; // adding 2px height to ensure text doesn't get cutoff
|
|
var iconSize = 32;
|
|
var choiceFieldSize = 20;
|
|
var choiceFieldTransitionDuration = '200ms';
|
|
var choiceFieldTransitionTiming = 'cubic-bezier(.4, 0, .23, 1)';
|
|
var radioButtonSpacing = 3;
|
|
var radioButtonInnerSize = 5;
|
|
function getChoiceGroupFocusStyle(focusBorderColor, hasIconOrImage) {
|
|
var _a, _b;
|
|
return [
|
|
'is-inFocus',
|
|
{
|
|
selectors: (_a = {},
|
|
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &")] = {
|
|
position: 'relative',
|
|
outline: 'transparent',
|
|
selectors: {
|
|
'::-moz-focus-inner': {
|
|
border: 0,
|
|
},
|
|
':after': {
|
|
content: '""',
|
|
top: -2,
|
|
right: -2,
|
|
bottom: -2,
|
|
left: -2,
|
|
pointerEvents: 'none',
|
|
border: "1px solid ".concat(focusBorderColor),
|
|
position: 'absolute',
|
|
selectors: (_b = {},
|
|
_b[Styling_1.HighContrastSelector] = {
|
|
borderColor: 'WindowText',
|
|
borderWidth: hasIconOrImage ? 1 : 2,
|
|
},
|
|
_b),
|
|
},
|
|
},
|
|
},
|
|
_a),
|
|
},
|
|
];
|
|
}
|
|
function getImageWrapperStyle(isSelectedImageWrapper, className, checked) {
|
|
return [
|
|
className,
|
|
{
|
|
paddingBottom: 2,
|
|
transitionProperty: 'opacity',
|
|
transitionDuration: choiceFieldTransitionDuration,
|
|
transitionTimingFunction: 'ease',
|
|
selectors: {
|
|
'.ms-Image': {
|
|
display: 'inline-block',
|
|
borderStyle: 'none',
|
|
},
|
|
},
|
|
},
|
|
(checked ? !isSelectedImageWrapper : isSelectedImageWrapper) && [
|
|
'is-hidden',
|
|
{
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
overflow: 'hidden',
|
|
opacity: 0,
|
|
},
|
|
],
|
|
];
|
|
}
|
|
var getStyles = function (props) {
|
|
var _a, _b, _c, _d, _e;
|
|
var theme = props.theme, hasIcon = props.hasIcon, hasImage = props.hasImage, checked = props.checked, disabled = props.disabled, imageIsLarge = props.imageIsLarge, focused = props.focused, imageSize = props.imageSize;
|
|
var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
// Tokens
|
|
// TODO: after updating the semanticColors slots mapping this needs to be semanticColors.smallInputBorder
|
|
var circleBorderColor = palette.neutralPrimary;
|
|
var circleHoveredBorderColor = semanticColors.inputBorderHovered;
|
|
var circleCheckedBorderColor = semanticColors.inputBackgroundChecked;
|
|
// TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered
|
|
var circleCheckedHoveredBorderColor = palette.themeDark;
|
|
var circleDisabledBorderColor = semanticColors.disabledBodySubtext;
|
|
var circleBackgroundColor = semanticColors.bodyBackground;
|
|
var dotUncheckedHoveredColor = palette.neutralSecondary;
|
|
var dotCheckedColor = semanticColors.inputBackgroundChecked;
|
|
// TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered
|
|
var dotCheckedHoveredColor = palette.themeDark;
|
|
var dotDisabledColor = semanticColors.disabledBodySubtext;
|
|
// TODO: after updating the semanticColors slots mapping this needs to be semanticColors.bodyTextChecked
|
|
var labelHoverFocusColor = palette.neutralDark;
|
|
var focusBorderColor = semanticColors.focusBorder;
|
|
var iconOrImageChoiceBorderUncheckedHoveredColor = semanticColors.inputBorderHovered;
|
|
// TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered
|
|
var iconOrImageChoiceBorderCheckedColor = semanticColors.inputBackgroundChecked;
|
|
var iconOrImageChoiceBorderCheckedHoveredColor = palette.themeDark;
|
|
var iconOrImageChoiceBackgroundColor = palette.neutralLighter;
|
|
var fieldHoverOrFocusProperties = {
|
|
selectors: {
|
|
'.ms-ChoiceFieldLabel': {
|
|
color: labelHoverFocusColor,
|
|
},
|
|
':before': {
|
|
borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor,
|
|
},
|
|
':after': [
|
|
!hasIcon &&
|
|
!hasImage &&
|
|
!checked && {
|
|
content: '""',
|
|
transitionProperty: 'background-color',
|
|
left: 5,
|
|
top: 5,
|
|
width: 10,
|
|
height: 10,
|
|
backgroundColor: dotUncheckedHoveredColor,
|
|
},
|
|
checked && {
|
|
borderColor: dotCheckedHoveredColor,
|
|
background: dotCheckedHoveredColor,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
var enabledFieldWithImageHoverOrFocusProperties = {
|
|
borderColor: checked ? iconOrImageChoiceBorderCheckedHoveredColor : iconOrImageChoiceBorderUncheckedHoveredColor,
|
|
selectors: {
|
|
':before': {
|
|
opacity: 1,
|
|
borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor,
|
|
},
|
|
},
|
|
};
|
|
var circleAreaProperties = [
|
|
{
|
|
content: '""',
|
|
display: 'inline-block',
|
|
backgroundColor: circleBackgroundColor,
|
|
borderWidth: 1,
|
|
borderStyle: 'solid',
|
|
borderColor: circleBorderColor,
|
|
width: choiceFieldSize,
|
|
height: choiceFieldSize,
|
|
fontWeight: 'normal',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
boxSizing: 'border-box',
|
|
transitionProperty: 'border-color',
|
|
transitionDuration: choiceFieldTransitionDuration,
|
|
transitionTimingFunction: choiceFieldTransitionTiming,
|
|
borderRadius: '50%',
|
|
},
|
|
disabled && {
|
|
borderColor: circleDisabledBorderColor,
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'GrayText', background: 'Window' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
|
|
_a),
|
|
},
|
|
checked && {
|
|
borderColor: disabled ? circleDisabledBorderColor : circleCheckedBorderColor,
|
|
selectors: (_b = {},
|
|
_b[Styling_1.HighContrastSelector] = {
|
|
borderColor: 'Highlight',
|
|
background: 'Window',
|
|
forcedColorAdjust: 'none',
|
|
},
|
|
_b),
|
|
},
|
|
(hasIcon || hasImage) && {
|
|
top: radioButtonSpacing,
|
|
right: radioButtonSpacing,
|
|
left: 'auto', // To reset the value of 'left' to its default value, so that 'right' works
|
|
opacity: checked ? 1 : 0,
|
|
},
|
|
];
|
|
var dotAreaProperties = [
|
|
{
|
|
content: '""',
|
|
width: 0,
|
|
height: 0,
|
|
borderRadius: '50%',
|
|
position: 'absolute',
|
|
left: choiceFieldSize / 2,
|
|
right: 0,
|
|
transitionProperty: 'border-width',
|
|
transitionDuration: choiceFieldTransitionDuration,
|
|
transitionTimingFunction: choiceFieldTransitionTiming,
|
|
boxSizing: 'border-box',
|
|
},
|
|
checked && {
|
|
borderWidth: 5,
|
|
borderStyle: 'solid',
|
|
borderColor: disabled ? dotDisabledColor : dotCheckedColor,
|
|
background: dotCheckedColor,
|
|
left: 5,
|
|
top: 5,
|
|
width: 10,
|
|
height: 10,
|
|
selectors: (_c = {},
|
|
_c[Styling_1.HighContrastSelector] = {
|
|
borderColor: 'Highlight',
|
|
forcedColorAdjust: 'none',
|
|
},
|
|
_c),
|
|
},
|
|
checked &&
|
|
(hasIcon || hasImage) && {
|
|
top: radioButtonSpacing + radioButtonInnerSize,
|
|
right: radioButtonSpacing + radioButtonInnerSize,
|
|
left: 'auto', // To reset the value of 'left' to its default value, so that 'right' works
|
|
},
|
|
];
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
theme.fonts.medium,
|
|
{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
boxSizing: 'border-box',
|
|
color: semanticColors.bodyText,
|
|
minHeight: 26,
|
|
border: 'none',
|
|
position: 'relative',
|
|
marginTop: 8,
|
|
selectors: {
|
|
'.ms-ChoiceFieldLabel': {
|
|
display: 'inline-block',
|
|
},
|
|
},
|
|
},
|
|
!hasIcon &&
|
|
!hasImage && {
|
|
selectors: {
|
|
'.ms-ChoiceFieldLabel': {
|
|
paddingLeft: '26px',
|
|
},
|
|
},
|
|
},
|
|
hasImage && 'ms-ChoiceField--image',
|
|
hasIcon && 'ms-ChoiceField--icon',
|
|
(hasIcon || hasImage) && {
|
|
display: 'inline-flex',
|
|
fontSize: 0,
|
|
margin: '0 4px 4px 0',
|
|
paddingLeft: 0,
|
|
backgroundColor: iconOrImageChoiceBackgroundColor,
|
|
height: '100%',
|
|
},
|
|
],
|
|
choiceFieldWrapper: [
|
|
classNames.choiceFieldWrapper,
|
|
focused && getChoiceGroupFocusStyle(focusBorderColor, hasIcon || hasImage),
|
|
],
|
|
// The hidden input
|
|
input: [
|
|
classNames.input,
|
|
{
|
|
position: 'absolute',
|
|
opacity: 0,
|
|
top: 0,
|
|
right: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
margin: 0,
|
|
},
|
|
disabled && 'is-disabled',
|
|
],
|
|
field: [
|
|
classNames.field,
|
|
checked && classNames.checked,
|
|
{
|
|
display: 'inline-block',
|
|
cursor: 'pointer',
|
|
marginTop: 0,
|
|
position: 'relative',
|
|
verticalAlign: 'top',
|
|
userSelect: 'none',
|
|
minHeight: 20,
|
|
selectors: {
|
|
':hover': !disabled && fieldHoverOrFocusProperties,
|
|
':focus': !disabled && fieldHoverOrFocusProperties,
|
|
// The circle
|
|
':before': circleAreaProperties,
|
|
// The dot
|
|
':after': dotAreaProperties,
|
|
},
|
|
},
|
|
hasIcon && 'ms-ChoiceField--icon',
|
|
hasImage && 'ms-ChoiceField-field--image',
|
|
(hasIcon || hasImage) && {
|
|
boxSizing: 'content-box',
|
|
cursor: 'pointer',
|
|
paddingTop: 22,
|
|
margin: 0,
|
|
textAlign: 'center',
|
|
transitionProperty: 'all',
|
|
transitionDuration: choiceFieldTransitionDuration,
|
|
transitionTimingFunction: 'ease',
|
|
border: '1px solid transparent',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
},
|
|
checked && {
|
|
borderColor: iconOrImageChoiceBorderCheckedColor,
|
|
},
|
|
(hasIcon || hasImage) &&
|
|
!disabled && {
|
|
selectors: {
|
|
':hover': enabledFieldWithImageHoverOrFocusProperties,
|
|
':focus': enabledFieldWithImageHoverOrFocusProperties,
|
|
},
|
|
},
|
|
disabled && {
|
|
cursor: 'default',
|
|
selectors: {
|
|
'.ms-ChoiceFieldLabel': {
|
|
color: semanticColors.disabledBodyText,
|
|
selectors: (_d = {},
|
|
_d[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
|
|
_d),
|
|
},
|
|
},
|
|
},
|
|
checked &&
|
|
disabled && {
|
|
borderColor: iconOrImageChoiceBackgroundColor,
|
|
},
|
|
],
|
|
innerField: [
|
|
classNames.innerField,
|
|
hasImage && {
|
|
// using non-null assertion because we have a default in `ChoiceGroupOptionBase` class.
|
|
height: imageSize.height,
|
|
width: imageSize.width,
|
|
},
|
|
(hasIcon || hasImage) && {
|
|
position: 'relative',
|
|
display: 'inline-block',
|
|
paddingLeft: 30,
|
|
paddingRight: 30,
|
|
},
|
|
(hasIcon || hasImage) &&
|
|
imageIsLarge && {
|
|
paddingLeft: 24,
|
|
paddingRight: 24,
|
|
},
|
|
(hasIcon || hasImage) &&
|
|
disabled && {
|
|
opacity: 0.25,
|
|
selectors: (_e = {},
|
|
_e[Styling_1.HighContrastSelector] = {
|
|
color: 'GrayText',
|
|
opacity: 1,
|
|
},
|
|
_e),
|
|
},
|
|
],
|
|
imageWrapper: getImageWrapperStyle(false, classNames.imageWrapper, checked),
|
|
selectedImageWrapper: getImageWrapperStyle(true, classNames.imageWrapper, checked),
|
|
iconWrapper: [
|
|
classNames.iconWrapper,
|
|
{
|
|
fontSize: iconSize,
|
|
lineHeight: iconSize,
|
|
height: iconSize,
|
|
},
|
|
],
|
|
labelWrapper: [
|
|
classNames.labelWrapper,
|
|
fonts.medium,
|
|
(hasIcon || hasImage) && {
|
|
display: 'block',
|
|
position: 'relative',
|
|
margin: '4px 8px 2px 8px',
|
|
height: labelWrapperHeight,
|
|
lineHeight: labelWrapperLineHeight,
|
|
// using non-null assertion because we have a default in `ChoiceGroupOptionBase` class.
|
|
maxWidth: imageSize.width * 2,
|
|
overflow: 'hidden',
|
|
whiteSpace: 'pre-wrap',
|
|
},
|
|
],
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
//# sourceMappingURL=ChoiceGroupOption.styles.js.map
|