From 4b1a87c66b03f6f91a9fdf76258934feb22545c8 Mon Sep 17 00:00:00 2001 From: shanejonas Date: Mon, 27 May 2019 10:09:18 -0700 Subject: [PATCH] fix: add split pane resizing fixes #201 --- package-lock.json | 59 ++++++++++++++++---------------- package.json | 3 +- src/App.css | 51 +++++++++++++++++++++++++++- src/App.tsx | 73 ++++++++++++++++++++++++++++------------ src/MonacoJSONEditor.tsx | 2 ++ 5 files changed, 134 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index 56a0ec67..91c2ec02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8359,8 +8359,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -8381,14 +8380,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8403,20 +8400,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -8533,8 +8527,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -8546,7 +8539,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8561,7 +8553,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8569,14 +8560,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -8595,7 +8584,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8676,8 +8664,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -8689,7 +8676,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -8775,8 +8761,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -8812,7 +8797,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8832,7 +8816,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8876,14 +8859,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -18049,6 +18030,24 @@ } } }, + "react-split-pane": { + "version": "0.1.87", + "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.87.tgz", + "integrity": "sha512-F22jqWyKB1WximT0U5HKdSuB9tmJGjjP+WUyveHxJJys3ANsljj163kCdsI6M3gdfyCVC+B2rq8sc5m2Ko02RA==", + "requires": { + "prop-types": "^15.5.10", + "react-lifecycles-compat": "^3.0.4", + "react-style-proptype": "^3.0.0" + } + }, + "react-style-proptype": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-style-proptype/-/react-style-proptype-3.2.2.tgz", + "integrity": "sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==", + "requires": { + "prop-types": "^15.5.4" + } + }, "react-textarea-autosize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz", diff --git a/package.json b/package.json index 60497c92..49633c5b 100644 --- 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 index 2bfbd2ec..2521b3d9 100755 --- a/src/App.css +++ b/src/App.css @@ -3,4 +3,53 @@ padding: 10px; overflow: scroll; width: 100%; -} \ No newline at end of file +} +.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 index 12cdd187..f7889e64 100755 --- 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} /> -
- {this.state.uiSchema.appBar["ui:splitView"] && -
- - -
- } -
- -
-
- + {this.getPlayground()} + ); } + + private getSplitPane() { + return ( + this.editorInstance && this.editorInstance.layout()}> +
+ + this.editorInstance = editorInstance} + defaultValue={this.state.defaultValue} + onChange={this.setMarkers.bind(this)} /> +
+
+ +
+ + ); + } + + private getPlayground = () => { + if (!this.state.uiSchema.appBar["ui:splitView"]) { + return ( +
+ +
+ ); + } else { + return this.getSplitPane(); + } + } + } diff --git a/src/MonacoJSONEditor.tsx b/src/MonacoJSONEditor.tsx index 0efe8250..266078ca 100644 --- 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 { this.props.onChange(changedSchema); } }); + this.props.onCreate(this.editorInstance); } this.addCommands(this.editorInstance);