Mar 7, 2023 · Mar 2, 2023 · Mar 3, 2023 · Mar 3, 2023 · Mar 3, 2023 · Mar 3, 2023
diff --git a/packages/tree-extension/schema/widget.json b/packages/tree-extension/schema/widget.json
  "jupyter.lab.toolbars": {
    "FileBrowser": [
      { "name": "spacer", "type": "spacer", "rank": 900 },
      { "name": "fileNameSearcher", "rank": 950, "disabled": true },
      { "name": "new-dropdown", "rank": 1000 },
      { "name": "uploader", "rank": 1010 },
      { "name": "refresh", "command": "filebrowser:refresh", "rank": 1020 }
diff --git a/packages/tree-extension/src/index.ts b/packages/tree-extension/src/index.ts

 import {
  caretDownIcon,
  FilenameSearcher,
  folderIcon,
  IScore,
  runningIcon
 } from '@jupyterlab/ui-components';

 */
 const FILE_BROWSER_PLUGIN_ID = '@jupyterlab/filebrowser-extension:browser';

 /**
 * The class name added to the filebrowser filterbox node.
 */
 const FILTERBOX_CLASS = 'jp-FileBrowser-filterBox';

 /**
 * The namespace for command IDs.
 */
        })
    );

    toolbarRegistry.addFactory(
      FILE_BROWSER_FACTORY,
      'fileNameSearcher',
      (browser: FileBrowser) => {
        const searcher = FilenameSearcher({
          updateFilter: (
            filterFn: (item: string) => Partial<IScore> | null,
            query?: string
          ) => {
            browser.model.setFilter(value => {
              return filterFn(value.name.toLowerCase());
            });
          },
          useFuzzyFilter: true,
          placeholder: trans.__('Filter files by name'),
          forceRefresh: true
        });
        searcher.addClass(FILTERBOX_CLASS);
        return searcher;
      }
    );

    setToolbar(
      browser,
      createToolbarFactory(
diff --git a/packages/tree-extension/style/base.css b/packages/tree-extension/style/base.css
 .jp-FileBrowser-toolbar button.jp-ToolbarButtonComponent {
  height: 100%;
 }

 .jp-FileBrowser-filterBox {
  padding: 0;
  flex: 0 0 auto;
 }

 .jp-FileBrowser-filterBox input {
  line-height: 24px;
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,6 +4,7 @@
		"jupyter.lab.toolbars": {
		"FileBrowser": [
		{ "name": "spacer", "type": "spacer", "rank": 900 },
		{ "name": "fileNameSearcher", "rank": 950, "disabled": true },
		{ "name": "new-dropdown", "rank": 1000 },
		{ "name": "uploader", "rank": 1010 },
		{ "name": "refresh", "command": "filebrowser:refresh", "rank": 1020 }
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,7 +30,9 @@ import { ITranslator } from '@jupyterlab/translation';

		import {
		caretDownIcon,
		FilenameSearcher,
		folderIcon,
		IScore,
		runningIcon
		} from '@jupyterlab/ui-components';

Expand All		@@ -48,6 +50,11 @@ const FILE_BROWSER_FACTORY = 'FileBrowser';
		*/
		const FILE_BROWSER_PLUGIN_ID = '@jupyterlab/filebrowser-extension:browser';

		/**
		* The class name added to the filebrowser filterbox node.
		*/
		const FILTERBOX_CLASS = 'jp-FileBrowser-filterBox';

		/**
		* The namespace for command IDs.
		*/
Expand DownExpand Up		@@ -232,6 +239,28 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
		})
		);

		toolbarRegistry.addFactory(
		FILE_BROWSER_FACTORY,
		'fileNameSearcher',
		(browser: FileBrowser) => {
		const searcher = FilenameSearcher({
		updateFilter: (
		filterFn: (item: string) => Partial<IScore> \| null,
		query?: string
		) => {
		browser.model.setFilter(value => {
		return filterFn(value.name.toLowerCase());
		});
		},
		useFuzzyFilter: true,
		placeholder: trans.__('Filter files by name'),
		forceRefresh: true
		});
		searcher.addClass(FILTERBOX_CLASS);
		return searcher;
		}
		);

		setToolbar(
		browser,
		createToolbarFactory(
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,12 @@
		.jp-FileBrowser-toolbar button.jp-ToolbarButtonComponent {
		height: 100%;
		}

		.jp-FileBrowser-filterBox {
		padding: 0;
		flex: 0 0 auto;
		}

		.jp-FileBrowser-filterBox input {
		line-height: 24px;
		}