office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
218 lines • 7.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var ARROW_BUTTON_WIDTH = 23;
var ARROW_BUTTON_ICON_SIZE = 8;
var DEFAULT_HEIGHT = 32;
var LABEL_MARGIN = 10;
var _getDisabledStyles = Utilities_1.memoizeFunction(function (theme) {
var _a;
var semanticColors = theme.semanticColors;
var SpinButtonTextColorDisabled = semanticColors.disabledText;
var SpinButtonBackgroundColorDisabled = semanticColors.disabledBackground;
return {
backgroundColor: SpinButtonBackgroundColorDisabled,
borderColor: 'transparent',
pointerEvents: 'none',
cursor: 'default',
color: SpinButtonTextColorDisabled,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
color: 'GrayText'
},
_a)
};
});
exports.getArrowButtonStyles = Utilities_1.memoizeFunction(function (theme, isUpArrow, customSpecificArrowStyles) {
var _a, _b, _c;
var palette = theme.palette, effects = theme.effects;
// TODO: after updating the semanticColor slots all this need to be reevaluated.
var ArrowButtonTextColor = palette.neutralSecondary;
var ArrowButtonTextColorHovered = palette.neutralPrimary;
var ArrowButtonTextColorPressed = palette.neutralPrimary;
var ArrowButtonBackgroundHovered = palette.neutralLighter;
var ArrowButtonBackgroundPressed = palette.neutralLight;
var defaultArrowButtonStyles = {
root: {
outline: 'none',
display: 'block',
height: '50%',
width: ARROW_BUTTON_WIDTH,
padding: 0,
backgroundColor: 'transparent',
textAlign: 'center',
cursor: 'default',
color: ArrowButtonTextColor,
selectors: {
'&.ms-DownButton': {
borderRadius: "0 0 " + effects.roundedCorner2 + " 0"
},
'&.ms-UpButton': {
borderRadius: "0 " + effects.roundedCorner2 + " 0 0"
}
}
},
rootHovered: {
backgroundColor: ArrowButtonBackgroundHovered,
color: ArrowButtonTextColorHovered
},
rootChecked: {
backgroundColor: ArrowButtonBackgroundPressed,
color: ArrowButtonTextColorPressed,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
color: 'HighlightText'
},
_a)
},
rootPressed: {
backgroundColor: ArrowButtonBackgroundPressed,
color: ArrowButtonTextColorPressed,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
color: 'HighlightText'
},
_b)
},
rootDisabled: {
opacity: 0.5,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
color: 'GrayText',
opacity: 1
},
_c)
},
icon: {
fontSize: ARROW_BUTTON_ICON_SIZE,
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0
}
};
// No specific styles needed as of now.
var defaultUpArrowButtonStyles = {};
var defaultDownArrowButtonStyles = {};
return Styling_1.concatStyleSets(defaultArrowButtonStyles, isUpArrow ? defaultUpArrowButtonStyles : defaultDownArrowButtonStyles, customSpecificArrowStyles);
});
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
var _a, _b, _c;
var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
var SpinButtonRootBorderColor = semanticColors.inputBorder;
var SpinButtonRootBorderColorHovered = semanticColors.inputBorderHovered;
var SpinButtonRootBorderColorFocused = semanticColors.inputFocusBorderAlt;
var SpinButtonInputTextColor = semanticColors.bodyText;
var SpinButtonInputTextColorSelected = palette.white;
var SpinButtonInputBackgroundColorSelected = palette.themePrimary;
var SpinButtonIconDisabledColor = semanticColors.disabledText;
var defaultStyles = {
root: {
outline: 'none',
fontSize: fonts.medium.fontSize,
width: '100%',
minWidth: 86
},
labelWrapper: {
display: 'inline-flex'
},
labelWrapperStart: {
height: DEFAULT_HEIGHT,
alignItems: 'center',
float: 'left',
marginRight: LABEL_MARGIN
},
labelWrapperEnd: {
height: DEFAULT_HEIGHT,
alignItems: 'center',
float: 'right',
marginLeft: LABEL_MARGIN
},
labelWrapperTop: {},
labelWrapperBottom: {},
icon: {
padding: '0 5px',
fontSize: Styling_1.IconFontSizes.large
},
iconDisabled: {
color: SpinButtonIconDisabledColor
},
label: {
pointerEvents: 'none',
// centering the label with the icon by forcing the exact same height as the icon.
lineHeight: Styling_1.IconFontSizes.large
},
labelDisabled: {},
spinButtonWrapper: {
display: 'flex',
boxSizing: 'border-box',
height: DEFAULT_HEIGHT,
minWidth: 86,
border: "1px solid " + SpinButtonRootBorderColor,
borderRadius: effects.roundedCorner2
},
spinButtonWrapperTopBottom: {
width: '100%'
},
spinButtonWrapperHovered: {
borderColor: SpinButtonRootBorderColorHovered,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight'
},
_a)
},
spinButtonWrapperFocused: {
borderColor: SpinButtonRootBorderColorFocused,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight'
},
_b)
},
spinButtonWrapperDisabled: _getDisabledStyles(theme),
input: {
boxSizing: 'border-box',
boxShadow: 'none',
borderStyle: 'none',
flex: 1,
margin: 0,
fontSize: fonts.medium.fontSize,
color: SpinButtonInputTextColor,
height: '100%',
padding: '0 8px',
outline: 0,
display: 'block',
minWidth: 72,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
cursor: 'text',
userSelect: 'text',
borderRadius: effects.roundedCorner2 + " 0 0 " + effects.roundedCorner2
},
inputTextSelected: {
backgroundColor: SpinButtonInputBackgroundColorSelected,
color: SpinButtonInputTextColorSelected,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText'
},
_c)
},
inputDisabled: _getDisabledStyles(theme),
arrowButtonsContainer: {
display: 'block',
height: '100%',
cursor: 'default'
},
arrowButtonsContainerDisabled: _getDisabledStyles(theme)
};
return Styling_1.concatStyleSets(defaultStyles, customStyles);
});
//# sourceMappingURL=SpinButton.styles.js.map