@fluentui/react
Version:
Reusable React components for building web experiences.
252 lines • 11.3 kB
JavaScript
define(["require", "exports", "tslib", "../../Styling", "../../Utilities", "../../Positioning"], function (require, exports, tslib_1, Styling_1, Utilities_1, Positioning_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = exports.getArrowButtonStyles = void 0;
var ARROW_BUTTON_WIDTH = 23;
var ARROW_BUTTON_ICON_SIZE = 8;
var DEFAULT_HEIGHT = 32;
var DEFAULT_MIN_WIDTH = 86;
var LABEL_MARGIN = 10;
var getDisabledStyles = (0, Utilities_1.memoizeFunction)(function (theme) {
var _a;
var semanticColors = theme.semanticColors;
var SpinButtonTextColorDisabled = semanticColors.disabledText;
var SpinButtonBackgroundColorDisabled = semanticColors.disabledBackground;
return {
backgroundColor: SpinButtonBackgroundColorDisabled,
pointerEvents: 'none',
cursor: 'default',
color: SpinButtonTextColorDisabled,
selectors: (_a = {
':after': {
borderColor: SpinButtonBackgroundColorDisabled,
}
},
_a[Styling_1.HighContrastSelector] = {
color: 'GrayText',
},
_a),
};
});
exports.getArrowButtonStyles = (0, Utilities_1.memoizeFunction)(function (theme, isUpArrow, customSpecificArrowStyles) {
var _a, _b, _c;
var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects;
// TODO: after updating the semanticColor slots all this need to be reevaluated.
var ArrowButtonTextColor = palette.neutralSecondary;
var ArrowButtonTextColorHovered = semanticColors.buttonText;
var ArrowButtonTextColorPressed = semanticColors.buttonText;
var ArrowButtonBackgroundHovered = semanticColors.buttonBackgroundHovered;
var ArrowButtonBackgroundPressed = semanticColors.buttonBackgroundPressed;
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 ".concat(effects.roundedCorner2, " 0"),
},
'&.ms-UpButton': {
borderRadius: "0 ".concat(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 (0, Styling_1.concatStyleSets)(defaultArrowButtonStyles, isUpArrow ? defaultUpArrowButtonStyles : defaultDownArrowButtonStyles, customSpecificArrowStyles);
});
var getStyles = function (props) {
var _a, _b, _c, _d;
var theme = props.theme, className = props.className, labelPosition = props.labelPosition, disabled = props.disabled, isFocused = props.isFocused;
var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
var SpinButtonRootBorderColor = semanticColors.inputBorder;
var SpinButtonRootBackgroundColor = semanticColors.inputBackground;
var SpinButtonRootBorderColorHovered = semanticColors.inputBorderHovered;
var SpinButtonRootBorderColorFocused = semanticColors.inputFocusBorderAlt;
var SpinButtonInputTextColor = semanticColors.inputText;
var SpinButtonInputTextColorSelected = palette.white;
var SpinButtonInputBackgroundColorSelected = semanticColors.inputBackgroundChecked;
var SpinButtonIconDisabledColor = semanticColors.disabledText;
return {
root: [
fonts.medium,
{
outline: 'none',
width: '100%',
minWidth: DEFAULT_MIN_WIDTH,
},
className,
],
labelWrapper: [
{
display: 'inline-flex',
alignItems: 'center',
},
labelPosition === Positioning_1.Position.start && {
height: DEFAULT_HEIGHT,
float: 'left',
marginRight: LABEL_MARGIN,
},
labelPosition === Positioning_1.Position.end && {
height: DEFAULT_HEIGHT,
float: 'right',
marginLeft: LABEL_MARGIN,
},
labelPosition === Positioning_1.Position.top && {
// Due to the lineHeight set on the label (below), the height of the wrapper (contains icon+label)
// ends up 1px taller than a standard label height, causing the vertical alignment to be off when
// the SpinButton is displayed with the label on top next to other form fields.
// Decrease the wrapper's effective height slightly to compensate.
marginBottom: -1,
},
],
icon: [
{
padding: '0 5px',
fontSize: Styling_1.IconFontSizes.large,
},
disabled && {
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,
},
spinButtonWrapper: [
tslib_1.__assign(tslib_1.__assign({ display: 'flex', position: 'relative', boxSizing: 'border-box', height: DEFAULT_HEIGHT, minWidth: DEFAULT_MIN_WIDTH }, (0, Styling_1.getInputFocusStyle)(SpinButtonRootBorderColor, effects.roundedCorner2, 'border', 0)), { ':after': (_a = {
borderWidth: '1px'
},
_a[Styling_1.HighContrastSelector] = {
borderColor: 'GrayText',
},
_a) }),
(labelPosition === Positioning_1.Position.top || labelPosition === Positioning_1.Position.bottom) && {
width: '100%',
},
!disabled && [
{
':hover:after': (_b = {
borderColor: SpinButtonRootBorderColorHovered
},
_b[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight',
},
_b),
},
isFocused && {
':hover:after, :after': (_c = {
borderColor: SpinButtonRootBorderColorFocused,
borderWidth: '2px'
},
_c[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight',
},
_c),
},
],
disabled && getDisabledStyles(theme),
],
input: [
'ms-spinButton-input',
{
boxSizing: 'border-box',
boxShadow: 'none',
borderStyle: 'none',
flex: 1,
margin: 0,
fontSize: fonts.medium.fontSize,
fontFamily: 'inherit',
color: SpinButtonInputTextColor,
backgroundColor: SpinButtonRootBackgroundColor,
height: '100%',
padding: '0 8px 0 9px',
outline: 0,
display: 'block',
minWidth: DEFAULT_MIN_WIDTH - ARROW_BUTTON_WIDTH - 2,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
cursor: 'text',
userSelect: 'text',
borderRadius: "".concat(effects.roundedCorner2, " 0 0 ").concat(effects.roundedCorner2),
},
!disabled && {
selectors: {
'::selection': {
backgroundColor: SpinButtonInputBackgroundColorSelected,
color: SpinButtonInputTextColorSelected,
selectors: (_d = {},
_d[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
},
_d),
},
},
},
disabled && getDisabledStyles(theme),
],
arrowButtonsContainer: [
{
display: 'block',
height: '100%',
cursor: 'default',
},
disabled && getDisabledStyles(theme),
],
};
};
exports.getStyles = getStyles;
});
//# sourceMappingURL=SpinButton.styles.js.map