@sap-ux/ui-components
Version:
SAP UI Components Library
129 lines • 5.02 kB
JavaScript
import React from 'react';
import { IconButton } from '@fluentui/react';
import { UIContextualMenu } from '../UIContextualMenu/index.js';
export var UIIconButtonSizes;
(function (UIIconButtonSizes) {
UIIconButtonSizes["Default"] = "Default";
UIIconButtonSizes["Wide"] = "Wide";
})(UIIconButtonSizes || (UIIconButtonSizes = {}));
/**
* UIIconButton component.
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
*
* @exports
* @class UIIconButton
* @extends {React.Component<ButtonProps, {}>}
*/
export class UIIconButton extends React.Component {
/**
* Initializes component properties.
*
* @param {ButtonProps} props
*/
constructor(props) {
super(props);
this.setStyle = (props) => {
const sizeType = props.sizeType ?? UIIconButtonSizes.Default;
const width = sizeType === UIIconButtonSizes.Default ? 16 : 26;
return {
root: {
minWidth: 'initial',
height: 16,
width: width,
boxSizing: 'content-box',
padding: 3,
backgroundColor: 'transparent',
borderRadius: 'var(--vscode-cornerRadius-small, 4px)',
selectors: {
// Focus through tab navigation
'.ms-Fabric--isFocusVisible &:focus:after': {
outline: '1px solid var(--vscode-focusBorder)'
}
}
},
rootDisabled: {
backgroundColor: 'transparent',
opacity: '0.4'
},
rootHasMenu: {
width: width
},
rootHovered: {
backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
outline: '1px dashed var(--vscode-contrastActiveBorder)',
borderRadius: 'var(--vscode-cornerRadius-small, 4px)'
},
rootPressed: {
backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-activeBackground')
},
rootExpanded: {
backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
width: width
},
rootExpandedHovered: { backgroundColor: 'transparent' },
flexContainer: {
width: '100%',
height: '100%',
pointerEvents: 'none'
},
icon: {
height: 16,
width: width,
lineHeight: 16,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
iconHovered: {
backgroundColor: 'transparent'
},
menuIconExpanded: {
display: 'none'
},
menuIcon: {
display: 'none'
},
rootChecked: {
backgroundColor: 'var(--vscode-button-background)',
color: 'var(--vscode-button-foreground)',
outline: '1px solid var(--vscode-contrastActiveBorder)',
selectors: {
// Move focus border otside of root box, because selection background covers inner border
'.ms-Fabric--isFocusVisible &:focus:after': {
inset: '-1px'
}
}
},
rootCheckedHovered: {
backgroundColor: 'var(--vscode-button-background)',
outline: '1px dashed var(--vscode-contrastActiveBorder)'
},
iconChecked: {
color: 'var(--vscode-button-foreground)',
selectors: {
// Inherit color from icon
'> svg *': {
fill: 'currentColor'
}
}
}
};
};
}
/**
* Method which returns button interaction background with including fallback for old VSCode or BAS versions.
*
* @param {string} color First choise color.
* @returns {string} CSS value for background color with fallback.
*/
getButtonInteractionBackgroundColor(color) {
return `var(${color}, var(--vscode-menubar-selectionBackground))`;
}
/**
* @returns {JSX.Element}
*/
render() {
return React.createElement(IconButton, { ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu });
}
}
//# sourceMappingURL=UIIconButton.js.map