@sap-ux/ui-components
Version:
SAP UI Components Library
116 lines • 5.03 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UISmallButton = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
/**
*
*/
class UISmallButton extends react_1.default.Component {
/**
* Initializes component properties.
*
* @param {IButtonProps} props The props of the component.
*/
constructor(props) {
super(props);
this.buttonSecondaryForeground = '--vscode-button-secondaryForeground';
this.setStyle = (props) => {
return {
root: {
minWidth: 'initial',
height: 16,
fontSize: '11px',
fontWeight: 400,
fontFamily: 'var(--vscode-font-family)',
borderRadius: 20,
paddingLeft: 13,
paddingRight: 13,
backgroundColor: 'var(--vscode-button-secondaryBackground, #5f6a79)',
borderColor: 'var(--vscode-contrastBorder, var(--vscode-button-secondaryBackground, #5f6a79))',
color: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff'),
...(props.primary && {
backgroundColor: this.getColor('--vscode-button-background'),
borderColor: 'var(--vscode-contrastBorder, var(--vscode-button-background))',
color: this.getColor('--vscode-button-foreground')
}),
selectors: {
'.ms-Fabric--isFocusVisible &:focus:after': {
outlineColor: 'var(--vscode-focusBorder)',
inset: -3
}
}
},
label: {
marginLeft: 0,
marginRight: 0,
fontWeight: 400,
lineHeight: 11,
whiteSpace: 'nowrap'
},
rootDisabled: {
opacity: '0.5 !important',
backgroundColor: 'var(--vscode-button-secondaryBackground,#5f6a79)',
borderColor: 'var(--vscode-button-secondaryBackground, #5f6a79)',
color: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff'),
...(props.primary && {
opacity: '0.5 !important',
color: this.getColor('--vscode-button-foreground'),
backgroundColor: 'var(--vscode-button-background)',
borderColor: 'var(--vscode-button-background)'
})
},
rootHovered: {
color: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff'),
backgroundColor: 'var(--vscode-button-secondaryHoverBackground, #4c5561)',
borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-secondaryHoverBackground, #4c5561))',
selectors: {
'svg > path, svg > rect': {
fill: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff')
}
},
...(props.primary && {
color: 'var(--vscode-button-foreground)',
backgroundColor: 'var(--vscode-button-hoverBackground)',
borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
selectors: {
'svg > path, svg > rect': {
fill: 'var(--vscode-button-foreground)'
}
}
})
}
};
};
}
/**
* Method which returns the correct css color.
*
* @param {string} color First choise color.
* @returns {string} CSS value for background color with fallback.
*/
getColor(color) {
return `var(${color})`;
}
/**
* Method which returns the correct css color with a fallback value.
*
* @param {string} color First choise color.
* @param {string} fallbackColor fallback choise color.
* @returns {string} CSS value for background color with fallback.
*/
getColorwithFallback(color, fallbackColor) {
return `var(${color}, ${fallbackColor})`;
}
/**
* @returns {JSX.Element} the rendered component.
*/
render() {
return react_1.default.createElement(react_2.DefaultButton, { ...this.props, styles: this.setStyle(this.props) });
}
}
exports.UISmallButton = UISmallButton;
//# sourceMappingURL=UISmallButton.js.map