react-virtual - npm Package Compare versions

Comparing version 2.7.1 to 2.7.2

dist/react-virtual.development.js

@@ -176,2 +176,7 @@ (function (global, factory) {
 
+  var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
+    var key = horizontal ? 'offsetWidth' : 'offsetHeight';
+    return el[key];
+  };
+
   function useVirtual(_ref) {
@@ -197,3 +202,5 @@ var _ref3, _measurements;
         _ref$keyExtractor = _ref.keyExtractor,
-        keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor;
+        keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
+        _ref$measureSize = _ref.measureSize,
+        measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize;
     var sizeKey = horizontal ? 'width' : 'height';
@@ -288,2 +295,4 @@ var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
     }, [element, scrollKey, size, outerSize]);
+    var measureSizeRef = React.useRef(measureSize);
+    measureSizeRef.current = measureSize;
     var virtualItems = React.useMemo(function () {
@@ -298,9 +307,8 @@ var virtualItems = [];
           measureRef: function measureRef(el) {
-            var scrollOffset = latestRef.current.scrollOffset;
-
             if (el) {
-              var _el$getBoundingClient = el.getBoundingClientRect(),
-                  measuredSize = _el$getBoundingClient[sizeKey];
+              var measuredSize = measureSizeRef.current(el, horizontal);
 
               if (measuredSize !== item.size) {
+                var scrollOffset = latestRef.current.scrollOffset;
+
                 if (item.start < scrollOffset) {
@@ -328,3 +336,3 @@ defaultScrollToFn(scrollOffset + (measuredSize - item.size));
       return virtualItems;
-    }, [range.start, range.end, measurements, sizeKey, defaultScrollToFn, keyExtractor]);
+    }, [range.start, range.end, measurements, horizontal, defaultScrollToFn, keyExtractor]);
     var mountedRef = React.useRef();
@@ -331,0 +339,0 @@ useIsomorphicLayoutEffect(function () {

dist/react-virtual.production.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactVirtual={},e.React)}(this,(function(e,t){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var n,u=["bottom","height","left","right","top","width"],a=new Map,o=function e(){var t=[];a.forEach((function(e,r){var n,a,o=r.getBoundingClientRect();n=o,a=e.rect,void 0===n&&(n={}),void 0===a&&(a={}),u.some((function(e){return n[e]!==a[e]}))&&(e.rect=o,t.push(e))})),t.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),n=window.requestAnimationFrame(e)};var i="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;function c(e){var r=t.useState(e.current),u=r[0],c=r[1],f=t.useReducer(s,null),l=f[0],d=f[1],v=t.useRef(!1);return i((function(){e.current!==u&&c(e.current)})),i((function(){if(u&&!v.current){v.current=!0;var e=u.getBoundingClientRect();d({rect:e})}}),[u]),t.useEffect((function(){if(u){var e,t,r=(e=u,t=function(e){d({rect:e})},{observe:function(){var r=0===a.size;a.has(e)?a.get(e).callbacks.push(t):a.set(e,{rect:void 0,hasRectChanged:!1,callbacks:[t]}),r&&o()},unobserve:function(){var r=a.get(e);if(r){var u=r.callbacks.indexOf(t);u>=0&&r.callbacks.splice(u,1),r.callbacks.length||a.delete(e),a.size||cancelAnimationFrame(n)}}});return r.observe(),function(){r.unobserve()}}}),[u]),l}function s(e,t){var r=t.rect;return e&&e.height===r.height&&e.width===r.width?e:r}var f=function(){return 50},l=function(e){return e};e.useVirtual=function(e){var n,u,a=e.size,o=void 0===a?0:a,s=e.estimateSize,d=void 0===s?f:s,v=e.overscan,h=void 0===v?1:v,p=e.paddingStart,m=void 0===p?0:p,g=e.paddingEnd,b=void 0===g?0:g,O=e.parentRef,y=e.horizontal,z=e.scrollToFn,k=e.useObserver,R=e.onScrollElement,w=e.scrollOffsetFn,S=e.keyExtractor,E=void 0===S?l:S,x=y?"width":"height",C=y?"scrollLeft":"scrollTop",M=t.useRef({}),j=((k||c)(O)||((n={})[x]=0,n))[x],F=t.useCallback((function(e){O.current&&(O.current[C]=e)}),[O,C]),A=z||F;z=t.useCallback((function(e){A(e,F)}),[F,A]);var L=t.useState({}),T=L[0],q=L[1],B=t.useCallback((function(){return q({})}),[]),P=t.useMemo((function(){for(var e=[],t=0;t<o;t++){var r=T[E(t)],n=e[t-1]?e[t-1].end:m,u="number"==typeof r?r:d(t),a=n+u;e[t]={index:t,start:n,size:u,end:a}}return e}),[d,T,m,o,E]),I=((null==(u=P[o-1])?void 0:u.end)||0)+b;M.current.overscan=h,M.current.measurements=P,M.current.outerSize=j,M.current.totalSize=I;var V=t.useState({start:0,end:0}),_=V[0],D=V[1],G=R?R.current:O.current,H=t.useRef(w);H.current=w,i((function(){if(!G)return D({start:0,end:0}),void(M.current.scrollOffset=void 0);var e=function(e){var t=H.current?H.current(e):G[C];M.current.scrollOffset=t,D((function(e){return function(e,t){var r=e.overscan,n=e.measurements,u=e.outerSize,a=e.scrollOffset,o=n.length-1,i=function(e,t,r,n){for(;e<=t;){var u=(e+t)/2|0,a=r(u);if(a<n)e=u+1;else{if(!(a>n))return u;t=u-1}}return e>0?e-1:0}(0,o,(function(e){return n[e].start}),a),c=i;for(;c<o&&n[c].end<a+u;)c++;if(i=Math.max(i-r,0),c=Math.min(c+r,o),!t||t.start!==i||t.end!==c)return{start:i,end:c};return t}(M.current,e)}))};return e(),G.addEventListener("scroll",e,{capture:!1,passive:!0}),function(){G.removeEventListener("scroll",e)}}),[G,C,o,j]);var J=t.useMemo((function(){for(var e=[],t=Math.min(_.end,P.length-1),n=function(t){var n=r(r({},P[t]),{},{measureRef:function(e){var u=M.current.scrollOffset;if(e){var a=e.getBoundingClientRect()[x];a!==n.size&&(n.start<u&&F(u+(a-n.size)),q((function(e){var n;return r(r({},e),{},((n={})[E(t)]=a,n))})))}}});e.push(n)},u=_.start;u<=t;u++)n(u);return e}),[_.start,_.end,P,x,F,E]),K=t.useRef();i((function(){K.current&&d&&q({}),K.current=!0}),[d]);var N=t.useCallback((function(e,t){var r=(void 0===t?{}:t).align,n=void 0===r?"start":r,u=M.current,a=u.scrollOffset,o=u.outerSize;"auto"===n&&(n=e<=a?"start":e>=a+o?"end":"start"),"start"===n?z(e):"end"===n?z(e-o):"center"===n&&z(e-o/2)}),[z]),Q=t.useCallback((function(e,t){var n=void 0===t?{}:t,u=n.align,a=void 0===u?"auto":u,i=function(e,t){if(null==e)return{};var r,n,u={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(u[r]=e[r]);return u}(n,["align"]),c=M.current,s=c.measurements,f=c.scrollOffset,l=c.outerSize,d=s[Math.max(0,Math.min(e,o-1))];if(d){if("auto"===a)if(d.end>=f+l)a="end";else{if(!(d.start<=f))return;a="start"}var v="center"===a?d.start+d.size/2:"end"===a?d.end:d.start;N(v,r({align:a},i))}}),[N,o]),U=t.useCallback((function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];Q.apply(void 0,t),requestAnimationFrame((function(){Q.apply(void 0,t)}))}),[Q]);return{virtualItems:J,totalSize:I,scrollToOffset:N,scrollToIndex:U,measure:B}},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactVirtual={},e.React)}(this,(function(e,t){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var n,u=["bottom","height","left","right","top","width"],a=new Map,i=function e(){var t=[];a.forEach((function(e,r){var n,a,i=r.getBoundingClientRect();n=i,a=e.rect,void 0===n&&(n={}),void 0===a&&(a={}),u.some((function(e){return n[e]!==a[e]}))&&(e.rect=i,t.push(e))})),t.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),n=window.requestAnimationFrame(e)};var o="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;function c(e){var r=t.useState(e.current),u=r[0],c=r[1],f=t.useReducer(s,null),l=f[0],d=f[1],v=t.useRef(!1);return o((function(){e.current!==u&&c(e.current)})),o((function(){if(u&&!v.current){v.current=!0;var e=u.getBoundingClientRect();d({rect:e})}}),[u]),t.useEffect((function(){if(u){var e,t,r=(e=u,t=function(e){d({rect:e})},{observe:function(){var r=0===a.size;a.has(e)?a.get(e).callbacks.push(t):a.set(e,{rect:void 0,hasRectChanged:!1,callbacks:[t]}),r&&i()},unobserve:function(){var r=a.get(e);if(r){var u=r.callbacks.indexOf(t);u>=0&&r.callbacks.splice(u,1),r.callbacks.length||a.delete(e),a.size||cancelAnimationFrame(n)}}});return r.observe(),function(){r.unobserve()}}}),[u]),l}function s(e,t){var r=t.rect;return e&&e.height===r.height&&e.width===r.width?e:r}var f=function(){return 50},l=function(e){return e},d=function(e,t){return e[t?"offsetWidth":"offsetHeight"]};e.useVirtual=function(e){var n,u,a=e.size,i=void 0===a?0:a,s=e.estimateSize,v=void 0===s?f:s,h=e.overscan,p=void 0===h?1:h,m=e.paddingStart,g=void 0===m?0:m,b=e.paddingEnd,O=void 0===b?0:b,y=e.parentRef,z=e.horizontal,k=e.scrollToFn,R=e.useObserver,S=e.onScrollElement,w=e.scrollOffsetFn,E=e.keyExtractor,x=void 0===E?l:E,C=e.measureSize,M=void 0===C?d:C,j=z?"width":"height",F=z?"scrollLeft":"scrollTop",A=t.useRef({}),L=((R||c)(y)||((n={})[j]=0,n))[j],T=t.useCallback((function(e){y.current&&(y.current[F]=e)}),[y,F]),q=k||T;k=t.useCallback((function(e){q(e,T)}),[T,q]);var P=t.useState({}),B=P[0],I=P[1],V=t.useCallback((function(){return I({})}),[]),_=t.useMemo((function(){for(var e=[],t=0;t<i;t++){var r=B[x(t)],n=e[t-1]?e[t-1].end:g,u="number"==typeof r?r:v(t),a=n+u;e[t]={index:t,start:n,size:u,end:a}}return e}),[v,B,g,i,x]),H=((null==(u=_[i-1])?void 0:u.end)||0)+O;A.current.overscan=p,A.current.measurements=_,A.current.outerSize=L,A.current.totalSize=H;var W=t.useState({start:0,end:0}),D=W[0],G=W[1],J=S?S.current:y.current,K=t.useRef(w);K.current=w,o((function(){if(!J)return G({start:0,end:0}),void(A.current.scrollOffset=void 0);var e=function(e){var t=K.current?K.current(e):J[F];A.current.scrollOffset=t,G((function(e){return function(e,t){var r=e.overscan,n=e.measurements,u=e.outerSize,a=e.scrollOffset,i=n.length-1,o=function(e,t,r,n){for(;e<=t;){var u=(e+t)/2|0,a=r(u);if(a<n)e=u+1;else{if(!(a>n))return u;t=u-1}}return e>0?e-1:0}(0,i,(function(e){return n[e].start}),a),c=o;for(;c<i&&n[c].end<a+u;)c++;if(o=Math.max(o-r,0),c=Math.min(c+r,i),!t||t.start!==o||t.end!==c)return{start:o,end:c};return t}(A.current,e)}))};return e(),J.addEventListener("scroll",e,{capture:!1,passive:!0}),function(){J.removeEventListener("scroll",e)}}),[J,F,i,L]);var N=t.useRef(M);N.current=M;var Q=t.useMemo((function(){for(var e=[],t=Math.min(D.end,_.length-1),n=function(t){var n=r(r({},_[t]),{},{measureRef:function(e){if(e){var u=N.current(e,z);if(u!==n.size){var a=A.current.scrollOffset;n.start<a&&T(a+(u-n.size)),I((function(e){var n;return r(r({},e),{},((n={})[x(t)]=u,n))}))}}}});e.push(n)},u=D.start;u<=t;u++)n(u);return e}),[D.start,D.end,_,z,T,x]),U=t.useRef();o((function(){U.current&&v&&I({}),U.current=!0}),[v]);var X=t.useCallback((function(e,t){var r=(void 0===t?{}:t).align,n=void 0===r?"start":r,u=A.current,a=u.scrollOffset,i=u.outerSize;"auto"===n&&(n=e<=a?"start":e>=a+i?"end":"start"),"start"===n?k(e):"end"===n?k(e-i):"center"===n&&k(e-i/2)}),[k]),Y=t.useCallback((function(e,t){var n=void 0===t?{}:t,u=n.align,a=void 0===u?"auto":u,o=function(e,t){if(null==e)return{};var r,n,u={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(u[r]=e[r]);return u}(n,["align"]),c=A.current,s=c.measurements,f=c.scrollOffset,l=c.outerSize,d=s[Math.max(0,Math.min(e,i-1))];if(d){if("auto"===a)if(d.end>=f+l)a="end";else{if(!(d.start<=f))return;a="start"}var v="center"===a?d.start+d.size/2:"end"===a?d.end:d.start;X(v,r({align:a},o))}}),[X,i]),Z=t.useCallback((function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];Y.apply(void 0,t),requestAnimationFrame((function(){Y.apply(void 0,t)}))}),[Y]);return{virtualItems:Q,totalSize:H,scrollToOffset:X,scrollToIndex:Z,measure:V}},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-virtual.production.min.js.map

package.json

 {
   "name": "react-virtual",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "description": "Hooks for virtualizing scrollable elements in React",
@@ -5,0 +5,0 @@ "author": "tannerlinsley",

README.md

@@ -254,2 +254,3 @@ ![React Virtual Header](https://github.com/tannerlinsley/react-virtual/raw/master/media/header.png)
 - `estimateSize: Function(index) => Integer`
+  - Defaults to `() => 50`
   - **Required**
@@ -256,0 +257,0 @@ - **Must be memoized using `React.useCallback()`**

No alert changes

Improved metrics

Total package byte prevSize

161243

increased by2.25%

Lines of code

1275

increased by1.67%

Number of lines in readme file

350

increased by0.29%

No dependency changes