From 7787fa6966bcae4cf5356e43063f13a0723314a0 Mon Sep 17 00:00:00 2001 From: shanejonas Date: Mon, 16 Mar 2020 10:10:28 -0700 Subject: [PATCH] fix: appbar ui fixes --- package-lock.json | 18 ++-- src/App.tsx | 12 +-- src/AppBar/AppBar.tsx | 87 +++++++++++-------- .../ExampleDocumentsDropdown.tsx | 10 ++- src/hooks/useParsedSchema.tsx | 10 ++- src/stores/UISchemaStore.ts | 2 +- 6 files changed, 80 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index c4cf9a1f..8732b4ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3033,9 +3033,9 @@ }, "dependencies": { "acorn": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz", - "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==", + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", + "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==", "dev": true } } @@ -10110,9 +10110,9 @@ }, "dependencies": { "acorn": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz", - "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==", + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", + "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==", "dev": true }, "jsdom": { @@ -21447,9 +21447,9 @@ }, "dependencies": { "acorn": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz", - "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==", + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", + "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==", "dev": true }, "cacache": { diff --git a/src/App.tsx b/src/App.tsx index 700a0a3e..9d90b8e5 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, Dispatch } from "react"; import JSONValidationErrorList from "./JSONValidationErrorList"; import * as monaco from "monaco-editor"; import { Documentation } from "@open-rpc/docs-react"; @@ -32,8 +32,11 @@ const App: React.FC = () => { const [searchUrl, { results, error }, setSearchUrl] = searchBarStore(); const [notification, setNotification] = useState(); const [UISchema, setUISchemaBySection]: [IUISchema, any] = UISchemaStore(); - const [editor, setEditor] = useState(); + const [editor, setEditor]: [any, Dispatch<{}>] = useState(); const [horizontalSplit, privateSetHorizontalSplit] = useState(false); + const [parsedSchema, setParsedSchema] = useParsedSchema( + defaultValue ? JSON.parse(defaultValue) : null, + ); const setHorizontalSplit = (val: boolean) => { if (editor) { setTimeout(() => { @@ -80,7 +83,7 @@ const App: React.FC = () => { editor.setValue(results); } if (results) { - setParsedSchema(results); + setParsedSchema(results!); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [results]); @@ -94,9 +97,8 @@ const App: React.FC = () => { } }, [error]); - const [parsedSchema, setParsedSchema] = useParsedSchema(defaultValue ? JSON.parse(defaultValue) : null); useEffect(() => { - setParsedSchema(defaultValue); + setParsedSchema(defaultValue || ""); // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultValue]); const [reactJsonOptions, setReactJsonOptions] = useState({ diff --git a/src/AppBar/AppBar.tsx b/src/AppBar/AppBar.tsx index 1ebbd718..6f57b0b9 100644 --- a/src/AppBar/AppBar.tsx +++ b/src/AppBar/AppBar.tsx @@ -10,11 +10,12 @@ import { WithStyles, withStyles, Hidden, + Tooltip, } from "@material-ui/core"; -import VerticalSplitIcon from "@material-ui/icons/VerticalSplit"; import FullscreenIcon from "@material-ui/icons/Fullscreen"; import WbSunnyIcon from "@material-ui/icons/WbSunny"; import Brightness3Icon from "@material-ui/icons/Brightness3"; +import EditIcon from "@material-ui/icons/Edit"; import { IUISchema } from "../UISchema"; import SearchBar from "../SearchBar/SearchBar"; import ExampleDocumentsDropdown, { IExample } from "../ExampleDocumentsDropdown/ExampleDocumentsDropdown"; @@ -50,8 +51,8 @@ class ApplicationBar extends Component { return ( - - + + {this.props.uiSchema && this.props.uiSchema.appBar && this.props.uiSchema.appBar["ui:logoUrl"] && { src={this.props.uiSchema.appBar["ui:logoUrl"]} /> } - + {uiSchema && uiSchema.appBar["ui:title"]} - - - {this.props.uiSchema && this.props.uiSchema.appBar && this.props.uiSchema.appBar["ui:input"] && - - - - } + + + + {this.props.uiSchema && this.props.uiSchema.appBar && this.props.uiSchema.appBar["ui:input"] && + + + + } + + - - - - {uiSchema && uiSchema.appBar["ui:splitView"] ? - { + + {uiSchema && uiSchema.appBar["ui:splitView"] ? + + { if (onSplitViewChange) { onSplitViewChange(false); } - }} /> - : - { + }}> + + + + : + + { if (onSplitViewChange) { onSplitViewChange(true); } - }} /> - } - - - {uiSchema && uiSchema.appBar["ui:darkMode"] ? - onDarkModeChange(false)} /> - : - onDarkModeChange(true)} /> - } - + }}> + + + + } + + + {uiSchema && uiSchema.appBar["ui:darkMode"] ? + onDarkModeChange(false)} /> + : + onDarkModeChange(true)} /> + } + + - + ); } } diff --git a/src/ExampleDocumentsDropdown/ExampleDocumentsDropdown.tsx b/src/ExampleDocumentsDropdown/ExampleDocumentsDropdown.tsx index da02238d..9fe8374f 100644 --- a/src/ExampleDocumentsDropdown/ExampleDocumentsDropdown.tsx +++ b/src/ExampleDocumentsDropdown/ExampleDocumentsDropdown.tsx @@ -1,5 +1,6 @@ import * as React from "react"; import { Menu, MenuItem, Tooltip, Button, Grid, Typography } from "@material-ui/core"; +import DropdownIcon from "@material-ui/icons/ArrowDropDown"; export interface IExample { name: "string"; @@ -36,7 +37,12 @@ const ExampleDocumentsDropdown: React.FC = ({ examples, onChange }) => { return ( <> - + = ({ examples, onChange }) => { {example.name} - {example.url} + {example.url} diff --git a/src/hooks/useParsedSchema.tsx b/src/hooks/useParsedSchema.tsx index cc15ee8c..0a935834 100644 --- a/src/hooks/useParsedSchema.tsx +++ b/src/hooks/useParsedSchema.tsx @@ -1,9 +1,10 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, Dispatch } from "react"; import _ from "lodash"; import refParser from "json-schema-ref-parser"; +import { OpenrpcDocument } from "@open-rpc/meta-schema"; -const useParsedSchema = (defaultValue: object | any) => { - const [parsedSchema, setParsedSchema] = useState(); +const useParsedSchema = (defaultValue: object | any): [OpenrpcDocument | undefined, Dispatch] => { + const [parsedSchema, setParsedSchema]: [OpenrpcDocument | undefined, Dispatch] = useState(); const validateAndSetSchema = (schema: string) => { let maybeSchema; try { @@ -15,7 +16,8 @@ const useParsedSchema = (defaultValue: object | any) => { return; } refParser.dereference(maybeSchema).then((dereferencedSchema) => { - setParsedSchema(dereferencedSchema); + setParsedSchema(dereferencedSchema as OpenrpcDocument); + // set original non-dereff'd schema to localstorage _.defer(() => window.localStorage.setItem("schema", schema)); }); }; diff --git a/src/stores/UISchemaStore.ts b/src/stores/UISchemaStore.ts index ccec6897..c1d65a1a 100644 --- a/src/stores/UISchemaStore.ts +++ b/src/stores/UISchemaStore.ts @@ -15,7 +15,7 @@ export default createStore(() => { /* tslint:enable */ "ui:splitView": true, "ui:darkMode": false, - "ui:title": "OpenRPC Playground", + "ui:title": "Playground", }, methods: { "ui:defaultExpanded": false,