UNPKG

19.8 kBJavaScriptView Raw
1var $8zHUo$react = require("react");
2
3function $parcel$defineInteropFlag(a) {
4 Object.defineProperty(a, '__esModule', {value: true, configurable: true});
5}
6function $parcel$export(e, n, v, s) {
7 Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
8}
9var $parcel$global =
10typeof globalThis !== 'undefined'
11 ? globalThis
12 : typeof self !== 'undefined'
13 ? self
14 : typeof window !== 'undefined'
15 ? window
16 : typeof global !== 'undefined'
17 ? global
18 : {};
19
20$parcel$defineInteropFlag(module.exports);
21
22$parcel$export(module.exports, "default", () => $882b6d93070905b3$export$2e2bcd8739ae039);
23
24var $33065e702bd15fb9$exports = {};
25/**
26 * Detect Element Resize.
27 * https://github.com/sdecima/javascript-detect-element-resize
28 * Sebastian Decima
29 *
30 * Forked from version 0.5.3; includes the following modifications:
31 * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
32 * 2) Defer initialization code via a top-level function wrapper (to support SSR).
33 * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
34 * 4) Add nonce for style element.
35 **/ // Check `document` and `window` in case of server-side rendering
36let $33065e702bd15fb9$var$windowObject;
37if (typeof window !== "undefined") $33065e702bd15fb9$var$windowObject = window;
38else if (typeof self !== "undefined") // eslint-disable-next-line no-restricted-globals
39$33065e702bd15fb9$var$windowObject = self;
40else $33065e702bd15fb9$var$windowObject = $parcel$global;
41let $33065e702bd15fb9$var$cancelFrame = null;
42let $33065e702bd15fb9$var$requestFrame = null;
43const $33065e702bd15fb9$var$TIMEOUT_DURATION = 20;
44const $33065e702bd15fb9$var$clearTimeoutFn = $33065e702bd15fb9$var$windowObject.clearTimeout;
45const $33065e702bd15fb9$var$setTimeoutFn = $33065e702bd15fb9$var$windowObject.setTimeout;
46const $33065e702bd15fb9$var$cancelAnimationFrameFn = $33065e702bd15fb9$var$windowObject.cancelAnimationFrame || $33065e702bd15fb9$var$windowObject.mozCancelAnimationFrame || $33065e702bd15fb9$var$windowObject.webkitCancelAnimationFrame;
47const $33065e702bd15fb9$var$requestAnimationFrameFn = $33065e702bd15fb9$var$windowObject.requestAnimationFrame || $33065e702bd15fb9$var$windowObject.mozRequestAnimationFrame || $33065e702bd15fb9$var$windowObject.webkitRequestAnimationFrame;
48if ($33065e702bd15fb9$var$cancelAnimationFrameFn == null || $33065e702bd15fb9$var$requestAnimationFrameFn == null) {
49 // For environments that don't support animation frame,
50 // fallback to a setTimeout based approach.
51 $33065e702bd15fb9$var$cancelFrame = $33065e702bd15fb9$var$clearTimeoutFn;
52 $33065e702bd15fb9$var$requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
53 return $33065e702bd15fb9$var$setTimeoutFn(callback, $33065e702bd15fb9$var$TIMEOUT_DURATION);
54 };
55} else {
56 // Counter intuitively, environments that support animation frames can be trickier.
57 // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
58 // In this case, we should fallback to a setTimeout() implementation.
59 $33065e702bd15fb9$var$cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
60 $33065e702bd15fb9$var$cancelAnimationFrameFn(animationFrameID);
61 $33065e702bd15fb9$var$clearTimeoutFn(timeoutID);
62 };
63 $33065e702bd15fb9$var$requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
64 const animationFrameID = $33065e702bd15fb9$var$requestAnimationFrameFn(function animationFrameCallback() {
65 $33065e702bd15fb9$var$clearTimeoutFn(timeoutID);
66 callback();
67 });
68 const timeoutID = $33065e702bd15fb9$var$setTimeoutFn(function timeoutCallback() {
69 $33065e702bd15fb9$var$cancelAnimationFrameFn(animationFrameID);
70 callback();
71 }, $33065e702bd15fb9$var$TIMEOUT_DURATION);
72 return [
73 animationFrameID,
74 timeoutID
75 ];
76 };
77}
78function $33065e702bd15fb9$var$createDetectElementResize(nonce) {
79 let animationKeyframes;
80 let animationName;
81 let animationStartEvent;
82 let animationStyle;
83 let checkTriggers;
84 let resetTriggers;
85 let scrollListener;
86 const attachEvent = typeof document !== "undefined" && document.attachEvent;
87 if (!attachEvent) {
88 resetTriggers = function(element) {
89 const triggers = element.__resizeTriggers__, expand = triggers.firstElementChild, contract = triggers.lastElementChild, expandChild = expand.firstElementChild;
90 contract.scrollLeft = contract.scrollWidth;
91 contract.scrollTop = contract.scrollHeight;
92 expandChild.style.width = expand.offsetWidth + 1 + "px";
93 expandChild.style.height = expand.offsetHeight + 1 + "px";
94 expand.scrollLeft = expand.scrollWidth;
95 expand.scrollTop = expand.scrollHeight;
96 };
97 checkTriggers = function(element) {
98 return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
99 };
100 scrollListener = function(e) {
101 // Don't measure (which forces) reflow for scrolls that happen inside of children!
102 if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) return;
103 const element = this;
104 resetTriggers(this);
105 if (this.__resizeRAF__) $33065e702bd15fb9$var$cancelFrame(this.__resizeRAF__);
106 this.__resizeRAF__ = $33065e702bd15fb9$var$requestFrame(function animationFrame() {
107 if (checkTriggers(element)) {
108 element.__resizeLast__.width = element.offsetWidth;
109 element.__resizeLast__.height = element.offsetHeight;
110 element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
111 fn.call(element, e);
112 });
113 }
114 });
115 };
116 /* Detect CSS Animations support to detect element display/re-attach */ let animation = false;
117 let keyframeprefix = "";
118 animationStartEvent = "animationstart";
119 const domPrefixes = "Webkit Moz O ms".split(" ");
120 let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
121 let pfx = "";
122 {
123 const elm = document.createElement("fakeelement");
124 if (elm.style.animationName !== undefined) animation = true;
125 if (animation === false) {
126 for(let i = 0; i < domPrefixes.length; i++)if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
127 pfx = domPrefixes[i];
128 keyframeprefix = "-" + pfx.toLowerCase() + "-";
129 animationStartEvent = startEvents[i];
130 animation = true;
131 break;
132 }
133 }
134 }
135 animationName = "resizeanim";
136 animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
137 animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
138 }
139 const createStyles = function(doc) {
140 if (!doc.getElementById("detectElementResize")) {
141 //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
142 const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', head = doc.head || doc.getElementsByTagName("head")[0], style = doc.createElement("style");
143 style.id = "detectElementResize";
144 style.type = "text/css";
145 if (nonce != null) style.setAttribute("nonce", nonce);
146 if (style.styleSheet) style.styleSheet.cssText = css;
147 else style.appendChild(doc.createTextNode(css));
148 head.appendChild(style);
149 }
150 };
151 const addResizeListener = function(element, fn) {
152 if (attachEvent) element.attachEvent("onresize", fn);
153 else {
154 if (!element.__resizeTriggers__) {
155 const doc = element.ownerDocument;
156 const elementStyle = $33065e702bd15fb9$var$windowObject.getComputedStyle(element);
157 if (elementStyle && elementStyle.position === "static") element.style.position = "relative";
158 createStyles(doc);
159 element.__resizeLast__ = {};
160 element.__resizeListeners__ = [];
161 (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
162 const expandTrigger = doc.createElement("div");
163 expandTrigger.className = "expand-trigger";
164 expandTrigger.appendChild(doc.createElement("div"));
165 const contractTrigger = doc.createElement("div");
166 contractTrigger.className = "contract-trigger";
167 element.__resizeTriggers__.appendChild(expandTrigger);
168 element.__resizeTriggers__.appendChild(contractTrigger);
169 element.appendChild(element.__resizeTriggers__);
170 resetTriggers(element);
171 element.addEventListener("scroll", scrollListener, true);
172 /* Listen for a css animation to detect element display/re-attach */ if (animationStartEvent) {
173 element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
174 if (e.animationName === animationName) resetTriggers(element);
175 };
176 element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
177 }
178 }
179 element.__resizeListeners__.push(fn);
180 }
181 };
182 const removeResizeListener = function(element, fn) {
183 if (attachEvent) element.detachEvent("onresize", fn);
184 else {
185 element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
186 if (!element.__resizeListeners__.length) {
187 element.removeEventListener("scroll", scrollListener, true);
188 if (element.__resizeTriggers__.__animationListener__) {
189 element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
190 element.__resizeTriggers__.__animationListener__ = null;
191 }
192 try {
193 element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
194 } catch (e) {
195 // Preact compat; see developit/preact-compat/issues/228
196 }
197 }
198 }
199 };
200 return {
201 addResizeListener: addResizeListener,
202 removeResizeListener: removeResizeListener
203 };
204}
205$33065e702bd15fb9$exports = {
206 createDetectElementResize: $33065e702bd15fb9$var$createDetectElementResize
207};
208
209
210function $4fd1a97a17b80f9f$var$_defineProperty(obj, key, value) {
211 key = $4fd1a97a17b80f9f$var$_toPropertyKey(key);
212 if (key in obj) Object.defineProperty(obj, key, {
213 value: value,
214 enumerable: true,
215 configurable: true,
216 writable: true
217 });
218 else obj[key] = value;
219 return obj;
220}
221function $4fd1a97a17b80f9f$var$_toPropertyKey(arg) {
222 var key = $4fd1a97a17b80f9f$var$_toPrimitive(arg, "string");
223 return typeof key === "symbol" ? key : String(key);
224}
225function $4fd1a97a17b80f9f$var$_toPrimitive(input, hint) {
226 if (typeof input !== "object" || input === null) return input;
227 var prim = input[Symbol.toPrimitive];
228 if (prim !== undefined) {
229 var res = prim.call(input, hint || "default");
230 if (typeof res !== "object") return res;
231 throw new TypeError("@@toPrimitive must return a primitive value.");
232 }
233 return (hint === "string" ? String : Number)(input);
234}
235class $4fd1a97a17b80f9f$export$9d94f4ee1d930ff extends (0, $8zHUo$react.Component) {
236 constructor(...args){
237 super(...args);
238 $4fd1a97a17b80f9f$var$_defineProperty(this, "state", {
239 height: this.props.defaultHeight || 0,
240 scaledHeight: this.props.defaultHeight || 0,
241 scaledWidth: this.props.defaultWidth || 0,
242 width: this.props.defaultWidth || 0
243 });
244 $4fd1a97a17b80f9f$var$_defineProperty(this, "_autoSizer", null);
245 $4fd1a97a17b80f9f$var$_defineProperty(this, "_detectElementResize", null);
246 $4fd1a97a17b80f9f$var$_defineProperty(this, "_parentNode", null);
247 $4fd1a97a17b80f9f$var$_defineProperty(this, "_resizeObserver", null);
248 $4fd1a97a17b80f9f$var$_defineProperty(this, "_onResize", ()=>{
249 const { disableHeight: disableHeight , disableWidth: disableWidth , onResize: onResize } = this.props;
250 if (this._parentNode) {
251 var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
252 // Guard against AutoSizer component being removed from the DOM immediately after being added.
253 // This can result in invalid style values which can result in NaN values if we don't handle them.
254 // See issue #150 for more context.
255 const style = window.getComputedStyle(this._parentNode) || {};
256 const paddingLeft = parseInt((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0", 10);
257 const paddingRight = parseInt((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0", 10);
258 const paddingTop = parseInt((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0", 10);
259 const paddingBottom = parseInt((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0", 10);
260 const rect = this._parentNode.getBoundingClientRect();
261 const scaledHeight = rect.height - paddingTop - paddingBottom;
262 const scaledWidth = rect.width - paddingLeft - paddingRight;
263 const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
264 const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
265 if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
266 this.setState({
267 height: height,
268 width: width,
269 scaledHeight: scaledHeight,
270 scaledWidth: scaledWidth
271 });
272 if (typeof onResize === "function") onResize({
273 height: height,
274 scaledHeight: scaledHeight,
275 scaledWidth: scaledWidth,
276 width: width
277 });
278 }
279 }
280 });
281 $4fd1a97a17b80f9f$var$_defineProperty(this, "_setRef", (autoSizer)=>{
282 this._autoSizer = autoSizer;
283 });
284 }
285 componentDidMount() {
286 const { nonce: nonce } = this.props;
287 if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
288 // Delay access of parentNode until mount.
289 // This handles edge-cases where the component has already been unmounted before its ref has been set,
290 // As well as libraries like react-lite which have a slightly different lifecycle.
291 this._parentNode = this._autoSizer.parentNode;
292 // Defer requiring resize handler in order to support server-side rendering.
293 // See issue #41
294 if (this._parentNode != null) {
295 if (typeof ResizeObserver !== "undefined") {
296 this._resizeObserver = new ResizeObserver(()=>{
297 // Guard against "ResizeObserver loop limit exceeded" error;
298 // could be triggered if the state update causes the ResizeObserver handler to run long.
299 // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
300 setTimeout(this._onResize, 0);
301 });
302 this._resizeObserver.observe(this._parentNode);
303 } else {
304 this._detectElementResize = (0, $33065e702bd15fb9$exports.createDetectElementResize)(nonce);
305 this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
306 }
307 this._onResize();
308 }
309 }
310 }
311 componentWillUnmount() {
312 if (this._parentNode) {
313 if (this._detectElementResize) this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
314 if (this._resizeObserver) {
315 this._resizeObserver.observe(this._parentNode);
316 this._resizeObserver.disconnect();
317 }
318 }
319 }
320 render() {
321 const { children: children , defaultHeight: defaultHeight , defaultWidth: defaultWidth , disableHeight: disableHeight , disableWidth: disableWidth , nonce: nonce , onResize: onResize , style: style , tagName: tagName = "div" , ...rest } = this.props;
322 const { height: height , scaledHeight: scaledHeight , scaledWidth: scaledWidth , width: width } = this.state;
323 // Outer div should not force width/height since that may prevent containers from shrinking.
324 // Inner component should overflow and use calculated width/height.
325 // See issue #68 for more information.
326 const outerStyle = {
327 overflow: "visible"
328 };
329 const childParams = {};
330 // Avoid rendering children before the initial measurements have been collected.
331 // At best this would just be wasting cycles.
332 let bailoutOnChildren = false;
333 if (!disableHeight) {
334 if (height === 0) bailoutOnChildren = true;
335 outerStyle.height = 0;
336 childParams.height = height;
337 childParams.scaledHeight = scaledHeight;
338 }
339 if (!disableWidth) {
340 if (width === 0) bailoutOnChildren = true;
341 outerStyle.width = 0;
342 childParams.width = width;
343 childParams.scaledWidth = scaledWidth;
344 }
345 return (0, $8zHUo$react.createElement)(tagName, {
346 ref: this._setRef,
347 style: {
348 ...outerStyle,
349 ...style
350 },
351 ...rest
352 }, !bailoutOnChildren && children(childParams));
353 }
354}
355$4fd1a97a17b80f9f$var$_defineProperty($4fd1a97a17b80f9f$export$9d94f4ee1d930ff, "defaultProps", {
356 onResize: ()=>{},
357 disableHeight: false,
358 disableWidth: false,
359 style: {}
360});
361
362
363var $882b6d93070905b3$export$2e2bcd8739ae039 = (0, $4fd1a97a17b80f9f$export$9d94f4ee1d930ff);
364
365
366//# sourceMappingURL=react-virtualized-auto-sizer.js.map