fix: content descriptors should overflow-x scroll

Author: shanejonas

src/ContentDescriptor/ContentDescriptor.test.tsx

@@ -19,14 +19,16 @@ it("renders empty with no schema", () => {
 it("renders empty with empty schema", () => {
   const div = document.createElement("div");
   const emptyContentDescriptor = {} as ContentDescriptorObject;
-  ReactDOM.render(<ContentDescriptor contentDescriptor={emptyContentDescriptor}/>, div);
+  ReactDOM.render(<ContentDescriptor contentDescriptor={emptyContentDescriptor} />, div);
   expect(div.innerHTML).toBe("");
   ReactDOM.unmountComponentAtNode(div);
 });
 
 it("renders a name", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<ContentDescriptor contentDescriptor={{name: "foo", schema: {}}}/>, div);
+  ReactDOM.render(
+    <ContentDescriptor contentDescriptor={{ name: "foo", schema: {} }} disableTransitionProps={true} />
+  , div);
   expect(div.innerHTML.includes("foo")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });

src/ContentDescriptor/ContentDescriptor.tsx

@@ -28,18 +28,20 @@ interface IProps extends WithStyles<typeof styles> {
   contentDescriptor?: ContentDescriptorObject;
   hideIcon?: boolean;
   hideRequired?: boolean;
+  disableTransitionProps?: boolean;
   uiSchema?: any;
 }
 
 class ContentDescriptor extends Component<IProps> {
   public render() {
-    const { contentDescriptor, classes, hideIcon, hideRequired, uiSchema } = this.props;
+    const { contentDescriptor, classes, hideIcon, hideRequired, uiSchema, disableTransitionProps } = this.props;
     if (!contentDescriptor) { return null; }
     const entries = Object.entries(contentDescriptor);
     if (entries.length === 0) { return null; }
     return (
       <ExpansionPanel
         style={{ width: "100%" }}
+        TransitionProps={{unmountOnExit: disableTransitionProps ? false : true}}
         defaultExpanded={uiSchema && uiSchema.params["ui:defaultExpanded"]}
         expanded={contentDescriptor.name ? undefined : true}>
         <ExpansionPanelSummary
@@ -53,8 +55,8 @@ class ContentDescriptor extends Component<IProps> {
             </Typography>}
           </div>
         </ExpansionPanelSummary>
-        <ExpansionPanelDetails style={{ display: "block" }}>
-          <div>
+        <ExpansionPanelDetails style={{ display: "block", overflowX: "auto" }}>
+          <>
             {contentDescriptor.description &&
               <ReactMarkdown source={contentDescriptor.description} className={classes.description} />
             }
@@ -64,7 +66,7 @@ class ContentDescriptor extends Component<IProps> {
                 <JSONSchema schema={contentDescriptor.schema} />
               </>
             }
-          </div>
+          </>
         </ExpansionPanelDetails>
       </ExpansionPanel>
     );

src/ContentDescriptors/ContentDescriptors.test.tsx

@@ -35,7 +35,7 @@ it("renders a name", () => {
       },
     },
   } as any;
-  ReactDOM.render(<ContentDescriptors schema={schema}/>, div);
+  ReactDOM.render(<ContentDescriptors schema={schema} disableTransitionProps={true}/>, div);
   expect(div.innerHTML.includes("foo")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });

src/ContentDescriptors/ContentDescriptors.tsx

@@ -5,12 +5,13 @@ import { OpenRPC, ContentDescriptorObject } from "@open-rpc/meta-schema";
 
 interface IProps {
   schema?: OpenRPC;
+  disableTransitionProps?: boolean;
   uiSchema?: any;
 }
 
 export default class ContentDescriptors extends Component<IProps> {
   public render() {
-    const { schema } = this.props;
+    const { schema, disableTransitionProps } = this.props;
     if (!schema || !schema.components  || !schema.components.contentDescriptors) { return null; }
     const entries = Object.entries(schema.components.contentDescriptors);
     if (entries.length === 0) { return null; }
@@ -21,6 +22,7 @@ export default class ContentDescriptors extends Component<IProps> {
           return <ContentDescriptor
             key={key}
             contentDescriptor={val as ContentDescriptorObject}
+            disableTransitionProps={disableTransitionProps}
             uiSchema={this.props.uiSchema}
             hideRequired={true} />;
         })}

src/Params/Params.test.tsx

@@ -33,7 +33,7 @@ it("renders params", () => {
       },
     },
   ];
-  ReactDOM.render(<Params params={params}/>, div);
+  ReactDOM.render(<Params params={params} disableTransitionProps={true}/>, div);
   expect(div.innerHTML.includes("tags")).toBe(true);
   expect(div.innerHTML.includes("tags to filter by")).toBe(true);
   expect(div.innerHTML.includes("string")).toBe(true);

src/Params/Params.tsx

@@ -25,6 +25,7 @@ const styles = (theme: Theme) => ({
 
 interface IProps extends WithStyles<typeof styles> {
   params?: ContentDescriptorObject[];
+  disableTransitionProps?: boolean;
   uiSchema?: any;
 }
 
@@ -46,7 +47,16 @@ class Params extends Component<IProps> {
         <TableBody>
           <TableRow>
             <TableCell colSpan={6}>
-              {params.map((row) => <ContentDescriptor key={row.name} contentDescriptor={row} uiSchema={uiSchema}/>) }
+              {
+                params.map((row) =>
+                  <ContentDescriptor
+                    key={row.name}
+                    contentDescriptor={row}
+                    uiSchema={uiSchema}
+                    disableTransitionProps={this.props.disableTransitionProps}
+                  />,
+                )
+              }
             </TableCell>
           </TableRow>
         </TableBody>