react-virtual - npm Package Compare versions

Comparing version 2.1.10 to 2.2.0

dist/react-virtual.development.js

@@ -204,2 +204,6 @@ (function (global, factory) {
         overscan = _ref$overscan === void 0 ? 0 : _ref$overscan,
+        _ref$paddingStart = _ref.paddingStart,
+        paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
+        _ref$paddingEnd = _ref.paddingEnd,
+        paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
         parentRef = _ref.parentRef,
@@ -218,2 +222,3 @@ horizontal = _ref.horizontal,
 
+    var scrollOffsetPlusOuterSize = scrollOffset + outerSize;
     useScroll(parentRef, function (_ref4) {
@@ -235,3 +240,2 @@ var newScrollOffset = _ref4[scrollKey];
     }, [defaultScrollToFn, resolvedScrollToFn]);
-    var scrollOffsetPlusOuterSize = scrollOffset + outerSize;
 
@@ -247,3 +251,3 @@ var _React$useState2 = React.useState({}),
       for (var i = 0, j = size - 1; i < size; i++, j--) {
-        var _start = measurements[i - 1] ? measurements[i - 1].end : 0;
+        var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
 
@@ -268,7 +272,7 @@ var _size = measuredCache[i] || estimateSize(i);
       };
-    }, [estimateSize, measuredCache, size]),
+    }, [estimateSize, measuredCache, paddingStart, size]),
         measurements = _React$useMemo.measurements,
         reversedMeasurements = _React$useMemo.reversedMeasurements;
 
-    var totalSize = ((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || 0;
+    var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || 0) + paddingEnd;
     var start = React.useMemo(function () {
@@ -343,3 +347,3 @@ return reversedMeasurements.reduce(function (last, rowStat) {
     }, [estimateSize, size]);
-    var scrollToOffset = React.useCallback(function (offset, _temp) {
+    var scrollToOffset = React.useCallback(function (toOffset, _temp) {
       var _ref5 = _temp === void 0 ? {} : _temp,
@@ -355,5 +359,5 @@ _ref5$align = _ref5.align,
       if (align === 'auto') {
-        if (offset <= scrollOffset) {
+        if (toOffset <= scrollOffset) {
           align = 'start';
-        } else if (offset >= scrollOffsetPlusOuterSize) {
+        } else if (scrollOffset >= scrollOffsetPlusOuterSize) {
           align = 'end';
@@ -366,7 +370,7 @@ } else {
       if (align === 'start') {
-        scrollToFn(offset);
+        scrollToFn(toOffset);
       } else if (align === 'end') {
-        scrollToFn(offset - outerSize);
+        scrollToFn(toOffset - outerSize);
       } else if (align === 'center') {
-        scrollToFn(offset - outerSize / 2);
+        scrollToFn(toOffset - outerSize / 2);
       }
@@ -400,4 +404,4 @@ }, [scrollToFn]);
 
-      var offset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
-      scrollToOffset(offset, _extends({
+      var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
+      scrollToOffset(toOffset, _extends({
         align: align
@@ -404,0 +408,0 @@ }, rest));

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

package.json

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

README.md

@@ -277,2 +277,8 @@ ![React Virtual Header](https://github.com/tannerlinsley/react-virtual/raw/master/media/header.png)
   - 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.
+- `paddingStart: Integer`
+  - Defaults to `0`
+  - The amount of padding in pixels to add to the start of the virtual list
+- `paddingEnd: Integer`
+  - Defaults to `0`
+  - The amount of padding in pixels to add to the end of the virtual list
 
@@ -279,0 +285,0 @@ ### Returns

types/index.d.ts

@@ -21,3 +21,3 @@ type ScrollAlignment = 'start' | 'center' | 'end' | 'auto'
   parentRef: React.RefObject<T>
-  estimateSize?: (index?: number) => number
+  estimateSize?: (index: number) => number
   overscan?: number
@@ -29,2 +29,4 @@ horizontal?: boolean
   ) => void
+  paddingStart?: number
+  paddingEnd?: number
 }): {
@@ -31,0 +33,0 @@ virtualItems: VirtualItem[]

No alert changes

Improved metrics

Total package byte prevSize

148288

increased by1.53%

Lines of code

1153

increased by1.23%

Number of lines in readme file

340

increased by1.8%

No dependency changes