@5minds/node-red-dashboard-2-processcube-dynamic-form 1.0.25-poc-for-using-dynamic-ui-from-app-sdk-825bfc-m2n7fwvk → 1.0.25-poc-for-using-dynamic-ui-from-app-sdk-bac204-m2onni3p

package/ui/components/UIDynamicForm.tsx

@@ -0,0 +1,20 @@
+import { DynamicUi } from '@5minds/processcube_app_sdk/client';
+import '@5minds/processcube_app_sdk/client/components/DynamicUi/DynamicUi.css';
+import React, { useState } from 'react';
+
+export default function UIDynamicForm(props) {
+    const [usertask, setUsertask] = useState(undefined)
+    props.socket.on('widget-load:' + props.id, (msg) => {
+        setUsertask(msg.payload.userTask)
+    })
+    props.socket.on('msg-input:' + props.id, (msg) => {
+        setUsertask(msg.payload.userTask)
+    })
+
+    if (!usertask) {
+        return <h1>no task to show</h1>
+    }
+    
+    return <DynamicUi task={usertask as any} onSubmit={() => console.log("submit...") as any} />;
+}
+

package/ui/components/UIDynamicForm.vue

@@ -0,0 +1,40 @@
+<template>
+    <div ref="reactRoot"></div>
+</template>
+
+<script>
+import { defineComponent, onMounted, ref, inject } from 'vue';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import UIDynamicForm from './UIDynamicForm.tsx';
+
+export default defineComponent({
+    name: 'UIDynamicForm',
+    inject: ['$socket'],
+    props: {
+        /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
+        id: { type: String, required: true },
+        props: { type: Object, default: () => ({}) },
+        state: {
+            type: Object,
+            default: () => ({ enabled: false, visible: false }),
+        },
+    },
+    setup(props) {
+        const reactRoot = ref(null);
+
+        const socket = inject('$socket');
+        
+        onMounted(() => {
+            const root = createRoot(reactRoot.value);
+            root.render(React.createElement(UIDynamicForm, {...props, socket}));
+        });
+        return {
+            reactRoot,
+        };
+    },
+});
+</script>
+
+<style>
+</style>

package/ui/components/UIDynamicForm.jsx

@@ -1,5 +0,0 @@
-import React from "react"
-
-export default function UIDynamicForm() {
-    return <h1 className="reactclass">amk qn2 yeah yeah</h1>
-}

package/ui/components/Wrapper.vue

@@ -1,29 +0,0 @@
-<template>
-  <div ref="reactRoot"></div>
-</template>
-
-<script>
-import { defineComponent, onMounted, ref } from 'vue';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import UIDynamicForm from './UIDynamicForm.jsx'; 
-
-export default defineComponent({
-  name: 'UIDynamicForm',
-  setup() {
-    const reactRoot = ref(null);
-
-    onMounted(() => {
-      const root = createRoot(reactRoot.value);
-      root.render(React.createElement(UIDynamicForm));
-    });
-
-    return {
-      reactRoot,
-    };
-  },
-});
-</script>
-
-<style>
-</style>