UNPKG

@react-hook/size

Version:

A React hook for measuring the size of HTML elements including when they change

3 lines (2 loc) 9.81 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e=e||self).useSize=t(e.React)}(this,(function(e){"use strict";function t(e){return e.activeTargets.length>0}function n(e){return e.skippedTargets.length>0}function r(e,t){this.inlineSize=e,this.blockSize=t,F(this)}function i(e,t,n,r){return this.x=e,this.y=t,this.width=n,this.height=r,this.top=this.y,this.left=this.x,this.bottom=this.top+this.height,this.right=this.left+this.width,F(this)}function o(){var e=this;return{x:e.x,y:e.y,top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.width,height:e.height}}function s(e){return new i(e.x,e.y,e.width,e.height)}function u(e){var t=K(e);this.target=e,this.contentRect=t.contentRect,this.borderBoxSize=F([t.borderBoxSize]),this.contentBoxSize=F([t.contentBoxSize]),this.devicePixelContentBoxSize=F([t.devicePixelContentBoxSize])}function c(e){return e()}function a(){return ne.splice(0).forEach(c)}function f(){var e=this;this.stopped=1,this.listener=function(){return e.schedule()}}function h(e){var t=this;if(void 0===e&&(e=250),!ue){ue=1;var r,i=se(e);r=function(){var r=0;try{r=function(){var e,t=0;for(te(t);W();)t=ee(),te(t);return N.some(n)&&("function"==typeof ErrorEvent?e=new ErrorEvent("error",{message:D}):((e=document.createEvent("Event")).initEvent("error",0,0),e.message=D),window.dispatchEvent(e)),t>0}()}finally{if(ue=0,e=i-se(),!re)return;r?t.run(1e3):e>0?t.run(e):t.start()}},function(){if(!M){var e=0,t=document.createTextNode("");new MutationObserver(a).observe(t,{characterData:1}),M=function(){t.textContent=""+(e?e--:e++)}}ne.push((function(){requestAnimationFrame(r)})),M()}()}}function d(){this.stop(),this.run()}function v(){var e=this,t=function(){return e.observer&&e.observer.observe(document.body,ie)};document.body?t():H.addEventListener("DOMContentLoaded",t)}function l(){var e=this;this.stopped&&(this.stopped=0,this.observer=new MutationObserver(this.listener),this.observe(),oe.forEach((function(t){return H.addEventListener(t,e.listener,1)})))}function p(){var e=this;this.stopped||(this.observer&&this.observer.disconnect(),oe.forEach((function(t){return H.removeEventListener(t,e.listener,1)})),this.stopped=1)}function g(e,t){this.target=e,this.observedBox=t||k.CONTENT_BOX,this.lastReportedSize={inlineSize:0,blockSize:0}}function b(){var e,t=Q(this.target,this.observedBox,1);return e=this.target,_(e)||function(e){switch(e.tagName){case"INPUT":if("image"!==e.type)break;case"VIDEO":case"AUDIO":case"EMBED":case"OBJECT":case"CANVAS":case"IFRAME":case"IMG":return 1}return 0}(e)||"inline"!==getComputedStyle(e).display||(this.lastReportedSize=t),this.lastReportedSize.inlineSize!==t.inlineSize||this.lastReportedSize.blockSize!==t.blockSize?1:0}function w(e,t){this.activeTargets=[],this.skippedTargets=[],this.observationTargets=[],this.observer=e,this.callback=t}function m(){}function E(e,t){var n=new he(e,t);de.set(e,n)}function x(e,t,n){var r=de.get(e),i=0===r.observationTargets.length;0>ve(r.observationTargets,t)&&(i&&N.push(r),r.observationTargets.push(new fe(t,n&&n.box)),ae(1),ce.schedule())}function y(e,t){var n=de.get(e),r=ve(n.observationTargets,t),i=1===n.observationTargets.length;0>r||(i&&N.splice(N.indexOf(n),1),n.observationTargets.splice(r,1),ae(-1))}function T(e){var t=this,n=de.get(e);n.observationTargets.slice().forEach((function(n){return t.unobserve(e,n.target)})),n.activeTargets.splice(0,n.activeTargets.length)}function z(e){if(0===arguments.length)throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");if("function"!=typeof e)throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");le.connect(this,e)}function S(e,t){if(0===arguments.length)throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!X(e))throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");le.observe(this,e,t)}function B(e){if(0===arguments.length)throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!X(e))throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");le.unobserve(this,e)}function R(){le.disconnect(this)}function O(){return"function ResizeObserver () { [polyfill code] }"}function C(){var e=new Map,t=new pe(function(e){function t(){r=null,e.apply(void 0,n)}var n=[],r=null,i=function(){for(var e=arguments.length,i=new Array(e),o=0;e>o;o++)i[o]=arguments[o];n=i,r||(r=requestAnimationFrame(t))};return i.cancel=function(){r&&(cancelAnimationFrame(r),r=null)},i}((function(t,n){var r;if(1===t.length)null===(r=e.get(t[0].target))||void 0===r||r(t[0],n);else for(var i=0;i<t.length;i++){var o;null===(o=e.get(t[i].target))||void 0===o||o(t[i],n)}})));return{observer:t,subscribe:function(n,r){t.observe(n),e.set(n,r)},unsubscribe:function(n){t.unobserve(n),e.delete(n)}}}var k,N=[],W=function(){return N.some(t)},D="ResizeObserver loop completed with undelivered notifications.";!function(e){e.BORDER_BOX="border-box",e.CONTENT_BOX="content-box",e.DEVICE_PIXEL_CONTENT_BOX="device-pixel-content-box"}(k||(k={}));var M,A,F=function(e){return Object.freeze(e)},L=function(){return r}(),P=function(){return i.prototype.toJSON=o,i.fromRect=s,i}(),_=function(e){return e instanceof SVGElement&&"getBBox"in e},I=function(e){if(_(e)){var t=e.getBBox(),n=t.width,r=t.height;return!n&&!r}var i=e,o=i.offsetWidth,s=i.offsetHeight;return!(o||s||e.getClientRects().length)},X=function(e){var t,n;if(e instanceof Element)return 1;var r=null===(n=null===(t=e)||void 0===t?void 0:t.ownerDocument)||void 0===n?void 0:n.defaultView;return!!(r&&e instanceof r.Element)},H="undefined"!=typeof window?window:{},V=new WeakMap,q=/auto|scroll/,G=/^tb|vertical/,j=/msie|trident/i.test(H.navigator&&H.navigator.userAgent),J=function(e){return parseFloat(e||"0")},U=function(e,t,n){return void 0===e&&(e=0),void 0===t&&(t=0),void 0===n&&(n=0),new L((n?t:e)||0,(n?e:t)||0)},Y=F({devicePixelContentBoxSize:U(),borderBoxSize:U(),contentBoxSize:U(),contentRect:new P(0,0,0,0)}),K=function(e,t){if(void 0===t&&(t=0),V.has(e)&&!t)return V.get(e);if(I(e))return V.set(e,Y),Y;var n=getComputedStyle(e),r=_(e)&&e.ownerSVGElement&&e.getBBox(),i=!j&&"border-box"===n.boxSizing,o=G.test(n.writingMode||""),s=!r&&q.test(n.overflowY||""),u=!r&&q.test(n.overflowX||""),c=r?0:J(n.paddingTop),a=r?0:J(n.paddingRight),f=r?0:J(n.paddingBottom),h=r?0:J(n.paddingLeft),d=r?0:J(n.borderTopWidth),v=r?0:J(n.borderRightWidth),l=r?0:J(n.borderBottomWidth),p=h+a,g=c+f,b=(r?0:J(n.borderLeftWidth))+v,w=d+l,m=u?e.offsetHeight-w-e.clientHeight:0,E=s?e.offsetWidth-b-e.clientWidth:0,x=i?p+b:0,y=i?g+w:0,T=r?r.width:J(n.width)-x-E,z=r?r.height:J(n.height)-y-m,S=T+p+E+b,B=z+g+m+w,R=F({devicePixelContentBoxSize:U(Math.round(T*devicePixelRatio),Math.round(z*devicePixelRatio),o),borderBoxSize:U(S,B,o),contentBoxSize:U(T,z,o),contentRect:new P(h,c,T,z)});return V.set(e,R),R},Q=function(e,t,n){var r=K(e,n),i=r.borderBoxSize,o=r.contentBoxSize,s=r.devicePixelContentBoxSize;switch(t){case k.DEVICE_PIXEL_CONTENT_BOX:return s;case k.BORDER_BOX:return i;default:return o}},Z=function(){return u}(),$=function(e){if(I(e))return 1/0;for(var t=0,n=e.parentNode;n;)t+=1,n=n.parentNode;return t},ee=function(){var e=1/0,t=[];N.forEach((function(n){if(0!==n.activeTargets.length){var r=[];n.activeTargets.forEach((function(t){var n=new Z(t.target),i=$(t.target);r.push(n),t.lastReportedSize=Q(t.target,t.observedBox),e>i&&(e=i)})),t.push((function(){n.callback.call(n.observer,r,n.observer)})),n.activeTargets.splice(0,n.activeTargets.length)}}));for(var n=0,r=t;n<r.length;n++)(0,r[n])();return e},te=function(e){N.forEach((function(t){t.activeTargets.splice(0,t.activeTargets.length),t.skippedTargets.splice(0,t.skippedTargets.length),t.observationTargets.forEach((function(n){n.isActive()&&($(n.target)>e?t.activeTargets.push(n):t.skippedTargets.push(n))}))}))},ne=[],re=0,ie={attributes:1,characterData:1,childList:1,subtree:1},oe=["resize","load","transitionend","animationend","animationstart","animationiteration","keyup","keydown","mouseup","mousedown","mouseover","mouseout","blur","focus"],se=function(e){return void 0===e&&(e=0),Date.now()+e},ue=0,ce=new(function(){return f.prototype.run=h,f.prototype.schedule=d,f.prototype.observe=v,f.prototype.start=l,f.prototype.stop=p,f}()),ae=function(e){!re&&e>0&&ce.start(),!(re+=e)&&ce.stop()},fe=function(){return g.prototype.isActive=b,g}(),he=function(){return w}(),de=new WeakMap,ve=function(e,t){for(var n=0;n<e.length;n+=1)if(e[n].target===t)return n;return-1},le=function(){return m.connect=E,m.observe=x,m.unobserve=y,m.disconnect=T,m}(),pe=function(){return z.prototype.observe=S,z.prototype.unobserve=B,z.prototype.disconnect=R,z.toString=O,z}(),ge=e["undefined"!=typeof document&&void 0!==document.createElement?"useLayoutEffect":"useEffect"],be=function(){return A||(A=C())};return function(t,n){var r=e.useState((function(){var e,r,i=t&&"current"in t?t.current:t;return i?[i.offsetWidth,i.offsetHeight]:[null!==(e=null==n?void 0:n.initialWidth)&&void 0!==e?e:0,null!==(r=null==n?void 0:n.initialHeight)&&void 0!==r?r:0]})),i=r[0],o=r[1];return ge((function(){var e=t&&"current"in t?t.current:t;e&&o([e.offsetWidth,e.offsetHeight])}),[t]),function(t,n){var r,i,o=be(),s=(r=n,(i=e.useRef(r)).current=r,i);ge((function(){var e=0,n=t&&"current"in t?t.current:t;if(n)return o.subscribe(n,(function(t,n){e||s.current(t,n)})),function(){e=1,o.unsubscribe(n)}}),[t,o,s]),o.observer}(t,(function(e){var t=e.target;o([t.offsetWidth,t.offsetHeight])})),i}})); //# sourceMappingURL=use-size.js.map