Merge branch 'master' into workspace-folders-api

eclipse-theia · Jun 21, 2018 · 36389a6 · 36389a6
2 parents 074a5ea + 86654a0
commit 36389a6
Show file tree

Hide file tree

Showing 14 changed files with 402 additions and 274 deletions.
diff --git a/configs/base.tsconfig.json b/configs/base.tsconfig.json
@@ -13,6 +13,7 @@
         "module": "commonjs",
         "moduleResolution": "node",
         "target": "es5",
+        "jsx": "react",
         "lib": [
             "es6",
             "dom"

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -35,7 +35,9 @@
     "vscode-uri": "^1.0.1",
     "vscode-ws-jsonrpc": "^0.0.2-1",
     "ws": "^3.0.0",
-    "yargs": "^9.0.1"
+    "yargs": "^9.0.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
   },
   "publishConfig": {
     "access": "public"
@@ -75,9 +77,11 @@
     "docs": "theiaext docs"
   },
   "devDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
     "@theia/ext-scripts": "^0.3.11"
   },
   "nyc": {
     "extends": "../../configs/nyc.json"
   }
-}
+}
diff --git a/...core/src/browser/status-bar/status-bar.ts → ...ore/src/browser/status-bar/status-bar.tsx b/...core/src/browser/status-bar/status-bar.ts → ...ore/src/browser/status-bar/status-bar.tsx
@@ -1,16 +1,16 @@
 /*
- * Copyright (C) 2017 TypeFox and others.
+ * Copyright (C) 2017-2018 TypeFox and others.
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  */
 
-import { VirtualRenderer, VirtualWidget } from '../widgets';
 import { CommandService } from '../../common';
-import { h, ElementInlineStyle } from '@phosphor/virtualdom';
 import { LabelParser, LabelIcon } from '../label-parser';
 import { injectable, inject } from 'inversify';
 import { FrontendApplicationStateService } from '../frontend-application-state';
+import { ReactWidget } from '../widgets/react-widget';
+import * as React from "react";
 
 export interface StatusBarEntry {
     /**
@@ -41,10 +41,10 @@ export enum StatusBarAlignment {
 }
 
 export interface StatusBarEntryAttributes {
-    style?: ElementInlineStyle;
     className?: string;
     title?: string;
-    onclick?: (e: MouseEvent) => void;
+    style?: object;
+    onClick?: (e: MouseEvent) => void;
 }
 
 export const STATUSBAR_WIDGET_FACTORY_ID = 'statusBar';
@@ -58,7 +58,7 @@ export interface StatusBar {
 }
 
 @injectable()
-export class StatusBarImpl extends VirtualWidget implements StatusBar {
+export class StatusBarImpl extends ReactWidget implements StatusBar {
 
     protected backgroundColor: string | undefined;
     protected entries: Map<string, StatusBarEntry> = new Map();
@@ -100,9 +100,9 @@ export class StatusBarImpl extends VirtualWidget implements StatusBar {
         this.node.style.backgroundColor = this.backgroundColor ? this.backgroundColor : null;
     }
 
-    protected render(): h.Child {
-        const leftEntries: h.Child[] = [];
-        const rightEntries: h.Child[] = [];
+    protected render(): JSX.Element {
+        const leftEntries: JSX.Element[] = [];
+        const rightEntries: JSX.Element[] = [];
         const elements = Array.from(this.entries.values()).sort((left, right) => {
             const lp = left.priority || 0;
             const rp = right.priority || 0;
@@ -115,24 +115,30 @@ export class StatusBarImpl extends VirtualWidget implements StatusBar {
                 rightEntries.push(this.renderElement(entry));
             }
         });
-        const leftElements = h.div({ className: 'area left' }, VirtualRenderer.flatten(leftEntries));
-        const rightElements = h.div({ className: 'area right' }, VirtualRenderer.flatten(rightEntries));
-        return VirtualRenderer.flatten([leftElements, rightElements]);
+
+        return <React.Fragment>
+            <div className="area left">{leftEntries}</div>
+            <div className="area right">{rightEntries}</div>
+        </React.Fragment>;
+    }
+
+    protected onclick(entry: StatusBarEntry): () => void {
+        return () => {
+            if (entry.command) {
+                const args = entry.arguments || [];
+                this.commands.executeCommand(entry.command, ...args);
+            }
+        };
     }
 
     protected createAttributes(entry: StatusBarEntry): StatusBarEntryAttributes {
         const attrs: StatusBarEntryAttributes = {};
 
         if (entry.command) {
-            attrs.onclick = () => {
-                if (entry.command) {
-                    const args = entry.arguments || [];
-                    this.commands.executeCommand(entry.command, ...args);
-                }
-            };
+            attrs.onClick = this.onclick(entry);
             attrs.className = 'element hasCommand';
         } else if (entry.onclick) {
-            attrs.onclick = (e) => {
+            attrs.onClick = e => {
                 if (entry.onclick) {
                     entry.onclick(e);
                 }
@@ -159,21 +165,22 @@ export class StatusBarImpl extends VirtualWidget implements StatusBar {
         return attrs;
     }
 
-    protected renderElement(entry: StatusBarEntry): h.Child {
+    protected renderElement(entry: StatusBarEntry): JSX.Element {
         const childStrings = this.entryService.parse(entry.text);
-        const children: h.Child[] = [];
+        const children: JSX.Element[] = [];
 
         childStrings.forEach((val, idx) => {
+            const key = entry.alignment + "-" + idx;
             if (!(typeof val === 'string') && LabelIcon.is(val)) {
                 const classStr = `fa fa-${val.name} ${val.animation ? 'fa-' + val.animation : ''}`;
-                children.push(h.span({ className: classStr }));
+                children.push(<span className={classStr} key={key}></span>);
             } else {
-                children.push(h.span({}, val));
+                children.push(<span key={key}>{val}</span>);
             }
         });
-        const elementInnerDiv = h.div(VirtualRenderer.flatten(children));
+        const elementInnerDiv = <div>{children}</div>;
 
-        return h.div(this.createAttributes(entry), elementInnerDiv);
+        return React.createElement("div", { key: entry.text + entry.tooltip + entry.priority + entry.command , ...this.createAttributes(entry) }, elementInnerDiv);
     }
 
 }
diff --git a/packages/core/src/browser/widgets/react-widget.tsx b/packages/core/src/browser/widgets/react-widget.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2018 TypeFox and others.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+import * as ReactDOM from "react-dom";
+import * as React from "react";
+import { injectable } from "inversify";
+import { DisposableCollection, Disposable } from "../../common";
+import { BaseWidget, Message } from "./widget";
+
+@injectable()
+export abstract class ReactWidget extends BaseWidget {
+
+    protected readonly onRender = new DisposableCollection();
+    protected scrollOptions = {
+        suppressScrollX: true
+    };
+
+    constructor() {
+        super();
+        this.toDispose.push(Disposable.create(() => {
+            ReactDOM.unmountComponentAtNode(this.node);
+        }));
+    }
+
+    protected onUpdateRequest(msg: Message): void {
+        super.onUpdateRequest(msg);
+        ReactDOM.render(<React.Fragment>{this.render()}</React.Fragment>, this.node, () => this.onRender.dispose());
+    }
+
+    protected abstract render(): React.ReactNode;
+}
diff --git a/packages/core/src/browser/widgets/virtual-widget.ts b/packages/core/src/browser/widgets/virtual-widget.ts
@@ -11,6 +11,9 @@ import { DisposableCollection } from "../../common";
 import { BaseWidget, Message } from "./widget";
 import { VirtualRenderer } from "./virtual-renderer";
 
+/*
+ * @deprecated use ReactWidget instead.
+ */
 @injectable()
 export class VirtualWidget extends BaseWidget {
 

diff --git a/packages/core/src/common/uri-command-handler.ts b/packages/core/src/common/uri-command-handler.ts
@@ -50,11 +50,6 @@ export namespace UriAwareCommandHandler {
          */
         readonly multi?: boolean,
 
-        /**
-         * Additional validation callback on the URIs.
-         */
-        readonly isValid?: (uris: URI[]) => boolean;
-
     }
 
 }
@@ -76,9 +71,6 @@ export class UriAwareCommandHandler<T extends MaybeArray<URI>> implements Comman
             return UriSelection.getUri(selection) as T;
         }
         const uris = UriSelection.getUris(selection);
-        if (this.options && this.options.isValid) {
-            return (this.options.isValid(uris) ? uris : undefined) as T;
-        }
         return uris as T;
     }
 
@@ -93,9 +85,6 @@ export class UriAwareCommandHandler<T extends MaybeArray<URI>> implements Comman
         const uri = this.getUri(...args);
         if (uri) {
             if (this.handler.isVisible) {
-                if (this.isMulti() && Array.isArray(uri)) {
-                    return uri.every(u => this.handler.isVisible!(u, ...args));
-                }
                 return this.handler.isVisible(uri as T, ...args);
             }
             return true;
@@ -108,9 +97,6 @@ export class UriAwareCommandHandler<T extends MaybeArray<URI>> implements Comman
         const uri = this.getUri(...args);
         if (uri) {
             if (this.handler.isEnabled) {
-                if (this.isMulti() && Array.isArray(uri)) {
-                    return uri.every(u => this.handler.isEnabled!(u, ...args));
-                }
                 return this.handler.isEnabled(uri as T, ...args);
             }
             return true;