react-virtual - npm Package Compare versions

Comparing version 2.1.4 to 2.1.5

dist/react-virtual.development.js

@@ -27,8 +27,25 @@ (function (global, factory) {
 
-  function useScroll(ref, onChange) {
+  var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+  function useScroll(nodeRef, onChange) {
+    var _React$useState = React.useState(nodeRef.current),
+        element = _React$useState[0],
+        setElement = _React$useState[1];
+
     var onChangeRef = React.useRef();
     onChangeRef.current = onChange;
+    useIsomorphicLayoutEffect(function () {
+      if (nodeRef.current !== element) {
+        setElement(nodeRef.current);
+      }
+    });
+    useIsomorphicLayoutEffect(function () {
+      if (element) {
+        onChangeRef.current({
+          scrollLeft: element.scrollLeft,
+          scrollTop: element.scrollTop
+        });
+      }
+    }, [element]);
     React.useEffect(function () {
-      var el = ref.current;
-
       var handler = function handler(e) {
@@ -41,4 +58,4 @@ onChangeRef.current({
 
-      if (el) {
-        el.addEventListener('scroll', handler, {
+      if (element) {
+        element.addEventListener('scroll', handler, {
           capture: false,
@@ -48,6 +65,6 @@ passive: true
         return function () {
-          el.removeEventListener('scroll', handler);
+          element.removeEventListener('scroll', handler);
         };
       }
-    }, [ref]);
+    }, [element]);
   }
@@ -125,12 +142,7 @@
 
-  var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+  function useRect(nodeRef) {
+    var _React$useState = React.useState(nodeRef.current),
+        element = _React$useState[0],
+        setElement = _React$useState[1];
 
-  function useRect(nodeRef, observe, onChange) {
-    if (observe === void 0) {
-      observe = true;
-    }
-
-    var _React$useState = React.useState(),
-        rerender = _React$useState[1];
-
     var _React$useState2 = React.useState(null),
@@ -141,26 +153,20 @@ rect = _React$useState2[0],
     var initialRectSet = React.useRef(false);
-    var onChangeRef = React.useRef(null);
-    onChangeRef.current = onChange;
-    var element = nodeRef.current;
     useIsomorphicLayoutEffect(function () {
-      if (!element) {
-        requestAnimationFrame(function () {
-          rerender({});
-        });
+      if (nodeRef.current !== element) {
+        setElement(nodeRef.current);
       }
-
+    });
+    useIsomorphicLayoutEffect(function () {
+      if (element && !initialRectSet.current) {
+        initialRectSet.current = true;
+        setRect(element.getBoundingClientRect());
+      }
+    }, [element]);
+    React.useEffect(function () {
       var observer;
 
       if (element) {
-        observer = observeRect(element, function (rect) {
-          onChangeRef.current && onChangeRef.current(rect);
-          setRect(rect);
-        });
+        observer = observeRect(element, setRect);
       }
 
-      if (element && !initialRectSet.current) {
-        initialRectSet.current = true;
-        setRect(element.getBoundingClientRect());
-      }
-
       observer && observer.observe();
@@ -170,3 +176,3 @@ return function () {
       };
-    }, [element, observe, onChange]);
+    }, [element]);
     return rect;
@@ -173,0 +179,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 n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var r,o=["bottom","height","left","right","top","width"],u=new Map,a=function e(){var t=[];u.forEach((function(e,n){var r,u,a=n.getBoundingClientRect();r=a,u=e.rect,void 0===r&&(r={}),void 0===u&&(u={}),o.some((function(e){return r[e]!==u[e]}))&&(e.rect=a,t.push(e))})),t.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),r=window.requestAnimationFrame(e)};var i="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;function c(e,n,o){void 0===n&&(n=!0);var c=t.useState()[1],s=t.useState(null),f=s[0],l=s[1],v=t.useRef(!1),d=t.useRef(null);d.current=o;var p=e.current;return i((function(){var e,t,n;return p||requestAnimationFrame((function(){c({})})),p&&(t=p,n=function(e){d.current&&d.current(e),l(e)},e={observe:function(){var e=0===u.size;u.has(t)?u.get(t).callbacks.push(n):u.set(t,{rect:void 0,hasRectChanged:!1,callbacks:[n]}),e&&a()},unobserve:function(){var e=u.get(t);if(e){var o=e.callbacks.indexOf(n);o>=0&&e.callbacks.splice(o,1),e.callbacks.length||u.delete(t),u.size||cancelAnimationFrame(r)}}}),p&&!v.current&&(v.current=!0,l(p.getBoundingClientRect())),e&&e.observe(),function(){e&&e.unobserve()}}),[p,n,o]),f}e.useVirtual=function(e){var r,o,u=e.size,a=void 0===u?0:u,s=e.estimateSize,f=e.overscan,l=void 0===f?0:f,v=e.parentRef,d=e.horizontal,p=e.scrollToFn,h=d?"width":"height",m=d?"scrollLeft":"scrollTop",b=t.useCallback((function(e){v.current[m]=e}),[v,m]);p=p||b;var g,z,O,R=(c(v)||((r={})[h]=0,r))[h],S=t.useState(0),y=S[0],x=S[1];g=v,z=function(e){var t=e[m];x(t)},(O=t.useRef()).current=z,t.useEffect((function(){var e=g.current,t=function(e){O.current({scrollLeft:e.target.scrollLeft,scrollTop:e.target.scrollTop})};if(e)return e.addEventListener("scroll",t,{capture:!1,passive:!0}),function(){e.removeEventListener("scroll",t)}}),[g]);var M=y+R,k=t.useState({}),w=k[0],E=k[1],C=t.useRef();i((function(){C.current&&(s||a)&&E({}),C.current=!0}),[s,a]);var L=t.useMemo((function(){for(var e=[],t=0;t<a;t++){var n,r=(null==(n=e[t-1])?void 0:n.end)||0,o=w[t]||s(t),u=r+o;e[t]={index:t,start:r,size:o,end:u}}return e}),[s,w,a]),T=(null==(o=L[a-1])?void 0:o.end)||0,j=t.useMemo((function(){return L.find((function(e){return e.end>=y}))}),[L,y]),P=t.useMemo((function(){return[].concat(L).reverse().find((function(e){return e.start<=M}))}),[L,M]),F=j?j.index:0,q=P?P.index:0;F=Math.max(F-1-l,0),q=Math.min(q+1+l,a-1);var A=t.useMemo((function(){for(var e=[],t=function(t){var r=n(n({},L[t]),{},{measureRef:function(e){if(e){var o=e.getBoundingClientRect()[h];o!==r.size&&E((function(e){var r;return n(n({},e),{},((r={})[t]=o,r))}))}}});e.push(r)},r=F;r<=q;r++)t(r);return e}),[F,q,L,h]),B=t.useRef();B.current={outerSize:R,scrollOffset:y,scrollOffsetPlusOuterSize:M,totalSize:T};var I=t.useCallback((function(e,t){var n=(void 0===t?{}:t).align,r=void 0===n?"start":n,o=B.current,u=o.outerSize,a=o.scrollOffset,i=o.scrollOffsetPlusOuterSize,c=o.totalSize;e=Math.max(0,Math.min(e,c-u)),"auto"===r&&(r=e<=a?"start":e>=i?"end":"start"),"start"===r?p(e):"end"===r?p(e-u):"center"===r&&p(e-u/2)}),[p]),V=t.useCallback((function(e,t){var n=(void 0===t?{}:t).align,r=void 0===n?"auto":n,o=L[e];if(o){if("auto"===r)if(o.end>=M)r="end";else{if(!(o.start<=y))return;r="start"}var u="center"===r?o.start+o.size/2:"end"===r?o.end:o.start;I(u,options)}}),[I]);return{virtualItems:A,totalSize:T,scrollToOffset:I,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="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;var o,u=["bottom","height","left","right","top","width"],c=new Map,i=function e(){var t=[];c.forEach((function(e,r){var n,o,c=r.getBoundingClientRect();n=c,o=e.rect,void 0===n&&(n={}),void 0===o&&(o={}),u.some((function(e){return n[e]!==o[e]}))&&(e.rect=c,t.push(e))})),t.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),o=window.requestAnimationFrame(e)};function a(e){var r=t.useState(e.current),u=r[0],a=r[1],s=t.useState(null),f=s[0],l=s[1],v=t.useRef(!1);return n((function(){e.current!==u&&a(e.current)})),n((function(){u&&!v.current&&(v.current=!0,l(u.getBoundingClientRect()))}),[u]),t.useEffect((function(){var e,t,r;return u&&(t=u,r=l,e={observe:function(){var e=0===c.size;c.has(t)?c.get(t).callbacks.push(r):c.set(t,{rect:void 0,hasRectChanged:!1,callbacks:[r]}),e&&i()},unobserve:function(){var e=c.get(t);if(e){var n=e.callbacks.indexOf(r);n>=0&&e.callbacks.splice(n,1),e.callbacks.length||c.delete(t),c.size||cancelAnimationFrame(o)}}}),e&&e.observe(),function(){e&&e.unobserve()}}),[u]),f}e.useVirtual=function(e){var o,u,c=e.size,i=void 0===c?0:c,s=e.estimateSize,f=e.overscan,l=void 0===f?0:f,v=e.parentRef,d=e.horizontal,p=e.scrollToFn,h=d?"width":"height",m=d?"scrollLeft":"scrollTop",b=t.useCallback((function(e){v.current[m]=e}),[v,m]);p=p||b;var g=(a(v)||((o={})[h]=0,o))[h],z=t.useState(0),O=z[0],S=z[1];!function(e,r){var o=t.useState(e.current),u=o[0],c=o[1],i=t.useRef();i.current=r,n((function(){e.current!==u&&c(e.current)})),n((function(){u&&i.current({scrollLeft:u.scrollLeft,scrollTop:u.scrollTop})}),[u]),t.useEffect((function(){var e=function(e){i.current({scrollLeft:e.target.scrollLeft,scrollTop:e.target.scrollTop})};if(u)return u.addEventListener("scroll",e,{capture:!1,passive:!0}),function(){u.removeEventListener("scroll",e)}}),[u])}(v,(function(e){var t=e[m];S(t)}));var R=O+g,y=t.useState({}),x=y[0],M=y[1],k=t.useRef();n((function(){k.current&&(s||i)&&M({}),k.current=!0}),[s,i]);var w=t.useMemo((function(){for(var e=[],t=0;t<i;t++){var r,n=(null==(r=e[t-1])?void 0:r.end)||0,o=x[t]||s(t),u=n+o;e[t]={index:t,start:n,size:o,end:u}}return e}),[s,x,i]),E=(null==(u=w[i-1])?void 0:u.end)||0,L=t.useMemo((function(){return w.find((function(e){return e.end>=O}))}),[w,O]),T=t.useMemo((function(){return[].concat(w).reverse().find((function(e){return e.start<=R}))}),[w,R]),C=L?L.index:0,j=T?T.index:0;C=Math.max(C-1-l,0),j=Math.min(j+1+l,i-1);var P=t.useMemo((function(){for(var e=[],t=function(t){var n=r(r({},w[t]),{},{measureRef:function(e){if(e){var o=e.getBoundingClientRect()[h];o!==n.size&&M((function(e){var n;return r(r({},e),{},((n={})[t]=o,n))}))}}});e.push(n)},n=C;n<=j;n++)t(n);return e}),[C,j,w,h]),B=t.useRef();B.current={outerSize:g,scrollOffset:O,scrollOffsetPlusOuterSize:R,totalSize:E};var F=t.useCallback((function(e,t){var r=(void 0===t?{}:t).align,n=void 0===r?"start":r,o=B.current,u=o.outerSize,c=o.scrollOffset,i=o.scrollOffsetPlusOuterSize,a=o.totalSize;e=Math.max(0,Math.min(e,a-u)),"auto"===n&&(n=e<=c?"start":e>=i?"end":"start"),"start"===n?p(e):"end"===n?p(e-u):"center"===n&&p(e-u/2)}),[p]),q=t.useCallback((function(e,t){var r=(void 0===t?{}:t).align,n=void 0===r?"auto":r,o=w[e];if(o){if("auto"===n)if(o.end>=R)n="end";else{if(!(o.start<=O))return;n="start"}var u="center"===n?o.start+o.size/2:"end"===n?o.end:o.start;F(u,options)}}),[F]);return{virtualItems:P,totalSize:E,scrollToOffset:F,scrollToIndex:q}},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-virtual.production.min.js.map

package.json

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

types/index.d.ts

@@ -1,1 +0,32 @@
-declare module 'react-virtual/index'
+type ScrollAlignment = 'start' | 'center' | 'end' | 'auto'
+
+interface ScrollToOptions {
+  align: ScrollAlignment
+}
+
+interface ScrollToOffsetOptions extends ScrollToOptions {}
+interface ScrollToIndexOptions extends ScrollToOptions {}
+
+export type VirtualItem = {
+  index: number
+  start: number
+  end: number
+  size: number
+  measureRef: React.RefObject<any>
+}
+
+declare function useVirtual<T>(options: {
+  size: number
+  parentRef: React.RefObject<T>
+  estimateSize: (index?: number) => number
+  overscan?: number
+  horizontal?: boolean
+  scrollToFn?: (offset: number) => void
+}): {
+  virtualItems: VirtualItem[]
+  totalSize: number
+  scrollToOffset: (index: number, options?: ScrollToOffsetOptions) => void
+  scrollToIndex: (index: number, options?: ScrollToIndexOptions) => void
+}
+
+export { useVirtual }

No alert changes

Improved metrics

Total package byte prevSize

127894

increased by2.8%

Lines of code

968

increased by5.79%

No dependency changes