From 74bbe00c0f64364b96b2b5b4fb68830b1d91a016 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Wed, 29 Mar 2023 16:45:58 +0200 Subject: [PATCH 1/4] feat: auto resizing for height --- shell/src/PluginLoader.js | 51 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/shell/src/PluginLoader.js b/shell/src/PluginLoader.js index 109fe0b22..6249ed5e2 100644 --- a/shell/src/PluginLoader.js +++ b/shell/src/PluginLoader.js @@ -2,7 +2,41 @@ import AppAdapter from '@dhis2/app-adapter' import { Layer, layers, CenteredContent, CircularLoader } from '@dhis2/ui' import postRobot from 'post-robot' import PropTypes from 'prop-types' -import React, { useCallback, useEffect, useState } from 'react' +import React, { useCallback, useEffect, useRef, useState } from 'react' + +const PluginInner = ({ + D2App, + config, + propsFromParent, + resizePluginHeight, +}) => { + const divRef = useRef() + useEffect(() => { + if (divRef && divRef.current && resizePluginHeight) { + const resizeObserver = new ResizeObserver(() => { + // the additional pixels currently account for possible horizontal scroll bar + resizePluginHeight(divRef.current.offsetHeight + 20) + }) + resizeObserver.observe(divRef.current) + } + }, []) + + // inner div disables margin collapsing which would prevent computing correct height + return ( +
+
+ +
+
+ ) +} + +PluginInner.propTypes = { + D2App: PropTypes.object, + config: PropTypes.object, + propsFromParent: PropTypes.array, + resizePluginHeight: PropTypes.func, +} export const PluginLoader = ({ config, requiredProps, D2App }) => { const [propsFromParent, setPropsFromParent] = useState({}) @@ -11,6 +45,7 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { const [showAlertsInPlugin, setShowAlertsInPlugin] = useState(false) const [onPluginError, setOnPluginError] = useState(() => () => {}) const [clearPluginError, setClearPluginError] = useState(() => () => {}) + const [resizePluginHeight, setResizePluginHeight] = useState(null) const receivePropsFromParent = useCallback( (event) => { @@ -20,6 +55,8 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { setCommunicationReceived, alertsAdd, showAlertsInPlugin, + height, + setPluginHeight, onError, ...explicitlyPassedProps } = receivedProps @@ -61,6 +98,10 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { if (showAlertsInPlugin) { setShowAlertsInPlugin(Boolean(showAlertsInPlugin)) } + + if (!height && setPluginHeight) { + setResizePluginHeight(() => (height) => setPluginHeight(height)) + } }, [ requiredProps, @@ -68,6 +109,7 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { setClearPluginError, setParentAlertsAdd, setShowAlertsInPlugin, + setResizePluginHeight, ] ) @@ -120,7 +162,12 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { } > - + ) From a80ea56f1cd887e3458af8b6995f3136017fa9c2 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Tue, 16 May 2023 16:24:53 +0200 Subject: [PATCH 2/4] fix: auto width adjustment --- shell/src/PluginLoader.js | 56 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 52 insertions(+), 4 deletions(-) diff --git a/shell/src/PluginLoader.js b/shell/src/PluginLoader.js index 6249ed5e2..05e3d7d2f 100644 --- a/shell/src/PluginLoader.js +++ b/shell/src/PluginLoader.js @@ -9,23 +9,61 @@ const PluginInner = ({ config, propsFromParent, resizePluginHeight, + resizePluginWidth, }) => { const divRef = useRef() + const innerDivRef = useRef() useEffect(() => { - if (divRef && divRef.current && resizePluginHeight) { + if ( + divRef && + divRef.current && + (resizePluginHeight || resizePluginWidth) + ) { const resizeObserver = new ResizeObserver(() => { + console.log( + 'height,scrollHeight,offsetWidth,scrollWidth', + divRef.current.offsetHeight, + divRef.current.scrollHeight, + divRef.current.offsetWidth, + divRef.current.scrollWidth + ) // the additional pixels currently account for possible horizontal scroll bar - resizePluginHeight(divRef.current.offsetHeight + 20) + if (resizePluginHeight) { + resizePluginHeight(divRef.current.offsetHeight + 20) + } }) resizeObserver.observe(divRef.current) } }, []) + let previousWidth + + const resetWidth = () => { + const currentWidth = innerDivRef.current?.scrollWidth + if (resizePluginWidth && currentWidth) { + if (previousWidth && Math.abs(currentWidth - previousWidth) > 20) { + resizePluginWidth(currentWidth + 20) + } + previousWidth = currentWidth + } + requestAnimationFrame(resetWidth) + } + + useEffect(() => { + requestAnimationFrame(resetWidth) + }, []) + // inner div disables margin collapsing which would prevent computing correct height return (
-
- +
+
+ +
) @@ -36,6 +74,7 @@ PluginInner.propTypes = { config: PropTypes.object, propsFromParent: PropTypes.array, resizePluginHeight: PropTypes.func, + resizePluginWidth: PropTypes.func, } export const PluginLoader = ({ config, requiredProps, D2App }) => { @@ -46,6 +85,7 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { const [onPluginError, setOnPluginError] = useState(() => () => {}) const [clearPluginError, setClearPluginError] = useState(() => () => {}) const [resizePluginHeight, setResizePluginHeight] = useState(null) + const [resizePluginWidth, setResizePluginWidth] = useState(null) const receivePropsFromParent = useCallback( (event) => { @@ -57,6 +97,8 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { showAlertsInPlugin, height, setPluginHeight, + width, + setPluginWidth, onError, ...explicitlyPassedProps } = receivedProps @@ -102,6 +144,10 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { if (!height && setPluginHeight) { setResizePluginHeight(() => (height) => setPluginHeight(height)) } + + if (!width && setPluginWidth) { + setResizePluginWidth(() => (width) => setPluginWidth(width)) + } }, [ requiredProps, @@ -110,6 +156,7 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { setParentAlertsAdd, setShowAlertsInPlugin, setResizePluginHeight, + setResizePluginWidth, ] ) @@ -167,6 +214,7 @@ export const PluginLoader = ({ config, requiredProps, D2App }) => { config={config} propsFromParent={propsFromParent} resizePluginHeight={resizePluginHeight} + resizePluginWidth={resizePluginWidth} /> From 9863ae09c72b65e11ce69ba03034ecd2737dacb3 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Mon, 21 Aug 2023 17:30:03 +0200 Subject: [PATCH 3/4] fix: clean up dependencies --- shell/src/PluginLoader.js | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/shell/src/PluginLoader.js b/shell/src/PluginLoader.js index 05e3d7d2f..f0ce164b8 100644 --- a/shell/src/PluginLoader.js +++ b/shell/src/PluginLoader.js @@ -14,19 +14,8 @@ const PluginInner = ({ const divRef = useRef() const innerDivRef = useRef() useEffect(() => { - if ( - divRef && - divRef.current && - (resizePluginHeight || resizePluginWidth) - ) { + if (divRef && divRef.current && resizePluginHeight) { const resizeObserver = new ResizeObserver(() => { - console.log( - 'height,scrollHeight,offsetWidth,scrollWidth', - divRef.current.offsetHeight, - divRef.current.scrollHeight, - divRef.current.offsetWidth, - divRef.current.scrollWidth - ) // the additional pixels currently account for possible horizontal scroll bar if (resizePluginHeight) { resizePluginHeight(divRef.current.offsetHeight + 20) @@ -34,11 +23,11 @@ const PluginInner = ({ }) resizeObserver.observe(divRef.current) } - }, []) + }, [resizePluginHeight]) let previousWidth - const resetWidth = () => { + const resetWidth = useCallback(() => { const currentWidth = innerDivRef.current?.scrollWidth if (resizePluginWidth && currentWidth) { if (previousWidth && Math.abs(currentWidth - previousWidth) > 20) { @@ -47,11 +36,13 @@ const PluginInner = ({ previousWidth = currentWidth } requestAnimationFrame(resetWidth) - } + }, [resizePluginWidth]) useEffect(() => { - requestAnimationFrame(resetWidth) - }, []) + if (resizePluginWidth) { + requestAnimationFrame(resetWidth) + } + }, [resetWidth, resizePluginWidth]) // inner div disables margin collapsing which would prevent computing correct height return ( From f6c07cf222254379c5e7574087a9364507e9cdd1 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Tue, 22 Aug 2023 10:16:09 +0200 Subject: [PATCH 4/4] fix: use useRef for previous width --- shell/src/PluginLoader.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/shell/src/PluginLoader.js b/shell/src/PluginLoader.js index f0ce164b8..ee7c900ec 100644 --- a/shell/src/PluginLoader.js +++ b/shell/src/PluginLoader.js @@ -25,15 +25,18 @@ const PluginInner = ({ } }, [resizePluginHeight]) - let previousWidth + const previousWidth = useRef() const resetWidth = useCallback(() => { const currentWidth = innerDivRef.current?.scrollWidth if (resizePluginWidth && currentWidth) { - if (previousWidth && Math.abs(currentWidth - previousWidth) > 20) { + if ( + previousWidth.current && + Math.abs(currentWidth - previousWidth.current) > 20 + ) { resizePluginWidth(currentWidth + 20) } - previousWidth = currentWidth + previousWidth.current = currentWidth } requestAnimationFrame(resetWidth) }, [resizePluginWidth])