Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: plugin sizing elaboration #1398

Merged
merged 9 commits into from
Jan 23, 2025
Prev Previous commit
Next Next commit
fix: don't send width resizer if client width is set
KaiVandivier committed Dec 18, 2024
commit 9181270d09f46e3f5acb21ba6a4f8cca2f899c4e
15 changes: 13 additions & 2 deletions services/plugin/src/Plugin.tsx
Original file line number Diff line number Diff line change
@@ -59,7 +59,14 @@ export const Plugin = ({
useState<boolean>(false)

const [inErrorState, setInErrorState] = useState<boolean>(false)
// height and width values to be set by callbacks passed to the plugin
// (these default sizes will be quickly overwritten by the plugin)
// in order to behave like a normal block element, by default, the height
// will be set by plugin contents, this state will be used
const [resizedHeight, setPluginHeight] = useState<number>(150)
// ...and by default, plugin width will be defined by the container
// (width = 100%), so this state won't be used unless the `clientWidth`
// prop is used to have plugin width defined by plugin contents
const [resizedWidth, setPluginWidth] = useState<number>(500)

// since we do not know what props are passed, the dependency array has to be keys of whatever is standard prop
@@ -91,8 +98,10 @@ export const Plugin = ({
const iframeProps = {
...memoizedPropsToPass,
alertsAdd,
// if a dimension is specified or container driven, don't send
// a resize callback to the plugin
setPluginHeight: !height ? setPluginHeight : null,
setPluginWidth: !width ? setPluginWidth : null,
setPluginWidth: !width && clientWidth ? setPluginWidth : null,
setInErrorState,
setCommunicationReceived,
clientWidth,
@@ -152,8 +161,10 @@ export const Plugin = ({
ref={iframeRef}
src={pluginSource}
className={className}
// if clientWidth is set, then we want width to be set by plugin.
// otherwise,
width={clientWidth ? resizedWidth : width ?? '100%'}
height={height ?? resizedHeight + 'px'}
height={height ?? resizedHeight}
style={{ border: 'none' }}
/>
)
Loading