feat: add autoresizing for height

dhis2 · Mar 29, 2023 · dbb6e26 · dbb6e26
1 parent 44b27c4
commit dbb6e26
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/docs/components/Plugin.md b/docs/components/Plugin.md
@@ -53,6 +53,7 @@ const MyPlugin = (propsFromParent) => {
 |    **pluginSource**    | _string_ (url) | _required_ if `pluginShortName` is not provided | The URL of the plugin. If this is not provided, `pluginShortName` must be provided.                                                                                                                                                                                                          |
 |      **onError**       |   _Function_   |                   _optional_                    | Callback function to be called when an error in the plugin triggers an error boundary. You can use this to pass an error back up to the app and create a custom handling/UX if errors occur in the plugin. In general, it is recommended that you use the plugin's built-in error boundaries |
 | **showAlertsInPlugin** |   _boolean_    |                   _optional_                    | If `true`, any alerts within the plugin (defined with the `useAlert` hook) will be rendered within the iframe. By default, this is `false`. It is recommended, in general, that you do not override this and allow alerts to be hoisted up to the app level                                  |
+|       **height**       |    _number_    |                   _optional_                    | If a height is provided, the iframe will be fixed to the specified height. If no height is provided, the iframe will automatically resize based on its contents.                                                                                                                             |
 
 ## Plugin Props (custom props)
 

diff --git a/services/plugin/src/Plugin.tsx b/services/plugin/src/Plugin.tsx
@@ -1,7 +1,7 @@
 import { AlertsManagerContext } from '@dhis2/app-service-alerts'
 import { useDataQuery } from '@dhis2/app-service-data'
 import postRobot from 'post-robot'
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import PluginError from './PluginError'
 
 const appsInfoQuery = {
@@ -27,14 +27,23 @@ const getPluginEntryPoint = ({
 export const Plugin = ({
     pluginSource,
     pluginShortName,
-    ...propsToPass
+    ...propsToPassNonMemoized
 }: {
     pluginSource?: string
     pluginShortName?: string
     propsToPass: any
 }): JSX.Element => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
 
+    // we do not know what is being sent in passed props, so for stable reference, memoize using JSON representation
+    const propsToPassNonMemoizedJSON = JSON.stringify(propsToPassNonMemoized)
+    const propsToPass = useMemo(
+        () => ({ ...propsToPassNonMemoized }),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [propsToPassNonMemoizedJSON]
+    )
+    const { height } = propsToPass
+
     const { add: alertsAdd } = useContext(AlertsManagerContext)
 
     const { data } = useDataQuery(appsInfoQuery)
@@ -49,12 +58,20 @@ export const Plugin = ({
         useState<boolean>(false)
 
     const [inErrorState, setInErrorState] = useState<boolean>(false)
+    const [pluginHeight, setPluginHeight] = useState<number>(150)
+
+    useEffect(() => {
+        if (height) {
+            setPluginHeight(height)
+        }
+    }, [height])
 
     useEffect(() => {
         if (iframeRef?.current) {
             const iframeProps = {
                 ...propsToPass,
                 alertsAdd,
+                setPluginHeight,
                 setInErrorState,
                 setCommunicationReceived,
             }
@@ -104,15 +121,17 @@ export const Plugin = ({
 
     if (pluginEntryPoint) {
         return (
-            <iframe
-                ref={iframeRef}
-                src={pluginSource}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                    border: 'none',
-                }}
-            ></iframe>
+            <div style={{ height: `${pluginHeight}px` }}>
+                <iframe
+                    ref={iframeRef}
+                    src={pluginSource}
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        border: 'none',
+                    }}
+                ></iframe>
+            </div>
         )
     }