diff --git a/src/overlay/template.jsx b/src/overlay/template.jsx index 99fa83e4..f1dc1e66 100644 --- a/src/overlay/template.jsx +++ b/src/overlay/template.jsx @@ -2,7 +2,7 @@ /** @jsx node */ /* eslint max-lines: off, react/jsx-max-depth: off */ -import { isIos, animate, noop, destroyElement, uniqueID, supportsPopups, type EventEmitterType } from 'belter/src'; +import { isIos, animate, noop, destroyElement, uniqueID, supportsPopups, type EventEmitterType, toCSS } from 'belter/src'; import { EVENT, CONTEXT } from 'zoid/src'; import { node, type ElementNode } from 'jsx-pragmatic/src'; import { LOGO_COLOR, PPLogo, PayPalLogo } from '@paypal/sdk-logos/src'; @@ -20,10 +20,12 @@ export type OverlayProps = {| content? : void | {| windowMessage? : string, continueMessage? : string - |} + |}, + autoResize? : boolean, + hideCloseButton? : boolean |}; -export function Overlay({ context, close, focus, event, frame, prerenderFrame, content = {} } : OverlayProps) : ElementNode { +export function Overlay({ context, close, focus, event, frame, prerenderFrame, content = {}, autoResize, hideCloseButton } : OverlayProps) : ElementNode { const uid = `paypal-overlay-${ uniqueID() }`; @@ -58,6 +60,25 @@ export function Overlay({ context, close, focus, event, frame, prerenderFrame, c }; }; + const setupAutoResize = (el) => { + event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => { + if (typeof newWidth === 'number') { + el.style.width = toCSS(newWidth); + } + + if (typeof newHeight === 'number') { + el.style.height = toCSS(newHeight); + } + }); + }; + + const outletOnRender = (el) => { + setupAnimations('component')(el); + if (autoResize) { + setupAutoResize(el); + } + }; + let outlet; if (frame && prerenderFrame) { @@ -80,7 +101,7 @@ export function Overlay({ context, close, focus, event, frame, prerenderFrame, c }); outlet = ( -
+
@@ -95,7 +116,7 @@ export function Overlay({ context, close, focus, event, frame, prerenderFrame, c
- + { !hideCloseButton && }