Add PluginForm component

jochenklar · jochenklar · commit 6f64be79dfbf · 2026-01-31T17:27:14.000+01:00
diff --git a/rdmo/projects/assets/js/project/components/areas/Dashboard.js b/rdmo/projects/assets/js/project/components/areas/Dashboard.js
@@ -3,6 +3,8 @@ import { TileGrid } from '../helper'
 
 import Tooltip from 'rdmo/core/assets/js/_bs53/components/Tooltip'
 
+import PluginForm from '../helper/PluginForm'
+
 const Dashboard = () => {
   const [tileSize, setTileSize] = useState('normal')
 
@@ -23,6 +25,8 @@ const Dashboard = () => {
     { title: 'Tile 6', content: <p>Content 6</p> },
   ]
 
+  const html = '<form><input class="form-control mb-3" type="text" name="input" /><button type="submit" class="btn btn-primary">Submit</button></form>'
+
   return (
     <div>
       <h1>{gettext('Dashboard')}</h1>
@@ -39,6 +43,8 @@ const Dashboard = () => {
             <span>TOOLTIP</span>
           </Tooltip>
         </div>
+
+        <PluginForm html={html} />
       </div>
     </div>
   )
diff --git a/rdmo/projects/assets/js/project/components/helper/PluginForm.js b/rdmo/projects/assets/js/project/components/helper/PluginForm.js
@@ -0,0 +1,35 @@
+import React, { useRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+const PluginForm = ({ html }) => {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      const form = ref.current.querySelector('form')
+
+      const submitForm = (event) => {
+        event.preventDefault()
+
+        const formData = new FormData(form)
+        console.log(formData.get('input'))
+      }
+
+      // add event listener to form
+      form.addEventListener('submit', submitForm)
+
+      // cleanup on unmount
+      return () => form.removeEventListener('submit', submitForm)
+    }
+  }, [])
+
+  return <div ref={ref}><Html html={html} /></div>
+}
+
+PluginForm.propTypes = {
+  html: PropTypes.string
+}
+
+export default PluginForm
