office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
405 lines • 15.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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["." + 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 " + 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,
},
],
];
}
exports.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 = 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,
},
],
},
};
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' }, 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',
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,
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',
},
];
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' }, 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',
},
],
};
};
//# sourceMappingURL=ChoiceGroupOption.styles.js.map