Fix/add transition props upgrade react

package.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"
   },

src/Errors/Errors.tsx

@@ -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/ExamplePairing/ExamplePairing.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/ExamplePairings/ExamplePairings.test.tsx

@@ -20,18 +20,22 @@ it("renders empty with no example", () => {
 
 it("renders empty with empty example", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<ExamplePairings examples={[]}/>, div);
+  ReactDOM.render(<ExamplePairings examples={[]} />, div);
   expect(div.innerHTML).toBe("");
   ReactDOM.unmountComponentAtNode(div);
 });
 
 it("renders examples", async () => {
   const div = document.createElement("div");
   const simpleMath = await refParser.dereference(examples.simpleMath) as OpenRPC;
-  ReactDOM.render(<ExamplePairings examples={simpleMath.methods[0].examples as ExamplePairingObject[]} />, div);
+  ReactDOM.render(
+    <ExamplePairings
+      method={simpleMath.methods[0]}
+      examples={simpleMath.methods[0].examples as ExamplePairingObject[]
+    } />
+  , div);
   expect(div.innerHTML.includes("simpleMathAdditionTwo")).toBe(true);
   expect(div.innerHTML.includes("2")).toBe(true);
   expect(div.innerHTML.includes("4")).toBe(true);
-  expect(div.innerHTML.includes("8")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });

src/ExpansionTable/ExpansionTable.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/Info/Info.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/Links/Links.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/Methods/Methods.test.tsx

@@ -18,14 +18,14 @@ it("renders empty with no schema", () => {
 
 it("renders empty with empty schema", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<Methods schema={{} as any}/>, div);
+  ReactDOM.render(<Methods schema={{} as any} />, div);
   expect(div.innerHTML).toBe("");
   ReactDOM.unmountComponentAtNode(div);
 });
 
 it("renders empty with empty schema methods", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<Methods schema={{ methods: [] } as any}/>, div);
+  ReactDOM.render(<Methods schema={{ methods: [] } as any} />, div);
   expect(div.innerHTML).toBe("");
   ReactDOM.unmountComponentAtNode(div);
 });
@@ -39,11 +39,68 @@ it("renders schema methods name", () => {
       },
     ],
   };
-  ReactDOM.render(<Methods schema={schema as any}/>, div);
+  ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
   expect(div.innerHTML.includes("get_pet")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
 
+it("doesnt render collapsed contents", () => {
+  const div = document.createElement("div");
+  const schema = {
+    methods: [
+      {
+        params: [{
+          name: "foobarz",
+        }],
+      },
+    ],
+  };
+  ReactDOM.render(<Methods schema={schema as any} />, div);
+  expect(div.innerHTML.includes("foobarz")).toBe(false);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders collapsed contents with defaultExpanded from uiSchema", () => {
+  const div = document.createElement("div");
+  const schema = {
+    methods: [
+      {
+        params: [{
+          name: "foobarz",
+        }],
+      },
+    ],
+  };
+  const uiSchema = {
+    links: {
+    },
+    methods: {
+      "ui:defaultExpanded": true,
+    },
+    params: {
+    },
+  };
+  ReactDOM.render(<Methods uiSchema={uiSchema} schema={schema as any} disableTransitionProps={true} />, div);
+  expect(div.innerHTML.includes("aria-expanded=\"true\"")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders collapsed contents with disableTransitionProps", () => {
+  const div = document.createElement("div");
+  const schema = {
+    methods: [
+      {
+        params: [{
+          name: "foobarz",
+        }],
+      },
+    ],
+  };
+  ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
+  expect(div.innerHTML.includes("foobarz")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
 it("renders schema plugin", () => {
   const div = document.createElement("div");
   const schema = {
@@ -61,7 +118,9 @@ it("renders schema plugin", () => {
     );
   };
 
-  ReactDOM.render(<Methods schema={schema as any} methodPlugins={[TestComponent]}/>, div);
+  ReactDOM.render(
+    <Methods schema={schema as any} methodPlugins={[TestComponent]} disableTransitionProps={true} />
+  , div);
   expect(div.innerHTML.includes("get_pet")).toBe(true);
   expect(div.innerHTML.includes("Plugin Test")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
@@ -79,7 +138,7 @@ it("renders schema methods summary", () => {
       },
     ],
   };
-  ReactDOM.render(<Methods schema={schema as any}/>, div);
+  ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
   expect(div.innerHTML.includes("a short summary")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
@@ -93,7 +152,7 @@ it("renders schema methods description", () => {
       },
     ],
   } as OpenRPC;
-  ReactDOM.render(<Methods schema={schema}/>, div);
+  ReactDOM.render(<Methods schema={schema} disableTransitionProps={true} />, div);
   expect(div.innerHTML.includes("verbose get_pet description")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
@@ -109,7 +168,7 @@ it("renders schema methods params", () => {
       },
     ],
   };
-  ReactDOM.render(<Methods schema={schema as any}/>, div);
+  ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
   expect(div.innerHTML.includes("foobarz")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
@@ -141,7 +200,7 @@ it("renders schema methods result", () => {
       },
     ],
   };
-  ReactDOM.render(<Methods schema={schema as any}/>, div);
+  ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
   expect(div.innerHTML.includes("name")).toBe(true);
   expect(div.innerHTML.includes("tag")).toBe(true);
   expect(div.innerHTML.includes("id")).toBe(true);
@@ -213,7 +272,7 @@ it("renders schema methods tags", () => {
       },
     ],
   };
-  ReactDOM.render(<Methods schema={schema as any}/>, div);
+  ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
   expect(div.innerHTML.includes("tag3")).toBe(true);
   expect(div.innerHTML.includes("tag4")).toBe(true);
   expect(div.innerHTML.includes("salad")).toBe(true);

src/Methods/Methods.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: {
@@ -50,11 +50,12 @@ interface IProps extends WithStyles<typeof styles> {
   uiSchema?: any;
   reactJsonOptions?: object;
   methodPlugins?: Array<React.FC<IMethodPluginProps>>;
+  disableTransitionProps?: boolean;
 }
 
 class Methods extends Component<IProps> {
   public render() {
-    const { schema, classes, uiSchema } = this.props;
+    const { schema, classes, uiSchema, disableTransitionProps } = this.props;
     if (!schema) {
       return null;
     }
@@ -65,7 +66,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: disableTransitionProps ? false : 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 +83,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/Params/Params.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/Servers/Servers.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",