@sap-ux/ui-components
Version:
SAP UI Components Library
134 lines • 5.25 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIIconButton = exports.UIIconButtonSizes = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const UIContextualMenu_1 = require("../UIContextualMenu");
var UIIconButtonSizes;
(function (UIIconButtonSizes) {
UIIconButtonSizes["Default"] = "Default";
UIIconButtonSizes["Wide"] = "Wide";
})(UIIconButtonSizes || (exports.UIIconButtonSizes = UIIconButtonSizes = {}));
/**
* UIIconButton component.
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
*
* @exports
* @class UIIconButton
* @extends {React.Component<ButtonProps, {}>}
*/
class UIIconButton extends react_1.default.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: 4,
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)'
},
rootPressed: {
backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-activeBackground')
},
rootExpanded: {
backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
width: width
},
rootExpandedHovered: { backgroundColor: 'transparent' },
flexContainer: {
width: '100%',
height: '100%'
},
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_1.default.createElement(react_2.IconButton, { ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu_1.UIContextualMenu });
}
}
exports.UIIconButton = UIIconButton;
//# sourceMappingURL=UIIconButton.js.map