@jupyterlab/filebrowser 4.0.0-alpha.8 → 4.0.0-beta.0

package/src/opendialog.ts

@@ -0,0 +1,257 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { Dialog, setToolbar, ToolbarButton } from '@jupyterlab/apputils';
+import { PathExt } from '@jupyterlab/coreutils';
+import { IDocumentManager } from '@jupyterlab/docmanager';
+import { Contents } from '@jupyterlab/services';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { IScore, newFolderIcon, refreshIcon } from '@jupyterlab/ui-components';
+import { PanelLayout, Widget } from '@lumino/widgets';
+import { FileBrowser } from './browser';
+import { FilterFileBrowserModel } from './model';
+import { IFileBrowserFactory } from './tokens';
+
+/**
+ * The class name added to open file dialog
+ */
+const OPEN_DIALOG_CLASS = 'jp-Open-Dialog';
+
+/**
+ * Namespace for file dialog
+ */
+export namespace FileDialog {
+  /**
+   * Options for the open directory dialog
+   */
+  export interface IDirectoryOptions
+    extends Partial<
+      Pick<
+        Dialog.IOptions<Promise<Contents.IModel[]>>,
+        Exclude<
+          keyof Dialog.IOptions<Promise<Contents.IModel[]>>,
+          'body' | 'buttons' | 'defaultButton'
+        >
+      >
+    > {
+    /**
+     * Document manager
+     */
+    manager: IDocumentManager;
+
+    /**
+     * The application language translator.
+     */
+    translator?: ITranslator;
+  }
+
+  /**
+   * Options for the open file dialog
+   */
+  export interface IFileOptions extends IDirectoryOptions {
+    /**
+     * Filter function on file browser item model
+     */
+    filter?: (value: Contents.IModel) => Partial<IScore> | null;
+
+    /**
+     * The application language translator.
+     */
+    translator?: ITranslator;
+  }
+
+  /**
+   * Create and show a open files dialog.
+   *
+   * Note: if nothing is selected when `getValue` will return the browser
+   * model current path.
+   *
+   * @param options - The dialog setup options.
+   *
+   * @returns A promise that resolves with whether the dialog was accepted.
+   */
+  export function getOpenFiles(
+    options: IFileOptions
+  ): Promise<Dialog.IResult<Contents.IModel[]>> {
+    const translator = options.translator || nullTranslator;
+    const trans = translator.load('jupyterlab');
+    const dialogOptions: Partial<Dialog.IOptions<Contents.IModel[]>> = {
+      title: options.title,
+      buttons: [
+        Dialog.cancelButton(),
+        Dialog.okButton({
+          label: trans.__('Select')
+        })
+      ],
+      focusNodeSelector: options.focusNodeSelector,
+      host: options.host,
+      renderer: options.renderer,
+      body: new OpenDialog(options.manager, options.filter, translator)
+    };
+    const dialog = new Dialog(dialogOptions);
+    return dialog.launch();
+  }
+
+  /**
+   * Create and show a open directory dialog.
+   *
+   * Note: if nothing is selected when `getValue` will return the browser
+   * model current path.
+   *
+   * @param options - The dialog setup options.
+   *
+   * @returns A promise that resolves with whether the dialog was accepted.
+   */
+  export function getExistingDirectory(
+    options: IDirectoryOptions
+  ): Promise<Dialog.IResult<Contents.IModel[]>> {
+    return getOpenFiles({
+      ...options,
+      filter: model => {
+        return model.type === 'directory' ? {} : null;
+      }
+    });
+  }
+}
+
+/**
+ * Open dialog widget
+ */
+class OpenDialog
+  extends Widget
+  implements Dialog.IBodyWidget<Contents.IModel[]>
+{
+  constructor(
+    manager: IDocumentManager,
+    filter?: (value: Contents.IModel) => Partial<IScore> | null,
+    translator?: ITranslator,
+    filterDirectories?: boolean
+  ) {
+    super();
+    translator = translator ?? nullTranslator;
+    const trans = translator.load('jupyterlab');
+    this.addClass(OPEN_DIALOG_CLASS);
+
+    this._browser = Private.createFilteredFileBrowser(
+      'filtered-file-browser-dialog',
+      manager,
+      filter,
+      {},
+      translator,
+      filterDirectories
+    );
+
+    // Add toolbar items
+    setToolbar(this._browser, (browser: FileBrowser) => [
+      {
+        name: 'new-folder',
+        widget: new ToolbarButton({
+          icon: newFolderIcon,
+          onClick: () => {
+            browser.createNewDirectory();
+          },
+          tooltip: trans.__('New Folder')
+        })
+      },
+      {
+        name: 'refresher',
+        widget: new ToolbarButton({
+          icon: refreshIcon,
+          onClick: () => {
+            browser.model.refresh().catch(reason => {
+              console.error(
+                'Failed to refresh file browser in open dialog.',
+                reason
+              );
+            });
+          },
+          tooltip: trans.__('Refresh File List')
+        })
+      }
+    ]);
+
+    // Build the sub widgets
+    const layout = new PanelLayout();
+    layout.addWidget(this._browser);
+
+    // Set Widget content
+    this.layout = layout;
+  }
+
+  /**
+   * Get the selected items.
+   */
+  getValue(): Contents.IModel[] {
+    const selection = Array.from(this._browser.selectedItems());
+    if (selection.length === 0) {
+      // Return current path
+      return [
+        {
+          path: this._browser.model.path,
+          name: PathExt.basename(this._browser.model.path),
+          type: 'directory',
+          content: undefined,
+          writable: false,
+          created: 'unknown',
+          last_modified: 'unknown',
+          mimetype: 'text/plain',
+          format: 'text'
+        }
+      ];
+    } else {
+      return selection;
+    }
+  }
+
+  private _browser: FileBrowser;
+}
+
+namespace Private {
+  /**
+   * Create a new file browser instance.
+   *
+   * @param id - The widget/DOM id of the file browser.
+   *
+   * @param manager - A document manager instance.
+   *
+   * @param filter - function to filter file browser item.
+   *
+   * @param options - The optional file browser configuration object.
+   *
+   * #### Notes
+   * The ID parameter is used to set the widget ID. It is also used as part of
+   * the unique key necessary to store the file browser's restoration data in
+   * the state database if that functionality is enabled.
+   *
+   * If, after the file browser has been generated by the factory, the ID of the
+   * resulting widget is changed by client code, the restoration functionality
+   * will not be disrupted as long as there are no ID collisions, i.e., as long
+   * as the initial ID passed into the factory is used for only one file browser
+   * instance.
+   */
+  export const createFilteredFileBrowser = (
+    id: string,
+    manager: IDocumentManager,
+    filter?: (value: Contents.IModel) => Partial<IScore> | null,
+    options: IFileBrowserFactory.IOptions = {},
+    translator?: ITranslator,
+    filterDirectories?: boolean
+  ): FileBrowser => {
+    translator = translator || nullTranslator;
+    const model = new FilterFileBrowserModel({
+      manager,
+      filter,
+      translator,
+      driveName: options.driveName,
+      refreshInterval: options.refreshInterval,
+      filterDirectories
+    });
+    const widget = new FileBrowser({
+      id,
+      model,
+      translator
+    });
+
+    return widget;
+  };
+}

package/src/tokens.ts

@@ -0,0 +1,122 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import type { WidgetTracker } from '@jupyterlab/apputils';
+import type { IStateDB } from '@jupyterlab/statedb';
+import { Token } from '@lumino/coreutils';
+import type { FileBrowser } from './browser';
+
+/**
+ * The file browser factory token.
+ */
+export const IFileBrowserFactory = new Token<IFileBrowserFactory>(
+  '@jupyterlab/filebrowser:IFileBrowserFactory'
+);
+
+/**
+ * The default file browser token.
+ */
+export const IDefaultFileBrowser = new Token<IDefaultFileBrowser>(
+  '@jupyterlab/filebrowser:IDefaultFileBrowser'
+);
+
+/**
+ * Default file browser type.
+ */
+export type IDefaultFileBrowser = FileBrowser;
+
+/**
+ * The file browser factory interface.
+ */
+export interface IFileBrowserFactory {
+  /**
+   * Create a new file browser instance.
+   *
+   * @param id - The widget/DOM id of the file browser.
+   *
+   * @param options - The optional file browser configuration object.
+   *
+   * #### Notes
+   * The ID parameter is used to set the widget ID. It is also used as part of
+   * the unique key necessary to store the file browser's restoration data in
+   * the state database if that functionality is enabled.
+   *
+   * If, after the file browser has been generated by the factory, the ID of the
+   * resulting widget is changed by client code, the restoration functionality
+   * will not be disrupted as long as there are no ID collisions, i.e., as long
+   * as the initial ID passed into the factory is used for only one file browser
+   * instance.
+   */
+  createFileBrowser(
+    id: string,
+    options?: IFileBrowserFactory.IOptions
+  ): FileBrowser;
+
+  /**
+   * The widget tracker used by the factory to track file browsers.
+   */
+  readonly tracker: WidgetTracker<FileBrowser>;
+}
+
+/**
+ * A namespace for file browser factory interfaces.
+ */
+export namespace IFileBrowserFactory {
+  /**
+   * The options for creating a file browser using a file browser factory.
+   *
+   * #### Notes
+   * In future versions of JupyterLab, some of these options may disappear,
+   * which is a backward-incompatible API change and will necessitate a new
+   * version release. This is because in future versions, there will likely be
+   * an application-wide notion of a singleton command registry and a singleton
+   * state database.
+   */
+  export interface IOptions {
+    /**
+     * Whether a file browser automatically loads its initial path.
+     *
+     * #### Notes
+     * The default is `true`.
+     */
+    auto?: boolean;
+
+    /**
+     * An optional `Contents.IDrive` name for the model.
+     * If given, the model will prepend `driveName:` to
+     * all paths used in file operations.
+     */
+    driveName?: string;
+
+    /**
+     * The time interval for browser refreshing, in ms.
+     */
+    refreshInterval?: number;
+
+    /**
+     * Whether a file browser automatically restores state when instantiated.
+     * The default is `true`.
+     *
+     * #### Notes
+     * The file browser model will need to be restored before for the file
+     * browser to start saving its state.
+     */
+    restore?: boolean;
+
+    /**
+     * The state database to use for saving file browser state and restoring it.
+     *
+     * #### Notes
+     * Unless the value `null` is set for this option, the application state
+     * database will be automatically passed in and used for state restoration.
+     */
+    state?: IStateDB | null;
+  }
+}
+
+/**
+ * The token that indicates the default file browser commands are loaded.
+ */
+export const IFileBrowserCommands = new Token<void>(
+  '@jupyterlab/filebrowser:IFileBrowserCommands'
+);

package/src/upload.ts

@@ -0,0 +1,119 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { showErrorMessage } from '@jupyterlab/apputils';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
+import { fileUploadIcon, ToolbarButton } from '@jupyterlab/ui-components';
+import { FileBrowserModel } from './model';
+
+/**
+ * A widget which provides an upload button.
+ */
+export class Uploader extends ToolbarButton {
+  /**
+   * Construct a new file browser buttons widget.
+   */
+  constructor(options: Uploader.IOptions) {
+    super({
+      icon: fileUploadIcon,
+      label: options.label,
+      onClick: () => {
+        this._input.click();
+      },
+      tooltip: Private.translateToolTip(options.translator)
+    });
+    this.fileBrowserModel = options.model;
+    this.translator = options.translator || nullTranslator;
+    this._trans = this.translator.load('jupyterlab');
+    this._input.onclick = this._onInputClicked;
+    this._input.onchange = this._onInputChanged;
+    this.addClass('jp-id-upload');
+  }
+
+  /**
+   * The underlying file browser fileBrowserModel for the widget.
+   *
+   * This cannot be named model as that conflicts with the model property of VDomRenderer.
+   */
+  readonly fileBrowserModel: FileBrowserModel;
+
+  /**
+   * The 'change' handler for the input field.
+   */
+  private _onInputChanged = () => {
+    const files = Array.prototype.slice.call(this._input.files) as File[];
+    const pending = files.map(file => this.fileBrowserModel.upload(file));
+    void Promise.all(pending).catch(error => {
+      void showErrorMessage(
+        this._trans._p('showErrorMessage', 'Upload Error'),
+        error
+      );
+    });
+  };
+
+  /**
+   * The 'click' handler for the input field.
+   */
+  private _onInputClicked = () => {
+    // In order to allow repeated uploads of the same file (with delete in between),
+    // we need to clear the input value to trigger a change event.
+    this._input.value = '';
+  };
+
+  protected translator: ITranslator;
+  private _trans: TranslationBundle;
+  private _input = Private.createUploadInput();
+}
+
+/**
+ * The namespace for Uploader class statics.
+ */
+export namespace Uploader {
+  /**
+   * The options used to create an uploader.
+   */
+  export interface IOptions {
+    /**
+     * A file browser fileBrowserModel instance.
+     */
+    model: FileBrowserModel;
+
+    /**
+     * The language translator.
+     */
+    translator?: ITranslator;
+
+    /**
+     * An optional label.
+     */
+    label?: string;
+  }
+}
+
+/**
+ * The namespace for module private data.
+ */
+namespace Private {
+  /**
+   * Create the upload input node for a file buttons widget.
+   */
+  export function createUploadInput(): HTMLInputElement {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    return input;
+  }
+
+  /**
+   * Translate upload tooltip.
+   */
+  export function translateToolTip(translator?: ITranslator): string {
+    translator = translator || nullTranslator;
+    const trans = translator.load('jupyterlab');
+    return trans.__('Upload Files');
+  }
+}