react-virtual - npm Package Compare versions

Comparing version 2.3.2 to 2.4.0

dist/react-virtual.development.js

@@ -188,3 +188,5 @@ (function (global, factory) {
         scrollToFn = _ref.scrollToFn,
-        useObserver = _ref.useObserver;
+        useObserver = _ref.useObserver,
+        onScrollElement = _ref.onScrollElement,
+        scrollOffsetFn = _ref.scrollOffsetFn;
     var sizeKey = horizontal ? 'width' : 'height';
@@ -247,5 +249,4 @@ var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
 
+    var element = onScrollElement ? onScrollElement.current : parentRef.current;
     useIsomorphicLayoutEffect(function () {
-      var element = parentRef.current;
-
       if (!element) {
@@ -256,3 +257,3 @@ return;
       var onScroll = function onScroll() {
-        var scrollOffset = element[scrollKey];
+        var scrollOffset = scrollOffsetFn ? scrollOffsetFn() : element[scrollKey];
         latestRef.current.scrollOffset = scrollOffset;
@@ -273,3 +274,3 @@ setRange(function (prevRange) {
       };
-    }, [parentRef.current, scrollKey, size
+    }, [element, scrollKey, size
     /* required */
@@ -276,0 +277,0 @@ , outerSize

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,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})}));
+!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,m=e.paddingEnd,g=void 0===m?0:m,b=e.parentRef,O=e.horizontal,y=e.scrollToFn,z=e.useObserver,k=e.onScrollElement,w=e.scrollOffsetFn,R=O?"width":"height",S=O?"scrollLeft":"scrollTop",E=t.useRef({}),x=((z||c)(b)||((n={})[R]=0,n))[R],C=t.useCallback((function(e){b.current&&(b.current[S]=e)}),[b,S]),M=y||C;y=t.useCallback((function(e){M(e,C)}),[C,M]);var j=t.useState({}),F=j[0],A=j[1],L=t.useMemo((function(){for(var e=[],t=0;t<o;t++){var r=F[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,F,p,o]),T=((null==(a=L[o-1])?void 0:a.end)||0)+g;Object.assign(E.current,{overscan:v,measurements:L,outerSize:x,totalSize:T});var q=t.useState({start:0,end:0}),B=q[0],P=q[1],I=k?k.current:b.current;u((function(){if(I){var e=function(){var e=w?w():I[S];E.current.scrollOffset=e,P((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}(E.current,e)}))};return e(),I.addEventListener("scroll",e,{capture:!1,passive:!0}),function(){I.removeEventListener("scroll",e)}}}),[I,S,o,x]);var V=t.useMemo((function(){for(var e=[],t=Math.min(B.end,L.length-1),n=function(t){var n=r(r({},L[t]),{},{measureRef:function(e){var a=E.current.scrollOffset;if(e){var i=e.getBoundingClientRect()[R];i!==n.size&&(n.start<a&&C(a+(i-n.size)),A((function(e){var n;return r(r({},e),{},((n={})[t]=i,n))})))}}});e.push(n)},a=B.start;a<=t;a++)n(a);return e}),[B.start,B.end,L,R,C]),_=t.useRef();u((function(){_.current&&(l||o)&&A({}),_.current=!0}),[l,o]);var D=t.useCallback((function(e,t){var r=(void 0===t?{}:t).align,n=void 0===r?"start":r,a=E.current,i=a.scrollOffset,o=a.outerSize;"auto"===n&&(n=e<=i?"start":i>=i+o?"end":"start"),"start"===n?y(e):"end"===n?y(e-o):"center"===n&&y(e-o/2)}),[y]),G=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=E.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;D(v,r({align:i},u))}}),[D,o]),H=t.useCallback((function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];G.apply(void 0,t),requestAnimationFrame((function(){G.apply(void 0,t)}))}),[G]);return{virtualItems:V,totalSize:T,scrollToOffset:D,scrollToIndex:H}},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-virtual.production.min.js.map

package.json

 {
   "name": "react-virtual",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "Hooks for virtualizing scrollable elements in React",
@@ -48,3 +48,3 @@ "author": "tannerlinsley",
   "peerDependencies": {
-    "react": "^16.6.3"
+    "react": "^16.6.3 || ^17.0.0"
   },
@@ -51,0 +51,0 @@ "devDependencies": {

README.md

@@ -142,3 +142,2 @@ ![React Virtual Header](https://github.com/tannerlinsley/react-virtual/raw/master/media/header.png)
 
-
 - [Installation](#installation)
@@ -251,3 +250,3 @@ - [Why?](#why)
   - **Required**
-  - The size of the virtualizer
+  - The total count of elements
 - `parentRef: React.useRef(DOMElement)`
@@ -272,4 +271,4 @@ - **Required**
   - Optional
-  - This function, if passed, is responsible for implementing the scrollTo log for the parentRef which is used when methods like `scrolllToOffset` and `scrollToIndex` are called.
-  - 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.
+  - This function, if passed, is responsible for implementing the scrollTo logic for the parentRef which is used when methods like `scrollToOffset` and `scrollToIndex` are called.
+  - Eg. You can use this function to 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 })`
@@ -286,2 +285,8 @@ - Optional
   - The amount of padding in pixels to add to the end of the virtual list
+  - `onScrollElement: React.useRef(DOMElement)`
+   - Optional
+   - Allows using a different element to bind the `onScroll` event to
+ - `scrollOffsetFn: Function() => number`
+   - Optional
+   - This function, if passed, is called on scroll to get the scroll offest rather than using `parentRef`'s `width` or `height`
 
@@ -288,0 +293,0 @@ ### Returns

No alert changes

Improved metrics

Total package byte prevSize

145418

increased by1.26%

Lines of code

1164

increased by0.52%

Number of lines in readme file

345

increased by1.47%

No dependency changes