Renderer added

Author: Ajamuar

example/Plugins/ClickMePlugin.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { IPlugin } from '../../.';
 
 class ClickMePlugin implements IPlugin {
-  private pluginStore;
+  public pluginStore;
 
   init(pluginStore) {
     console.log('Inside init');

example/components/Test.tsx

@@ -5,6 +5,9 @@ const Test = (props: any) => {
   const pluginStore: any = usePluginStore();
   console.log(pluginStore);
   pluginStore.executeFunction('test', 1, 2);
+  let Renderer = pluginStore.executeFunction(
+    'RendererPlugin.getRendererComponent'
+  );
   return (
     <>
       <h1>Working</h1>{' '}
@@ -15,6 +18,7 @@ const Test = (props: any) => {
       >
         Send Alert
       </button>
+      <Renderer placement={'top'} />
     </>
   );
 };

src/PluginStore.tsx

@@ -19,8 +19,8 @@ export class PluginStore {
     this.functionArray.set(key, fn);
   }
 
-  executeFunction(key: string, ...args: any) {
+  executeFunction(key: string, ...args: any): any {
     let fn = this.functionArray.get(key);
-    fn(...args);
+    return fn(...args);
   }
 }

src/plugins/RendererPlugin.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { usePluginStore } from '../../../hooks/usePluginStore';
+
+export const Renderer: React.SFC<{
+  placement: string;
+}> = ({ placement }) => {
+  const pluginStore = usePluginStore();
+
+  let components = pluginStore.executeFunction(
+    'RendererPlugin.getComponentsInPosition',
+    placement
+  );
+
+  return (
+    <React.Fragment>
+      {components.map((component: any) => (
+        <>{component}</>
+      ))}
+    </React.Fragment>
+  );
+};

src/plugins/RendererPlugin/components/Renderer.tsx

@@ -0,0 +1,52 @@
+import { IPlugin } from '../../interfaces/IPlugin';
+import { PluginStore } from '../../PluginStore';
+import { Renderer } from './components/Renderer';
+
+export class RendererPlugin implements IPlugin {
+  public pluginStore: PluginStore = new PluginStore();
+  private componentMap: Map<string, Array<any>> = new Map<string, Array<any>>();
+
+  init(pluginStore: PluginStore) {
+    this.pluginStore = pluginStore;
+  }
+
+  addToComponentMap(position: string, component: React.Component) {
+    let array = this.componentMap.get(position);
+    if (!array) {
+      array = [component];
+    }
+    this.componentMap.set(position, array);
+  }
+
+  getRendererComponent() {
+    return Renderer;
+  }
+
+  getComponentsInPosition(position: string) {
+    let componentArray = this.componentMap.get(position);
+    if (!componentArray) return [];
+
+    return componentArray;
+  }
+
+  activate() {
+    this.pluginStore.addFunction(
+      'RendererPlugin.add',
+      this.addToComponentMap.bind(this)
+    );
+
+    this.pluginStore.addFunction(
+      'RendererPlugin.getComponentsInPosition',
+      this.getComponentsInPosition.bind(this)
+    );
+
+    this.pluginStore.addFunction(
+      'RendererPlugin.getRendererComponent',
+      this.getRendererComponent.bind(this)
+    );
+  }
+
+  deactivate() {
+    //
+  }
+}