1 | "use strict";
|
---|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
---|
3 | var tslib_1 = require("tslib");
|
---|
4 | var React = tslib_1.__importStar(require("react"));
|
---|
5 | var util_1 = require("./misc/util");
|
---|
6 | var useState = React.useState, useEffect = React.useEffect, useRef = React.useRef;
|
---|
7 | var DRAF = function (callback) { return setTimeout(callback, 35); };
|
---|
8 | var useSize = function (element, _a) {
|
---|
9 | var _b = _a === void 0 ? {} : _a, _c = _b.width, width = _c === void 0 ? Infinity : _c, _d = _b.height, height = _d === void 0 ? Infinity : _d;
|
---|
10 | if (!util_1.isBrowser) {
|
---|
11 | return [
|
---|
12 | typeof element === 'function' ? element({ width: width, height: height }) : element,
|
---|
13 | { width: width, height: height },
|
---|
14 | ];
|
---|
15 | }
|
---|
16 | // eslint-disable-next-line react-hooks/rules-of-hooks
|
---|
17 | var _e = useState({ width: width, height: height }), state = _e[0], setState = _e[1];
|
---|
18 | if (typeof element === 'function') {
|
---|
19 | element = element(state);
|
---|
20 | }
|
---|
21 | var style = element.props.style || {};
|
---|
22 | // eslint-disable-next-line react-hooks/rules-of-hooks
|
---|
23 | var ref = useRef(null);
|
---|
24 | var window = null;
|
---|
25 | var setSize = function () {
|
---|
26 | var iframe = ref.current;
|
---|
27 | var size = iframe
|
---|
28 | ? {
|
---|
29 | width: iframe.offsetWidth,
|
---|
30 | height: iframe.offsetHeight,
|
---|
31 | }
|
---|
32 | : { width: width, height: height };
|
---|
33 | setState(size);
|
---|
34 | };
|
---|
35 | var onWindow = function (windowToListenOn) {
|
---|
36 | util_1.on(windowToListenOn, 'resize', setSize);
|
---|
37 | DRAF(setSize);
|
---|
38 | };
|
---|
39 | // eslint-disable-next-line react-hooks/rules-of-hooks
|
---|
40 | useEffect(function () {
|
---|
41 | var iframe = ref.current;
|
---|
42 | if (!iframe) {
|
---|
43 | // iframe will be undefined if component is already unmounted
|
---|
44 | return;
|
---|
45 | }
|
---|
46 | if (iframe.contentWindow) {
|
---|
47 | window = iframe.contentWindow;
|
---|
48 | onWindow(window);
|
---|
49 | }
|
---|
50 | else {
|
---|
51 | var onLoad_1 = function () {
|
---|
52 | util_1.on(iframe, 'load', onLoad_1);
|
---|
53 | window = iframe.contentWindow;
|
---|
54 | onWindow(window);
|
---|
55 | };
|
---|
56 | util_1.off(iframe, 'load', onLoad_1);
|
---|
57 | }
|
---|
58 | return function () {
|
---|
59 | if (window && window.removeEventListener) {
|
---|
60 | util_1.off(window, 'resize', setSize);
|
---|
61 | }
|
---|
62 | };
|
---|
63 | }, []);
|
---|
64 | style.position = 'relative';
|
---|
65 | var sized = React.cloneElement.apply(React, tslib_1.__spreadArrays([element, { style: style }], tslib_1.__spreadArrays([
|
---|
66 | React.createElement('iframe', {
|
---|
67 | ref: ref,
|
---|
68 | style: {
|
---|
69 | background: 'transparent',
|
---|
70 | border: 'none',
|
---|
71 | height: '100%',
|
---|
72 | left: 0,
|
---|
73 | position: 'absolute',
|
---|
74 | top: 0,
|
---|
75 | width: '100%',
|
---|
76 | zIndex: -1,
|
---|
77 | },
|
---|
78 | })
|
---|
79 | ], React.Children.toArray(element.props.children))));
|
---|
80 | return [sized, state];
|
---|
81 | };
|
---|
82 | exports.default = useSize;
|
---|