diff --git a/schema/plugin.json b/schema/plugin.json index fe053ad..8a4b9e4 100644 --- a/schema/plugin.json +++ b/schema/plugin.json @@ -4,7 +4,8 @@ "jupyter.lab.toolbars": { "FileSystemAccess": [ { "name": "open-folder", "rank": 0 }, - { "name": "uploader", "rank": 10 } + { "name": "uploader", "rank": 10 }, + { "name": "filename-searcher", "rank": 20 } ] }, "jupyter.lab.transform": true, diff --git a/src/index.ts b/src/index.ts index d6fff6f..6613bc5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -20,7 +20,12 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry'; import { ITranslator, nullTranslator } from '@jupyterlab/translation'; -import { listIcon, folderIcon } from '@jupyterlab/ui-components'; +import { + listIcon, + folderIcon, + IScore, + FilenameSearcher +} from '@jupyterlab/ui-components'; import { FileSystemDrive } from './drive'; @@ -29,6 +34,11 @@ import { FileSystemDrive } from './drive'; */ const FILE_SYSTEM_ACCESS_FACTORY = 'FileSystemAccess'; +/** + * The class name added to the filebrowser filterbox node. + */ +const FILTERBOX_CLASS = 'jp-FileBrowser-filterBox'; + /** * Initialization data for the jupyterlab-filesystem-access extension. */ @@ -120,6 +130,28 @@ const plugin: JupyterFrontEndPlugin = { translator }) ); + + toolbarRegistry.addFactory( + FILE_SYSTEM_ACCESS_FACTORY, + 'filename-searcher', + (browser: FileBrowser) => { + const searcher = FilenameSearcher({ + updateFilter: ( + filterFn: (item: string) => Partial | null, + query?: string + ) => { + widget.model.setFilter(value => { + return filterFn(value.name.toLowerCase()); + }); + }, + useFuzzyFilter: true, + placeholder: trans.__('Filter files by name'), + forceRefresh: true + }); + searcher.addClass(FILTERBOX_CLASS); + return searcher; + } + ); } app.shell.add(widget, 'left', { type: 'FileSystemAccess' });