How to use the jsx-pragmatic/src.node 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-card-components / src / contingency-flow.js View on Github 
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 }));
}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 },
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;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 },
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;
}
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 },
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;
}
