Merge pull request #202 from open-rpc/fix/split-pane-resize

fix: add split pane resizing
open-rpc · May 27, 2019 · a4b2026 · a4b2026
2 parents 66c0809 + 4469c7c
commit a4b2026
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,8 @@
     "react-dom": "^16.8.6",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.8",
-    "react-monaco-editor": "^0.25.1"
+    "react-monaco-editor": "^0.25.1",
+    "react-split-pane": "^0.1.87"
   },
   "scripts": {
     "lint": "tslint --fix -p .",

diff --git a/src/App.css b/src/App.css
@@ -3,4 +3,53 @@
   padding: 10px;
   overflow: scroll;
   width: 100%;
-}
+}
+.Resizer {
+  background: #000;
+  opacity: .2;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+}
+
+.Resizer:hover {
+  -webkit-transition: all 2s ease;
+  transition: all 2s ease;
+}
+
+.Resizer.horizontal {
+  height: 11px;
+  margin: -5px 0;
+  border-top: 5px solid rgba(255, 255, 255, 0);
+  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  cursor: row-resize;
+  width: 100%;
+}
+
+.Resizer.horizontal:hover {
+  border-top: 5px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+border-color: transparent;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,7 +12,8 @@ import AppBar from "./AppBar/AppBar";
 import * as qs from "qs";
 import { OpenRPC } from "@open-rpc/meta-schema";
 import { IUISchema } from "./UISchema";
-import {SnackBar, ISnackBarNotification, NotificationType} from "./SnackBar/SnackBar";
+import { SnackBar, ISnackBarNotification, NotificationType } from "./SnackBar/SnackBar";
+import SplitPane from "react-split-pane";
 
 interface IState {
   markers: any[];
@@ -25,6 +26,7 @@ interface IState {
 
 export default class App extends React.Component<{}, IState> {
   private debouncedHandleUrlChange: any;
+  private editorInstance?: monaco.editor.IStandaloneCodeEditor;
 
   constructor(props: {}) {
     super(props);
@@ -64,10 +66,10 @@ export default class App extends React.Component<{}, IState> {
   }
 
   public setNotification = (notification: ISnackBarNotification) => {
-      this.setState({notification});
+    this.setState({ notification });
   }
   public setErrorNotification = (message: string) => {
-    this.setNotification({message, type: NotificationType.error});
+    this.setNotification({ message, type: NotificationType.error });
   }
 
   public handleSnackbarClose() {
@@ -76,7 +78,7 @@ export default class App extends React.Component<{}, IState> {
 
   public dHandleUrlChange = async (jsonOrRPC: string) => {
     let newSchema;
-    if (isEmpty(jsonOrRPC)) {return; }
+    if (isEmpty(jsonOrRPC)) { return; }
     if (jsonOrRPC.match(/\.json$/)) {
       try {
         newSchema = await fetchUrlSchemaFile(jsonOrRPC);
@@ -195,25 +197,52 @@ export default class App extends React.Component<{}, IState> {
           uiSchema={this.state.uiSchema}
           onSplitViewChange={this.handleUISchemaAppBarChange("ui:splitView")}
           onChangeUrl={this.handleUrlChange} />
-        <div style={{ height: "100%", display: "flex", flexDirection: "row" }}>
-          {this.state.uiSchema.appBar["ui:splitView"] &&
-            <div style={{ display: "flex", flexDirection: "column", height: "100%", width: "50%" }} >
-              <JSONValidationErrorList markers={this.state.markers} />
-              <MonacoJSONEditor
-                defaultValue={this.state.defaultValue}
-                onChange={this.setMarkers.bind(this)} />
-            </div>
-          }
-          <div className="docs">
-            <Documentation
-              schema={this.state.parsedSchema as OpenRPC}
-              uiSchema={this.state.uiSchema}
-              reactJsonOptions={this.state.reactJsonOptions}
-            />
-          </div>
-        </div>
-        <SnackBar close={this.handleSnackbarClose} notification={this.state.notification}/>
+        {this.getPlayground()}
+        <SnackBar close={this.handleSnackbarClose} notification={this.state.notification} />
       </>
     );
   }
+
+  private getSplitPane() {
+    return (
+      <SplitPane
+        split="vertical"
+        minSize={100}
+        maxSize={-100}
+        defaultSize={window.innerWidth / 2}
+        onChange={(size) => this.editorInstance && this.editorInstance.layout()}>
+        <div key={1} style={{ display: "flex", flexDirection: "column", height: "100%" }} >
+          <JSONValidationErrorList markers={this.state.markers} />
+          <MonacoJSONEditor
+            onCreate={(editorInstance: monaco.editor.IStandaloneCodeEditor) => this.editorInstance = editorInstance}
+            defaultValue={this.state.defaultValue}
+            onChange={this.setMarkers.bind(this)} />
+        </div>
+        <div className="docs" key={2}>
+          <Documentation
+            schema={this.state.parsedSchema as OpenRPC}
+            uiSchema={this.state.uiSchema}
+            reactJsonOptions={this.state.reactJsonOptions}
+          />
+        </div>
+      </SplitPane>
+    );
+  }
+
+  private getPlayground = () => {
+    if (!this.state.uiSchema.appBar["ui:splitView"]) {
+      return (
+        <div className="docs" key={2}>
+          <Documentation
+            schema={this.state.parsedSchema as OpenRPC}
+            uiSchema={this.state.uiSchema}
+            reactJsonOptions={this.state.reactJsonOptions}
+          />
+        </div>
+      );
+    } else {
+      return this.getSplitPane();
+    }
+  }
+
 }
diff --git a/src/MonacoJSONEditor.tsx b/src/MonacoJSONEditor.tsx
@@ -12,6 +12,7 @@ import schema from "@open-rpc/meta-schema";
 interface IProps {
   defaultValue?: string;
   onChangeMarkers?: any;
+  onCreate?: any;
   onChange?: any;
 }
 
@@ -99,6 +100,7 @@ export default class MonacoJSONEditor extends React.Component<IProps> {
           this.props.onChange(changedSchema);
         }
       });
+      this.props.onCreate(this.editorInstance);
     }
 
     this.addCommands(this.editorInstance);