1 | import { Message } from '@phosphor/messaging';
|
2 | import { MenuPath, SelectionService } from '../../common';
|
3 | import { ContextMenuRenderer } from '../context-menu-renderer';
|
4 | import { StatefulWidget } from '../shell';
|
5 | import { Widget } from '../widgets';
|
6 | import { TreeNode, CompositeTreeNode } from './tree';
|
7 | import { TreeModel } from './tree-model';
|
8 | import { ExpandableTreeNode } from './tree-expansion';
|
9 | import { SelectableTreeNode } from './tree-selection';
|
10 | import { TreeDecoratorService, TreeDecoration } from './tree-decorator';
|
11 | import { ReactWidget } from '../widgets/react-widget';
|
12 | import * as React from 'react';
|
13 | import { VirtuosoHandle } from 'react-virtuoso';
|
14 | import { SearchBox, SearchBoxFactory } from './search-box';
|
15 | import { TreeSearch } from './tree-search';
|
16 | import { MaybePromise } from '../../common/types';
|
17 | import { LabelProvider } from '../label-provider';
|
18 | import { CorePreferences } from '../core-preferences';
|
19 | import { TreeFocusService } from './tree-focus-service';
|
20 | export declare const TREE_CLASS = "theia-Tree";
|
21 | export declare const TREE_CONTAINER_CLASS = "theia-TreeContainer";
|
22 | export declare const TREE_NODE_CLASS = "theia-TreeNode";
|
23 | export declare const TREE_NODE_CONTENT_CLASS = "theia-TreeNodeContent";
|
24 | export declare const TREE_NODE_INFO_CLASS = "theia-TreeNodeInfo";
|
25 | export declare const TREE_NODE_TAIL_CLASS = "theia-TreeNodeTail";
|
26 | export declare const TREE_NODE_SEGMENT_CLASS = "theia-TreeNodeSegment";
|
27 | export declare const TREE_NODE_SEGMENT_GROW_CLASS = "theia-TreeNodeSegmentGrow";
|
28 | export declare const EXPANDABLE_TREE_NODE_CLASS = "theia-ExpandableTreeNode";
|
29 | export declare const COMPOSITE_TREE_NODE_CLASS = "theia-CompositeTreeNode";
|
30 | export declare const TREE_NODE_CAPTION_CLASS = "theia-TreeNodeCaption";
|
31 | export declare const TREE_NODE_INDENT_GUIDE_CLASS = "theia-tree-node-indent";
|
32 | export declare const TreeProps: unique symbol;
|
33 |
|
34 |
|
35 |
|
36 | export interface TreeProps {
|
37 | |
38 |
|
39 |
|
40 | readonly contextMenuPath?: MenuPath;
|
41 | |
42 |
|
43 |
|
44 |
|
45 | readonly leftPadding: number;
|
46 | readonly expansionTogglePadding: number;
|
47 | |
48 |
|
49 |
|
50 | readonly multiSelect?: boolean;
|
51 | |
52 |
|
53 |
|
54 | readonly search?: boolean;
|
55 | |
56 |
|
57 |
|
58 | readonly virtualized?: boolean;
|
59 | |
60 |
|
61 |
|
62 | readonly scrollIfActive?: boolean;
|
63 | |
64 |
|
65 |
|
66 | readonly globalSelection?: boolean;
|
67 | |
68 |
|
69 |
|
70 | readonly expandOnlyOnExpansionToggleClick?: boolean;
|
71 | }
|
72 |
|
73 |
|
74 |
|
75 | export interface NodeProps {
|
76 | |
77 |
|
78 |
|
79 | readonly depth: number;
|
80 | }
|
81 |
|
82 |
|
83 |
|
84 | export declare const defaultTreeProps: TreeProps;
|
85 | export declare namespace TreeWidget {
|
86 | |
87 |
|
88 |
|
89 | interface ModifierAwareEvent {
|
90 | |
91 |
|
92 |
|
93 | readonly metaKey: boolean;
|
94 | |
95 |
|
96 |
|
97 | readonly ctrlKey: boolean;
|
98 | |
99 |
|
100 |
|
101 | readonly shiftKey: boolean;
|
102 | }
|
103 | }
|
104 | export declare class TreeWidget extends ReactWidget implements StatefulWidget {
|
105 | readonly props: TreeProps;
|
106 | readonly model: TreeModel;
|
107 | protected readonly contextMenuRenderer: ContextMenuRenderer;
|
108 | protected searchBox: SearchBox;
|
109 | protected searchHighlights: Map<string, TreeDecoration.CaptionHighlight>;
|
110 | protected readonly decoratorService: TreeDecoratorService;
|
111 | protected readonly treeSearch: TreeSearch;
|
112 | protected readonly searchBoxFactory: SearchBoxFactory;
|
113 | protected readonly focusService: TreeFocusService;
|
114 | protected decorations: Map<string, TreeDecoration.Data[]>;
|
115 | protected readonly selectionService: SelectionService;
|
116 | protected readonly labelProvider: LabelProvider;
|
117 | protected readonly corePreferences: CorePreferences;
|
118 | protected shouldScrollToRow: boolean;
|
119 | constructor(props: TreeProps, model: TreeModel, contextMenuRenderer: ContextMenuRenderer);
|
120 | protected init(): void;
|
121 | /**
|
122 | * Update the global selection for the tree.
|
123 | */
|
124 | protected updateGlobalSelection(): void;
|
125 | protected rows: Map<string, TreeWidget.NodeRow>;
|
126 | protected updateRows: any;
|
127 | protected doUpdateRows(): void;
|
128 | protected getDepthForNode(node: TreeNode, depths: Map<CompositeTreeNode | undefined, number>): number;
|
129 | protected toNodeRow(node: TreeNode, index: number, depth: number): TreeWidget.NodeRow;
|
130 | protected shouldDisplayNode(node: TreeNode): boolean;
|
131 | /**
|
132 | * Row index to ensure visibility.
|
133 | * - Used to forcefully scroll if necessary.
|
134 | */
|
135 | protected scrollToRow: number | undefined;
|
136 | /**
|
137 | * Update the `scrollToRow`.
|
138 | * @param updateOptions the tree widget force update options.
|
139 | */
|
140 | protected updateScrollToRow(): void;
|
141 | protected scheduleUpdateScrollToRow: any;
|
142 | /**
|
143 | * Get the `scrollToRow`.
|
144 | *
|
145 | * @returns the `scrollToRow` if available.
|
146 | */
|
147 | protected getScrollToRow(): number | undefined;
|
148 | /**
|
149 | * Update tree decorations.
|
150 | * - Updating decorations are debounced in order to limit the number of expensive updates.
|
151 | */
|
152 | protected readonly updateDecorations: any;
|
153 | protected doUpdateDecorations(): Promise<void>;
|
154 | protected onActivateRequest(msg: Message): void;
|
155 | /**
|
156 | * Actually focus the tree node.
|
157 | */
|
158 | protected doFocus(): void;
|
159 | /**
|
160 | * Get the tree node to focus.
|
161 | *
|
162 | * @returns the node to focus if available.
|
163 | */
|
164 | protected getNodeToFocus(): SelectableTreeNode | undefined;
|
165 | protected onUpdateRequest(msg: Message): void;
|
166 | protected onResize(msg: Widget.ResizeMessage): void;
|
167 | protected render(): React.ReactNode;
|
168 | /**
|
169 | * Create the container attributes for the widget.
|
170 | */
|
171 | protected createContainerAttributes(): React.HTMLAttributes<HTMLElement>;
|
172 | /**
|
173 | * Get the container tree node.
|
174 | *
|
175 | * @returns the tree node for the container if available.
|
176 | */
|
177 | protected getContainerTreeNode(): TreeNode | undefined;
|
178 | protected ScrollingRowRenderer: React.FC<{
|
179 | rows: TreeWidget.NodeRow[];
|
180 | }>;
|
181 | protected view: TreeWidget.View | undefined;
|
182 | |
183 |
|
184 |
|
185 |
|
186 | protected renderTree(model: TreeModel): React.ReactNode;
|
187 | scrollArea: Element;
|
188 | |
189 |
|
190 |
|
191 | protected scrollToSelected(): void;
|
192 | |
193 |
|
194 |
|
195 | protected readonly renderNodeRow: (row: TreeWidget.NodeRow) => React.ReactNode;
|
196 | |
197 |
|
198 |
|
199 | protected doRenderNodeRow({ node, depth }: TreeWidget.NodeRow): React.ReactNode;
|
200 | |
201 |
|
202 |
|
203 |
|
204 |
|
205 | protected renderIcon(node: TreeNode, props: NodeProps): React.ReactNode;
|
206 | |
207 |
|
208 |
|
209 | protected readonly toggle: (event: React.MouseEvent<HTMLElement>) => void;
|
210 | |
211 |
|
212 |
|
213 |
|
214 | protected doToggle(event: React.MouseEvent<HTMLElement>): void;
|
215 | |
216 |
|
217 |
|
218 |
|
219 |
|
220 | protected renderExpansionToggle(node: TreeNode, props: NodeProps): React.ReactNode;
|
221 | |
222 |
|
223 |
|
224 |
|
225 |
|
226 | protected renderCaption(node: TreeNode, props: NodeProps): React.ReactNode;
|
227 | protected getCaptionAttributes(node: TreeNode, props: NodeProps): React.Attributes & React.HTMLAttributes<HTMLElement>;
|
228 | protected getCaptionChildren(node: TreeNode, props: NodeProps): React.ReactNode;
|
229 | |
230 |
|
231 |
|
232 |
|
233 |
|
234 | protected toReactNode(caption: string, highlight: TreeDecoration.CaptionHighlight): React.ReactNode[];
|
235 | |
236 |
|
237 |
|
238 |
|
239 |
|
240 | protected decorateCaption(node: TreeNode, attrs: React.HTMLAttributes<HTMLElement>): React.Attributes & React.HTMLAttributes<HTMLElement>;
|
241 | |
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 | protected hasTrailingSuffixes(node: TreeNode): boolean;
|
248 | |
249 |
|
250 |
|
251 |
|
252 |
|
253 | protected applyFontStyles(original: React.CSSProperties, fontData: TreeDecoration.FontData | undefined): React.CSSProperties;
|
254 | |
255 |
|
256 |
|
257 |
|
258 |
|
259 |
|
260 | protected renderCaptionAffixes(node: TreeNode, props: NodeProps, affixKey: 'captionPrefixes' | 'captionSuffixes'): React.ReactNode;
|
261 | |
262 |
|
263 |
|
264 |
|
265 |
|
266 | protected decorateIcon(node: TreeNode, icon: React.ReactNode): React.ReactNode;
|
267 | |
268 |
|
269 |
|
270 |
|
271 |
|
272 | protected renderTailDecorations(node: TreeNode, props: NodeProps): React.ReactNode;
|
273 | protected renderTailDecorationsForNode(node: TreeNode, props: NodeProps, tailDecorations: TreeDecoration.TailDecoration.AnyPartial[]): React.ReactNode;
|
274 | |
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 |
|
281 |
|
282 | protected getIconClass(iconName: string | string[], additionalClasses?: string[]): string;
|
283 | |
284 |
|
285 |
|
286 |
|
287 |
|
288 | protected renderIndent(node: TreeNode, props: NodeProps): React.ReactNode;
|
289 | protected needsActiveIndentGuideline(node: TreeNode): boolean;
|
290 | |
291 |
|
292 |
|
293 |
|
294 |
|
295 | protected renderNode(node: TreeNode, props: NodeProps): React.ReactNode;
|
296 | |
297 |
|
298 |
|
299 |
|
300 |
|
301 | protected createNodeAttributes(node: TreeNode, props: NodeProps): React.Attributes & React.HTMLAttributes<HTMLElement>;
|
302 | |
303 |
|
304 |
|
305 |
|
306 |
|
307 |
|
308 |
|
309 | protected createNodeClassNames(node: TreeNode, props: NodeProps): string[];
|
310 | protected rowIsSelected(node: TreeNode, props: NodeProps): boolean;
|
311 | |
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 |
|
318 | protected getDefaultNodeStyle(node: TreeNode, props: NodeProps): React.CSSProperties | undefined;
|
319 | protected getPaddingLeft(node: TreeNode, props: NodeProps): number;
|
320 | |
321 |
|
322 |
|
323 |
|
324 | protected needsExpansionTogglePadding(node: TreeNode): boolean;
|
325 | |
326 |
|
327 |
|
328 |
|
329 |
|
330 | protected createNodeStyle(node: TreeNode, props: NodeProps): React.CSSProperties | undefined;
|
331 | |
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 | protected decorateNodeStyle(node: TreeNode, style: React.CSSProperties | undefined): React.CSSProperties | undefined;
|
339 | |
340 |
|
341 |
|
342 |
|
343 |
|
344 |
|
345 | protected isExpandable(node: TreeNode): node is ExpandableTreeNode;
|
346 | |
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 | protected getDecorations(node: TreeNode): TreeDecoration.Data[];
|
353 | |
354 |
|
355 |
|
356 |
|
357 |
|
358 |
|
359 |
|
360 | protected getDecorationData<K extends keyof TreeDecoration.Data>(node: TreeNode, key: K): Required<Pick<TreeDecoration.Data, K>>[K][];
|
361 | |
362 |
|
363 |
|
364 | protected lastScrollState: {
|
365 | |
366 |
|
367 |
|
368 | scrollTop: number;
|
369 | |
370 |
|
371 |
|
372 | scrollLeft: number;
|
373 | } | undefined;
|
374 | |
375 |
|
376 |
|
377 | protected getScrollContainer(): MaybePromise<HTMLElement>;
|
378 | protected onAfterAttach(msg: Message): void;
|
379 | |
380 |
|
381 |
|
382 |
|
383 | protected handleLeft(event: KeyboardEvent): Promise<void>;
|
384 | |
385 |
|
386 |
|
387 |
|
388 | protected handleRight(event: KeyboardEvent): Promise<void>;
|
389 | |
390 |
|
391 |
|
392 |
|
393 | protected handleUp(event: KeyboardEvent): void;
|
394 | |
395 |
|
396 |
|
397 |
|
398 | protected handleDown(event: KeyboardEvent): void;
|
399 | |
400 |
|
401 |
|
402 |
|
403 |
|
404 | protected handleEnter(event: KeyboardEvent): void;
|
405 | |
406 |
|
407 |
|
408 |
|
409 |
|
410 | protected handleSpace(event: KeyboardEvent): void;
|
411 | protected handleEscape(event: KeyboardEvent): void;
|
412 | |
413 |
|
414 |
|
415 |
|
416 |
|
417 | protected handleClickEvent(node: TreeNode | undefined, event: React.MouseEvent<HTMLElement>): void;
|
418 | |
419 |
|
420 |
|
421 | protected tapNode(node?: TreeNode): void;
|
422 | |
423 |
|
424 |
|
425 |
|
426 |
|
427 | protected handleDblClickEvent(node: TreeNode | undefined, event: React.MouseEvent<HTMLElement>): void;
|
428 | |
429 |
|
430 |
|
431 |
|
432 |
|
433 |
|
434 | protected handleContextMenuEvent(node: TreeNode | undefined, event: React.MouseEvent<HTMLElement>): void;
|
435 | |
436 |
|
437 |
|
438 | protected readonly handleExpansionToggleDblClickEvent: (event: React.MouseEvent<HTMLElement>) => void;
|
439 | |
440 |
|
441 |
|
442 |
|
443 | protected doHandleExpansionToggleDblClickEvent(event: React.MouseEvent<HTMLElement>): void;
|
444 | |
445 |
|
446 |
|
447 |
|
448 | protected toContextMenuArgs(node: SelectableTreeNode): any[] | undefined;
|
449 | |
450 |
|
451 |
|
452 |
|
453 |
|
454 |
|
455 | protected hasCtrlCmdMask(event: TreeWidget.ModifierAwareEvent): boolean;
|
456 | |
457 |
|
458 |
|
459 |
|
460 |
|
461 |
|
462 | protected hasShiftMask(event: TreeWidget.ModifierAwareEvent): boolean;
|
463 | |
464 |
|
465 |
|
466 |
|
467 | protected deflateForStorage(node: TreeNode): object;
|
468 | |
469 |
|
470 |
|
471 |
|
472 |
|
473 | protected inflateFromStorage(node: any, parent?: TreeNode): TreeNode;
|
474 | |
475 |
|
476 |
|
477 | storeState(): object;
|
478 | |
479 |
|
480 |
|
481 |
|
482 | restoreState(oldState: object): void;
|
483 | protected toNodeIcon(node: TreeNode): string;
|
484 | protected toNodeName(node: TreeNode): string;
|
485 | protected toNodeDescription(node: TreeNode): string;
|
486 | protected getDepthPadding(depth: number): number;
|
487 | }
|
488 | export declare namespace TreeWidget {
|
489 | |
490 |
|
491 |
|
492 | interface NodeRow {
|
493 | |
494 |
|
495 |
|
496 | index: number;
|
497 | |
498 |
|
499 |
|
500 | node: TreeNode;
|
501 | |
502 |
|
503 |
|
504 | depth: number;
|
505 | }
|
506 | |
507 |
|
508 |
|
509 | interface ViewProps {
|
510 | |
511 |
|
512 |
|
513 | width: number;
|
514 | |
515 |
|
516 |
|
517 | height: number;
|
518 | |
519 |
|
520 |
|
521 | scrollToRow?: number;
|
522 | |
523 |
|
524 |
|
525 | rows: NodeRow[];
|
526 | renderNodeRow: (row: NodeRow) => React.ReactNode;
|
527 | }
|
528 | class View extends React.Component<ViewProps> {
|
529 | list: VirtuosoHandle | undefined;
|
530 | render(): React.ReactNode;
|
531 | }
|
532 | }
|
533 |
|
\ | No newline at end of file |