How to use jsx-pragmatic - 10 common examples
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
}
};};
logger.info(req, `button_render_version_${ render.version }`);
logger.info(req, `button_client_version_${ client.version }`);
const content = smartContent[locale.country][locale.lang] || {};
const blackButtonText = content.payWithDebitOrCreditCard;
// logs for the missing content for the black button
if (!blackButtonText) {
logger.info(req, `missing_content`, { info: JSON.stringify({ params, locale }) });
}
const buttonHTML = render.button.Buttons({
...params, nonce: cspNonce, csp: { nonce: cspNonce }, fundingEligibility, personalization, content
}).render(html());
const setupParams = {
fundingEligibility, buyerCountry, cspNonce, merchantID, personalization, sdkMeta,
isCardFieldsExperimentEnabled, firebaseConfig, facilitatorAccessToken, eligibility, content
};
const pageHTML = `
<style nonce="${ cspNonce }">${ buttonStyle }</style>
<div class="buttons-container" id="buttons-container">${ buttonHTML }</div>
<div class="card-fields-container" id="card-fields-container"></div>
${ meta.getSDKLoader({ nonce: cspNonce }) }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;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 },
node('node', { el: frame }),
node('node', { el: prerenderFrame })),
node('style', null, `
#${ uid } {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
}
#${ uid }.${ tag }-context-${ CONTEXT.POPUP } {
cursor: pointer;
}
#${ uid }.${ tag }-context-${ CONTEXT.IFRAME } .${ CLASS.OUTLET } {
box-shadow: 2px 2px 10px 3px rgba(0, 0, 0, 0.4);node(
'head',
null,
node(
'style',
null,
'\n html, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n top: 0;\n left: 0;\n margin: 0;\n text-align: center;\n }\n\n .spinner {\n position: absolute;\n max-height: 60vmin;\n max-width: 60vmin;\n height: 40px;\n width: 40px;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n z-index: 10;\n }\n\n .spinner .loader {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n border: 3px solid rgba(0, 0, 0, .2);\n border-top-color: rgba(33, 128, 192, 0.8);\n border-radius: 100%;\n animation: rotation .7s infinite linear;\n\n }\n\n @keyframes rotation {\n from {\n transform: rotate(0deg)\n }\n to {\n transform: rotate(359deg)\n }\n }\n '
)
),
node(
'body',
null,
node(
'div',
{ 'class': 'spinner' },
node('div', { id: 'loader', 'class': 'loader' })
)
)
).render(dom({ doc: document }));
}return node(
'html',
null,
node(
'head',
null,
node(
'style',
null,
'\n html, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n top: 0;\n left: 0;\n margin: 0;\n text-align: center;\n }\n\n .spinner {\n position: absolute;\n max-height: 60vmin;\n max-width: 60vmin;\n height: 40px;\n width: 40px;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n z-index: 10;\n }\n\n .spinner .loader {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n border: 3px solid rgba(0, 0, 0, .2);\n border-top-color: rgba(33, 128, 192, 0.8);\n border-radius: 100%;\n animation: rotation .7s infinite linear;\n\n }\n\n @keyframes rotation {\n from {\n transform: rotate(0deg)\n }\n to {\n transform: rotate(359deg)\n }\n }\n '
)
),
node(
'body',
null,
node(
'div',
{ 'class': 'spinner' },
node('div', { id: 'loader', 'class': 'loader' })
)
)
).render(dom({ doc: document }));
}outlet = _ref.outlet,
document = _ref.document,
_ref$dimensions = _ref.dimensions,
width = _ref$dimensions.width,
height = _ref$dimensions.height;
return node(
'div',
{ id: id, 'class': CLASS.ZOID + ' ' + CLASS.ZOID + '-tag-' + tag + ' ' + CLASS.ZOID + '-context-' + context },
node(
'style',
null,
'\n #' + id + ', #' + id + ' > .' + CLASS.OUTLET + ' {\n width: ' + width + ';\n height: ' + height + ';\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' {\n display: inline-block;\n position: relative;\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' > iframe {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n transition: opacity .2s ease-in-out;\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' > iframe.' + CLASS.VISIBLE + ' {\n opacity: 1;\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' > iframe.' + CLASS.INVISIBLE + ' {\n opacity: 0;\n }\n '
),
node('node', { el: outlet })
).render(dom({ doc: document }));
}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 },
node('node', { el: frame }),
node('node', { el: prerenderFrame })),
node('style', null, `
#${ uid } {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
}
#${ uid }.${ tag }-context-${ CONTEXT.POPUP } {
cursor: pointer;
}
export function defaultContainerTemplate(_ref) {
var id = _ref.id,
tag = _ref.tag,
context = _ref.context,
CLASS = _ref.CLASS,
outlet = _ref.outlet,
document = _ref.document,
_ref$dimensions = _ref.dimensions,
width = _ref$dimensions.width,
height = _ref$dimensions.height;
return node(
'div',
{ id: id, 'class': CLASS.ZOID + ' ' + CLASS.ZOID + '-tag-' + tag + ' ' + CLASS.ZOID + '-context-' + context },
node(
'style',
null,
'\n #' + id + ', #' + id + ' > .' + CLASS.OUTLET + ' {\n width: ' + width + ';\n height: ' + height + ';\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' {\n display: inline-block;\n position: relative;\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' > iframe {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n transition: opacity .2s ease-in-out;\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' > iframe.' + CLASS.VISIBLE + ' {\n opacity: 1;\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' > iframe.' + CLASS.INVISIBLE + ' {\n opacity: 0;\n }\n '
),
node('node', { el: outlet })
).render(dom({ doc: document }));
}export function defaultContainerTemplate(_ref) {
var id = _ref.id,
tag = _ref.tag,
context = _ref.context,
CLASS = _ref.CLASS,
outlet = _ref.outlet,
document = _ref.document,
_ref$dimensions = _ref.dimensions,
width = _ref$dimensions.width,
height = _ref$dimensions.height;
return node(
'div',
{ id: id, 'class': CLASS.ZOID + ' ' + CLASS.ZOID + '-tag-' + tag + ' ' + CLASS.ZOID + '-context-' + context },
node(
'style',
null,
'\n #' + id + ', #' + id + ' > .' + CLASS.OUTLET + ' {\n width: ' + width + ';\n height: ' + height + ';\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' {\n display: inline-block;\n position: relative;\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' > iframe {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n transition: opacity .2s ease-in-out;\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' > iframe.' + CLASS.VISIBLE + ' {\n opacity: 1;\n }\n\n #' + id + ' > .' + CLASS.OUTLET + ' > iframe.' + CLASS.INVISIBLE + ' {\n opacity: 0;\n }\n '
),
node('node', { el: outlet })
).render(dom({ doc: document }));
}
