@jupyterlab/filebrowser 4.2.0-beta.1 → 4.2.0-beta.3

package/lib/browser.d.ts

@@ -161,8 +161,8 @@ export declare class FileBrowser extends SidePanel {
      * Given a drive name and a local path, return the full
      * drive path which includes the drive name and the local path.
      *
-     * @param driveName: the name of the drive
-     * @param localPath: the local path on the drive.
+     * @param driveName the name of the drive
+     * @param localPath the local path on the drive.
      *
      * @returns the full drive path
      */

package/lib/browser.js

@@ -353,8 +353,8 @@ export class FileBrowser extends SidePanel {
      * Given a drive name and a local path, return the full
      * drive path which includes the drive name and the local path.
      *
-     * @param driveName: the name of the drive
-     * @param localPath: the local path on the drive.
+     * @param driveName the name of the drive
+     * @param localPath the local path on the drive.
      *
      * @returns the full drive path
      */

package/lib/crumbs.d.ts

@@ -9,7 +9,7 @@ export declare class BreadCrumbs extends Widget {
     /**
      * Construct a new file browser crumb widget.
      *
-     * @param model - The file browser view model.
+     * @param options Constructor options.
      */
     constructor(options: BreadCrumbs.IOptions);
     /**

package/lib/crumbs.js

@@ -44,7 +44,7 @@ export class BreadCrumbs extends Widget {
     /**
      * Construct a new file browser crumb widget.
      *
-     * @param model - The file browser view model.
+     * @param options Constructor options.
      */
     constructor(options) {
         super();

package/lib/listing.d.ts

@@ -1,3 +1,4 @@
+import { Time } from '@jupyterlab/coreutils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Contents } from '@jupyterlab/services';
 import { ITranslator, TranslationBundle } from '@jupyterlab/translation';
@@ -13,7 +14,7 @@ export declare class DirListing extends Widget {
     /**
      * Construct a new file browser directory listing widget.
      *
-     * @param model - The file browser view model.
+     * @param options The constructor options
      */
     constructor(options: DirListing.IOptions);
     /**
@@ -190,6 +191,9 @@ export declare class DirListing extends Widget {
      * A message handler invoked on an `'after-show'` message.
      */
     protected onAfterShow(msg: Message): void;
+    private _updateModifiedSize;
+    protected updateModified(items: Contents.IModel[], nodes: HTMLElement[]): void;
+    protected updateNodes(items: Contents.IModel[], nodes: HTMLElement[]): void;
     /**
      * A handler invoked on an `'update-request'` message.
      */
@@ -369,6 +373,8 @@ export declare class DirListing extends Widget {
     private _hiddenColumns;
     private _sortNotebooksFirst;
     private _focusIndex;
+    private _modifiedWidth;
+    private _modifiedStyle;
 }
 /**
  * The namespace for the `DirListing` class statics.
@@ -457,6 +463,16 @@ export declare namespace DirListing {
          * @returns A new DOM node to use as a content item.
          */
         createItemNode(hiddenColumns?: Set<DirListing.ToggleableColumn>): HTMLElement;
+        /**
+         * Update an item's last modified date.
+         *
+         * @param modified - Element containing the file's last modified date.
+         *
+         * @param modifiedDate - String representation of the last modified date.
+         *
+         * @param modifiedStyle - The date style for the modified column: narrow, short, or long
+         */
+        updateItemModified?(modified: HTMLElement, modifiedDate: string, modifiedStyle: Time.HumanStyle): void;
         /**
          * Update an item node to reflect the current state of a model.
          *
@@ -464,9 +480,11 @@ export declare namespace DirListing {
          *
          * @param model - The model object to use for the item state.
          *
+         * @param modifiedStyle - The date style for the modified column: narrow, short, or long
+         *
          * @param fileType - The file type of the item, if applicable.
          */
-        updateItemNode(node: HTMLElement, model: Contents.IModel, fileType?: DocumentRegistry.IFileType, translator?: ITranslator, hiddenColumns?: Set<DirListing.ToggleableColumn>, selected?: boolean): void;
+        updateItemNode(node: HTMLElement, model: Contents.IModel, fileType?: DocumentRegistry.IFileType, translator?: ITranslator, hiddenColumns?: Set<DirListing.ToggleableColumn>, selected?: boolean, modifiedStyle?: Time.HumanStyle): void;
         /**
          * Get the node containing the file name.
          *
@@ -549,6 +567,16 @@ export declare namespace DirListing {
             alwaysVisible: boolean;
             headerNode?: boolean;
         }): HTMLElement;
+        /**
+         * Update an item's last modified date.
+         *
+         * @param modified - Element containing the file's last modified date.
+         *
+         * @param modifiedDate - String representation of the last modified date.
+         *
+         * @param modifiedStyle - The date style for the modified column: narrow, short, or long
+         */
+        updateItemModified(modified: HTMLElement, modifiedDate: string, modifiedStyle: Time.HumanStyle): void;
         /**
          * Update an item node to reflect the current state of a model.
          *
@@ -559,7 +587,7 @@ export declare namespace DirListing {
          * @param fileType - The file type of the item, if applicable.
          *
          */
-        updateItemNode(node: HTMLElement, model: Contents.IModel, fileType?: DocumentRegistry.IFileType, translator?: ITranslator, hiddenColumns?: Set<DirListing.ToggleableColumn>, selected?: boolean): void;
+        updateItemNode(node: HTMLElement, model: Contents.IModel, fileType?: DocumentRegistry.IFileType, translator?: ITranslator, hiddenColumns?: Set<DirListing.ToggleableColumn>, selected?: boolean, modifiedStyle?: Time.HumanStyle): void;
         /**
          * Get the node containing the file name.
          *

package/lib/listing.js

@@ -154,7 +154,7 @@ export class DirListing extends Widget {
     /**
      * Construct a new file browser directory listing widget.
      *
-     * @param model - The file browser view model.
+     * @param options The constructor options
      */
     constructor(options) {
         super({
@@ -194,6 +194,8 @@ export class DirListing extends Widget {
         this._editNode.className = EDITOR_CLASS;
         this._manager = this._model.manager;
         this._renderer = options.renderer || DirListing.defaultRenderer;
+        // Get the width of the "modified" column
+        this._updateModifiedSize(this.node);
         const headerNode = DOMUtils.findElement(this.node, HEADER_CLASS);
         // hide the file size column by default
         this._hiddenColumns.add('file_size');
@@ -697,11 +699,78 @@ export class DirListing extends Widget {
             this.update();
         }
     }
+    // Update the modified column's size
+    _updateModifiedSize(node) {
+        var _a;
+        const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
+        this._modifiedWidth = (_a = modified === null || modified === void 0 ? void 0 : modified.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 83;
+        this._modifiedStyle =
+            this._modifiedWidth < 90
+                ? 'narrow'
+                : this._modifiedWidth > 110
+                    ? 'long'
+                    : 'short';
+    }
+    // Update only the modified dates.
+    updateModified(items, nodes) {
+        items.forEach((item, i) => {
+            const node = nodes[i];
+            if (item.last_modified) {
+                const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
+                if (this.renderer.updateItemModified !== undefined) {
+                    this.renderer.updateItemModified(modified, item.last_modified, this._modifiedStyle);
+                }
+                else {
+                    DirListing.defaultRenderer.updateItemModified(modified, item.last_modified, this._modifiedStyle);
+                }
+            }
+        });
+    }
+    // Update item nodes based on widget state.
+    updateNodes(items, nodes) {
+        var _a;
+        items.forEach((item, i) => {
+            const node = nodes[i];
+            const ft = this._manager.registry.getFileTypeForModel(item);
+            this.renderer.updateItemNode(node, item, ft, this.translator, this._hiddenColumns, this.selection[item.path], this._modifiedStyle);
+            if (this.selection[item.path] &&
+                this._isCut &&
+                this._model.path === this._prevPath) {
+                node.classList.add(CUT_CLASS);
+            }
+            // add metadata to the node
+            node.setAttribute('data-isdir', item.type === 'directory' ? 'true' : 'false');
+        });
+        // Handle the selectors on the widget node.
+        const selected = Object.keys(this.selection).length;
+        if (selected) {
+            this.addClass(SELECTED_CLASS);
+            if (selected > 1) {
+                this.addClass(MULTI_SELECTED_CLASS);
+            }
+        }
+        // Handle file session statuses.
+        const paths = items.map(item => item.path);
+        for (const session of this._model.sessions()) {
+            const index = ArrayExt.firstIndexOf(paths, session.path);
+            const node = nodes[index];
+            // Node may have been filtered out.
+            if (node) {
+                let name = (_a = session.kernel) === null || _a === void 0 ? void 0 : _a.name;
+                const specs = this._model.specs;
+                node.classList.add(RUNNING_CLASS);
+                if (specs && name) {
+                    const spec = specs.kernelspecs[name];
+                    name = spec ? spec.display_name : this._trans.__('unknown');
+                }
+                node.title = this._trans.__('%1\nKernel: %2', node.title, name);
+            }
+        }
+    }
     /**
      * A handler invoked on an `'update-request'` message.
      */
     onUpdateRequest(msg) {
-        var _a;
         this._isDirty = false;
         // Fetch common variables.
         const items = this._sortedItems;
@@ -758,49 +827,18 @@ export class DirListing extends Widget {
                 ? trans.__('Deselect all files and directories')
                 : trans.__('Select all files and directories'));
         }
-        // Update item nodes based on widget state.
-        items.forEach((item, i) => {
-            const node = nodes[i];
-            const ft = this._manager.registry.getFileTypeForModel(item);
-            renderer.updateItemNode(node, item, ft, this.translator, this._hiddenColumns, this.selection[item.path]);
-            if (this.selection[item.path] &&
-                this._isCut &&
-                this._model.path === this._prevPath) {
-                node.classList.add(CUT_CLASS);
-            }
-            // add metadata to the node
-            node.setAttribute('data-isdir', item.type === 'directory' ? 'true' : 'false');
-        });
-        // Handle the selectors on the widget node.
-        const selected = Object.keys(this.selection).length;
-        if (selected) {
-            this.addClass(SELECTED_CLASS);
-            if (selected > 1) {
-                this.addClass(MULTI_SELECTED_CLASS);
-            }
-        }
-        // Handle file session statuses.
-        const paths = items.map(item => item.path);
-        for (const session of this._model.sessions()) {
-            const index = ArrayExt.firstIndexOf(paths, session.path);
-            const node = nodes[index];
-            // Node may have been filtered out.
-            if (node) {
-                let name = (_a = session.kernel) === null || _a === void 0 ? void 0 : _a.name;
-                const specs = this._model.specs;
-                node.classList.add(RUNNING_CLASS);
-                if (specs && name) {
-                    const spec = specs.kernelspecs[name];
-                    name = spec ? spec.display_name : this._trans.__('unknown');
-                }
-                node.title = this._trans.__('%1\nKernel: %2', node.title, name);
-            }
-        }
+        this.updateNodes(items, nodes);
         this._prevPath = this._model.path;
     }
     onResize(msg) {
         const { width } = msg.width === -1 ? this.node.getBoundingClientRect() : msg;
         this.toggleClass('jp-DirListing-narrow', width < 250);
+        // Rerender item nodes' modified dates, if the modified style has changed.
+        const oldModifiedStyle = this._modifiedStyle;
+        this._updateModifiedSize(this.node);
+        if (oldModifiedStyle !== this._modifiedStyle) {
+            this.updateModified(this._sortedItems, this._items);
+        }
     }
     setColumnVisibility(name, visible) {
         if (visible) {
@@ -1792,7 +1830,7 @@ export class DirListing extends Widget {
             const trans = translator.load('jupyterlab');
             const name = this.createHeaderItemNode(trans.__('Name'));
             const narrow = document.createElement('div');
-            const modified = this.createHeaderItemNode(trans.__('Last Modified'));
+            const modified = this.createHeaderItemNode(trans.__('Modified'));
             const fileSize = this.createHeaderItemNode(trans.__('File Size'));
             name.classList.add(NAME_ID_CLASS);
             name.classList.add(SELECTED_CLASS);
@@ -2000,6 +2038,25 @@ export class DirListing extends Widget {
             labelWrapper.appendChild(checkbox);
             return labelWrapper;
         }
+        /**
+         * Update an item's last modified date.
+         *
+         * @param modified - Element containing the file's last modified date.
+         *
+         * @param modifiedDate - String representation of the last modified date.
+         *
+         * @param modifiedStyle - The date style for the modified column: narrow, short, or long
+         */
+        updateItemModified(modified, modifiedDate, modifiedStyle) {
+            let modText = '';
+            let modTitle = '';
+            const parsedDate = new Date(modifiedDate);
+            // Render the date in one of multiple formats, depending on the container's size
+            modText = Time.formatHuman(parsedDate, modifiedStyle);
+            modTitle = Time.format(parsedDate);
+            modified.textContent = modText;
+            modified.title = modTitle;
+        }
         /**
          * Update an item node to reflect the current state of a model.
          *
@@ -2010,7 +2067,7 @@ export class DirListing extends Widget {
          * @param fileType - The file type of the item, if applicable.
          *
          */
-        updateItemNode(node, model, fileType, translator, hiddenColumns, selected) {
+        updateItemNode(node, model, fileType, translator, hiddenColumns, selected, modifiedStyle) {
             if (selected) {
                 node.classList.add(SELECTED_CLASS);
             }
@@ -2109,14 +2166,9 @@ export class DirListing extends Widget {
                 checkbox.setAttribute('aria-label', ariaLabel);
                 checkbox.checked = selected !== null && selected !== void 0 ? selected : false;
             }
-            let modText = '';
-            let modTitle = '';
             if (model.last_modified) {
-                modText = Time.formatHuman(new Date(model.last_modified));
-                modTitle = Time.format(new Date(model.last_modified));
+                this.updateItemModified(modified, model.last_modified, modifiedStyle !== null && modifiedStyle !== void 0 ? modifiedStyle : 'short');
             }
-            modified.textContent = modText;
-            modified.title = modTitle;
         }
         /**
          * Get the node containing the file name.