UNPKG

18.9 kBTypeScriptView Raw
1import { DocumentRegistry } from '@jupyterlab/docregistry';
2import { Contents } from '@jupyterlab/services';
3import { ITranslator, TranslationBundle } from '@jupyterlab/translation';
4import { Drag } from '@lumino/dragdrop';
5import { Message } from '@lumino/messaging';
6import { ISignal } from '@lumino/signaling';
7import { Widget } from '@lumino/widgets';
8import { FilterFileBrowserModel } from './model';
9/**
10 * A widget which hosts a file list area.
11 */
12export declare class DirListing extends Widget {
13 /**
14 * Construct a new file browser directory listing widget.
15 *
16 * @param model - The file browser view model.
17 */
18 constructor(options: DirListing.IOptions);
19 /**
20 * Dispose of the resources held by the directory listing.
21 */
22 dispose(): void;
23 /**
24 * Get the model used by the listing.
25 */
26 get model(): FilterFileBrowserModel;
27 /**
28 * Get the dir listing header node.
29 *
30 * #### Notes
31 * This is the node which holds the header cells.
32 *
33 * Modifying this node directly can lead to undefined behavior.
34 */
35 get headerNode(): HTMLElement;
36 /**
37 * Get the dir listing content node.
38 *
39 * #### Notes
40 * This is the node which holds the item nodes.
41 *
42 * Modifying this node directly can lead to undefined behavior.
43 */
44 get contentNode(): HTMLElement;
45 /**
46 * The renderer instance used by the directory listing.
47 */
48 get renderer(): DirListing.IRenderer;
49 /**
50 * The current sort state.
51 */
52 get sortState(): DirListing.ISortState;
53 /**
54 * A signal fired when an item is opened.
55 */
56 get onItemOpened(): ISignal<DirListing, Contents.IModel>;
57 /**
58 * Create an iterator over the listing's selected items.
59 *
60 * @returns A new iterator over the listing's selected items.
61 */
62 selectedItems(): IterableIterator<Contents.IModel>;
63 /**
64 * Create an iterator over the listing's sorted items.
65 *
66 * @returns A new iterator over the listing's sorted items.
67 */
68 sortedItems(): IterableIterator<Contents.IModel>;
69 /**
70 * Sort the items using a sort condition.
71 */
72 sort(state: DirListing.ISortState): void;
73 /**
74 * Rename the first currently selected item.
75 *
76 * @returns A promise that resolves with the new name of the item.
77 */
78 rename(): Promise<string>;
79 /**
80 * Cut the selected items.
81 */
82 cut(): void;
83 /**
84 * Copy the selected items.
85 */
86 copy(): void;
87 /**
88 * Paste the items from the clipboard.
89 *
90 * @returns A promise that resolves when the operation is complete.
91 */
92 paste(): Promise<void>;
93 /**
94 * Delete the currently selected item(s).
95 *
96 * @returns A promise that resolves when the operation is complete.
97 */
98 delete(): Promise<void>;
99 /**
100 * Duplicate the currently selected item(s).
101 *
102 * @returns A promise that resolves when the operation is complete.
103 */
104 duplicate(): Promise<void>;
105 /**
106 * Download the currently selected item(s).
107 */
108 download(): Promise<void>;
109 /**
110 * Shut down kernels on the applicable currently selected items.
111 *
112 * @returns A promise that resolves when the operation is complete.
113 */
114 shutdownKernels(): Promise<void>;
115 /**
116 * Select next item.
117 *
118 * @param keepExisting - Whether to keep the current selection and add to it.
119 */
120 selectNext(keepExisting?: boolean): void;
121 /**
122 * Select previous item.
123 *
124 * @param keepExisting - Whether to keep the current selection and add to it.
125 */
126 selectPrevious(keepExisting?: boolean): void;
127 /**
128 * Select the first item that starts with prefix being typed.
129 */
130 selectByPrefix(): void;
131 /**
132 * Get whether an item is selected by name.
133 *
134 * @param name - The name of of the item.
135 *
136 * @returns Whether the item is selected.
137 */
138 isSelected(name: string): boolean;
139 /**
140 * Find a model given a click.
141 *
142 * @param event - The mouse event.
143 *
144 * @returns The model for the selected file.
145 */
146 modelForClick(event: MouseEvent): Contents.IModel | undefined;
147 /**
148 * Clear the selected items.
149 */
150 clearSelectedItems(): void;
151 /**
152 * Select an item by name.
153 *
154 * @param name - The name of the item to select.
155 * @param focus - Whether to move focus to the selected item.
156 *
157 * @returns A promise that resolves when the name is selected.
158 */
159 selectItemByName(name: string, focus?: boolean): Promise<void>;
160 /**
161 * Select an item by name.
162 *
163 * @param name - The name of the item to select.
164 * @param focus - Whether to move focus to the selected item.
165 * @param force - Whether to proceed with selection even if the file was already selected.
166 *
167 * @returns A promise that resolves when the name is selected.
168 */
169 private _selectItemByName;
170 /**
171 * Handle the DOM events for the directory listing.
172 *
173 * @param event - The DOM event sent to the widget.
174 *
175 * #### Notes
176 * This method implements the DOM `EventListener` interface and is
177 * called in response to events on the panel's DOM node. It should
178 * not be called directly by user code.
179 */
180 handleEvent(event: Event): void;
181 /**
182 * A message handler invoked on an `'after-attach'` message.
183 */
184 protected onAfterAttach(msg: Message): void;
185 /**
186 * A message handler invoked on a `'before-detach'` message.
187 */
188 protected onBeforeDetach(msg: Message): void;
189 /**
190 * A message handler invoked on an `'after-show'` message.
191 */
192 protected onAfterShow(msg: Message): void;
193 /**
194 * A handler invoked on an `'update-request'` message.
195 */
196 protected onUpdateRequest(msg: Message): void;
197 onResize(msg: Widget.ResizeMessage): void;
198 setColumnVisibility(name: DirListing.ToggleableColumn, visible: boolean): void;
199 /**
200 * Update the setting to sort notebooks above files.
201 * This sorts the items again if the internal value is modified.
202 */
203 setNotebooksFirstSorting(isEnabled: boolean): void;
204 /**
205 * Would this click (or other event type) hit the checkbox by default?
206 */
207 protected isWithinCheckboxHitArea(event: Event): boolean;
208 /**
209 * Handle the `'click'` event for the widget.
210 */
211 private _evtClick;
212 /**
213 * Handle the `'scroll'` event for the widget.
214 */
215 private _evtScroll;
216 /**
217 * Handle the `'mousedown'` event for the widget.
218 */
219 private _evtMousedown;
220 /**
221 * Handle the `'mouseup'` event for the widget.
222 */
223 private _evtMouseup;
224 /**
225 * Handle the `'mousemove'` event for the widget.
226 */
227 private _evtMousemove;
228 /**
229 * Handle the opening of an item.
230 */
231 protected handleOpen(item: Contents.IModel): void;
232 /**
233 * Calculate the next focus index, given the current focus index and a
234 * direction, keeping within the bounds of the directory listing.
235 *
236 * @param index Current focus index
237 * @param direction -1 (up) or 1 (down)
238 * @returns The next focus index, which could be the same as the current focus
239 * index if at the boundary.
240 */
241 private _getNextFocusIndex;
242 /**
243 * Handle the up or down arrow key.
244 *
245 * @param event The keyboard event
246 * @param direction -1 (up) or 1 (down)
247 */
248 private _handleArrowY;
249 /**
250 * cd ..
251 *
252 * Go up one level in the directory tree.
253 */
254 goUp(): Promise<void>;
255 /**
256 * Handle the `'keydown'` event for the widget.
257 */
258 protected evtKeydown(event: KeyboardEvent): void;
259 /**
260 * Handle the `'dblclick'` event for the widget.
261 */
262 protected evtDblClick(event: MouseEvent): void;
263 /**
264 * Handle the `drop` event for the widget.
265 */
266 protected evtNativeDrop(event: DragEvent): void;
267 /**
268 * Handle the `'lm-dragenter'` event for the widget.
269 */
270 protected evtDragEnter(event: Drag.Event): void;
271 /**
272 * Handle the `'lm-dragleave'` event for the widget.
273 */
274 protected evtDragLeave(event: Drag.Event): void;
275 /**
276 * Handle the `'lm-dragover'` event for the widget.
277 */
278 protected evtDragOver(event: Drag.Event): void;
279 /**
280 * Handle the `'lm-drop'` event for the widget.
281 */
282 protected evtDrop(event: Drag.Event): void;
283 /**
284 * Start a drag event.
285 */
286 private _startDrag;
287 /**
288 * Handle selection on a file node.
289 */
290 protected handleFileSelect(event: MouseEvent): void;
291 /**
292 * (Re-)focus an item in the directory listing.
293 *
294 * @param index The index of the item node to focus
295 */
296 private _focusItem;
297 /**
298 * Are all of the items between two provided indices selected?
299 *
300 * The items at the indices are not considered.
301 *
302 * @param j Index of one item.
303 * @param k Index of another item. Note: may be less or greater than first
304 * index.
305 * @returns True if and only if all items between the j and k are selected.
306 * Returns undefined if j and k are the same.
307 */
308 private _allSelectedBetween;
309 /**
310 * Handle a multiple select on a file item node.
311 */
312 private _handleMultiSelect;
313 /**
314 * Copy the selected items, and optionally cut as well.
315 */
316 private _copy;
317 /**
318 * Delete the files with the given paths.
319 */
320 private _delete;
321 /**
322 * Allow the user to rename item on a given row.
323 */
324 private _doRename;
325 /**
326 * Select a given item.
327 */
328 private _selectItem;
329 /**
330 * Handle the `refreshed` signal from the model.
331 */
332 private _onModelRefreshed;
333 /**
334 * Handle a `pathChanged` signal from the model.
335 */
336 private _onPathChanged;
337 /**
338 * Handle a `fileChanged` signal from the model.
339 */
340 private _onFileChanged;
341 /**
342 * Handle an `activateRequested` signal from the manager.
343 */
344 private _onActivateRequested;
345 protected translator: ITranslator;
346 protected _model: FilterFileBrowserModel;
347 private _trans;
348 private _editNode;
349 private _items;
350 private _sortedItems;
351 private _sortState;
352 private _onItemOpened;
353 private _drag;
354 private _dragData;
355 private _selectTimer;
356 private _isCut;
357 private _prevPath;
358 private _clipboard;
359 private _manager;
360 private _softSelection;
361 protected selection: {
362 [key: string]: boolean;
363 };
364 private _renderer;
365 private _searchPrefix;
366 private _searchPrefixTimer;
367 private _inRename;
368 private _isDirty;
369 private _hiddenColumns;
370 private _sortNotebooksFirst;
371 private _focusIndex;
372}
373/**
374 * The namespace for the `DirListing` class statics.
375 */
376export declare namespace DirListing {
377 /**
378 * An options object for initializing a file browser directory listing.
379 */
380 interface IOptions {
381 /**
382 * A file browser model instance.
383 */
384 model: FilterFileBrowserModel;
385 /**
386 * A renderer for file items.
387 *
388 * The default is a shared `Renderer` instance.
389 */
390 renderer?: IRenderer;
391 /**
392 * A language translator.
393 */
394 translator?: ITranslator;
395 }
396 /**
397 * A sort state.
398 */
399 interface ISortState {
400 /**
401 * The direction of sort.
402 */
403 direction: 'ascending' | 'descending';
404 /**
405 * The sort key.
406 */
407 key: 'name' | 'last_modified' | 'file_size';
408 }
409 /**
410 * Toggleable columns.
411 */
412 type ToggleableColumn = 'last_modified' | 'is_selected' | 'file_size';
413 /**
414 * A file contents model thunk.
415 *
416 * Note: The content of the model will be empty.
417 * To get the contents, call and await the `withContent`
418 * method.
419 */
420 interface IContentsThunk {
421 /**
422 * The contents model.
423 */
424 model: Contents.IModel;
425 /**
426 * Fetches the model with contents.
427 */
428 withContent: () => Promise<Contents.IModel>;
429 }
430 /**
431 * The render interface for file browser listing options.
432 */
433 interface IRenderer {
434 /**
435 * Create the DOM node for a dir listing.
436 */
437 createNode(): HTMLElement;
438 /**
439 * Populate and empty header node for a dir listing.
440 *
441 * @param node - The header node to populate.
442 */
443 populateHeaderNode(node: HTMLElement, translator?: ITranslator, hiddenColumns?: Set<DirListing.ToggleableColumn>): void;
444 /**
445 * Handle a header click.
446 *
447 * @param node - A node populated by [[populateHeaderNode]].
448 *
449 * @param event - A click event on the node.
450 *
451 * @returns The sort state of the header after the click event.
452 */
453 handleHeaderClick(node: HTMLElement, event: MouseEvent): ISortState | null;
454 /**
455 * Create a new item node for a dir listing.
456 *
457 * @returns A new DOM node to use as a content item.
458 */
459 createItemNode(hiddenColumns?: Set<DirListing.ToggleableColumn>): HTMLElement;
460 /**
461 * Update an item node to reflect the current state of a model.
462 *
463 * @param node - A node created by [[createItemNode]].
464 *
465 * @param model - The model object to use for the item state.
466 *
467 * @param fileType - The file type of the item, if applicable.
468 */
469 updateItemNode(node: HTMLElement, model: Contents.IModel, fileType?: DocumentRegistry.IFileType, translator?: ITranslator, hiddenColumns?: Set<DirListing.ToggleableColumn>, selected?: boolean): void;
470 /**
471 * Get the node containing the file name.
472 *
473 * @param node - A node created by [[createItemNode]].
474 *
475 * @returns The node containing the file name.
476 */
477 getNameNode(node: HTMLElement): HTMLElement;
478 /**
479 * Get the checkbox input element node.
480 *
481 * Downstream interface implementations,such as jupyterlab-unfold, that
482 * don't support checkboxes should simply always return null for this
483 * function.
484 *
485 * @param node A node created by [[createItemNode]] or
486 * [[createHeaderItemNode]]
487 *
488 * @returns The checkbox node.
489 */
490 getCheckboxNode: (node: HTMLElement) => HTMLInputElement | null;
491 /**
492 * Create an appropriate drag image for an item.
493 *
494 * @param node - A node created by [[createItemNode]].
495 *
496 * @param count - The number of items being dragged.
497 *
498 * @param fileType - The file type of the item, if applicable.
499 *
500 * @returns An element to use as the drag image.
501 */
502 createDragImage(node: HTMLElement, count: number, trans: TranslationBundle, fileType?: DocumentRegistry.IFileType): HTMLElement;
503 }
504 /**
505 * The default implementation of an `IRenderer`.
506 */
507 class Renderer implements IRenderer {
508 /**
509 * Create the DOM node for a dir listing.
510 */
511 createNode(): HTMLElement;
512 /**
513 * Populate and empty header node for a dir listing.
514 *
515 * @param node - The header node to populate.
516 */
517 populateHeaderNode(node: HTMLElement, translator?: ITranslator, hiddenColumns?: Set<DirListing.ToggleableColumn>): void;
518 /**
519 * Handle a header click.
520 *
521 * @param node - A node populated by [[populateHeaderNode]].
522 *
523 * @param event - A click event on the node.
524 *
525 * @returns The sort state of the header after the click event.
526 */
527 handleHeaderClick(node: HTMLElement, event: MouseEvent): ISortState | null;
528 /**
529 * Create a new item node for a dir listing.
530 *
531 * @returns A new DOM node to use as a content item.
532 */
533 createItemNode(hiddenColumns?: Set<DirListing.ToggleableColumn>): HTMLElement;
534 /**
535 * Creates a node containing a checkbox.
536 *
537 * We wrap the checkbox in a label element in order to increase its hit
538 * area. This is because the padding of the checkbox itself cannot be
539 * increased via CSS, as the CSS/form compatibility table at the following
540 * url from MDN shows:
541 * https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls#check_boxes_and_radio_buttons
542 *
543 * @param [options]
544 * @params options.alwaysVisible Should the checkbox be visible even when
545 * not hovered?
546 * @returns A new DOM node that contains a checkbox.
547 */
548 createCheckboxWrapperNode(options?: {
549 alwaysVisible: boolean;
550 }): HTMLElement;
551 /**
552 * Update an item node to reflect the current state of a model.
553 *
554 * @param node - A node created by [[createItemNode]].
555 *
556 * @param model - The model object to use for the item state.
557 *
558 * @param fileType - The file type of the item, if applicable.
559 *
560 */
561 updateItemNode(node: HTMLElement, model: Contents.IModel, fileType?: DocumentRegistry.IFileType, translator?: ITranslator, hiddenColumns?: Set<DirListing.ToggleableColumn>, selected?: boolean): void;
562 /**
563 * Get the node containing the file name.
564 *
565 * @param node - A node created by [[createItemNode]].
566 *
567 * @returns The node containing the file name.
568 */
569 getNameNode(node: HTMLElement): HTMLElement;
570 /**
571 * Get the checkbox input element node.
572 *
573 * @param node A node created by [[createItemNode]] or
574 * [[createHeaderItemNode]]
575 *
576 * @returns The checkbox node.
577 */
578 getCheckboxNode(node: HTMLElement): HTMLInputElement | null;
579 /**
580 * Create a drag image for an item.
581 *
582 * @param node - A node created by [[createItemNode]].
583 *
584 * @param count - The number of items being dragged.
585 *
586 * @param fileType - The file type of the item, if applicable.
587 *
588 * @returns An element to use as the drag image.
589 */
590 createDragImage(node: HTMLElement, count: number, trans: TranslationBundle, fileType?: DocumentRegistry.IFileType): HTMLElement;
591 /**
592 * Create a node for a header item.
593 */
594 protected createHeaderItemNode(label: string): HTMLElement;
595 }
596 /**
597 * The default `IRenderer` instance.
598 */
599 const defaultRenderer: Renderer;
600}