@sap-ux/ui-components
Version:
SAP UI Components Library
371 lines • 16.8 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.UIDefaultButton = exports.BASE_STYLES = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const UIContextualMenu_1 = require("../UIContextualMenu");
const UIInput_1 = require("../UIInput");
const Icons_1 = require("../Icons");
const VSCODE_BORDER_COLOR = 'var(--vscode-button-border, transparent)';
exports.BASE_STYLES = {
color: 'var(--vscode-button-foreground)',
checkedBorderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))',
primary: {
backgroundColor: 'var(--vscode-button-background)',
disabledBorderColor: VSCODE_BORDER_COLOR,
borderColor: VSCODE_BORDER_COLOR,
hoverBackgroundColor: 'var(--vscode-button-hoverBackground)',
hoverBorderColor: VSCODE_BORDER_COLOR
},
secondary: {
backgroundColor: 'var(--vscode-button-secondaryBackground)',
disabledBorderColor: VSCODE_BORDER_COLOR,
borderColor: VSCODE_BORDER_COLOR,
hoverBackgroundColor: 'var(--vscode-button-secondaryHoverBackground)',
hoverBorderColor: VSCODE_BORDER_COLOR,
color: 'var(--vscode-button-secondaryForeground)'
},
transparent: {
backgroundColor: 'transparent',
disabledBorderColor: 'transparent',
borderColor: 'transparent',
hoverBackgroundColor: 'var(--vscode-toolbar-hoverBackground, var(--vscode-menubar-selectionBackground))',
hoverBorderColor: 'var(--vscode-contrastActiveBorder, transparent)',
hoverBorderStyle: 'dashed',
color: 'var(--vscode-foreground)',
checkedBackgroundColor: 'var(--vscode-button-background)',
checkedColor: 'var(--vscode-button-foreground)',
checkedBorderStyle: 'solid'
}
};
const ICON_SELECTOR = 'svg > path, svg > rect';
/**
* UIDefaultButton component
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
*
* @exports
* @class UIDefaultButton
* @extends {React.Component<UIDefaultButtonProps, {}>}
*/
class UIDefaultButton extends react_1.default.Component {
/**
* Initializes component properties.
*
* @param {UIDefaultButtonProps} props
*/
constructor(props) {
super(props);
/**
* Method returns styles of root button element.
*
* @param props Button props.
* @returns Styles of root button element.
*/
this.setStyle = (props) => {
const { primary, transparent } = props;
const dividerStyle = {
position: 'absolute',
width: 1,
right: 21,
top: 0,
bottom: 0,
backgroundColor: 'var(--vscode-editor-background)'
};
const interactionStyles = {
root: this.getInteractionStyle(false, primary, transparent),
checked: this.getInteractionStyle(true, primary, transparent)
};
return {
root: {
minWidth: 'initial',
height: 22,
fontSize: '13px',
fontWeight: 400,
fontFamily: 'var(--vscode-font-family)',
borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
paddingLeft: 13,
paddingRight: 13,
// Add to use hard coded value here as Theia doesn't support these values correctly
// as on Theia
// `--vscode-button-secondaryBackground` does not exist and is replaced by:
// `--vscode-secondaryButton-background` = #ffffff
// `--vscode-secondaryButton-foreground` does not exist
// And on VSCode `--vscode-button-secondaryForeground` exist and is equal to `#ffffff`
// So if we use the declare Theia variable `--vscode-secondaryButton-background` it will be white on white!!!
// And to finish these stuff of course Theia mess with the highContrast theme as it does not have any of them.
// Theia colors are a mess!!!!
backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
borderColor: exports.BASE_STYLES.secondary.borderColor,
color: exports.BASE_STYLES.secondary.color,
...(primary && {
backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
borderColor: exports.BASE_STYLES.primary.borderColor,
color: exports.BASE_STYLES.color
}),
// Transparent button
...(transparent && {
backgroundColor: exports.BASE_STYLES.transparent.backgroundColor,
borderColor: exports.BASE_STYLES.transparent.borderColor,
color: exports.BASE_STYLES.transparent.color
}),
selectors: {
'.ms-Fabric--isFocusVisible &:focus:after': {
outlineColor: 'var(--vscode-focusBorder)',
inset: -3
}
}
},
flexContainer: {
height: 18
},
label: {
marginLeft: 0,
marginRight: 0,
fontWeight: 400,
lineHeight: 20,
whiteSpace: 'nowrap'
},
rootDisabled: {
opacity: '0.5 !important',
// Add to use hard coded value here as Theia doesn't support these values correctly
backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
borderColor: exports.BASE_STYLES.secondary.disabledBorderColor,
color: exports.BASE_STYLES.secondary.color,
...(primary && {
opacity: '0.5 !important',
color: exports.BASE_STYLES.color,
backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
borderColor: exports.BASE_STYLES.primary.disabledBorderColor
}),
...(transparent && {
color: exports.BASE_STYLES.transparent.color,
backgroundColor: exports.BASE_STYLES.transparent.backgroundColor,
borderColor: exports.BASE_STYLES.transparent.disabledBorderColor
})
},
rootPressed: interactionStyles.root,
rootHovered: interactionStyles.root,
icon: {
height: 16,
lineHeight: 16,
marginLeft: -3,
color: exports.BASE_STYLES.secondary.color,
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.secondary.color
}
},
...(primary && {
color: exports.BASE_STYLES.color,
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.color
}
}
}),
...(transparent && {
color: exports.BASE_STYLES.transparent.color,
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.transparent.color
}
}
})
},
menuIcon: {
selectors: {
'svg > path': {
fill: exports.BASE_STYLES.secondary.color
},
...(primary && {
'svg > path': {
fill: exports.BASE_STYLES.color
}
})
}
},
rootChecked: {
backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
color: exports.BASE_STYLES.secondary.color,
borderColor: exports.BASE_STYLES.checkedBorderColor,
...(primary && {
backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
color: exports.BASE_STYLES.color
}),
...(transparent && {
backgroundColor: exports.BASE_STYLES.transparent.checkedBackgroundColor,
color: exports.BASE_STYLES.transparent.checkedColor,
borderStyle: exports.BASE_STYLES.transparent.checkedBorderStyle
})
},
rootCheckedHovered: interactionStyles.checked,
rootCheckedPressed: interactionStyles.checked,
splitButtonMenuButton: {
padding: 6,
height: 22,
boxSizing: 'border-box',
borderRadius: `0 ${UIInput_1.COMMON_INPUT_STYLES.borderRadius}px ${UIInput_1.COMMON_INPUT_STYLES.borderRadius}px 0 !important`,
borderLeft: 'none',
outline: 'transparent',
userSelect: 'none',
display: 'inline-block',
textDecoration: 'none',
textAlign: 'center',
cursor: 'pointer',
verticalAlign: 'top',
width: 22,
marginLeft: -1,
marginTop: 0,
marginRight: 0,
marginBottom: 0,
backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
borderColor: exports.BASE_STYLES.primary.borderColor,
color: exports.BASE_STYLES.color,
selectors: {
'&:hover': {
color: exports.BASE_STYLES.color,
backgroundColor: 'var(--vscode-button-hoverBackground)',
borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.color
}
}
}
}
},
splitButtonMenuButtonDisabled: {
opacity: '0.5 !important',
// Add to use hard coded value here as Theia doesn't support these values correctly
backgroundColor: 'var(--vscode-button-secondaryBackground,#5f6a79)',
borderColor: exports.BASE_STYLES.secondary.backgroundColor,
color: exports.BASE_STYLES.secondary.color,
...(primary && {
color: exports.BASE_STYLES.color,
backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
borderColor: 'var(--vscode-button-background)'
})
},
splitButtonMenuFocused: {
selectors: {
'&:focus': {
color: 'red'
}
}
},
splitButtonMenuButtonExpanded: {
color: exports.BASE_STYLES.color,
backgroundColor: 'var(--vscode-button-hoverBackground)',
borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.color
},
'&:hover': {
color: exports.BASE_STYLES.color,
backgroundColor: 'var(--vscode-button-hoverBackground)',
borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.color
}
}
}
}
},
splitButtonDivider: dividerStyle,
splitButtonDividerDisabled: dividerStyle,
splitButtonContainerFocused: {
'.ms-Fabric--isFocusVisible &:focus:after': {
border: 'none',
outlineColor: 'var(--vscode-focusBorder)',
inset: -2
}
}
};
};
}
/**
* Method returns styles for hover and press States of root button element.
*
* @param checked Is styles for checked state.
* @param primary Is button primary.
* @param transparent Is button transparent.
* @returns Styles for hover and press States of root button element.
*/
getInteractionStyle(checked, primary, transparent) {
let styles = {
color: exports.BASE_STYLES.secondary.color,
backgroundColor: exports.BASE_STYLES.secondary.hoverBackgroundColor,
borderColor: exports.BASE_STYLES.secondary.hoverBorderColor,
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.secondary.color
}
},
...(primary && {
color: exports.BASE_STYLES.color,
backgroundColor: exports.BASE_STYLES.primary.hoverBackgroundColor,
borderColor: exports.BASE_STYLES.primary.hoverBorderColor,
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.color
}
}
}),
...(checked && {
borderColor: exports.BASE_STYLES.checkedBorderColor
})
};
if (transparent) {
if (checked) {
styles = {
...styles,
color: exports.BASE_STYLES.color,
backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
borderColor: exports.BASE_STYLES.primary.borderColor,
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.color
}
}
};
}
else {
styles = {
...styles,
color: exports.BASE_STYLES.transparent.color,
backgroundColor: exports.BASE_STYLES.transparent.hoverBackgroundColor,
borderColor: exports.BASE_STYLES.transparent.hoverBorderColor,
borderStyle: exports.BASE_STYLES.transparent.hoverBorderStyle,
selectors: {
[ICON_SELECTOR]: {
fill: exports.BASE_STYLES.transparent.color
}
}
};
}
}
if (checked) {
styles = { ...styles, borderColor: exports.BASE_STYLES.checkedBorderColor };
}
return styles;
}
/**
* @returns {JSX.Element}
*/
render() {
const defaultMenuIconProps = this.props.menuProps?.items
? {
// Overwrite build-in fluentui icon
iconName: Icons_1.UiIcons.ArrowDown
}
: undefined;
return (react_1.default.createElement(react_2.DefaultButton, { menuIconProps: defaultMenuIconProps, ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu_1.UIContextualMenu }));
}
}
exports.UIDefaultButton = UIDefaultButton;
//# sourceMappingURL=UIDefaultButton.js.map