Merge pull request #454 from open-rpc/feat/add-onMethodToggle

feat: add onMethodToggle

Author: shanejonas

src/Documentation.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Info from "./Info/Info";
 import Servers from "./Servers/Servers";
-import Methods, { IMethodPluginProps } from "./Methods/Methods";
+import Methods, { IMethodPluginProps, OnMethodToggle } from "./Methods/Methods";
 import ContentDescriptors from "./ContentDescriptors/ContentDescriptors";
 import { OpenrpcDocument } from "@open-rpc/meta-schema";
 
@@ -10,14 +10,15 @@ interface IProps {
   uiSchema?: any;
   reactJsonOptions?: any;
   methodPlugins?: Array<React.FC<IMethodPluginProps>>;
+  onMethodToggle?: OnMethodToggle;
 }
 
 export default class Documentation extends React.Component<IProps> {
   constructor(props: IProps) {
     super(props);
   }
   public render() {
-    const { schema, uiSchema, reactJsonOptions } = this.props;
+    const { schema, uiSchema, reactJsonOptions, onMethodToggle } = this.props;
     if (!schema) {
       return null;
     }
@@ -27,6 +28,7 @@ export default class Documentation extends React.Component<IProps> {
         <Info schema={schema} />
         <Servers servers={schema.servers} reactJsonOptions={reactJsonOptions} />
         <Methods
+          onMethodToggle={onMethodToggle}
           schema={schema}
           uiSchema={uiSchema}
           reactJsonOptions={reactJsonOptions}

src/Methods/Methods.test.tsx

@@ -2,6 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom";
 import Methods, { IMethodPluginProps } from "./Methods";
 import { OpenrpcDocument } from "@open-rpc/meta-schema";
+import {
+  cleanup,
+  fireEvent,
+  render,
+} from "@testing-library/react";
 
 it("renders without crashing", () => {
   const div = document.createElement("div");
@@ -71,7 +76,7 @@ it("doesnt render collapsed contents with empty uiSchema", () => {
       },
     ],
   };
-  ReactDOM.render(<Methods schema={schema as any} uiSchema={{}}/>, div);
+  ReactDOM.render(<Methods schema={schema as any} uiSchema={{}} />, div);
   expect(div.innerHTML.includes("foobarz")).toBe(false);
   ReactDOM.unmountComponentAtNode(div);
 });
@@ -87,7 +92,7 @@ it("doesnt render collapsed contents with empty uiSchema.methods", () => {
       },
     ],
   };
-  ReactDOM.render(<Methods schema={schema as any} uiSchema={{methods: {}}}/>, div);
+  ReactDOM.render(<Methods schema={schema as any} uiSchema={{ methods: {} }} />, div);
   expect(div.innerHTML.includes("foobarz")).toBe(false);
   ReactDOM.unmountComponentAtNode(div);
 });
@@ -208,7 +213,7 @@ it("renders schema plugin", () => {
 
   ReactDOM.render(
     <Methods schema={schema as any} methodPlugins={[TestComponent]} disableTransitionProps={true} />
-  , div);
+    , div);
   expect(div.innerHTML.includes("get_pet")).toBe(true);
   expect(div.innerHTML.includes("Plugin Test")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
@@ -414,3 +419,29 @@ it("renders schema methods examples with schema.examples fallback", () => {
   expect(div.innerHTML.includes("bob")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
+
+it("can call onMethodToggle when a method is clicked", (done) => {
+  const schema = {
+    methods: [
+      {
+        name: "foo",
+        params: [{
+          name: "foobarz",
+        }],
+      },
+    ],
+  };
+  const { getByText } = render(
+    <Methods
+      schema={schema as any}
+      onMethodToggle={(method: string, expanded: boolean) => {
+        expect(method).toEqual("foo");
+        expect(expanded).toEqual(true);
+        cleanup();
+        done();
+      }}
+    />,
+  );
+  const node = getByText(schema.methods[0].name);
+  fireEvent.click(node);
+});

src/Methods/Methods.tsx

@@ -46,18 +46,20 @@ const styles = (theme: Theme) => ({
 export interface IMethodPluginProps {
   openrpcMethodObject: MethodObject;
 }
+export type OnMethodToggle = (method: string, expanded: boolean) => void;
 
 interface IProps extends WithStyles<typeof styles> {
   schema?: OpenrpcDocument;
   uiSchema?: any;
   reactJsonOptions?: object;
   methodPlugins?: Array<React.FC<IMethodPluginProps>>;
   disableTransitionProps?: boolean;
+  onMethodToggle?: OnMethodToggle;
 }
 
 class Methods extends Component<IProps> {
   public render() {
-    const { schema, classes, uiSchema, disableTransitionProps } = this.props;
+    const { schema, classes, uiSchema, disableTransitionProps, onMethodToggle } = this.props;
     if (!schema) {
       return null;
     }
@@ -72,6 +74,11 @@ class Methods extends Component<IProps> {
             id={method.name}
             key={i + method.name}
             TransitionProps={{ unmountOnExit: disableTransitionProps ? false : true }}
+            onChange={(__, expanded: boolean) => {
+              if (onMethodToggle) {
+                onMethodToggle(method.name, expanded);
+              }
+            }}
             defaultExpanded={
               uiSchema &&
               uiSchema.methods &&