react-window - npm Package Compare versions

Comparing version 1.6.2 to 1.7.0

CHANGELOG.md

 Changelog
 ------------
 
+### 1.7.0
+* 🎉 Grid `scrollToItem` supports optional `rowIndex` and `columnIndex` params ([jgoz](https://github.com/jgoz) - [#174](https://github.com/bvaughn/react-window/pull/174))
+
 ### 1.6.2
@@ -5,0 +8,0 @@ * 🐛 Bugfix for RTL  when scrolling back towards the beginning (right) of the list.

package.json

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

README.md

@@ -19,7 +19,12 @@ # react-window
 
-Learn more at [react-window.now.sh](https://react-window.now.sh/).
+Learn more at [react-window.now.sh](https://react-window.now.sh/):
 
+## Related libraries
+
+* [`react-virtualized-auto-sizer`](https://npmjs.com/package/react-virtualized-auto-sizer): HOC that grows to fit all of the available space and passes the width and height values to its child.
+* [`react-window-infinite-loader`](https://npmjs.com/package/react-window-infinite-loader): Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
+
 ## Frequently asked questions
 
-#### How is `react-window` different from `react-virtualized`?
+### How is `react-window` different from `react-virtualized`?
 I wrote `react-virtualized` several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.
@@ -36,4 +41,38 @@
 
+### Can a list or a grid fill 100% the width or height of a page?
+
+Yes. I recommend using the [`react-virtualized-auto-sizer` package](https://npmjs.com/package/react-virtualized-auto-sizer):
+
+<img width="336" alt="screen shot 2019-03-07 at 7 29 08 pm" src="https://user-images.githubusercontent.com/29597/54005716-50f41880-410f-11e9-864f-a65bbdf49e07.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/3vnx878jk5).
+
+### Why is my list blank when I scroll?
+
+If your list looks something like this...
+
+<img src="https://user-images.githubusercontent.com/29597/54005352-eb535c80-410d-11e9-80b2-d3d02db1f599.gif" width="302" height="152">
+
+...then you probably forgot to use the `style` parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!
+
+<img width="257" alt="screen shot 2019-03-07 at 7 21 48 pm" src="https://user-images.githubusercontent.com/29597/54005433-45ecb880-410e-11e9-8721-420ff1a153da.png">
+
+### Can I lazy load data for my list?
+
+Yes. I recommend using the [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader):
+
+<img width="368" alt="screen shot 2019-03-07 at 7 32 32 pm" src="https://user-images.githubusercontent.com/29597/54006733-653a1480-4113-11e9-907b-08ca5e27b3f9.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/5wqo7z2np4).
+
+### Can I attach custom properties or event handlers?
+
+Yes, using the `outerElementType` prop.
+
+<img width="412" alt="Screen Shot 2019-03-12 at 8 58 09 AM" src="https://user-images.githubusercontent.com/29597/54215333-f9ee9a80-44a4-11e9-9142-34c67026d950.png">
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/4zqx79nww0).
+
 ## License
 
 MIT © [bvaughn](https://github.com/bvaughn)

src/createGridComponent.js

@@ -135,4 +135,6 @@ // @flow
 if (process.env.NODE_ENV !== 'production') {
-  devWarningsOverscanCount = new WeakSet();
-  devWarningsTagName = new WeakSet();
+  if (typeof window.WeakSet !== 'undefined') {
+    devWarningsOverscanCount = new WeakSet();
+    devWarningsTagName = new WeakSet();
+  }
 }
@@ -249,4 +251,4 @@
       align: ScrollToAlign,
-      columnIndex: number,
-      rowIndex: number,
+      columnIndex?: number,
+      rowIndex?: number,
     }): void {
@@ -275,18 +277,24 @@ const { height, width } = this.props;
       this.scrollTo({
-        scrollLeft: getOffsetForColumnAndAlignment(
-          this.props,
-          columnIndex,
-          align,
-          scrollLeft,
-          this._instanceProps,
-          verticalScrollbarSize
-        ),
-        scrollTop: getOffsetForRowAndAlignment(
-          this.props,
-          rowIndex,
-          align,
-          scrollTop,
-          this._instanceProps,
-          horizontalScrollbarSize
-        ),
+        scrollLeft:
+          columnIndex !== undefined
+            ? getOffsetForColumnAndAlignment(
+                this.props,
+                columnIndex,
+                align,
+                scrollLeft,
+                this._instanceProps,
+                verticalScrollbarSize
+              )
+            : scrollLeft,
+        scrollTop:
+          rowIndex !== undefined
+            ? getOffsetForRowAndAlignment(
+                this.props,
+                rowIndex,
+                align,
+                scrollTop,
+                this._instanceProps,
+                horizontalScrollbarSize
+              )
+            : scrollTop,
       });
@@ -752,4 +760,4 @@ }
     if (typeof overscanCount === 'number') {
-      if (!((devWarningsOverscanCount: any): WeakSet<any>).has(instance)) {
-        ((devWarningsOverscanCount: any): WeakSet<any>).add(instance);
+      if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
+        devWarningsOverscanCount.add(instance);
         console.warn(
@@ -763,4 +771,4 @@ 'The overscanCount prop has been deprecated. ' +
     if (innerTagName != null || outerTagName != null) {
-      if (!((devWarningsTagName: any): WeakSet<any>).has(instance)) {
-        ((devWarningsTagName: any): WeakSet<any>).add(instance);
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
         console.warn(
@@ -767,0 +775,0 @@ 'The innerTagName and outerTagName props have been deprecated. ' +

src/createListComponent.js

@@ -115,4 +115,6 @@ // @flow
 if (process.env.NODE_ENV !== 'production') {
-  devWarningsDirection = new WeakSet();
-  devWarningsTagName = new WeakSet();
+  if (typeof window.WeakSet !== 'undefined') {
+    devWarningsDirection = new WeakSet();
+    devWarningsTagName = new WeakSet();
+  }
 }
@@ -591,4 +593,4 @@
     if (innerTagName != null || outerTagName != null) {
-      if (!((devWarningsTagName: any): WeakSet<any>).has(instance)) {
-        ((devWarningsTagName: any): WeakSet<any>).add(instance);
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
         console.warn(
@@ -607,4 +609,4 @@ 'The innerTagName and outerTagName props have been deprecated. ' +
       case 'vertical':
-        if (!((devWarningsDirection: any): WeakSet<any>).has(instance)) {
-          ((devWarningsDirection: any): WeakSet<any>).add(instance);
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
           console.warn(
@@ -611,0 +613,0 @@ 'The direction prop should be either "ltr" (default) or "rtl". ' +

No alert changes

Improved metrics

Total package byte prevSize

235960

1.42%

Lines of code

5461

0.33%

Number of lines in readme file

77

102.63%

No dependency changes