@jupyterlab/filebrowser 4.3.0-alpha.1 → 4.3.0-beta.0

package/src/browser.ts

@@ -5,9 +5,16 @@ import { showErrorMessage } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { Contents, ServerConnection } from '@jupyterlab/services';
+import { IStateDB } from '@jupyterlab/statedb';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
-import { SidePanel } from '@jupyterlab/ui-components';
+import {
+  FilenameSearcher,
+  IScore,
+  SidePanel,
+  Toolbar
+} from '@jupyterlab/ui-components';
 import { Panel } from '@lumino/widgets';
+import { createRef } from 'react';
 import { BreadCrumbs } from './crumbs';
 import { DirListing } from './listing';
 import { FilterFileBrowserModel } from './model';
@@ -32,11 +39,21 @@ const CRUMBS_CLASS = 'jp-FileBrowser-crumbs';
  */
 const TOOLBAR_CLASS = 'jp-FileBrowser-toolbar';
 
+/**
+ * The class name added to the filebrowser filter toolbar node.
+ */
+const FILTER_TOOLBAR_CLASS = 'jp-FileBrowser-filterToolbar';
+
 /**
  * The class name added to the filebrowser listing node.
  */
 const LISTING_CLASS = 'jp-FileBrowser-listing';
 
+/**
+ * The class name added to the filebrowser filterbox node.
+ */
+const FILTERBOX_CLASS = 'jp-FileBrowser-filterBox';
+
 /**
  * A widget which hosts a file browser.
  *
@@ -76,14 +93,39 @@ export class FileBrowser extends SidePanel {
     this.crumbs = new BreadCrumbs({ model, translator });
     this.crumbs.addClass(CRUMBS_CLASS);
 
+    // The filter toolbar appears immediately below the breadcrumbs and above the directory listing.
+    const searcher = FilenameSearcher({
+      updateFilter: (
+        filterFn: (item: string) => Partial<IScore> | null,
+        query?: string
+      ) => {
+        this.model.setFilter(value => {
+          return filterFn(value.name.toLowerCase());
+        });
+      },
+      useFuzzyFilter: true,
+      placeholder: this._trans.__('Filter files by name'),
+      forceRefresh: false,
+      showIcon: false,
+      inputRef: this._fileFilterRef
+    });
+    searcher.addClass(FILTERBOX_CLASS);
+
+    this.filterToolbar = new Toolbar();
+    this.filterToolbar.addClass(FILTER_TOOLBAR_CLASS);
+    this.filterToolbar.addItem('fileNameSearcher', searcher);
+    this.filterToolbar.setHidden(!this.showFileFilter);
+
     this.listing = this.createDirListing({
       model,
       renderer,
-      translator
+      translator,
+      state: options.state
     });
     this.listing.addClass(LISTING_CLASS);
 
     this.mainPanel.addWidget(this.crumbs);
+    this.mainPanel.addWidget(this.filterToolbar);
     this.mainPanel.addWidget(this.listing);
 
     this.addWidget(this.mainPanel);
@@ -91,6 +133,8 @@ export class FileBrowser extends SidePanel {
     if (options.restore !== false) {
       void model.restore(this.id);
     }
+    // restore listing regardless of the restore option
+    void this.listing.restore(this.id);
   }
 
   /**
@@ -180,6 +224,37 @@ export class FileBrowser extends SidePanel {
     }
   }
 
+  /**
+   * Whether to show a text box to filter files by name.
+   */
+  get showFileFilter(): boolean {
+    return this._showFileFilter;
+  }
+
+  set showFileFilter(value: boolean) {
+    // If the old value was true and the new value is false, clear the filter
+    const oldValue = this.showFileFilter;
+    if (oldValue && !value) {
+      // Clear the search box input
+      if (this._fileFilterRef.current) {
+        this._fileFilterRef.current.value = '';
+      }
+
+      // Set a filter that doesn't exclude anything.
+      this.model.setFilter(value => {
+        return {};
+      });
+      this.model.refresh().catch(console.warn);
+    }
+    this._showFileFilter = value;
+
+    // Update widget visibility
+    this.filterToolbar.setHidden(!this.showFileFilter);
+    if (this.showFileFilter) {
+      this._fileFilterRef.current?.focus();
+    }
+  }
+
   /**
    * Whether to sort notebooks above other files
    */
@@ -196,6 +271,22 @@ export class FileBrowser extends SidePanel {
     }
   }
 
+  /**
+   * Whether to allow single click files and directories
+   */
+  get singleClickNavigation(): boolean {
+    return this._allowSingleClick;
+  }
+
+  set singleClickNavigation(value: boolean) {
+    if (this.listing.setAllowSingleClickNavigation) {
+      this.listing.setAllowSingleClickNavigation(value);
+      this._allowSingleClick = value;
+    } else {
+      console.warn('Listing does not support single click navigation');
+    }
+  }
+
   /**
    * Create an iterator over the listing's selected items.
    *
@@ -426,18 +517,22 @@ export class FileBrowser extends SidePanel {
     }
   }
 
+  protected filterToolbar: Toolbar;
   protected listing: DirListing;
   protected crumbs: BreadCrumbs;
   protected mainPanel: Panel;
 
-  private _manager: IDocumentManager;
   private _directoryPending: Promise<Contents.IModel> | null = null;
   private _filePending: Promise<Contents.IModel> | null = null;
+  private _fileFilterRef = createRef<HTMLInputElement>();
+  private _manager: IDocumentManager;
   private _navigateToCurrentDirectory: boolean;
-  private _showLastModifiedColumn: boolean = true;
+  private _allowSingleClick: boolean = false;
+  private _showFileCheckboxes: boolean = false;
+  private _showFileFilter: boolean = false;
   private _showFileSizeColumn: boolean = false;
   private _showHiddenFiles: boolean = false;
-  private _showFileCheckboxes: boolean = false;
+  private _showLastModifiedColumn: boolean = true;
   private _sortNotebooksFirst: boolean = false;
 }
 
@@ -480,6 +575,12 @@ export namespace FileBrowser {
      * The application language translator.
      */
     translator?: ITranslator;
+
+    /**
+     * An optional state database. If provided, the widget will restore
+     * the columns sizes
+     */
+    state?: IStateDB;
   }
 
   /**