@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
89 lines • 5.42 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Iframe = void 0;
const react_1 = __importStar(require("react"));
const constants_1 = require("../../configuration/constants");
const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
/**
* Display iframe but shows a spinner as long as it is not loaded.
*/
exports.Iframe = react_1.default.forwardRef((_a, ref) => {
var { title, className = "", useViewportHeight, useAvailableSpace = false, useContentHeight = false, backgroundColor = "", htmlIframeProps = {} } = _a, otherReactProps = __rest(_a, ["title", "className", "useViewportHeight", "useAvailableSpace", "useContentHeight", "backgroundColor", "htmlIframeProps"]);
const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
const [contentHeight, setContentHeight] = (0, react_1.useState)(undefined);
const newRef = react_1.default.useRef(null);
(0, react_1.useEffect)(() => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
const iframeRef = ref !== null && ref !== void 0 ? ref : newRef;
if (iframeRef && "current" in iframeRef && iframeRef.current) {
if (!!backgroundColor && isLoaded) {
const iframeDocStyle = (_c = (_b = (_a = iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentDocument) === null || _b === void 0 ? void 0 : _b.documentElement) === null || _c === void 0 ? void 0 : _c.style;
const iframeBodyStyle = (_f = (_e = (_d = iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current) === null || _d === void 0 ? void 0 : _d.contentDocument) === null || _e === void 0 ? void 0 : _e.body) === null || _f === void 0 ? void 0 : _f.style;
if (iframeDocStyle && iframeBodyStyle) {
iframeDocStyle.backgroundColor = backgroundColor;
iframeBodyStyle.backgroundColor = backgroundColor;
}
}
setContentHeight((_j = (_h = (_g = iframeRef.current.contentWindow) === null || _g === void 0 ? void 0 : _g.document) === null || _h === void 0 ? void 0 : _h.body) === null || _j === void 0 ? void 0 : _j.scrollHeight);
}
}, [ref, isLoaded, backgroundColor]);
const classNames = `${constants_1.CLASSPREFIX}-iframe` +
(useViewportHeight ? ` ${constants_1.CLASSPREFIX}-iframe--${useViewportHeight}height` : "") +
(useAvailableSpace ? ` ${constants_1.CLASSPREFIX}-iframe--useavailablespace` : "");
const { onLoad = () => { }, style } = htmlIframeProps, otherOriginalIframeProps = __rest(htmlIframeProps, ["onLoad", "style"]);
return (react_1.default.createElement("div", { className: classNames },
!isLoaded && react_1.default.createElement(Spinner_1.default, null),
react_1.default.createElement("iframe", Object.assign({ className: className !== null && className !== void 0 ? className : undefined, ref: ref !== null && ref !== void 0 ? ref : newRef, title: title }, otherOriginalIframeProps, otherReactProps, { onLoad: (e) => {
setIsLoaded(true);
onLoad(e);
}, style: Object.assign(Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), (!isLoaded
? {
visibility: "hidden",
position: "absolute",
left: "-10000em",
}
: {})), (useContentHeight && !!contentHeight
? {
height: `${contentHeight}px`,
}
: {})), scrolling: useContentHeight && !!contentHeight ? "no" : "yes" }))));
});
exports.default = exports.Iframe;
//# sourceMappingURL=Iframe.js.map