@kui-shell/plugin-client-common
Version:
Kui plugin that offers stylesheets
119 lines • 6.32 kB
JavaScript
/*
* Copyright 2020 The Kubernetes Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { KeyCodes } from '@kui-shell/core/mdist/api/Keys';
import { inElectron } from '@kui-shell/core/mdist/api/Capabilities';
import { isReadOnlyClient } from '@kui-shell/core/mdist/api/Client';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Nav, NavList } from '@patternfly/react-core/dist/esm/components/Nav';
import { Masthead, MastheadMain, MastheadBrand, MastheadContent, MastheadToggle } from '@patternfly/react-core/dist/esm/components/Masthead';
import KuiContext from '../context';
import NewTabButton from './NewTabButton';
import Tab from './Tab';
import SplitTerminalButton from './SplitTerminalButton';
import Icons from '../../spi/Icons';
import '../../../../web/scss/components/TopTabStripe/_index.scss';
export default class TopTabStripe extends React.PureComponent {
constructor() {
super(...arguments);
this.closeTab = (idx) => this.props.onCloseTab(idx);
this.switchTab = (idx) => this.props.onSwitchTab(idx);
/** <Masthead/> property */
this.inset = { default: 'insetLg' };
/** <Masthead/> property */
this.display = { default: 'inline' };
}
componentDidMount() {
this.addKeyboardListeners();
}
/**
* Register any keyboard event listeners
*
*/
addKeyboardListeners() {
if (inElectron()) {
// switch tabs based on keyboard events
document.addEventListener('keydown', event => {
if (event.metaKey && event.shiftKey) {
// shift-command+[]: switch to previous or next
const whichDir = event.key;
if (whichDir === '[' || whichDir === ']') {
const newIdx = whichDir === '[' ? this.props.activeIdx - 1 : this.props.activeIdx + 1;
this.props.onSwitchTab(newIdx);
}
event.stopPropagation();
return;
}
if (event.ctrlKey) {
// ctrl+PgUp/PgDown: switch to previous or next
const whichDir = event.keyCode;
if (whichDir === KeyCodes.PAGEUP || whichDir === KeyCodes.PAGEDOWN) {
const newIdx = whichDir === KeyCodes.PAGEUP ? this.props.activeIdx - 1 : this.props.activeIdx + 1;
this.props.onSwitchTab(newIdx);
}
event.stopPropagation();
return;
}
if (event.metaKey) {
// meta+number: switch to tab by index
const whichTabStr = event.key;
if (/\d/.test(whichTabStr)) {
event.stopPropagation();
const whichTabIdx = parseInt(whichTabStr, 10);
this.props.onSwitchTab(whichTabIdx - 1);
}
}
});
}
}
/** Render tabs */
tabs() {
return (!this.props.noTopTabs && (React.createElement(React.Fragment, null,
React.createElement(Nav, { "aria-label": "Tabs", variant: "horizontal", className: "kui--header-tabs" },
React.createElement(NavList, { className: "kui--tab-list" }, this.props.tabs.map((tab, idx) => (React.createElement(Tab, Object.assign({}, this.props, { key: idx, idx: idx, uuid: tab.uuid, title: tab.title, closeable: this.props.closeableTabs, active: idx === this.props.activeIdx, onCloseTab: this.closeTab, onSwitchTab: this.switchTab })))))),
!isReadOnlyClient() && !(this.props.noNewTabButton && this.props.noNewSplitButton) && (React.createElement("div", { className: "kui--top-tab-buttons" },
!this.props.noNewTabButton && React.createElement(NewTabButton, { onNewTab: this.props.onNewTab }),
!this.props.noNewSplitButton && React.createElement(SplitTerminalButton, null))))));
}
headerName() {
return (React.createElement(KuiContext.Consumer, null, config => React.createElement("div", { className: "kui--header--name" }, config.productName || 'Kui')));
}
sidebarToggle() {
return (this.props.needsSidebar && (React.createElement(MastheadToggle, { className: "kui--top-tab-stripe-header--toggle" },
React.createElement(Button, { variant: "plain", "aria-label": "Global navigation", className: "kui--top-tab-stripe-header--toggle-button", onClick: this.props.onToggleSidebar },
React.createElement(Icons, { icon: "Hamburger", className: "kui--top-tab-stripe-header--toggle-button-icon" })))));
}
header() {
// Note: with @patternfly/react-core version 4.192.15, we have to
// explicitly choose display and inset properties. Otherwise, the
// Masthead component seems to determine these asynchronous, after
// the initial render! Ugh, this results in an odd shifting
// pattern after a few hundred milliseconds.
return (React.createElement(Masthead, { className: "kui--top-tab-stripe-header", display: this.display, inset: this.inset },
this.sidebarToggle(),
React.createElement(MastheadMain, { className: "kui--top-tab-stripe-header--main" },
React.createElement(MastheadBrand, { component: "span", className: "kui--top-tab-stripe-header--brand", tabIndex: -1 }, this.headerName()),
React.createElement(MastheadContent, { className: "kui--top-tab-stripe-header--content" }, this.tabs()))));
}
/**
* React render handler
*
*/
render() {
return this.header();
}
}
//# sourceMappingURL=index.js.map