Merge pull request #375 from open-rpc/fix/appbar-ui-fixes

fix: appbar ui fixes
open-rpc · Mar 16, 2020 · ba687ac · ba687ac
2 parents a64f5aa + 7787fa6
commit ba687ac
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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<ISnackBarNotification | undefined>();
   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
@@ -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<IProps> {
     return (
       <AppBar position="fixed" color="default" elevation={0} className={classes.appBar}>
         <Toolbar>
-          <Grid alignItems="center" container spacing={10}>
-            <Grid item xs={6} sm={3} direction="row" container>
+          <Grid alignItems="center" container>
+            <Grid item xs={6} sm={6} md={3} direction="row" container>
               {this.props.uiSchema && this.props.uiSchema.appBar && this.props.uiSchema.appBar["ui:logoUrl"] &&
                 <Grid>
                   <img
@@ -60,57 +61,67 @@ class ApplicationBar extends Component<IProps> {
                     src={this.props.uiSchema.appBar["ui:logoUrl"]} />
                 </Grid>
               }
-              <Grid>
+              <Grid style={{ overflow: "hidden" }}>
                 <Typography className={classes.title} variant="h6">
                   {uiSchema && uiSchema.appBar["ui:title"]}
                 </Typography>
               </Grid>
             </Grid>
-            <Hidden only="xs">
-              <Grid item sm={6}>
-                {this.props.uiSchema && this.props.uiSchema.appBar && this.props.uiSchema.appBar["ui:input"] &&
-                  <Paper style={{
-                    background: "rgba(0, 0, 0, 0.1)",
-                    padding: "0px 10px 0px 10px",
-                    width: "100%",
-                  }} elevation={0}>
-                    <SearchBar
-                      searchBarUrl={this.props.searchBarUrl}
-                      onChangeUrl={this.props.onChangeUrl}
-                      uiSchema={uiSchema}
-                    />
-                  </Paper>
-                }
+            <Hidden smDown>
+              <Grid item container justify="center" alignItems="center" sm={6} >
+                <Grid item sm={9}>
+                  {this.props.uiSchema && this.props.uiSchema.appBar && this.props.uiSchema.appBar["ui:input"] &&
+                    <Paper style={{
+                      background: "rgba(0, 0, 0, 0.1)",
+                      padding: "0px 10px 0px 10px",
+                      width: "100%",
+                    }} elevation={0}>
+                      <SearchBar
+                        searchBarUrl={this.props.searchBarUrl}
+                        onChangeUrl={this.props.onChangeUrl}
+                        uiSchema={uiSchema}
+                      />
+                    </Paper>
+                  }
+                </Grid>
+                <ExampleDocumentsDropdown examples={examples} onChange={onExampleDocumentsDropdownChange} />
               </Grid>
             </Hidden>
-            <Grid item xs={6} sm={3} container justify="flex-end">
-              <ExampleDocumentsDropdown examples={examples} onChange={onExampleDocumentsDropdownChange} />
-              <IconButton>
-                {uiSchema && uiSchema.appBar["ui:splitView"] ?
-                  <FullscreenIcon onClick={() => {
+            <Grid item xs={6} sm={6} md={3} container justify="flex-end" alignItems="center">
+              {uiSchema && uiSchema.appBar["ui:splitView"] ?
+                <Tooltip title={"Full Screen"}>
+                  <IconButton onClick={() => {
                     if (onSplitViewChange) {
                       onSplitViewChange(false);
                     }
-                  }} />
-                  :
-                  <VerticalSplitIcon onClick={() => {
+                  }}>
+                    <FullscreenIcon />
+                  </IconButton>
+                </Tooltip>
+                :
+                <Tooltip title={"Edit"}>
+                  <IconButton onClick={() => {
                     if (onSplitViewChange) {
                       onSplitViewChange(true);
                     }
-                  }} />
-                }
-              </IconButton>
-              <IconButton>
-                {uiSchema && uiSchema.appBar["ui:darkMode"] ?
-                  <Brightness3Icon onClick={() => onDarkModeChange(false)} />
-                  :
-                  <WbSunnyIcon onClick={() => onDarkModeChange(true)} />
-                }
-              </IconButton>
+                  }}>
+                    <EditIcon />
+                  </IconButton>
+                </Tooltip>
+              }
+              <Tooltip title="Toggle Dark Theme">
+                <IconButton>
+                  {uiSchema && uiSchema.appBar["ui:darkMode"] ?
+                    <Brightness3Icon onClick={() => onDarkModeChange(false)} />
+                    :
+                    <WbSunnyIcon onClick={() => onDarkModeChange(true)} />
+                  }
+                </IconButton>
+              </Tooltip>
             </Grid>
           </Grid>
         </Toolbar>
-      </AppBar>
+      </AppBar >
     );
   }
 }

diff --git 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<IProps> = ({ examples, onChange }) => {
   return (
     <>
       <Tooltip title={"Example OpenRPC Documents"}>
-        <Button onClick={handleClick}>Examples</Button>
+        <Button
+          onClick={handleClick}
+          variant="outlined"
+          endIcon={<DropdownIcon />}
+          style={{ height: "38px", fontSize: "11px", marginLeft: "10px" }}
+        >examples</Button>
       </Tooltip>
       <Menu
         id="simple-menu"
@@ -53,7 +59,7 @@ const ExampleDocumentsDropdown: React.FC<IProps> = ({ examples, onChange }) => {
                   <Typography variant="subtitle1">{example.name}</Typography>
                 </Grid>
                 <Grid item xs={12}>
-                  <Typography variant="caption" style={{fontSize: "9px"}}>{example.url}</Typography>
+                  <Typography variant="caption" style={{ fontSize: "9px" }}>{example.url}</Typography>
                 </Grid>
               </Grid>
             </MenuItem>

diff --git 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<string>] => {
+  const [parsedSchema, setParsedSchema]: [OpenrpcDocument | undefined, Dispatch<OpenrpcDocument>] = 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
@@ -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,