@jupyterlab/ui-components
Version:
JupyterLab - UI components written in React
114 lines • 3.79 kB
JavaScript
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import { nullTranslator } from '@jupyterlab/translation';
import { hpass } from '@lumino/virtualdom';
import { DockPanel, TabBar, TabPanel } from '@lumino/widgets';
import { LabIconStyle } from '../../style';
import { classes } from '../../utils';
import { addIcon, closeIcon } from '../iconimports';
/**
* a widget which displays titles as a single row or column of tabs.
* Tweaked to use an inline svg as the close icon
*/
export class TabBarSvg extends TabBar {
/**
* Construct a new tab bar. Overrides the default renderer.
*
* @param options - The options for initializing the tab bar.
*/
constructor(options = {}) {
var _a;
super({ renderer: TabBarSvg.defaultRenderer, ...options });
const trans = ((_a = TabBarSvg.translator) !== null && _a !== void 0 ? _a : nullTranslator).load('jupyterlab');
addIcon.element({
container: this.addButtonNode,
title: trans.__('New Launcher')
});
}
}
/**
* Translator object
*/
TabBarSvg.translator = null;
(function (TabBarSvg) {
/**
* A modified implementation of the TabBar Renderer.
*/
class Renderer extends TabBar.Renderer {
/**
* Render the close icon element for a tab.
*
* @param data - The data to use for rendering the tab.
*
* @returns A virtual element representing the tab close icon.
*/
renderCloseIcon(data) {
var _a;
const trans = ((_a = TabBarSvg.translator) !== null && _a !== void 0 ? _a : nullTranslator).load('jupyterlab');
const title = data.title.label
? trans.__('Close %1', data.title.label)
: trans.__('Close tab');
const className = classes('jp-icon-hover lm-TabBar-tabCloseIcon', LabIconStyle.styleClass({
elementPosition: 'center',
height: '16px',
width: '16px'
}));
return hpass('div', { className, title }, closeIcon);
}
}
TabBarSvg.Renderer = Renderer;
TabBarSvg.defaultRenderer = new Renderer();
})(TabBarSvg || (TabBarSvg = {}));
/**
* a widget which provides a flexible docking area for widgets.
* Tweaked to use an inline svg as the close icon
*/
export class DockPanelSvg extends DockPanel {
/**
* Construct a new dock panel.
*
* @param options - The options for initializing the panel.
*/
constructor(options = {}) {
super({
renderer: DockPanelSvg.defaultRenderer,
...options
});
}
}
(function (DockPanelSvg) {
/**
* A modified implementation of the DockPanel Renderer.
*/
class Renderer extends DockPanel.Renderer {
/**
* Create a new tab bar (with inline svg icons enabled
* for use with a dock panel.
*
* @returns A new tab bar for a dock panel.
*/
createTabBar() {
const bar = new TabBarSvg();
bar.addClass('lm-DockPanel-tabBar');
return bar;
}
}
DockPanelSvg.Renderer = Renderer;
DockPanelSvg.defaultRenderer = new Renderer();
})(DockPanelSvg || (DockPanelSvg = {}));
/**
* A widget which combines a `TabBar` and a `StackedPanel`.
* Tweaked to use an inline svg as the close icon
*/
export class TabPanelSvg extends TabPanel {
/**
* Construct a new tab panel.
*
* @param options - The options for initializing the tab panel.
*/
constructor(options = {}) {
options.renderer = options.renderer || TabBarSvg.defaultRenderer;
super(options);
}
}
//# sourceMappingURL=tabbarsvg.js.map