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