How to use the jsx-pragmatic/src.dom function in jsx-pragmatic
To help you get started, we’ve selected a few jsx-pragmatic 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 / native / component.jsx View on Github 
const renderSpinner = (win) => {
try {
win = assertSameDomain(win);
const doc = win.document;
writeElementToWindow(win, (
).render(dom({ doc })));
} catch (err) {
// pass
}
};import { noop, supportsPopups, getElement, memoize } from 'belter/src';
import { ZalgoPromise } from 'zalgo-promise/src';
import { node, dom } from 'jsx-pragmatic/src';
import { CONTEXT } from 'zoid/src';
import { Buttons as ButtonsTemplate } from '../../../../src/ui/buttons';
import { getElements, errorOnWindowOpen, generateOrderID } from '../../tests/common';
let { action, type, authed = false, bridge = false, delay = 0, onRender, checkout, selector, remembered, captureOrder = noop } = window.xprops.test;
const body = document.body;
if (body) {
body.appendChild((
).render(dom({ doc: document })));
}
if (bridge) {
errorOnWindowOpen();
delay = 100;
}
let popupBridge;
const popupBridgePromise = window.xprops.getPopupBridge().then(_popupBridge => {
popupBridge = _popupBridge;
});
function renderCheckout(props = {}, context = CONTEXT.POPUP) {
let approved = false;export function openPopup({ width, height } : { width : number, height : number }) : CrossDomainWindowType {
const win = assertSameDomain(popup('', { width, height }));
const doc = win.document;
const spinner = (
).render(dom({ doc }));
writeElementToWindow(win, spinner);
return win;
}position: absolute;
left: 8px;
content: ' ';
height: 16px;
width: 2px;
background-color: white;
}
#${ uid } .${ tag }-close:before {
transform: rotate(45deg);
}
#${ uid } .${ tag }-close:after {
transform: rotate(-45deg);
}
`)).render(dom({ doc }));
}
});const handleClick = (event, { fundingSource, card } : {| fundingSource : $Values, card : ?$Values |}) => {
if (supportsPopups()) {
const win = assertSameDomain(popup('', {
width: DEFAULT_POPUP_SIZE.WIDTH,
height: DEFAULT_POPUP_SIZE.HEIGHT
}));
const doc = window.document;
const spinner = (
).render(dom({ doc }));
writeElementToWindow(win, spinner);
onRenderCheckout({ win, fundingSource, card });
} else {
onRenderCheckout({ fundingSource, card });
}
};if (!this.component.containerTemplate) {
if (this.driver.renderedIntoContainer) {
throw new Error(`containerTemplate needed to render ${ context }`);
}
return;
}
let outlet = document.createElement('div');
addClass(outlet, CLASS_NAMES.OUTLET);
let container = this.renderTemplate(this.component.containerTemplate, { context, uid, container: el, focus, outlet });
if (container instanceof ElementNode) {
container = container.render(dom({ doc: document }));
}
this.container = container;
hideElement(this.container);
appendChild(el, this.container);
if (this.driver.renderedIntoContainer) {
this.element = outlet;
hideElement(this.element);
if (!this.element) {
throw new Error('Could not find element to render component into');
}
hideElement(this.element);
}prerenderTemplate: ({ state, props, doc }) => {
return (
{
state.prerenderDetails = { win, fundingSource, card };
} }
/>
).render(dom({ doc }));
},<div class="paypal-checkout-loader">
<div class="paypal-spinner">
</div>
</div>
<div class="paypal-checkout-iframe-container">
{ outlet }
</div>
<style>{ getContainerStyle({ uid, tag }) }</style>
).render(dom({ doc }));
}}).then(function (prerenderWindow) {
if (!prerenderWindow || !isSameDomain(prerenderWindow) || !isBlankDomain(prerenderWindow)) {
return;
}
var doc = prerenderWindow.document;
var el = _this27.renderTemplate(_this27.component.prerenderTemplate, { context: context, uid: uid, document: doc });
if (el instanceof ElementNode) {
el = el.render(dom({ doc: doc }));
}
try {
writeElementToWindow(prerenderWindow, el);
} catch (err) {
return;
}
var _ref12 = _this27.component.autoResize || {},
_ref12$width = _ref12.width,
width = _ref12$width === undefined ? false : _ref12$width,
_ref12$height = _ref12.height,
height = _ref12$height === undefined ? false : _ref12$height,
_ref12$element = _ref12.element,
element = _ref12$element === undefined ? 'body' : _ref12$element;<div class="paypal-checkout-loader">
<div class="paypal-spinner">
</div>
</div>
<div class="paypal-checkout-iframe-container">
{ outlet }
</div>
<style>{ getContainerStyle({ uid, tag }) }</style>
).render(dom({ doc }));
}
