react-window 1.8.2 → 1.8.6

package/src/FixedSizeList.js

@@ -5,10 +5,10 @@ import createListComponent from './createListComponent';
 import type { Props, ScrollToAlign } from './createListComponent';
 
 const FixedSizeList = createListComponent({
-  getItemOffset: ({ itemSize, size }: Props<any>, index: number): number =>
+  getItemOffset: ({ itemSize }: Props<any>, index: number): number =>
     index * ((itemSize: any): number),
 
-  getItemSize: ({ itemSize, size }: Props<any>, index: number): number =>
+  getItemSize: ({ itemSize }: Props<any>, index: number): number =>
     ((itemSize: any): number),
 
   getEstimatedTotalSize: ({ itemCount, itemSize }: Props<any>) =>
@@ -23,12 +23,13 @@ const FixedSizeList = createListComponent({
     // TODO Deprecate direction "horizontal"
     const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     const size = (((isHorizontal ? width : height): any): number);
-    const maxOffset = Math.max(
+    const lastItemOffset = Math.max(
       0,
-      Math.min(
-        itemCount * ((itemSize: any): number) - size,
-        index * ((itemSize: any): number)
-      )
+      itemCount * ((itemSize: any): number) - size
+    );
+    const maxOffset = Math.min(
+      lastItemOffset,
+      index * ((itemSize: any): number)
     );
     const minOffset = Math.max(
       0,
@@ -51,13 +52,25 @@ const FixedSizeList = createListComponent({
         return maxOffset;
       case 'end':
         return minOffset;
-      case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      case 'center': {
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(size / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+          return lastItemOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+      }
       case 'auto':
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -83,14 +96,14 @@ const FixedSizeList = createListComponent({
     const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     const offset = startIndex * ((itemSize: any): number);
     const size = (((isHorizontal ? width : height): any): number);
+    const numVisibleItems = Math.ceil(
+      (size + scrollOffset - offset) / ((itemSize: any): number)
+    );
     return Math.max(
       0,
       Math.min(
         itemCount - 1,
-        startIndex +
-          Math.floor(
-            (size + (scrollOffset - offset)) / ((itemSize: any): number)
-          )
+        startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
       )
     );
   },

package/src/VariableSizeGrid.js

@@ -274,7 +274,11 @@ const getOffsetForIndexAndAlignment = (
     default:
       if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
         return scrollOffset;
-      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+      } else if (minOffset > maxOffset) {
+        // Because we only take into account the scrollbar size when calculating minOffset
+        // this value can be larger than maxOffset when at the end of the list
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
         return minOffset;
       } else {
         return maxOffset;

package/src/VariableSizeList.js

@@ -227,7 +227,7 @@ const VariableSizeList = createListComponent({
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;

package/src/createGridComponent.js

@@ -3,7 +3,7 @@
 import memoizeOne from 'memoize-one';
 import { createElement, PureComponent } from 'react';
 import { cancelTimeout, requestTimeout } from './timer';
-import { getScrollbarSize, isRTLOffsetNegative } from './domHelpers';
+import { getScrollbarSize, getRTLOffsetType } from './domHelpers';
 
 import type { TimeoutID } from './timer';
 
@@ -46,6 +46,22 @@ type OnScrollCallback = ({
 type ScrollEvent = SyntheticEvent<HTMLDivElement>;
 type ItemStyleCache = { [key: string]: Object };
 
+type OuterProps = {|
+  children: React$Node,
+  className: string | void,
+  onScroll: ScrollEvent => void,
+  style: {
+    [string]: mixed,
+  },
+|};
+
+type InnerProps = {|
+  children: React$Node,
+  style: {
+    [string]: mixed,
+  },
+|};
+
 export type Props<T> = {|
   children: RenderComponent<T>,
   className?: string,
@@ -56,7 +72,7 @@ export type Props<T> = {|
   initialScrollLeft?: number,
   initialScrollTop?: number,
   innerRef?: any,
-  innerElementType?: React$ElementType,
+  innerElementType?: string | React$AbstractComponent<InnerProps, any>,
   innerTagName?: string, // deprecated
   itemData: T,
   itemKey?: (params: {|
@@ -67,7 +83,7 @@ export type Props<T> = {|
   onItemsRendered?: OnItemsRenderedCallback,
   onScroll?: OnScrollCallback,
   outerRef?: any,
-  outerElementType?: React$ElementType,
+  outerElementType?: string | React$AbstractComponent<OuterProps, any>,
   outerTagName?: string, // deprecated
   overscanColumnCount?: number,
   overscanColumnsCount?: number, // deprecated
@@ -348,12 +364,17 @@ export default function createGridComponent({
         // So we need to determine which browser behavior we're dealing with, and mimic it.
         const outerRef = ((this._outerRef: any): HTMLElement);
         if (direction === 'rtl') {
-          const isNegative = isRTLOffsetNegative();
-          if (isNegative) {
-            outerRef.scrollLeft = -scrollLeft;
-          } else {
-            const { clientWidth, scrollWidth } = outerRef;
-            outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              outerRef.scrollLeft = -scrollLeft;
+              break;
+            case 'positive-ascending':
+              outerRef.scrollLeft = scrollLeft;
+              break;
+            default:
+              const { clientWidth, scrollWidth } = outerRef;
+              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
           }
         } else {
           outerRef.scrollLeft = Math.max(0, scrollLeft);
@@ -589,13 +610,16 @@ export default function createGridComponent({
       if (itemStyleCache.hasOwnProperty(key)) {
         style = itemStyleCache[key];
       } else {
+        const offset = getColumnOffset(
+          this.props,
+          columnIndex,
+          this._instanceProps
+        );
+        const isRtl = direction === 'rtl';
         itemStyleCache[key] = style = {
           position: 'absolute',
-          [direction === 'rtl' ? 'right' : 'left']: getColumnOffset(
-            this.props,
-            columnIndex,
-            this._instanceProps
-          ),
+          left: isRtl ? undefined : offset,
+          right: isRtl ? offset : undefined,
           top: getRowOffset(this.props, rowIndex, this._instanceProps),
           height: getRowHeight(this.props, rowIndex, this._instanceProps),
           width: getColumnWidth(this.props, columnIndex, this._instanceProps),
@@ -726,18 +750,19 @@ export default function createGridComponent({
 
         const { direction } = this.props;
 
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+        // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
         let calculatedScrollLeft = scrollLeft;
         if (direction === 'rtl') {
-          const isNegative = isRTLOffsetNegative();
-
-          // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
-          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
-          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
-          if (isNegative) {
-            calculatedScrollLeft = -scrollLeft;
-          } else {
-            calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              calculatedScrollLeft = -scrollLeft;
+              break;
+            case 'positive-descending':
+              calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
           }
         }
 

package/src/createListComponent.js

@@ -3,7 +3,7 @@
 import memoizeOne from 'memoize-one';
 import { createElement, PureComponent } from 'react';
 import { cancelTimeout, requestTimeout } from './timer';
-import { isRTLOffsetNegative } from './domHelpers';
+import { getRTLOffsetType } from './domHelpers';
 
 import type { TimeoutID } from './timer';
 
@@ -39,6 +39,22 @@ type onScrollCallback = ({
 type ScrollEvent = SyntheticEvent<HTMLDivElement>;
 type ItemStyleCache = { [index: number]: Object };
 
+type OuterProps = {|
+  children: React$Node,
+  className: string | void,
+  onScroll: ScrollEvent => void,
+  style: {
+    [string]: mixed,
+  },
+|};
+
+type InnerProps = {|
+  children: React$Node,
+  style: {
+    [string]: mixed,
+  },
+|};
+
 export type Props<T> = {|
   children: RenderComponent<T>,
   className?: string,
@@ -46,7 +62,7 @@ export type Props<T> = {|
   height: number | string,
   initialScrollOffset?: number,
   innerRef?: any,
-  innerElementType?: React$ElementType,
+  innerElementType?: string | React$AbstractComponent<InnerProps, any>,
   innerTagName?: string, // deprecated
   itemCount: number,
   itemData: T,
@@ -56,7 +72,7 @@ export type Props<T> = {|
   onItemsRendered?: onItemsRenderedCallback,
   onScroll?: onScrollCallback,
   outerRef?: any,
-  outerElementType?: React$ElementType,
+  outerElementType?: string | React$AbstractComponent<OuterProps, any>,
   outerTagName?: string, // deprecated
   overscanCount: number,
   style?: Object,
@@ -235,18 +251,24 @@ export default function createListComponent({
 
       if (scrollUpdateWasRequested && this._outerRef != null) {
         const outerRef = ((this._outerRef: any): HTMLElement);
+
         // TODO Deprecate direction "horizontal"
         if (direction === 'horizontal' || layout === 'horizontal') {
           if (direction === 'rtl') {
             // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
             // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
             // So we need to determine which browser behavior we're dealing with, and mimic it.
-            const isNegative = isRTLOffsetNegative();
-            if (isNegative) {
-              outerRef.scrollLeft = -scrollOffset;
-            } else {
-              const { clientWidth, scrollWidth } = outerRef;
-              outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+              case 'positive-ascending':
+                outerRef.scrollLeft = scrollOffset;
+                break;
+              default:
+                const { clientWidth, scrollWidth } = outerRef;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
             }
           } else {
             outerRef.scrollLeft = scrollOffset;
@@ -444,9 +466,12 @@ export default function createListComponent({
         const isHorizontal =
           direction === 'horizontal' || layout === 'horizontal';
 
+        const isRtl = direction === 'rtl';
+        const offsetHorizontal = isHorizontal ? offset : 0;
         itemStyleCache[index] = style = {
           position: 'absolute',
-          [direction === 'rtl' ? 'right' : 'left']: isHorizontal ? offset : 0,
+          left: isRtl ? undefined : offsetHorizontal,
+          right: isRtl ? offsetHorizontal : undefined,
           top: !isHorizontal ? offset : 0,
           height: !isHorizontal ? size : '100%',
           width: isHorizontal ? size : '100%',
@@ -512,16 +537,17 @@ export default function createListComponent({
 
         let scrollOffset = scrollLeft;
         if (direction === 'rtl') {
-          const isNegative = isRTLOffsetNegative();
-
           // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
           // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
           // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
           // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
-          if (isNegative) {
-            scrollOffset = -scrollLeft;
-          } else {
-            scrollOffset = scrollWidth - clientWidth - scrollLeft;
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              scrollOffset = -scrollLeft;
+              break;
+            case 'positive-descending':
+              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+              break;
           }
         }
 

package/src/domHelpers.js

@@ -21,7 +21,12 @@ export function getScrollbarSize(recalculate?: boolean = false): number {
   return size;
 }
 
-let cachedRTLResult: boolean | null = null;
+export type RTLOffsetType =
+  | 'negative'
+  | 'positive-descending'
+  | 'positive-ascending';
+
+let cachedRTLResult: RTLOffsetType | null = null;
 
 // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
 // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
@@ -29,7 +34,7 @@ let cachedRTLResult: boolean | null = null;
 // The safest way to check this is to intentionally set a negative offset,
 // and then verify that the subsequent "scroll" event matches the negative offset.
 // If it does not match, then we can assume a non-standard RTL scroll implementation.
-export function isRTLOffsetNegative(recalculate?: boolean = false): boolean {
+export function getRTLOffsetType(recalculate?: boolean = false): RTLOffsetType {
   if (cachedRTLResult === null || recalculate) {
     const outerDiv = document.createElement('div');
     const outerStyle = outerDiv.style;
@@ -47,8 +52,16 @@ export function isRTLOffsetNegative(recalculate?: boolean = false): boolean {
 
     ((document.body: any): HTMLBodyElement).appendChild(outerDiv);
 
-    outerDiv.scrollLeft = -10;
-    cachedRTLResult = outerDiv.scrollLeft === -10;
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending';
+    } else {
+      outerDiv.scrollLeft = 1;
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative';
+      } else {
+        cachedRTLResult = 'positive-ascending';
+      }
+    }
 
     ((document.body: any): HTMLBodyElement).removeChild(outerDiv);