react-virtual - npm Package Compare versions

Comparing version 2.2.8 to 2.3.0

dist/react-virtual.development.js

@@ -187,8 +187,10 @@ (function (global, factory) {
         horizontal = _ref.horizontal,
-        scrollToFn = _ref.scrollToFn;
+        scrollToFn = _ref.scrollToFn,
+        useObserver = _ref.useObserver;
     var sizeKey = horizontal ? 'width' : 'height';
     var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
     var latestRef = React.useRef({});
+    var useMeasureParent = useObserver || useRect;
 
-    var _ref2 = useRect(parentRef) || (_ref3 = {}, _ref3[sizeKey] = 0, _ref3),
+    var _ref2 = useMeasureParent(parentRef) || (_ref3 = {}, _ref3[sizeKey] = 0, _ref3),
         outerSize = _ref2[sizeKey];
@@ -195,0 +197,0 @@

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,a=["bottom","height","left","right","top","width"],i=new Map,o=function e(){var t=[];i.forEach((function(e,r){var n,i,o=r.getBoundingClientRect();n=o,i=e.rect,void 0===n&&(n={}),void 0===i&&(i={}),a.some((function(e){return n[e]!==i[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 u="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;function c(e){var r=t.useState(e.current),a=r[0],c=r[1],f=t.useReducer(s,null),l=f[0],d=f[1],v=t.useRef(!1);return u((function(){e.current!==a&&c(e.current)})),u((function(){if(a&&!v.current){v.current=!0;var e=a.getBoundingClientRect();d({rect:e})}}),[a]),t.useEffect((function(){if(a){var e,t,r=(e=a,t=function(e){d({rect:e})},{observe:function(){var r=0===i.size;i.has(e)?i.get(e).callbacks.push(t):i.set(e,{rect:void 0,hasRectChanged:!1,callbacks:[t]}),r&&o()},unobserve:function(){var r=i.get(e);if(r){var a=r.callbacks.indexOf(t);a>=0&&r.callbacks.splice(a,1),r.callbacks.length||i.delete(e),i.size||cancelAnimationFrame(n)}}});return r.observe(),function(){r.unobserve()}}}),[a]),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};e.useVirtual=function(e){var n,a,i=e.size,o=void 0===i?0:i,s=e.estimateSize,l=void 0===s?f:s,d=e.overscan,v=void 0===d?0:d,h=e.paddingStart,p=void 0===h?0:h,g=e.paddingEnd,m=void 0===g?0:g,b=e.parentRef,y=e.horizontal,O=e.scrollToFn,z=y?"width":"height",k=y?"scrollLeft":"scrollTop",w=t.useRef({}),R=(c(b)||((n={})[z]=0,n))[z],S=t.useCallback((function(e){b.current&&(b.current[k]=e)}),[b,k]),x=O||S;O=t.useCallback((function(e){x(e,S)}),[S,x]);var C=t.useState({}),E=C[0],M=C[1],j=t.useMemo((function(){for(var e=[],t=0;t<o;t++){var r=E[t],n=e[t-1]?e[t-1].end:p,a="number"==typeof r?r:l(t),i=n+a;e[t]={index:t,start:n,size:a,end:i}}return e}),[l,E,p,o]),A=((null==(a=j[o-1])?void 0:a.end)||0)+m;Object.assign(w.current,{overscan:v,measurements:j,outerSize:R,totalSize:A});var F=t.useState({start:0,end:0}),L=F[0],T=F[1];u((function(){var e=b.current;if(e){var t=function(){var t=e[k];w.current.scrollOffset=t,T((function(e){return function(e,t){var r=e.overscan,n=e.measurements,a=e.outerSize,i=e.scrollOffset,o=n.length,u=o-1;for(;u>0&&n[u].end>=i;)u-=1;var c=0;for(;c<o-1&&n[c].start<=i+a;)c+=1;if(u=Math.max(u-r,0),c=Math.min(c+r,o-1),!t||t.start!==u||t.end!==c)return{start:u,end:c};return t}(w.current,e)}))};return t(),e.addEventListener("scroll",t,{capture:!1,passive:!0}),function(){e.removeEventListener("scroll",t)}}}),[b.current,k,o,R]);var q=t.useMemo((function(){for(var e=[],t=Math.min(L.end,j.length-1),n=function(t){var n=r(r({},j[t]),{},{measureRef:function(e){var a=w.current.scrollOffset;if(e){var i=e.getBoundingClientRect()[z];i!==n.size&&(n.start<a&&S(a+(i-n.size)),M((function(e){var n;return r(r({},e),{},((n={})[t]=i,n))})))}}});e.push(n)},a=L.start;a<=t;a++)n(a);return e}),[L.start,L.end,j,z,S]),B=t.useRef();u((function(){B.current&&(l||o)&&M({}),B.current=!0}),[l,o]);var P=t.useCallback((function(e,t){var r=(void 0===t?{}:t).align,n=void 0===r?"start":r,a=w.current,i=a.scrollOffset,o=a.outerSize;"auto"===n&&(n=e<=i?"start":i>=i+o?"end":"start"),"start"===n?O(e):"end"===n?O(e-o):"center"===n&&O(e-o/2)}),[O]),I=t.useCallback((function(e,t){var n=void 0===t?{}:t,a=n.align,i=void 0===a?"auto":a,u=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(n,["align"]),c=w.current,s=c.measurements,f=c.scrollOffset,l=c.outerSize,d=s[Math.max(0,Math.min(e,o-1))];if(d){if("auto"===i)if(d.end>=f+l)i="end";else{if(!(d.start<=f))return;i="start"}var v="center"===i?d.start+d.size/2:"end"===i?d.end:d.start;P(v,r({align:i},u))}}),[P,o]),V=t.useCallback((function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];I.apply(void 0,t),requestAnimationFrame((function(){I.apply(void 0,t)}))}),[I]);return{virtualItems:q,totalSize:A,scrollToOffset:P,scrollToIndex:V}},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,a=["bottom","height","left","right","top","width"],i=new Map,u=function e(){var t=[];i.forEach((function(e,r){var n,i,u=r.getBoundingClientRect();n=u,i=e.rect,void 0===n&&(n={}),void 0===i&&(i={}),a.some((function(e){return n[e]!==i[e]}))&&(e.rect=u,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),a=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!==a&&c(e.current)})),o((function(){if(a&&!v.current){v.current=!0;var e=a.getBoundingClientRect();d({rect:e})}}),[a]),t.useEffect((function(){if(a){var e,t,r=(e=a,t=function(e){d({rect:e})},{observe:function(){var r=0===i.size;i.has(e)?i.get(e).callbacks.push(t):i.set(e,{rect:void 0,hasRectChanged:!1,callbacks:[t]}),r&&u()},unobserve:function(){var r=i.get(e);if(r){var a=r.callbacks.indexOf(t);a>=0&&r.callbacks.splice(a,1),r.callbacks.length||i.delete(e),i.size||cancelAnimationFrame(n)}}});return r.observe(),function(){r.unobserve()}}}),[a]),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};e.useVirtual=function(e){var n,a,i=e.size,u=void 0===i?0:i,s=e.estimateSize,l=void 0===s?f:s,d=e.overscan,v=void 0===d?0:d,h=e.paddingStart,p=void 0===h?0:h,g=e.paddingEnd,m=void 0===g?0:g,b=e.parentRef,O=e.horizontal,y=e.scrollToFn,z=e.useObserver,k=O?"width":"height",w=O?"scrollLeft":"scrollTop",R=t.useRef({}),S=((z||c)(b)||((n={})[k]=0,n))[k],x=t.useCallback((function(e){b.current&&(b.current[w]=e)}),[b,w]),C=y||x;y=t.useCallback((function(e){C(e,x)}),[x,C]);var E=t.useState({}),M=E[0],j=E[1],A=t.useMemo((function(){for(var e=[],t=0;t<u;t++){var r=M[t],n=e[t-1]?e[t-1].end:p,a="number"==typeof r?r:l(t),i=n+a;e[t]={index:t,start:n,size:a,end:i}}return e}),[l,M,p,u]),F=((null==(a=A[u-1])?void 0:a.end)||0)+m;Object.assign(R.current,{overscan:v,measurements:A,outerSize:S,totalSize:F});var L=t.useState({start:0,end:0}),T=L[0],q=L[1];o((function(){var e=b.current;if(e){var t=function(){var t=e[w];R.current.scrollOffset=t,q((function(e){return function(e,t){var r=e.overscan,n=e.measurements,a=e.outerSize,i=e.scrollOffset,u=n.length,o=u-1;for(;o>0&&n[o].end>=i;)o-=1;var c=0;for(;c<u-1&&n[c].start<=i+a;)c+=1;if(o=Math.max(o-r,0),c=Math.min(c+r,u-1),!t||t.start!==o||t.end!==c)return{start:o,end:c};return t}(R.current,e)}))};return t(),e.addEventListener("scroll",t,{capture:!1,passive:!0}),function(){e.removeEventListener("scroll",t)}}}),[b.current,w,u,S]);var B=t.useMemo((function(){for(var e=[],t=Math.min(T.end,A.length-1),n=function(t){var n=r(r({},A[t]),{},{measureRef:function(e){var a=R.current.scrollOffset;if(e){var i=e.getBoundingClientRect()[k];i!==n.size&&(n.start<a&&x(a+(i-n.size)),j((function(e){var n;return r(r({},e),{},((n={})[t]=i,n))})))}}});e.push(n)},a=T.start;a<=t;a++)n(a);return e}),[T.start,T.end,A,k,x]),P=t.useRef();o((function(){P.current&&(l||u)&&j({}),P.current=!0}),[l,u]);var I=t.useCallback((function(e,t){var r=(void 0===t?{}:t).align,n=void 0===r?"start":r,a=R.current,i=a.scrollOffset,u=a.outerSize;"auto"===n&&(n=e<=i?"start":i>=i+u?"end":"start"),"start"===n?y(e):"end"===n?y(e-u):"center"===n&&y(e-u/2)}),[y]),V=t.useCallback((function(e,t){var n=void 0===t?{}:t,a=n.align,i=void 0===a?"auto":a,o=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(n,["align"]),c=R.current,s=c.measurements,f=c.scrollOffset,l=c.outerSize,d=s[Math.max(0,Math.min(e,u-1))];if(d){if("auto"===i)if(d.end>=f+l)i="end";else{if(!(d.start<=f))return;i="start"}var v="center"===i?d.start+d.size/2:"end"===i?d.end:d.start;I(v,r({align:i},o))}}),[I,u]),_=t.useCallback((function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];V.apply(void 0,t),requestAnimationFrame((function(){V.apply(void 0,t)}))}),[V]);return{virtualItems:B,totalSize:F,scrollToOffset:I,scrollToIndex:_}},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-virtual.production.min.js.map

package.json

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

README.md

@@ -242,2 +242,3 @@ ![React Virtual Header](https://github.com/tannerlinsley/react-virtual/raw/master/media/header.png)
   scrollToFn,
+  useObserver,
 })
@@ -272,2 +273,7 @@ ```
   - Eg. You can use this function implement smooth scrolling by using the supplied offset and the `defaultScrollToFn` as seen in the sandbox's **Smooth Scroll** example.
+- `useObserver: Function(parentRef) => ({ width: number; height: number })`
+  - Optional
+  - This hook, if passed, is responsible for getting `parentRef`'s dimensions
+  - Eg. You can use this hook to replace [@reach/observe-rect](https://github.com/reach/observe-rect) that `react-virtual` uses by default with [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+    - Caution! Depending on your bundling target, you might need to add [resize-observer-polyfill](https://www.npmjs.com/package/resize-observer-polyfill)
 - `paddingStart: Integer`
@@ -274,0 +280,0 @@ - Defaults to `0`

No alert changes

Improved metrics

Total package byte prevSize

143620

increased by1.08%

Lines of code

1158

increased by0.52%

Number of lines in readme file

340

increased by1.8%

No dependency changes