react-window - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0-alpha.0

package.json

 {
   "name": "react-window",
-  "version": "1.3.1",
+  "version": "1.4.0-alpha.0",
   "description":
@@ -5,0 +5,0 @@ "React components for efficiently rendering large, scrollable lists and tabular data",

src/createGridComponent.js

@@ -502,2 +502,5 @@ // @flow
 
+    // TODO This memoized getter doesn't make much sense.
+    // If all that's really needed is for the impl to be able to reset the cache,
+    // Then we could expose a better API for that.
     _getItemStyleCache: (_: any, __: any) => ItemStyleCache;
@@ -504,0 +507,0 @@ _getItemStyleCache = memoizeOne((_: any, __: any) => ({}));

src/createListComponent.js

@@ -9,5 +9,5 @@ // @flow
 type itemSize = number | ((index: number) => number);
-type Direction = 'horizontal' | 'vertical';
+export type Direction = 'horizontal' | 'vertical';
 
-type RenderComponentProps<T> = {|
+export type RenderComponentProps<T> = {|
   data: T,
@@ -59,6 +59,7 @@ index: number,
 
-type State = {|
+export type State = {|
   isScrolling: boolean,
   scrollDirection: ScrollDirection,
   scrollOffset: number,
+  scrollOffsetDelta: number,
   scrollUpdateWasRequested: boolean,
@@ -76,3 +77,3 @@ |};
   instanceProps: any
-) => number;
+) => ?number;
 type GetEstimatedTotalSize = (props: Props<any>, instanceProps: any) => number;
@@ -102,3 +103,3 @@ type GetOffsetForIndexAndAlignment = (
 
-const defaultItemKey = (index: number, data: any) => index;
+export const defaultItemKey = (index: number, data: any) => index;
 
@@ -147,2 +148,3 @@ export default function createListComponent({
           : 0,
+      scrollOffsetDelta: 0,
       scrollUpdateWasRequested: false,
@@ -196,8 +198,7 @@ };
       if (typeof initialScrollOffset === 'number' && this._outerRef !== null) {
+        const element = ((this._outerRef: any): HTMLDivElement);
         if (direction === 'horizontal') {
-          ((this
-            ._outerRef: any): HTMLDivElement).scrollLeft = initialScrollOffset;
+          element.scrollLeft = initialScrollOffset;
         } else {
-          ((this
-            ._outerRef: any): HTMLDivElement).scrollTop = initialScrollOffset;
+          element.scrollTop = initialScrollOffset;
         }
@@ -207,5 +208,6 @@ }
       this._callPropsCallbacks();
+      this._commitHook();
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps: Props<any>, prevState: State) {
       const { direction } = this.props;
@@ -215,6 +217,7 @@ const { scrollOffset, scrollUpdateWasRequested } = this.state;
       if (scrollUpdateWasRequested && this._outerRef !== null) {
+        const element = ((this._outerRef: any): HTMLDivElement);
         if (direction === 'horizontal') {
-          ((this._outerRef: any): HTMLDivElement).scrollLeft = scrollOffset;
+          element.scrollLeft = scrollOffset;
         } else {
-          ((this._outerRef: any): HTMLDivElement).scrollTop = scrollOffset;
+          element.scrollTop = scrollOffset;
         }
@@ -224,2 +227,3 @@ }
       this._callPropsCallbacks();
+      this._commitHook(prevProps, prevState);
     }
@@ -231,2 +235,4 @@
       }
+
+      this._unmountHook();
     }
@@ -236,3 +242,2 @@
       const {
-        children,
         className,
@@ -243,11 +248,7 @@ direction,
         innerTagName,
-        itemCount,
-        itemData,
-        itemKey = defaultItemKey,
         outerTagName,
         style,
-        useIsScrolling,
         width,
       } = this.props;
-      const { isScrolling } = this.state;
+      const { isScrolling, scrollOffsetDelta } = this.state;
 
@@ -259,19 +260,4 @@ const onScroll =
 
-      const [startIndex, stopIndex] = this._getRangeToRender();
+      const items = this._renderItems();
 
-      const items = [];
-      if (itemCount > 0) {
-        for (let index = startIndex; index <= stopIndex; index++) {
-          items.push(
-            createElement(children, {
-              data: itemData,
-              key: itemKey(index, itemData),
-              index,
-              isScrolling: useIsScrolling ? isScrolling : undefined,
-              style: this._getItemStyle(index),
-            })
-          );
-        }
-      }
-
       // Read this value AFTER items have been created,
@@ -291,3 +277,2 @@ // So their actual sizes (if variable) are taken into consideration.
           style: {
-            position: 'relative',
             height,
@@ -305,3 +290,12 @@ width,
           style: {
+            position: 'relative',
             height: direction === 'horizontal' ? '100%' : estimatedTotalSize,
+            marginLeft:
+              direction === 'horizontal'
+                ? `-${scrollOffsetDelta}px`
+                : undefined,
+            marginTop:
+              direction === 'horizontal'
+                ? undefined
+                : `${-scrollOffsetDelta}px`,
             pointerEvents: isScrolling ? 'none' : '',
@@ -386,2 +380,10 @@ width: direction === 'horizontal' ? estimatedTotalSize : '100%',
 
+    // This method is called after mount and update.
+    // List implementations can override this method to be notified.
+    _commitHook(prevProps?: Props<any>, prevState?: State) {}
+
+    // This method is called before unmounting.
+    // List implementations can override this method to be notified.
+    _unmountHook() {}
+
     // Lazily create and cache item styles while scrolling,
@@ -427,8 +429,17 @@ // So that pure component sCU will prevent re-renders.
 
+    _itemStyleCache: ItemStyleCache;
+
+    // TODO This memoized getter doesn't make much sense.
+    // If all that's really needed is for the impl to be able to reset the cache,
+    // Then we could expose a better API for that.
     _getItemStyleCache: (_: any) => ItemStyleCache;
-    _getItemStyleCache = memoizeOne((_: any) => ({}));
+    _getItemStyleCache = memoizeOne(_ => {
+      this._itemStyleCache = {};
 
+      return this._itemStyleCache;
+    });
+
     _getRangeToRender(): [number, number, number, number] {
       const { itemCount, overscanCount } = this.props;
-      const { scrollDirection, scrollOffset } = this.state;
+      const { scrollDirection, scrollOffset, scrollOffsetDelta } = this.state;
 
@@ -441,3 +452,3 @@ if (itemCount === 0) {
         this.props,
-        scrollOffset,
+        scrollOffset + scrollOffsetDelta,
         this._instanceProps
@@ -448,3 +459,3 @@ );
         startIndex,
-        scrollOffset,
+        scrollOffset + scrollOffsetDelta,
         this._instanceProps
@@ -468,2 +479,31 @@ );
 
+    _renderItems() {
+      const {
+        children,
+        itemCount,
+        itemData,
+        itemKey = defaultItemKey,
+        useIsScrolling,
+      } = this.props;
+      const { isScrolling } = this.state;
+
+      const [startIndex, stopIndex] = this._getRangeToRender();
+
+      const items = [];
+      if (itemCount > 0) {
+        for (let index = startIndex; index <= stopIndex; index++) {
+          items.push(
+            createElement(children, {
+              data: itemData,
+              key: itemKey(index, itemData),
+              index,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              style: this._getItemStyle(index),
+            })
+          );
+        }
+      }
+      return items;
+    }
+
     _onScrollHorizontal = (event: ScrollEvent): void => {
@@ -545,2 +585,6 @@ const { scrollLeft } = event.currentTarget;
     };
+
+    // Intentionally placed after all other instance properties have been initialized,
+    // So that DynamicSizeList can override the render behavior.
+    _instanceProps: any = initInstanceProps(this.props, this);
   };
@@ -547,0 +591,0 @@ }

src/index.js

 // @flow
 
+export { default as DynamicSizeList } from './DynamicSizeList';
+export { default as FixedSizeGrid } from './FixedSizeGrid';
+export { default as FixedSizeList } from './FixedSizeList';
 export { default as VariableSizeGrid } from './VariableSizeGrid';
 export { default as VariableSizeList } from './VariableSizeList';
-export { default as FixedSizeGrid } from './FixedSizeGrid';
-export { default as FixedSizeList } from './FixedSizeList';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

255923

increased by31.27%

Number of package files

16

increased by14.29%

Lines of code

6094

increased by30.55%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

24

increased by33.33%

No dependency changes