react-virtual - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/react-virtual.development.js

@@ -178,5 +178,10 @@ (function (global, factory) {
         parentRef = _ref.parentRef,
-        horizontal = _ref.horizontal;
+        horizontal = _ref.horizontal,
+        scrollToFn = _ref.scrollToFn;
     var sizeKey = horizontal ? 'width' : 'height';
     var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
+    var defaultScrollToFn = React.useCallback(function (offset) {
+      parentRef.current[scrollKey] = offset;
+    }, [parentRef, scrollKey]);
+    scrollToFn = scrollToFn || defaultScrollToFn;
 
@@ -195,3 +200,3 @@ var _ref2 = useRect(parentRef) || (_ref3 = {}, _ref3[sizeKey] = 0, _ref3),
     });
-    var scrollOffsetPlusSize = scrollOffset + outerSize;
+    var scrollOffsetPlusOuterSize = scrollOffset + outerSize;
 
@@ -202,4 +207,9 @@ var _React$useState2 = React.useState({}),
 
-    React.useEffect(function () {
-      if (estimateSize || size) setMeasuredCache({});
+    var mountedRef = React.useRef();
+    useIsomorphicLayoutEffect(function () {
+      if (mountedRef.current) {
+        if (estimateSize || size) setMeasuredCache({});
+      }
+
+      mountedRef.current = true;
     }, [estimateSize, size]);
@@ -228,3 +238,3 @@ var measurements = React.useMemo(function () {
     }, [estimateSize, measuredCache, size]);
-    var total = ((_measurements2 = measurements[size - 1]) == null ? void 0 : _measurements2.end) || 0;
+    var totalSize = ((_measurements2 = measurements[size - 1]) == null ? void 0 : _measurements2.end) || 0;
     var start = React.useMemo(function () {
@@ -237,5 +247,5 @@ return measurements.find(function (rowStat) {
       return [].concat(measurements).reverse().find(function (rowStat) {
-        return rowStat.start <= scrollOffsetPlusSize;
+        return rowStat.start <= scrollOffsetPlusOuterSize;
       });
-    }, [measurements, scrollOffsetPlusSize]);
+    }, [measurements, scrollOffsetPlusOuterSize]);
     var startIndex = start ? start.index : 0;
@@ -278,17 +288,72 @@ var endIndex = end ? end.index : 0; // Always add at least one overscan item, so focus will work
     }, [startIndex, endIndex, measurements, sizeKey]);
-    var scrollToOffset = React.useCallback(function (offset) {
-      _setScrollOffset(offset);
+    var latestRef = React.useRef();
+    latestRef.current = {
+      outerSize: outerSize,
+      scrollOffset: scrollOffset,
+      scrollOffsetPlusOuterSize: scrollOffsetPlusOuterSize,
+      totalSize: totalSize
+    };
+    var scrollToOffset = React.useCallback(function (offset, _temp) {
+      var _ref5 = _temp === void 0 ? {} : _temp,
+          _ref5$align = _ref5.align,
+          align = _ref5$align === void 0 ? 'start' : _ref5$align;
 
-      parentRef.current[scrollKey] = offset;
-    }, [parentRef, scrollKey]);
-    var scrollToIndex = React.useCallback(function (index) {
+      var _latestRef$current = latestRef.current,
+          outerSize = _latestRef$current.outerSize,
+          scrollOffset = _latestRef$current.scrollOffset,
+          scrollOffsetPlusOuterSize = _latestRef$current.scrollOffsetPlusOuterSize,
+          totalSize = _latestRef$current.totalSize;
+      offset = Math.max(0, Math.min(offset, totalSize - outerSize));
+
+      if (align === 'auto') {
+        if (offset <= scrollOffset) {
+          align = 'start';
+        } else if (offset >= scrollOffsetPlusOuterSize) {
+          align = 'end';
+        } else {
+          align = 'start';
+        }
+      }
+
+      if (align === 'start') {
+        scrollToFn(offset);
+      } else if (align === 'end') {
+        scrollToFn(offset - outerSize);
+      } else if (align === 'center') {
+        scrollToFn(offset - outerSize / 2);
+      }
+    }, [scrollToFn]);
+    var getIndexOffset = React.useCallback(function (index, _temp2) {
+      var _ref6 = _temp2 === void 0 ? {} : _temp2,
+          _ref6$align = _ref6.align,
+          align = _ref6$align === void 0 ? 'start' : _ref6$align;
+
       var measurement = measurements[index];
 
-      if (measurement) {
-        scrollToOffset(measurement.start);
+      if (!measurement) {
+        return;
       }
-    }, [measurements, scrollToOffset]);
+
+      if (align === 'auto') {
+        if (measurement.end >= scrollOffsetPlusOuterSize) {
+          align = 'end';
+        } else {
+          align = 'start';
+        }
+      }
+
+      var offset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
+      return offset;
+    }, [measurements, scrollOffsetPlusOuterSize]);
+    var scrollToIndex = React.useCallback(function (index, options) {
+      var offset = getIndexOffset(index, options);
+
+      if (typeof offset !== 'undefined') {
+        scrollToOffset(offset, options);
+      }
+    }, [getIndexOffset, scrollToOffset]);
     return {
       virtualItems: virtualItems,
-      totalSize: total,
+      totalSize: totalSize,
+      getIndexOffset: getIndexOffset,
       scrollToOffset: scrollToOffset,
@@ -295,0 +360,0 @@ scrollToIndex: scrollToIndex

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,c=function e(){var t=[];u.forEach((function(e,n){var r,u,c=n.getBoundingClientRect();r=c,u=e.rect,void 0===r&&(r={}),void 0===u&&(u={}),o.some((function(e){return r[e]!==u[e]}))&&(e.rect=c,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 a(e,n,o){void 0===n&&(n=!0);var a=t.useState()[1],f=t.useState(null),s=f[0],l=f[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(){a({})})),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&&c()},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]),s}e.useVirtual=function(e){var r,o,u,c,i,f=e.size,s=void 0===f?0:f,l=e.estimateSize,v=e.overscan,d=void 0===v?1:v,p=e.parentRef,h=e.horizontal,m=h?"width":"height",b=h?"scrollLeft":"scrollTop",g=(a(p)||((r={})[m]=0,r))[m],y=t.useState(0),R=y[0],w=y[1];u=p,c=function(e){var t=e[b];w(t)},(i=t.useRef()).current=c,t.useEffect((function(){var e=u.current,t=function(e){i.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)}}),[u]);var x=R+g,E=t.useState({}),k=E[0],z=E[1];t.useEffect((function(){(l||s)&&z({})}),[l,s]);var M=t.useMemo((function(){for(var e=[],t=0;t<s;t++){var n,r=(null==(n=e[t-1])?void 0:n.end)||0,o=k[t]||l(t),u=r+o;e[t]={index:t,start:r,size:o,end:u}}return e}),[l,k,s]),O=(null==(o=M[s-1])?void 0:o.end)||0,C=t.useMemo((function(){return M.find((function(e){return e.end>=R}))}),[M,R]),L=t.useMemo((function(){return[].concat(M).reverse().find((function(e){return e.start<=x}))}),[M,x]),S=C?C.index:0,j=L?L.index:0;S=Math.max(S-1-d,0),j=Math.min(j+1+d,s-1);var T=t.useMemo((function(){for(var e=[],t=function(t){var r=n(n({},M[t]),{},{measureRef:function(e){if(e){var o=e.getBoundingClientRect()[m];o!==r.size&&z((function(e){var r;return n(n({},e),{},((r={})[t]=o,r))}))}}});e.push(r)},r=S;r<=j;r++)t(r);return e}),[S,j,M,m]),q=t.useCallback((function(e){w(e),p.current[b]=e}),[p,b]),A=t.useCallback((function(e){var t=M[e];t&&q(t.start)}),[M,q]);return{virtualItems:T,totalSize:O,scrollToOffset:q,scrollToIndex:A}},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 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],d=t.useRef(!1),v=t.useRef(null);v.current=o;var p=e.current;return i((function(){var e,t,n;return p||requestAnimationFrame((function(){c({})})),p&&(t=p,n=function(e){v.current&&v.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&&!d.current&&(d.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?1:f,d=e.parentRef,v=e.horizontal,p=e.scrollToFn,h=v?"width":"height",m=v?"scrollLeft":"scrollTop",b=t.useCallback((function(e){d.current[m]=e}),[d,m]);p=p||b;var g,z,O,R=(c(d)||((r={})[h]=0,r))[h],S=t.useState(0),x=S[0],y=S[1];g=d,z=function(e){var t=e[m];y(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 k=x+R,M=t.useState({}),w=M[0],C=M[1],E=t.useRef();i((function(){E.current&&(s||a)&&C({}),E.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>=x}))}),[L,x]),P=t.useMemo((function(){return[].concat(L).reverse().find((function(e){return e.start<=k}))}),[L,k]),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&&C((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:x,scrollOffsetPlusOuterSize:k,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?"start":n,o=L[e];if(o)return"auto"===r&&(r=o.end>=k?"end":"start"),"center"===r?o.start+o.size/2:"end"===r?o.end:o.start}),[L,k]),_=t.useCallback((function(e,t){var n=V(e,t);void 0!==n&&I(n,t)}),[V,I]);return{virtualItems:A,totalSize:T,getIndexOffset:V,scrollToOffset:I,scrollToIndex:_}},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-virtual.production.min.js.map

package.json

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

README.md

@@ -33,2 +33,4 @@ ![React Virtual Header](https://github.com/tannerlinsley/react-virtual/raw/master/media/header.png)
 - Fixed, variable and dynamic measurement modes
+- Imperative scrollTo control for offset, indices and alignment
+- Custom scrolling function support (eg. smooth scroll)
 - <a href="https://bundlephobia.com/result?p=react-virtual@latest" target="\_parent">
@@ -270,2 +272,4 @@ <img alt="" src="https://badgen.net/bundlephobia/minzip/react-virtual@latest" />
   scrollToOffset,
+  getIndexOffset,
+  scrollToFn,
 } = useVirtual({
@@ -276,3 +280,3 @@ size,
   overscan,
-  horiztonal,
+  horizontal,
 })
@@ -298,6 +302,11 @@ ```
 - `overscan: Integer`
+  - Defaults to `1`
   - The amount of items to load both behind and ahead of the current window range
-  - Defaults to `1`
 - `horizontal: Boolean`
+  - Defaults to `false`
   - When `true`, this virtualizer will use `width` and `scrollLeft` instead of `height` and `scrollTop` to determine size and offset of virtualized items.
+- `scrollToFn: Function(offset) => void 0`
+  - Optional
+  - This function, if passed, is responsible for implementing the scrollTo log for the parentRef.
+  - Eg. You can use this function implement smooth scrolling by using the supplied offset and animating the parentRef's scroll offset appropriately as seen in the sandbox's **Smooth Scroll** example.
 
@@ -322,6 +331,26 @@ ### Returns
   - When using dynamic measurement refs, this number may change as items are measured after they are rendered.
-- `scrollToIndex: Function(index: Integer) => void 0`
+- `scrollToIndex: Function(index: Integer, { align: String }) => void 0`
   - Call this function to scroll the top/left of the parentRef element to the start of the item located at the passed index.
-- `scrollToOffset: Function(offsetInPixels: Integer) => void 0`
+  - `align: 'start' | 'center' | 'end' | 'auto'`
+    - Defaults to `start`
+    - `start` places the item at the top/left of the visible scroll area
+    - `center` places the item in the center of the visible scroll area
+    - `end` places the item at the bottom/right of the visible scroll area
+    - `auto` brings the item into the visible scroll area either at the start or end, depending on which is closer. If the item is already in view, it is placed at the `top/left` of the visible scroll area.
+- `scrollToOffset: Function(offsetInPixels: Integer, { align: String }) => void 0`
   - Call this function to scroll the top/left of the parentRef element to the passed pixel offset.
+  - `align: 'start' | 'center' | 'end' | 'auto'`
+    - Defaults to `start`
+    - `start` places the offset at the top/left of the visible scroll area
+    - `center` places the offset in the center of the visible scroll area
+    - `end` places the offset at the bottom/right of the visible scroll area
+    - `auto` brings the offset into the visible scroll area either at the start or end, depending on which is closer. If the offset is already in view, it is placed at the `top/left` of the visible scroll area.
+- `getIndexOffset: Function(index: Integer, { align: String }) => void 0`
+  - Call this function to return the offset of the item located at the passed index.
+  - `align: 'start' | 'center' | 'end' | 'auto'`
+    - Defaults to `start`
+    - `start` returns the item's top/left offset
+    - `center` returns the item's center offset
+    - `end` returns the item's bottom/right offset
+    - `auto` return's the item's start or end offset, depending on which is closer. If the item is already in view, the `top/left` offset will be returned
 
@@ -328,0 +357,0 @@ # Contributors ✨

No alert changes

Improved metrics

Total package byte prevSize

127385

increased by23.51%

Lines of code

929

increased by23.54%

Number of lines in readme file

373

increased by8.43%

No dependency changes