How to use the zoid/src.EVENT.RENDERED function in zoid
To help you get started, we’ve selected a few zoid examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
paypal / paypal-checkout-components / src / zoid / buttons / container.jsx View on Github 
if (!frame || !prerenderFrame) {
return;
}
if (container && container.tagName.toLowerCase() === 'button') {
throw new Error(`Do not render the PayPal button into a button element`);
}
frame.classList.add(CLASS.COMPONENT_FRAME);
prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
frame.classList.add(CLASS.INVISIBLE);
prerenderFrame.classList.add(CLASS.VISIBLE);
event.on(EVENT.RENDERED, () => {
prerenderFrame.classList.remove(CLASS.VISIBLE);
prerenderFrame.classList.add(CLASS.INVISIBLE);
frame.classList.remove(CLASS.INVISIBLE);
frame.classList.add(CLASS.VISIBLE);
setTimeout(() => {
destroyElement(prerenderFrame);
}, 1000);
});
// $FlowFixMe
const { style } = props;
const { label, layout, height: buttonHeight } = style;
let minimumSize = MINIMUM_SIZE[layout];}
function focusComponent(e) : ZalgoPromise {
e.preventDefault();
e.stopPropagation();
// $FlowFixMe
return focus();
}
frame.classList.add(CLASS.COMPONENT_FRAME);
prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
frame.classList.add(CLASS.INVISIBLE);
prerenderFrame.classList.add(CLASS.VISIBLE);
event.on(EVENT.RENDERED, () => {
prerenderFrame.classList.remove(CLASS.VISIBLE);
prerenderFrame.classList.add(CLASS.INVISIBLE);
frame.classList.remove(CLASS.INVISIBLE);
frame.classList.add(CLASS.VISIBLE);
setTimeout(() => {
destroyElement(prerenderFrame);
}, 1);
});
return node('div', { 'id': uid, 'onClick': focusComponent, 'class': `${ tag } ${ tag }-tag-${ tag } ${ tag }-context-${ context } ${ tag }-focus` },
node('a', { 'href': '#', 'onClick': closeComponent, 'class': `${ tag }-close` }),
node('div', { class: CLASS.OUTLET },z-index: 300;
top: 0;
left: 0;
width: 100%;
}
`}
<div class="{" id="{">
</div>
).render(dom({ doc }));
event.on(EVENT.RENDERED, () => {
setTimeout(() => {
element.style.transition = 'all 0.2s ease-in-out';
}, 1000);
});
return element;
}
return (el) => {
onDisplay.then(() => animate(el, `show-${ name }`, noop));
onClose.then(() => animate(el, `hide-${ name }`, noop));
};
};
let outlet;
if (frame && prerenderFrame) {
frame.classList.add(CLASS.COMPONENT_FRAME);
prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
prerenderFrame.classList.add(CLASS.VISIBLE);
frame.classList.add(CLASS.INVISIBLE);
event.on(EVENT.RENDERED, () => {
prerenderFrame.classList.remove(CLASS.VISIBLE);
prerenderFrame.classList.add(CLASS.INVISIBLE);
frame.classList.remove(CLASS.INVISIBLE);
frame.classList.add(CLASS.VISIBLE);
setTimeout(() => {
destroyElement(prerenderFrame);
}, 1);
});
outlet = (
<div class="{">
</div>const hideContainer = () => animate(el, `hide-${ name }`, noop);
event.on(EVENT.DISPLAY, showContainer);
event.on(EVENT.CLOSE, hideContainer);
};
};
let outlet;
if (frame && prerenderFrame) {
frame.classList.add(CLASS.COMPONENT_FRAME);
prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
prerenderFrame.classList.add(CLASS.VISIBLE);
frame.classList.add(CLASS.INVISIBLE);
event.on(EVENT.RENDERED, () => {
prerenderFrame.classList.remove(CLASS.VISIBLE);
prerenderFrame.classList.add(CLASS.INVISIBLE);
frame.classList.remove(CLASS.INVISIBLE);
frame.classList.add(CLASS.VISIBLE);
setTimeout(() => {
destroyElement(prerenderFrame);
}, 1);
});
outlet = (
<div class="{">
</div>
