PingPongFactory as a parameter to EmbeddedDivPingPong (#29)

* PingPongFactory as a parameter to EmbeddedDivPingPong * PingPongFactory as a parameter to EmbeddedDivPingPong * PingPongFactory as a parameter to EmbeddedDivPingPong * PingPongFactory as a parameter to EmbeddedDivPingPong
tiagobento · Mar 23, 2021 · 608c12b · 608c12b
1 parent 1728102
commit 608c12b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/ping-pong-view/src/embedded/div/EmbeddedDivPingPong.tsx b/packages/ping-pong-view/src/embedded/div/EmbeddedDivPingPong.tsx
@@ -20,16 +20,16 @@ import { PingPongApi, PingPongChannelApi, PingPongEnvelopeApi } from "../../api"
 import { EnvelopeServer } from "@kogito-tooling/envelope-bus/dist/channel";
 import { EmbeddedEnvelopeFactory } from "@kogito-tooling/envelope/dist/embedded";
 import { ContainerType } from "@kogito-tooling/envelope/dist/api";
-import { init } from "../../envelope";
+import { init, PingPongFactory } from "../../envelope";
 import { EnvelopeBusMessage } from "@kogito-tooling/envelope-bus/dist/api";
-import { PingPongReactImplFactory } from "ping-pong-view-react";
 
 export type Props = PingPongChannelApi & {
   mapping: {
     title: string;
   };
   targetOrigin: string;
   name: string;
+  pingPongViewFactory: PingPongFactory;
 };
 
 export const EmbeddedDivPingPong = React.forwardRef((props: Props, forwardedRef: React.Ref<PingPongApi>) => {
@@ -48,7 +48,7 @@ export const EmbeddedDivPingPong = React.forwardRef((props: Props, forwardedRef:
             window.postMessage(message, "*", transfer);
           },
         },
-        pingPongViewFactory: new PingPongReactImplFactory(),
+        pingPongViewFactory: props.pingPongViewFactory,
       });
 
       return envelopeServer.envelopeApi.requests.pingPongView__init(

diff --git a/packages/ping-pong-view/src/envelope/PingPongEnvelopeView.tsx b/packages/ping-pong-view/src/envelope/PingPongEnvelopeView.tsx
@@ -34,7 +34,10 @@ export const PingPongEnvelopeView = React.forwardRef((props, forwardedRef) => {
         <>
           <h2>This is an implementation of Ping-Pong View</h2>
 
-          <p className={"ping-pong-view--p-iframe"}> The {"<iframe>"} border is green </p>
+          <p className={"ping-pong-view--p-iframe"}>
+            {" "}
+            The envelope boundary border is green. It can be an iframe or a div.
+          </p>
           <p className={"ping-pong-view--p-ping-pong"}> The Ping-Pong View implementation border is red </p>
 
           <div id={"ping-pong-view-container"} className={"ping-pong-view--container"}>

diff --git a/packages/webapp/src/Pages/PingPong/PingPongDivViewsPage.tsx b/packages/webapp/src/Pages/PingPong/PingPongDivViewsPage.tsx
@@ -20,6 +20,7 @@ import { Page, PageSection } from "@patternfly/react-core";
 import { EmbeddedDivPingPong } from "ping-pong-view/dist/embedded/div";
 import { PingPongChannelApi } from "ping-pong-view/dist/api";
 import { StatsSidebar } from "./StatsSidebar";
+import { PingPongReactImplFactory } from "ping-pong-view-react";
 
 let pings = 0;
 let pongs = 0;
@@ -41,6 +42,8 @@ export function PingPongDivViewsPage() {
     };
   }, [pings, pongs]);
 
+  const pingPongViewFactory = useMemo(() => new PingPongReactImplFactory(), []);
+
   return (
     <Page>
       <div className={"webapp--page-main-div"}>
@@ -52,6 +55,7 @@ export function PingPongDivViewsPage() {
               name={"React 1"}
               targetOrigin={window.location.origin}
               mapping={{ title: "Ping-Pong Page in React" }}
+              pingPongViewFactory={pingPongViewFactory}
             />
           </PageSection>
 
@@ -61,6 +65,7 @@ export function PingPongDivViewsPage() {
               name={"React 2"}
               targetOrigin={window.location.origin}
               mapping={{ title: "Ping-Pong Page in React" }}
+              pingPongViewFactory={pingPongViewFactory}
             />
           </PageSection>
 
@@ -70,6 +75,7 @@ export function PingPongDivViewsPage() {
               name={"React 3"}
               targetOrigin={window.location.origin}
               mapping={{ title: "Ping-Pong Page in React" }}
+              pingPongViewFactory={pingPongViewFactory}
             />
           </PageSection>
         </div>