UNPKG

18 kBTypeScriptView Raw
1import { Message } from '@phosphor/messaging';
2import { ISignal } from '@phosphor/signaling';
3import { ElementDataset, ElementInlineStyle, VirtualElement } from '@phosphor/virtualdom';
4import { Title } from './title';
5import { Widget } from './widget';
6/**
7 * A widget which displays titles as a single row or column of tabs.
8 *
9 * #### Notes
10 * If CSS transforms are used to rotate nodes for vertically oriented
11 * text, then tab dragging will not work correctly. The `tabsMovable`
12 * property should be set to `false` when rotating nodes from CSS.
13 */
14export declare class TabBar<T> extends Widget {
15 /**
16 * Construct a new tab bar.
17 *
18 * @param options - The options for initializing the tab bar.
19 */
20 constructor(options?: TabBar.IOptions<T>);
21 /**
22 * Dispose of the resources held by the widget.
23 */
24 dispose(): void;
25 /**
26 * A signal emitted when the current tab is changed.
27 *
28 * #### Notes
29 * This signal is emitted when the currently selected tab is changed
30 * either through user or programmatic interaction.
31 *
32 * Notably, this signal is not emitted when the index of the current
33 * tab changes due to tabs being inserted, removed, or moved. It is
34 * only emitted when the actual current tab node is changed.
35 */
36 readonly currentChanged: ISignal<this, TabBar.ICurrentChangedArgs<T>>;
37 /**
38 * A signal emitted when a tab is moved by the user.
39 *
40 * #### Notes
41 * This signal is emitted when a tab is moved by user interaction.
42 *
43 * This signal is not emitted when a tab is moved programmatically.
44 */
45 readonly tabMoved: ISignal<this, TabBar.ITabMovedArgs<T>>;
46 /**
47 * A signal emitted when a tab is clicked by the user.
48 *
49 * #### Notes
50 * If the clicked tab is not the current tab, the clicked tab will be
51 * made current and the `currentChanged` signal will be emitted first.
52 *
53 * This signal is emitted even if the clicked tab is the current tab.
54 */
55 readonly tabActivateRequested: ISignal<this, TabBar.ITabActivateRequestedArgs<T>>;
56 /**
57 * A signal emitted when a tab close icon is clicked.
58 *
59 * #### Notes
60 * This signal is not emitted unless the tab title is `closable`.
61 */
62 readonly tabCloseRequested: ISignal<this, TabBar.ITabCloseRequestedArgs<T>>;
63 /**
64 * A signal emitted when a tab is dragged beyond the detach threshold.
65 *
66 * #### Notes
67 * This signal is emitted when the user drags a tab with the mouse,
68 * and mouse is dragged beyond the detach threshold.
69 *
70 * The consumer of the signal should call `releaseMouse` and remove
71 * the tab in order to complete the detach.
72 *
73 * This signal is only emitted once per drag cycle.
74 */
75 readonly tabDetachRequested: ISignal<this, TabBar.ITabDetachRequestedArgs<T>>;
76 /**
77 * The renderer used by the tab bar.
78 */
79 readonly renderer: TabBar.IRenderer<T>;
80 /**
81 * Whether the tabs are movable by the user.
82 *
83 * #### Notes
84 * Tabs can always be moved programmatically.
85 */
86 tabsMovable: boolean;
87 /**
88 * Whether a tab can be deselected by the user.
89 *
90 * #### Notes
91 * Tabs can be always be deselected programmatically.
92 */
93 allowDeselect: boolean;
94 /**
95 * The selection behavior when inserting a tab.
96 */
97 insertBehavior: TabBar.InsertBehavior;
98 /**
99 * The selection behavior when removing a tab.
100 */
101 removeBehavior: TabBar.RemoveBehavior;
102 /**
103 * Get the currently selected title.
104 *
105 * #### Notes
106 * This will be `null` if no tab is selected.
107 */
108 /**
109 * Set the currently selected title.
110 *
111 * #### Notes
112 * If the title does not exist, the title will be set to `null`.
113 */
114 currentTitle: Title<T> | null;
115 /**
116 * Get the index of the currently selected tab.
117 *
118 * #### Notes
119 * This will be `-1` if no tab is selected.
120 */
121 /**
122 * Set the index of the currently selected tab.
123 *
124 * #### Notes
125 * If the value is out of range, the index will be set to `-1`.
126 */
127 currentIndex: number;
128 /**
129 * Get the orientation of the tab bar.
130 *
131 * #### Notes
132 * This controls whether the tabs are arranged in a row or column.
133 */
134 /**
135 * Set the orientation of the tab bar.
136 *
137 * #### Notes
138 * This controls whether the tabs are arranged in a row or column.
139 */
140 orientation: TabBar.Orientation;
141 /**
142 * A read-only array of the titles in the tab bar.
143 */
144 readonly titles: ReadonlyArray<Title<T>>;
145 /**
146 * The tab bar content node.
147 *
148 * #### Notes
149 * This is the node which holds the tab nodes.
150 *
151 * Modifying this node directly can lead to undefined behavior.
152 */
153 readonly contentNode: HTMLUListElement;
154 /**
155 * Add a tab to the end of the tab bar.
156 *
157 * @param value - The title which holds the data for the tab,
158 * or an options object to convert to a title.
159 *
160 * @returns The title object added to the tab bar.
161 *
162 * #### Notes
163 * If the title is already added to the tab bar, it will be moved.
164 */
165 addTab(value: Title<T> | Title.IOptions<T>): Title<T>;
166 /**
167 * Insert a tab into the tab bar at the specified index.
168 *
169 * @param index - The index at which to insert the tab.
170 *
171 * @param value - The title which holds the data for the tab,
172 * or an options object to convert to a title.
173 *
174 * @returns The title object added to the tab bar.
175 *
176 * #### Notes
177 * The index will be clamped to the bounds of the tabs.
178 *
179 * If the title is already added to the tab bar, it will be moved.
180 */
181 insertTab(index: number, value: Title<T> | Title.IOptions<T>): Title<T>;
182 /**
183 * Remove a tab from the tab bar.
184 *
185 * @param title - The title for the tab to remove.
186 *
187 * #### Notes
188 * This is a no-op if the title is not in the tab bar.
189 */
190 removeTab(title: Title<T>): void;
191 /**
192 * Remove the tab at a given index from the tab bar.
193 *
194 * @param index - The index of the tab to remove.
195 *
196 * #### Notes
197 * This is a no-op if the index is out of range.
198 */
199 removeTabAt(index: number): void;
200 /**
201 * Remove all tabs from the tab bar.
202 */
203 clearTabs(): void;
204 /**
205 * Release the mouse and restore the non-dragged tab positions.
206 *
207 * #### Notes
208 * This will cause the tab bar to stop handling mouse events and to
209 * restore the tabs to their non-dragged positions.
210 */
211 releaseMouse(): void;
212 /**
213 * Handle the DOM events for the tab bar.
214 *
215 * @param event - The DOM event sent to the tab bar.
216 *
217 * #### Notes
218 * This method implements the DOM `EventListener` interface and is
219 * called in response to events on the tab bar's DOM node.
220 *
221 * This should not be called directly by user code.
222 */
223 handleEvent(event: Event): void;
224 /**
225 * A message handler invoked on a `'before-attach'` message.
226 */
227 protected onBeforeAttach(msg: Message): void;
228 /**
229 * A message handler invoked on an `'after-detach'` message.
230 */
231 protected onAfterDetach(msg: Message): void;
232 /**
233 * A message handler invoked on an `'update-request'` message.
234 */
235 protected onUpdateRequest(msg: Message): void;
236 /**
237 * Handle the `'keydown'` event for the tab bar.
238 */
239 private _evtKeyDown;
240 /**
241 * Handle the `'mousedown'` event for the tab bar.
242 */
243 private _evtMouseDown;
244 /**
245 * Handle the `'mousemove'` event for the tab bar.
246 */
247 private _evtMouseMove;
248 /**
249 * Handle the `'mouseup'` event for the document.
250 */
251 private _evtMouseUp;
252 /**
253 * Release the mouse and restore the non-dragged tab positions.
254 */
255 private _releaseMouse;
256 /**
257 * Adjust the current index for a tab insert operation.
258 *
259 * This method accounts for the tab bar's insertion behavior when
260 * adjusting the current index and emitting the changed signal.
261 */
262 private _adjustCurrentForInsert;
263 /**
264 * Adjust the current index for a tab move operation.
265 *
266 * This method will not cause the actual current tab to change.
267 * It silently adjusts the index to account for the given move.
268 */
269 private _adjustCurrentForMove;
270 /**
271 * Adjust the current index for a tab remove operation.
272 *
273 * This method accounts for the tab bar's remove behavior when
274 * adjusting the current index and emitting the changed signal.
275 */
276 private _adjustCurrentForRemove;
277 /**
278 * Handle the `changed` signal of a title object.
279 */
280 private _onTitleChanged;
281 private _currentIndex;
282 private _titles;
283 private _orientation;
284 private _previousTitle;
285 private _dragData;
286 private _tabMoved;
287 private _currentChanged;
288 private _tabCloseRequested;
289 private _tabDetachRequested;
290 private _tabActivateRequested;
291}
292/**
293 * The namespace for the `TabBar` class statics.
294 */
295export declare namespace TabBar {
296 /**
297 * A type alias for a tab bar orientation.
298 */
299 type Orientation = (
300 /**
301 * The tabs are arranged in a single row, left-to-right.
302 *
303 * The tab text orientation is horizontal.
304 */
305 'horizontal' |
306 /**
307 * The tabs are arranged in a single column, top-to-bottom.
308 *
309 * The tab text orientation is horizontal.
310 */
311 'vertical');
312 /**
313 * A type alias for the selection behavior on tab insert.
314 */
315 type InsertBehavior = (
316 /**
317 * The selected tab will not be changed.
318 */
319 'none' |
320 /**
321 * The inserted tab will be selected.
322 */
323 'select-tab' |
324 /**
325 * The inserted tab will be selected if the current tab is null.
326 */
327 'select-tab-if-needed');
328 /**
329 * A type alias for the selection behavior on tab remove.
330 */
331 type RemoveBehavior = (
332 /**
333 * No tab will be selected.
334 */
335 'none' |
336 /**
337 * The tab after the removed tab will be selected if possible.
338 */
339 'select-tab-after' |
340 /**
341 * The tab before the removed tab will be selected if possible.
342 */
343 'select-tab-before' |
344 /**
345 * The previously selected tab will be selected if possible.
346 */
347 'select-previous-tab');
348 /**
349 * An options object for creating a tab bar.
350 */
351 interface IOptions<T> {
352 /**
353 * The layout orientation of the tab bar.
354 *
355 * The default is `horizontal`.
356 */
357 orientation?: TabBar.Orientation;
358 /**
359 * Whether the tabs are movable by the user.
360 *
361 * The default is `false`.
362 */
363 tabsMovable?: boolean;
364 /**
365 * Whether a tab can be deselected by the user.
366 *
367 * The default is `false`.
368 */
369 allowDeselect?: boolean;
370 /**
371 * The selection behavior when inserting a tab.
372 *
373 * The default is `'select-tab-if-needed'`.
374 */
375 insertBehavior?: TabBar.InsertBehavior;
376 /**
377 * The selection behavior when removing a tab.
378 *
379 * The default is `'select-tab-after'`.
380 */
381 removeBehavior?: TabBar.RemoveBehavior;
382 /**
383 * A renderer to use with the tab bar.
384 *
385 * The default is a shared renderer instance.
386 */
387 renderer?: IRenderer<T>;
388 }
389 /**
390 * The arguments object for the `currentChanged` signal.
391 */
392 interface ICurrentChangedArgs<T> {
393 /**
394 * The previously selected index.
395 */
396 readonly previousIndex: number;
397 /**
398 * The previously selected title.
399 */
400 readonly previousTitle: Title<T> | null;
401 /**
402 * The currently selected index.
403 */
404 readonly currentIndex: number;
405 /**
406 * The currently selected title.
407 */
408 readonly currentTitle: Title<T> | null;
409 }
410 /**
411 * The arguments object for the `tabMoved` signal.
412 */
413 interface ITabMovedArgs<T> {
414 /**
415 * The previous index of the tab.
416 */
417 readonly fromIndex: number;
418 /**
419 * The current index of the tab.
420 */
421 readonly toIndex: number;
422 /**
423 * The title for the tab.
424 */
425 readonly title: Title<T>;
426 }
427 /**
428 * The arguments object for the `tabActivateRequested` signal.
429 */
430 interface ITabActivateRequestedArgs<T> {
431 /**
432 * The index of the tab to activate.
433 */
434 readonly index: number;
435 /**
436 * The title for the tab.
437 */
438 readonly title: Title<T>;
439 }
440 /**
441 * The arguments object for the `tabCloseRequested` signal.
442 */
443 interface ITabCloseRequestedArgs<T> {
444 /**
445 * The index of the tab to close.
446 */
447 readonly index: number;
448 /**
449 * The title for the tab.
450 */
451 readonly title: Title<T>;
452 }
453 /**
454 * The arguments object for the `tabDetachRequested` signal.
455 */
456 interface ITabDetachRequestedArgs<T> {
457 /**
458 * The index of the tab to detach.
459 */
460 readonly index: number;
461 /**
462 * The title for the tab.
463 */
464 readonly title: Title<T>;
465 /**
466 * The node representing the tab.
467 */
468 readonly tab: HTMLElement;
469 /**
470 * The current client X position of the mouse.
471 */
472 readonly clientX: number;
473 /**
474 * The current client Y position of the mouse.
475 */
476 readonly clientY: number;
477 }
478 /**
479 * An object which holds the data to render a tab.
480 */
481 interface IRenderData<T> {
482 /**
483 * The title associated with the tab.
484 */
485 readonly title: Title<T>;
486 /**
487 * Whether the tab is the current tab.
488 */
489 readonly current: boolean;
490 /**
491 * The z-index for the tab.
492 */
493 readonly zIndex: number;
494 }
495 /**
496 * A renderer for use with a tab bar.
497 */
498 interface IRenderer<T> {
499 /**
500 * A selector which matches the close icon node in a tab.
501 */
502 readonly closeIconSelector: string;
503 /**
504 * Render the virtual element for a tab.
505 *
506 * @param data - The data to use for rendering the tab.
507 *
508 * @returns A virtual element representing the tab.
509 */
510 renderTab(data: IRenderData<T>): VirtualElement;
511 }
512 /**
513 * The default implementation of `IRenderer`.
514 *
515 * #### Notes
516 * Subclasses are free to reimplement rendering methods as needed.
517 */
518 class Renderer implements IRenderer<any> {
519 /**
520 * Construct a new renderer.
521 */
522 constructor();
523 /**
524 * A selector which matches the close icon node in a tab.
525 */
526 readonly closeIconSelector: string;
527 /**
528 * Render the virtual element for a tab.
529 *
530 * @param data - The data to use for rendering the tab.
531 *
532 * @returns A virtual element representing the tab.
533 */
534 renderTab(data: IRenderData<any>): VirtualElement;
535 /**
536 * Render the icon element for a tab.
537 *
538 * @param data - The data to use for rendering the tab.
539 *
540 * @returns A virtual element representing the tab icon.
541 */
542 renderIcon(data: IRenderData<any>): VirtualElement;
543 /**
544 * Render the label element for a tab.
545 *
546 * @param data - The data to use for rendering the tab.
547 *
548 * @returns A virtual element representing the tab label.
549 */
550 renderLabel(data: IRenderData<any>): VirtualElement;
551 /**
552 * Render the close icon element for a tab.
553 *
554 * @param data - The data to use for rendering the tab.
555 *
556 * @returns A virtual element representing the tab close icon.
557 */
558 renderCloseIcon(data: IRenderData<any>): VirtualElement;
559 /**
560 * Create a unique render key for the tab.
561 *
562 * @param data - The data to use for the tab.
563 *
564 * @returns The unique render key for the tab.
565 *
566 * #### Notes
567 * This method caches the key against the tab title the first time
568 * the key is generated. This enables efficient rendering of moved
569 * tabs and avoids subtle hover style artifacts.
570 */
571 createTabKey(data: IRenderData<any>): string;
572 /**
573 * Create the inline style object for a tab.
574 *
575 * @param data - The data to use for the tab.
576 *
577 * @returns The inline style data for the tab.
578 */
579 createTabStyle(data: IRenderData<any>): ElementInlineStyle;
580 /**
581 * Create the class name for the tab.
582 *
583 * @param data - The data to use for the tab.
584 *
585 * @returns The full class name for the tab.
586 */
587 createTabClass(data: IRenderData<any>): string;
588 /**
589 * Create the dataset for a tab.
590 *
591 * @param data - The data to use for the tab.
592 *
593 * @returns The dataset for the tab.
594 */
595 createTabDataset(data: IRenderData<any>): ElementDataset;
596 /**
597 * Create the class name for the tab icon.
598 *
599 * @param data - The data to use for the tab.
600 *
601 * @returns The full class name for the tab icon.
602 */
603 createIconClass(data: IRenderData<any>): string;
604 private _tabID;
605 private _tabKeys;
606 }
607 /**
608 * The default `Renderer` instance.
609 */
610 const defaultRenderer: Renderer;
611}