OpenDialog Plugin API

packages/filesystem/src/browser/file-dialog/file-dialog-container.ts

@@ -15,11 +15,12 @@
  ********************************************************************************/
 
 import { interfaces, Container } from "inversify";
-import { TreeModel } from "@theia/core/lib/browser";
+import { Tree, TreeModel, TreeProps, defaultTreeProps } from "@theia/core/lib/browser";
 import { createFileTreeContainer, FileTreeModel, FileTreeWidget } from '../file-tree';
 import { FileDialog, FileDialogProps } from "./file-dialog";
 import { FileDialogModel } from "./file-dialog-model";
 import { FileDialogWidget } from './file-dialog-widget';
+import { FileDialogTree } from './file-dialog-tree';
 
 export function createFileDialogContainer(parent: interfaces.Container): Container {
     const child = createFileTreeContainer(parent);
@@ -31,13 +32,21 @@ export function createFileDialogContainer(parent: interfaces.Container): Contain
     child.unbind(FileTreeWidget);
     child.bind(FileDialogWidget).toSelf();
 
+    child.bind(FileDialogTree).toSelf();
+    child.rebind(Tree).toService(FileDialogTree);
+
     child.bind(FileDialog).toSelf();
 
     return child;
 }
 
 export function createFileDialog(parent: interfaces.Container, props: FileDialogProps): FileDialog {
     const container = createFileDialogContainer(parent);
+    container.rebind(TreeProps).toConstantValue({
+        ...defaultTreeProps,
+        multiSelect: props.canSelectMany
+    });
+
     container.bind(FileDialogProps).toConstantValue(props);
     return container.get(FileDialog);
 }

packages/filesystem/src/browser/file-dialog/file-dialog-model.ts

@@ -17,12 +17,13 @@
 import { injectable, inject, postConstruct } from "inversify";
 import { Emitter, Event } from "@theia/core/lib/common";
 import { TreeNode } from "@theia/core/lib/browser";
-import { DirNode, FileNode, FileTreeModel, FileTree } from '../file-tree';
+import { DirNode, FileNode, FileTreeModel } from '../file-tree';
+import { FileDialogTree } from './file-dialog-tree';
 
 @injectable()
 export class FileDialogModel extends FileTreeModel {
 
-    @inject(FileTree) protected readonly tree: FileTree;
+    @inject(FileDialogTree) readonly tree: FileDialogTree;
     protected readonly onDidOpenFileEmitter = new Emitter<void>();
 
     @postConstruct()

packages/filesystem/src/browser/file-dialog/file-dialog-tree-filters-renderer.tsx

@@ -0,0 +1,86 @@
+/********************************************************************************
+ * Copyright (C) 2018 Red Hat, Inc. and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { ReactRenderer } from "@theia/core/lib/browser/widgets/react-renderer";
+import { FileDialogTree } from './file-dialog-tree';
+import * as React from 'react';
+
+export const FILE_TREE_FILTERS_LIST_CLASS = 'theia-FileTreeFiltersList';
+
+/**
+ * A set of file filters that are used by the dialog. Each entry is a human readable label,
+ * like "TypeScript", and an array of extensions, e.g.
+ * ```ts
+ * {
+ * 	'Images': ['png', 'jpg']
+ * 	'TypeScript': ['ts', 'tsx']
+ * }
+ * ```
+ */
+export class FileDialogTreeFilters {
+    [name: string]: string[];
+}
+
+export class FileDialogTreeFiltersRenderer extends ReactRenderer {
+
+    constructor(
+        readonly filters: FileDialogTreeFilters,
+        readonly fileDialogTree: FileDialogTree
+    ) {
+        super();
+    }
+
+    protected readonly handleFilterChanged = (e: React.ChangeEvent<HTMLSelectElement>) => this.onFilterChanged(e);
+
+    protected doRender(): React.ReactNode {
+        if (!this.filters) {
+            return null;
+        }
+
+        const fileTypes = ['All Files'];
+        Object.keys(this.filters).forEach(element => {
+            fileTypes.push(element);
+        });
+
+        const options = fileTypes.map(value => this.renderLocation(value));
+        return <select className={FILE_TREE_FILTERS_LIST_CLASS} onChange={this.handleFilterChanged}>{...options}</select>;
+    }
+
+    protected renderLocation(value: string): React.ReactNode {
+        return <option value={value} key={value}>{value}</option>;
+    }
+
+    protected onFilterChanged(e: React.ChangeEvent<HTMLSelectElement>): void {
+        const locationList = this.locationList;
+        if (locationList) {
+            const value = locationList.value;
+            const filters = this.filters[value];
+            this.fileDialogTree.setFilter(filters);
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    get locationList(): HTMLSelectElement | undefined {
+        const locationList = this.host.getElementsByClassName(FILE_TREE_FILTERS_LIST_CLASS)[0];
+        if (locationList instanceof HTMLSelectElement) {
+            return locationList;
+        }
+        return undefined;
+    }
+
+}

packages/filesystem/src/browser/file-dialog/file-dialog-tree.ts

@@ -0,0 +1,84 @@
+/********************************************************************************
+ * Copyright (C) 2018 Red Hat, Inc. and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { injectable } from 'inversify';
+import { DirNode, FileTree } from '../file-tree';
+import { TreeNode, CompositeTreeNode } from '@theia/core/lib/browser/tree/tree';
+import { FileStat } from '../../common';
+
+@injectable()
+export class FileDialogTree extends FileTree {
+
+    /**
+     * Extensions for files to be shown
+     */
+    protected fileExtensions: string[] = [];
+
+    /**
+     * Sets extensions for filtering files
+     *
+     * @param fileExtensions array of extensions
+     */
+    setFilter(fileExtensions: string[]): void {
+        this.fileExtensions = [];
+
+        if (fileExtensions) {
+            fileExtensions.forEach(e => {
+                this.fileExtensions.push(e);
+            });
+        }
+
+        this.refresh();
+    }
+
+    protected async toNodes(fileStat: FileStat, parent: CompositeTreeNode): Promise<TreeNode[]> {
+        if (!fileStat.children) {
+            return [];
+        }
+
+        const result = await Promise.all(
+            fileStat.children
+                .filter(child => {
+                    return this.isVisible(child);
+                })
+                .map(async child =>
+                    await this.toNode(child, parent)
+                )
+        );
+
+        return result.sort(DirNode.compare);
+    }
+
+    /**
+     * Determines whether file or folder can be shown
+     *
+     * @param fileStat resource to check
+     */
+    protected isVisible(fileStat: FileStat): boolean {
+        if (fileStat.isDirectory) {
+            return true;
+        }
+
+        if (this.fileExtensions.length === 0) {
+            return true;
+        }
+
+        return !this.fileExtensions.every((value) => {
+            return !fileStat.uri.endsWith('.' + value);
+        });
+    }
+
+}