fix: add transition props + upgrade react

Author: shanejonas

package-lock.json

@@ -11,14 +11,15 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@material-ui/icons": "^3.0.2",
+    "@material-ui/core": "^4.7.1",
+    "@material-ui/icons": "^4.5.1",
+    "@material-ui/styles": "^4.7.1",
     "@open-rpc/examples": "^1.3.3",
     "hash-color-material": "^1.1.3",
     "json-schema": "^0.2.3",
     "lodash": "^4.17.15",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6"
   },

package.json

@@ -13,7 +13,7 @@ import { ErrorObject } from "@open-rpc/meta-schema";
 
 const styles = (theme: Theme) => ({
   code: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing(2),
   },
 });
 

src/Errors/Errors.tsx

@@ -32,7 +32,7 @@ class ExamplePairing extends Component<IProps, {}> {
       return null;
     }
     return (
-      <Grid container spacing={24}>
+      <Grid container spacing={10}>
         <Grid item xs={12}>
           <ReactMarkdown source={example.description} className={classes.description}/>
         </Grid>

src/ExamplePairing/ExamplePairing.tsx

@@ -16,8 +16,8 @@ const styles = (theme: Theme) => ({
     fontSize: theme.typography.pxToRem(15),
   },
   root: {
-    marginBottom: theme.spacing.unit,
-    marginTop: theme.spacing.unit * 3,
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(6),
     width: "100%",
   },
   secondaryHeading: {

src/ExpansionTable/ExpansionTable.tsx

@@ -8,14 +8,14 @@ import { OpenRPC } from "@open-rpc/meta-schema";
 
 const styles = (theme: Theme) => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(2),
   },
   chip: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(2),
   },
   description: {
     color: theme.palette.text.primary,
-    padding: `${theme.spacing.unit}px 0 ${theme.spacing.unit}px 0`,
+    padding: `${theme.spacing(2)}px 0 ${theme.spacing(2)}px 0`,
   },
 });
 

src/Info/Info.tsx

@@ -26,7 +26,7 @@ const styles = (theme: Theme) => ({
     fontSize: theme.typography.pxToRem(15),
   },
   paramsMargin: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(2),
   },
   secondaryHeading: {
     alignSelf: "end",

src/Links/Links.tsx

@@ -31,8 +31,8 @@ const styles = (theme: Theme) => ({
     fontSize: theme.typography.pxToRem(15),
   },
   root: {
-    marginBottom: theme.spacing.unit,
-    marginTop: theme.spacing.unit * 3,
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(3),
     width: "100%",
   },
   secondaryHeading: {
@@ -52,7 +52,7 @@ interface IProps extends WithStyles<typeof styles> {
   methodPlugins?: Array<React.FC<IMethodPluginProps>>;
 }
 
-class Methods extends Component<IProps> {
+class Methods extends Component<IProps, IState> {
   public render() {
     const { schema, classes, uiSchema } = this.props;
     if (!schema) {
@@ -65,7 +65,11 @@ class Methods extends Component<IProps> {
       <div className={classes.root}>
         <Typography variant="h3" gutterBottom>Methods</Typography>
         {schema.methods.map((method, i) => (
-          <ExpansionPanel key={i + method.name} defaultExpanded={uiSchema && uiSchema.methods["ui:defaultExpanded"]}>
+          <ExpansionPanel
+            key={i + method.name}
+            TransitionProps={{unmountOnExit: true}}
+            defaultExpanded={uiSchema && uiSchema.methods["ui:defaultExpanded"]}
+          >
             <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
               <Typography key={method.name} className={classes.heading}>{method.name}</Typography>
               <Typography key={method.summary} className={classes.secondaryHeading}>{method.summary}</Typography>
@@ -78,7 +82,7 @@ class Methods extends Component<IProps> {
             }
             {method.description &&
               <ExpansionPanelDetails key="description">
-                <ReactMarkdown source={method.description} className={classes.description}/>
+                <ReactMarkdown source={method.description} className={classes.description} />
               </ExpansionPanelDetails>
             }
             {method.params && method.params.length > 0 &&

src/Methods/Methods.tsx

@@ -10,16 +10,16 @@ import { ContentDescriptorObject } from "@open-rpc/meta-schema";
 
 const styles = (theme: Theme) => ({
   schema: {
-    marginLeft: theme.spacing.unit * 4,
+    marginLeft: theme.spacing(8),
   },
   table: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(2),
   },
   tableEnd: {
-    paddingRight: `${theme.spacing.unit * 10}px !important`,
+    paddingRight: `${theme.spacing(20)}px !important`,
   },
   tableStart: {
-    paddingLeft: theme.spacing.unit * 6,
+    paddingLeft: theme.spacing(3),
   },
 });
 

src/Params/Params.tsx

@@ -19,7 +19,7 @@ const styles = (theme: Theme) => ({
     fontSize: theme.typography.pxToRem(15),
   },
   paramsMargin: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(2),
   },
   secondaryHeading: {
     alignSelf: "end",