phx-react
Version:
PHX REACT
62 lines (61 loc) • 2.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXIframe = PHXIframe;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
function PHXIframe({ hasBorder = false, height = 'large', isFullWidth = true, isMobile = false, rounded = false, src, srcDoc, title = 'Iframe Content', }) {
const widthClass = isFullWidth ? 'w-full' : 'w-auto';
const heightClass = {
small: 'h-56',
medium: 'h-[270px]',
large: 'h-96',
full: 'h-full',
}[height];
const borderClass = hasBorder ? 'border border-gray-200' : 'border-none';
const roundedClass = rounded ? 'rounded-lg' : '';
const iframeClasses = `${widthClass} ${heightClass} ${borderClass} ${roundedClass}`.trim();
const baseStyle = `
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
-ms-overflow-style: none;
scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
display: none !important;
}
body {
font-family: system-ui, -apple-system, sans-serif;
}
* {
line-height: 1.5 !important;
}
img {
max-width: 100% !important;
height: auto !important;
}
${isMobile
? `
.preview-scale-wrapper {
zoom: 0.6;
-moz-transform: scale(0.6);
-moz-transform-origin: 0 0;
box-sizing: border-box;
}
h3 {
font-weight: 500 !important;
}
`
: ''}
</style>
`;
const finalSrcDoc = srcDoc ? `${baseStyle} <div class="preview-scale-wrapper">${srcDoc}</div>` : undefined;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("iframe", { className: iframeClasses, src: src, srcDoc: finalSrcDoc, title: title })));
}
//# sourceMappingURL=PHXIframe.js.map