1 | import*as React from'react';import {cloneElement,isValidElement,createRef,PureComponent,Component,forwardRef,useRef,useState,useEffect,useLayoutEffect}from'react';import {findDOMNode}from'react-dom'; |
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | var extendStatics = function(d, b) {
|
18 | extendStatics = Object.setPrototypeOf ||
|
19 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
20 | function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
21 | return extendStatics(d, b);
|
22 | };
|
23 |
|
24 | function __extends(d, b) {
|
25 | if (typeof b !== "function" && b !== null)
|
26 | throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
27 | extendStatics(d, b);
|
28 | function __() { this.constructor = d; }
|
29 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
30 | }
|
31 |
|
32 | var __assign = function() {
|
33 | __assign = Object.assign || function __assign(t) {
|
34 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
35 | s = arguments[i];
|
36 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
37 | }
|
38 | return t;
|
39 | };
|
40 | return __assign.apply(this, arguments);
|
41 | };
|
42 |
|
43 | function __rest(s, e) {
|
44 | var t = {};
|
45 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
46 | t[p] = s[p];
|
47 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
48 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
49 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
50 | t[p[i]] = s[p[i]];
|
51 | }
|
52 | return t;
|
53 | }var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; |
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 | function isObject$3(value) {
|
80 | var type = typeof value;
|
81 | return value != null && (type == 'object' || type == 'function');
|
82 | }
|
83 |
|
84 | var isObject_1 = isObject$3;
|
85 |
|
86 | var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
|
87 |
|
88 | var _freeGlobal = freeGlobal$1;var freeGlobal = _freeGlobal;
|
89 |
|
90 |
|
91 | var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
|
92 |
|
93 |
|
94 | var root$2 = freeGlobal || freeSelf || Function('return this')();
|
95 |
|
96 | var _root = root$2;var root$1 = _root;
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 | var now$1 = function() {
|
115 | return root$1.Date.now();
|
116 | };
|
117 |
|
118 | var now_1 = now$1;
|
119 |
|
120 | var reWhitespace = /\s/;
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 | function trimmedEndIndex$1(string) {
|
131 | var index = string.length;
|
132 |
|
133 | while (index-- && reWhitespace.test(string.charAt(index))) {}
|
134 | return index;
|
135 | }
|
136 |
|
137 | var _trimmedEndIndex = trimmedEndIndex$1;var trimmedEndIndex = _trimmedEndIndex;
|
138 |
|
139 |
|
140 | var reTrimStart = /^\s+/;
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 | function baseTrim$1(string) {
|
150 | return string
|
151 | ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
|
152 | : string;
|
153 | }
|
154 |
|
155 | var _baseTrim = baseTrim$1;var root = _root;
|
156 |
|
157 |
|
158 | var Symbol$2 = root.Symbol;
|
159 |
|
160 | var _Symbol = Symbol$2;var Symbol$1 = _Symbol;
|
161 |
|
162 |
|
163 | var objectProto$1 = Object.prototype;
|
164 |
|
165 |
|
166 | var hasOwnProperty = objectProto$1.hasOwnProperty;
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 | var nativeObjectToString$1 = objectProto$1.toString;
|
174 |
|
175 |
|
176 | var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 | function getRawTag$1(value) {
|
186 | var isOwn = hasOwnProperty.call(value, symToStringTag$1),
|
187 | tag = value[symToStringTag$1];
|
188 |
|
189 | try {
|
190 | value[symToStringTag$1] = undefined;
|
191 | var unmasked = true;
|
192 | } catch (e) {}
|
193 |
|
194 | var result = nativeObjectToString$1.call(value);
|
195 | if (unmasked) {
|
196 | if (isOwn) {
|
197 | value[symToStringTag$1] = tag;
|
198 | } else {
|
199 | delete value[symToStringTag$1];
|
200 | }
|
201 | }
|
202 | return result;
|
203 | }
|
204 |
|
205 | var _getRawTag = getRawTag$1;
|
206 |
|
207 | var objectProto = Object.prototype;
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 | var nativeObjectToString = objectProto.toString;
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 | function objectToString$1(value) {
|
224 | return nativeObjectToString.call(value);
|
225 | }
|
226 |
|
227 | var _objectToString = objectToString$1;var Symbol = _Symbol,
|
228 | getRawTag = _getRawTag,
|
229 | objectToString = _objectToString;
|
230 |
|
231 |
|
232 | var nullTag = '[object Null]',
|
233 | undefinedTag = '[object Undefined]';
|
234 |
|
235 |
|
236 | var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 | function baseGetTag$1(value) {
|
246 | if (value == null) {
|
247 | return value === undefined ? undefinedTag : nullTag;
|
248 | }
|
249 | return (symToStringTag && symToStringTag in Object(value))
|
250 | ? getRawTag(value)
|
251 | : objectToString(value);
|
252 | }
|
253 |
|
254 | var _baseGetTag = baseGetTag$1; |
255 |
|
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 |
|
268 |
|
269 |
|
270 |
|
271 |
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 | function isObjectLike$1(value) {
|
280 | return value != null && typeof value == 'object';
|
281 | }
|
282 |
|
283 | var isObjectLike_1 = isObjectLike$1;var baseGetTag = _baseGetTag,
|
284 | isObjectLike = isObjectLike_1;
|
285 |
|
286 |
|
287 | var symbolTag = '[object Symbol]';
|
288 |
|
289 |
|
290 |
|
291 |
|
292 |
|
293 |
|
294 |
|
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 |
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 | function isSymbol$1(value) {
|
307 | return typeof value == 'symbol' ||
|
308 | (isObjectLike(value) && baseGetTag(value) == symbolTag);
|
309 | }
|
310 |
|
311 | var isSymbol_1 = isSymbol$1;var baseTrim = _baseTrim,
|
312 | isObject$2 = isObject_1,
|
313 | isSymbol = isSymbol_1;
|
314 |
|
315 |
|
316 | var NAN = 0 / 0;
|
317 |
|
318 |
|
319 | var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
|
320 |
|
321 |
|
322 | var reIsBinary = /^0b[01]+$/i;
|
323 |
|
324 |
|
325 | var reIsOctal = /^0o[0-7]+$/i;
|
326 |
|
327 |
|
328 | var freeParseInt = parseInt;
|
329 |
|
330 |
|
331 |
|
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 |
|
345 |
|
346 |
|
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 |
|
353 | function toNumber$1(value) {
|
354 | if (typeof value == 'number') {
|
355 | return value;
|
356 | }
|
357 | if (isSymbol(value)) {
|
358 | return NAN;
|
359 | }
|
360 | if (isObject$2(value)) {
|
361 | var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
|
362 | value = isObject$2(other) ? (other + '') : other;
|
363 | }
|
364 | if (typeof value != 'string') {
|
365 | return value === 0 ? value : +value;
|
366 | }
|
367 | value = baseTrim(value);
|
368 | var isBinary = reIsBinary.test(value);
|
369 | return (isBinary || reIsOctal.test(value))
|
370 | ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
|
371 | : (reIsBadHex.test(value) ? NAN : +value);
|
372 | }
|
373 |
|
374 | var toNumber_1 = toNumber$1;var isObject$1 = isObject_1,
|
375 | now = now_1,
|
376 | toNumber = toNumber_1;
|
377 |
|
378 |
|
379 | var FUNC_ERROR_TEXT$1 = 'Expected a function';
|
380 |
|
381 |
|
382 | var nativeMax = Math.max,
|
383 | nativeMin = Math.min;
|
384 |
|
385 |
|
386 |
|
387 |
|
388 |
|
389 |
|
390 |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 |
|
396 |
|
397 |
|
398 |
|
399 |
|
400 |
|
401 |
|
402 |
|
403 |
|
404 |
|
405 |
|
406 |
|
407 |
|
408 |
|
409 |
|
410 |
|
411 |
|
412 |
|
413 |
|
414 |
|
415 |
|
416 |
|
417 |
|
418 |
|
419 |
|
420 |
|
421 |
|
422 |
|
423 |
|
424 |
|
425 |
|
426 |
|
427 |
|
428 |
|
429 |
|
430 |
|
431 |
|
432 |
|
433 |
|
434 |
|
435 |
|
436 |
|
437 |
|
438 |
|
439 | function debounce$1(func, wait, options) {
|
440 | var lastArgs,
|
441 | lastThis,
|
442 | maxWait,
|
443 | result,
|
444 | timerId,
|
445 | lastCallTime,
|
446 | lastInvokeTime = 0,
|
447 | leading = false,
|
448 | maxing = false,
|
449 | trailing = true;
|
450 |
|
451 | if (typeof func != 'function') {
|
452 | throw new TypeError(FUNC_ERROR_TEXT$1);
|
453 | }
|
454 | wait = toNumber(wait) || 0;
|
455 | if (isObject$1(options)) {
|
456 | leading = !!options.leading;
|
457 | maxing = 'maxWait' in options;
|
458 | maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
|
459 | trailing = 'trailing' in options ? !!options.trailing : trailing;
|
460 | }
|
461 |
|
462 | function invokeFunc(time) {
|
463 | var args = lastArgs,
|
464 | thisArg = lastThis;
|
465 |
|
466 | lastArgs = lastThis = undefined;
|
467 | lastInvokeTime = time;
|
468 | result = func.apply(thisArg, args);
|
469 | return result;
|
470 | }
|
471 |
|
472 | function leadingEdge(time) {
|
473 |
|
474 | lastInvokeTime = time;
|
475 |
|
476 | timerId = setTimeout(timerExpired, wait);
|
477 |
|
478 | return leading ? invokeFunc(time) : result;
|
479 | }
|
480 |
|
481 | function remainingWait(time) {
|
482 | var timeSinceLastCall = time - lastCallTime,
|
483 | timeSinceLastInvoke = time - lastInvokeTime,
|
484 | timeWaiting = wait - timeSinceLastCall;
|
485 |
|
486 | return maxing
|
487 | ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
|
488 | : timeWaiting;
|
489 | }
|
490 |
|
491 | function shouldInvoke(time) {
|
492 | var timeSinceLastCall = time - lastCallTime,
|
493 | timeSinceLastInvoke = time - lastInvokeTime;
|
494 |
|
495 |
|
496 |
|
497 |
|
498 | return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
|
499 | (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
|
500 | }
|
501 |
|
502 | function timerExpired() {
|
503 | var time = now();
|
504 | if (shouldInvoke(time)) {
|
505 | return trailingEdge(time);
|
506 | }
|
507 |
|
508 | timerId = setTimeout(timerExpired, remainingWait(time));
|
509 | }
|
510 |
|
511 | function trailingEdge(time) {
|
512 | timerId = undefined;
|
513 |
|
514 |
|
515 |
|
516 | if (trailing && lastArgs) {
|
517 | return invokeFunc(time);
|
518 | }
|
519 | lastArgs = lastThis = undefined;
|
520 | return result;
|
521 | }
|
522 |
|
523 | function cancel() {
|
524 | if (timerId !== undefined) {
|
525 | clearTimeout(timerId);
|
526 | }
|
527 | lastInvokeTime = 0;
|
528 | lastArgs = lastCallTime = lastThis = timerId = undefined;
|
529 | }
|
530 |
|
531 | function flush() {
|
532 | return timerId === undefined ? result : trailingEdge(now());
|
533 | }
|
534 |
|
535 | function debounced() {
|
536 | var time = now(),
|
537 | isInvoking = shouldInvoke(time);
|
538 |
|
539 | lastArgs = arguments;
|
540 | lastThis = this;
|
541 | lastCallTime = time;
|
542 |
|
543 | if (isInvoking) {
|
544 | if (timerId === undefined) {
|
545 | return leadingEdge(lastCallTime);
|
546 | }
|
547 | if (maxing) {
|
548 |
|
549 | clearTimeout(timerId);
|
550 | timerId = setTimeout(timerExpired, wait);
|
551 | return invokeFunc(lastCallTime);
|
552 | }
|
553 | }
|
554 | if (timerId === undefined) {
|
555 | timerId = setTimeout(timerExpired, wait);
|
556 | }
|
557 | return result;
|
558 | }
|
559 | debounced.cancel = cancel;
|
560 | debounced.flush = flush;
|
561 | return debounced;
|
562 | }
|
563 |
|
564 | var debounce_1 = debounce$1;var debounce = debounce_1,
|
565 | isObject = isObject_1;
|
566 |
|
567 |
|
568 | var FUNC_ERROR_TEXT = 'Expected a function';
|
569 |
|
570 |
|
571 |
|
572 |
|
573 |
|
574 |
|
575 |
|
576 |
|
577 |
|
578 |
|
579 |
|
580 |
|
581 |
|
582 |
|
583 |
|
584 |
|
585 |
|
586 |
|
587 |
|
588 |
|
589 |
|
590 |
|
591 |
|
592 |
|
593 |
|
594 |
|
595 |
|
596 |
|
597 |
|
598 |
|
599 |
|
600 |
|
601 |
|
602 |
|
603 |
|
604 |
|
605 |
|
606 |
|
607 |
|
608 |
|
609 |
|
610 |
|
611 |
|
612 |
|
613 |
|
614 | function throttle(func, wait, options) {
|
615 | var leading = true,
|
616 | trailing = true;
|
617 |
|
618 | if (typeof func != 'function') {
|
619 | throw new TypeError(FUNC_ERROR_TEXT);
|
620 | }
|
621 | if (isObject(options)) {
|
622 | leading = 'leading' in options ? !!options.leading : leading;
|
623 | trailing = 'trailing' in options ? !!options.trailing : trailing;
|
624 | }
|
625 | return debounce(func, wait, {
|
626 | 'leading': leading,
|
627 | 'maxWait': wait,
|
628 | 'trailing': trailing
|
629 | });
|
630 | }
|
631 |
|
632 | var throttle_1 = throttle;var patchResizeHandler = function (resizeCallback, refreshMode, refreshRate, refreshOptions) {
|
633 | switch (refreshMode) {
|
634 | case 'debounce':
|
635 | return debounce_1(resizeCallback, refreshRate, refreshOptions);
|
636 | case 'throttle':
|
637 | return throttle_1(resizeCallback, refreshRate, refreshOptions);
|
638 | default:
|
639 | return resizeCallback;
|
640 | }
|
641 | };
|
642 | var isFunction = function (fn) { return typeof fn === 'function'; };
|
643 | var isSSR = function () { return typeof window === 'undefined'; };
|
644 | var isDOMElement = function (element) { return element instanceof Element || element instanceof HTMLDocument; };
|
645 | var createNotifier = function (onResize, setSize, handleWidth, handleHeight) {
|
646 | return function (_a) {
|
647 | var width = _a.width, height = _a.height;
|
648 | setSize(function (prev) {
|
649 | if (prev.width === width && prev.height === height) {
|
650 |
|
651 | return prev;
|
652 | }
|
653 | if ((prev.width === width && !handleHeight) || (prev.height === height && !handleWidth)) {
|
654 |
|
655 | return prev;
|
656 | }
|
657 | if (onResize && isFunction(onResize)) {
|
658 | onResize(width, height);
|
659 | }
|
660 | return { width: width, height: height };
|
661 | });
|
662 | };
|
663 | };var ResizeDetector = (function (_super) {
|
664 | __extends(ResizeDetector, _super);
|
665 | function ResizeDetector(props) {
|
666 | var _this = _super.call(this, props) || this;
|
667 | _this.cancelHandler = function () {
|
668 | if (_this.resizeHandler && _this.resizeHandler.cancel) {
|
669 |
|
670 | _this.resizeHandler.cancel();
|
671 | _this.resizeHandler = null;
|
672 | }
|
673 | };
|
674 | _this.attachObserver = function () {
|
675 | var _a = _this.props, targetRef = _a.targetRef, observerOptions = _a.observerOptions;
|
676 | if (isSSR()) {
|
677 | return;
|
678 | }
|
679 | if (targetRef && targetRef.current) {
|
680 | _this.targetRef.current = targetRef.current;
|
681 | }
|
682 | var element = _this.getElement();
|
683 | if (!element) {
|
684 |
|
685 | return;
|
686 | }
|
687 | if (_this.observableElement && _this.observableElement === element) {
|
688 |
|
689 | return;
|
690 | }
|
691 | _this.observableElement = element;
|
692 | _this.resizeObserver.observe(element, observerOptions);
|
693 | };
|
694 | _this.getElement = function () {
|
695 | var _a = _this.props, querySelector = _a.querySelector, targetDomEl = _a.targetDomEl;
|
696 | if (isSSR())
|
697 | return null;
|
698 |
|
699 | if (querySelector)
|
700 | return document.querySelector(querySelector);
|
701 |
|
702 | if (targetDomEl && isDOMElement(targetDomEl))
|
703 | return targetDomEl;
|
704 |
|
705 | if (_this.targetRef && isDOMElement(_this.targetRef.current))
|
706 | return _this.targetRef.current;
|
707 |
|
708 |
|
709 | var currentElement = findDOMNode(_this);
|
710 | if (!currentElement)
|
711 | return null;
|
712 | var renderType = _this.getRenderType();
|
713 | switch (renderType) {
|
714 | case 'renderProp':
|
715 | return currentElement;
|
716 | case 'childFunction':
|
717 | return currentElement;
|
718 | case 'child':
|
719 | return currentElement;
|
720 | case 'childArray':
|
721 | return currentElement;
|
722 | default:
|
723 | return currentElement.parentElement;
|
724 | }
|
725 | };
|
726 | _this.createResizeHandler = function (entries) {
|
727 | var _a = _this.props, _b = _a.handleWidth, handleWidth = _b === void 0 ? true : _b, _c = _a.handleHeight, handleHeight = _c === void 0 ? true : _c, onResize = _a.onResize;
|
728 | if (!handleWidth && !handleHeight)
|
729 | return;
|
730 | var notifyResize = createNotifier(onResize, _this.setState.bind(_this), handleWidth, handleHeight);
|
731 | entries.forEach(function (entry) {
|
732 | var _a = (entry && entry.contentRect) || {}, width = _a.width, height = _a.height;
|
733 | var shouldSetSize = !_this.skipOnMount && !isSSR();
|
734 | if (shouldSetSize) {
|
735 | notifyResize({ width: width, height: height });
|
736 | }
|
737 | _this.skipOnMount = false;
|
738 | });
|
739 | };
|
740 | _this.getRenderType = function () {
|
741 | var _a = _this.props, render = _a.render, children = _a.children;
|
742 | if (isFunction(render)) {
|
743 |
|
744 | return 'renderProp';
|
745 | }
|
746 | if (isFunction(children)) {
|
747 | return 'childFunction';
|
748 | }
|
749 | if (isValidElement(children)) {
|
750 | return 'child';
|
751 | }
|
752 | if (Array.isArray(children)) {
|
753 |
|
754 | return 'childArray';
|
755 | }
|
756 |
|
757 | return 'parent';
|
758 | };
|
759 | var skipOnMount = props.skipOnMount, refreshMode = props.refreshMode, _a = props.refreshRate, refreshRate = _a === void 0 ? 1000 : _a, refreshOptions = props.refreshOptions;
|
760 | _this.state = {
|
761 | width: undefined,
|
762 | height: undefined
|
763 | };
|
764 | _this.skipOnMount = skipOnMount;
|
765 | _this.targetRef = createRef();
|
766 | _this.observableElement = null;
|
767 | if (isSSR()) {
|
768 | return _this;
|
769 | }
|
770 | _this.resizeHandler = patchResizeHandler(_this.createResizeHandler, refreshMode, refreshRate, refreshOptions);
|
771 | _this.resizeObserver = new window.ResizeObserver(_this.resizeHandler);
|
772 | return _this;
|
773 | }
|
774 | ResizeDetector.prototype.componentDidMount = function () {
|
775 | this.attachObserver();
|
776 | };
|
777 | ResizeDetector.prototype.componentDidUpdate = function () {
|
778 | this.attachObserver();
|
779 | };
|
780 | ResizeDetector.prototype.componentWillUnmount = function () {
|
781 | if (isSSR()) {
|
782 | return;
|
783 | }
|
784 | this.resizeObserver.disconnect();
|
785 | this.cancelHandler();
|
786 | };
|
787 | ResizeDetector.prototype.render = function () {
|
788 | var _a = this.props, render = _a.render, children = _a.children, _b = _a.nodeType, WrapperTag = _b === void 0 ? 'div' : _b;
|
789 | var _c = this.state, width = _c.width, height = _c.height;
|
790 | var childProps = { width: width, height: height, targetRef: this.targetRef };
|
791 | var renderType = this.getRenderType();
|
792 | var typedChildren;
|
793 | switch (renderType) {
|
794 | case 'renderProp':
|
795 | return render && render(childProps);
|
796 | case 'childFunction':
|
797 | typedChildren = children;
|
798 | return typedChildren(childProps);
|
799 | case 'child':
|
800 |
|
801 | typedChildren = children;
|
802 | if (typedChildren.type && typeof typedChildren.type === 'string') {
|
803 |
|
804 | childProps.targetRef; var nativeProps = __rest(childProps, ["targetRef"]);
|
805 | return cloneElement(typedChildren, nativeProps);
|
806 | }
|
807 |
|
808 | return cloneElement(typedChildren, childProps);
|
809 | case 'childArray':
|
810 | typedChildren = children;
|
811 | return typedChildren.map(function (el) { return !!el && cloneElement(el, childProps); });
|
812 | default:
|
813 | return React.createElement(WrapperTag, null);
|
814 | }
|
815 | };
|
816 | return ResizeDetector;
|
817 | }(PureComponent));function withResizeDetector(ComponentInner, options) {
|
818 | if (options === void 0) { options = {}; }
|
819 | var ResizeDetectorHOC = (function (_super) {
|
820 | __extends(ResizeDetectorHOC, _super);
|
821 | function ResizeDetectorHOC() {
|
822 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
823 | _this.ref = createRef();
|
824 | return _this;
|
825 | }
|
826 | ResizeDetectorHOC.prototype.render = function () {
|
827 | var _a = this.props, forwardedRef = _a.forwardedRef, rest = __rest(_a, ["forwardedRef"]);
|
828 | var targetRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : this.ref;
|
829 | return (React.createElement(ResizeDetector, __assign({}, options, { targetRef: targetRef }),
|
830 | React.createElement(ComponentInner, __assign({ targetRef: targetRef }, rest))));
|
831 | };
|
832 | return ResizeDetectorHOC;
|
833 | }(Component));
|
834 | function forwardRefWrapper(props, ref) {
|
835 | return React.createElement(ResizeDetectorHOC, __assign({}, props, { forwardedRef: ref }));
|
836 | }
|
837 | var name = ComponentInner.displayName || ComponentInner.name;
|
838 | forwardRefWrapper.displayName = "withResizeDetector(".concat(name, ")");
|
839 | return forwardRef(forwardRefWrapper);
|
840 | }var useEnhancedEffect = isSSR() ? useEffect : useLayoutEffect;
|
841 | function useResizeDetector(props) {
|
842 | if (props === void 0) { props = {}; }
|
843 | var _a = props.skipOnMount, skipOnMount = _a === void 0 ? false : _a, refreshMode = props.refreshMode, _b = props.refreshRate, refreshRate = _b === void 0 ? 1000 : _b, refreshOptions = props.refreshOptions, _c = props.handleWidth, handleWidth = _c === void 0 ? true : _c, _d = props.handleHeight, handleHeight = _d === void 0 ? true : _d, targetRef = props.targetRef, observerOptions = props.observerOptions, onResize = props.onResize;
|
844 | var skipResize = useRef(skipOnMount);
|
845 | var localRef = useRef(null);
|
846 | var ref = (targetRef !== null && targetRef !== void 0 ? targetRef : localRef);
|
847 | var resizeHandler = useRef();
|
848 | var _e = useState({
|
849 | width: undefined,
|
850 | height: undefined
|
851 | }), size = _e[0], setSize = _e[1];
|
852 | useEnhancedEffect(function () {
|
853 | if (isSSR()) {
|
854 | return;
|
855 | }
|
856 | var notifyResize = createNotifier(onResize, setSize, handleWidth, handleHeight);
|
857 | var resizeCallback = function (entries) {
|
858 | if (!handleWidth && !handleHeight)
|
859 | return;
|
860 | entries.forEach(function (entry) {
|
861 | var _a = (entry && entry.contentRect) || {}, width = _a.width, height = _a.height;
|
862 | var shouldSetSize = !skipResize.current && !isSSR();
|
863 | if (shouldSetSize) {
|
864 | notifyResize({ width: width, height: height });
|
865 | }
|
866 | skipResize.current = false;
|
867 | });
|
868 | };
|
869 | resizeHandler.current = patchResizeHandler(resizeCallback, refreshMode, refreshRate, refreshOptions);
|
870 | var resizeObserver = new window.ResizeObserver(resizeHandler.current);
|
871 | if (ref.current) {
|
872 |
|
873 | resizeObserver.observe(ref.current, observerOptions);
|
874 | }
|
875 | return function () {
|
876 | resizeObserver.disconnect();
|
877 | var patchedResizeHandler = resizeHandler.current;
|
878 | if (patchedResizeHandler && patchedResizeHandler.cancel) {
|
879 | patchedResizeHandler.cancel();
|
880 | }
|
881 | };
|
882 | }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);
|
883 | return __assign({ ref: ref }, size);
|
884 | }export{ResizeDetector as default,useResizeDetector,withResizeDetector};
|