@sap-ux/ui-components
Version:
SAP UI Components Library
71 lines • 2.58 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UITabs = exports.UITabsItem = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
Object.defineProperty(exports, "UITabsItem", { enumerable: true, get: function () { return react_2.PivotItem; } });
/**
* UITabs component.
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/pivot
*
* @exports
* @class UITabs
* @extends {React.Component<IPivotProps, {}>}
*/
class UITabs extends react_1.default.Component {
/**
* Initializes component properties.
*
* @param {UITabsProps} props
*/
constructor(props) {
super(props);
this.setTabsStyle = () => {
return {
root: {
color: 'var(--vscode-tab-activeForeground)',
borderBottom: '1px solid var(--vscode-dropdown-border)'
},
link: {
color: 'var(--vscode-tab-inactiveForeground)',
selectors: {
'&:active, &:hover': {
backgroundColor: 'transparent',
color: 'var(--vscode-tab-activeForeground)'
}
}
},
linkIsSelected: {
color: 'var(--vscode-tab-activeForeground)',
selectors: {
'&:before': {
height: 1,
transition: 'none',
left: 0,
right: 0,
backgroundColor: 'var(--vscode-inputOption-activeForeground)'
}
}
},
linkContent: {},
text: {
fontFamily: 'var(--vscode-font-family)',
fontSize: 13
}
};
};
}
/**
* @returns {JSX.Element}
*/
render() {
return (react_1.default.createElement(react_2.Pivot, { ...this.props, styles: this.setTabsStyle() }, this.props.items.map((itemValue) => {
return react_1.default.createElement(react_2.PivotItem, { headerText: itemValue, key: itemValue, itemKey: itemValue });
})));
}
}
exports.UITabs = UITabs;
//# sourceMappingURL=UITabs.js.map