Upgrade react-virtualized to v8

Author: fritz-c

package.json

@@ -33,7 +33,7 @@
   "dependencies": {
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
-    "react-virtualized": "^7.17.0"
+    "react-virtualized": "^8.0.4"
   },
   "peerDependencies": {
     "react": "^15.3.0",

src/react-sortable-tree.js

@@ -5,7 +5,7 @@
  */
 
 import React, { Component, PropTypes } from 'react';
-import { AutoSizer, VirtualScroll } from 'react-virtualized';
+import { AutoSizer, List } from 'react-virtualized';
 import 'react-virtualized/styles.css';
 import TreeNode from './tree-node';
 import {
@@ -206,17 +206,19 @@ class ReactSortableTree extends Component {
             >
                 <AutoSizer>
                     {({height, width}) => (
-                        <VirtualScroll
+                        <List
                             className={styles.virtualScrollOverride}
                             width={width}
                             height={height}
                             style={innerStyle}
                             rowCount={rows.length}
                             estimatedRowSize={rowHeight}
                             rowHeight={rowHeight}
-                            rowRenderer={({ index }) => this.renderRow(
+                            rowRenderer={({ index, key, style: rowStyle }) => this.renderRow(
                                 rows[index],
                                 index,
+                                key,
+                                rowStyle,
                                 () => (rows[index - 1] || null)
                             )}
                         />
@@ -226,7 +228,7 @@ class ReactSortableTree extends Component {
         );
     }
 
-    renderRow({ node, path, lowerSiblingCounts, treeIndex }, listIndex, getPrevRow) {
+    renderRow({ node, path, lowerSiblingCounts, treeIndex }, listIndex, key, style, getPrevRow) {
         const NodeContentRenderer = this.nodeContentRenderer;
         const nodeProps = !this.props.generateNodeProps ? {} : this.props.generateNodeProps({
             node,
@@ -237,6 +239,8 @@ class ReactSortableTree extends Component {
 
         return (
             <TreeNode
+                style={style}
+                key={key}
                 treeIndex={treeIndex}
                 listIndex={listIndex}
                 getPrevRow={getPrevRow}

src/react-sortable-tree.scss

@@ -17,10 +17,10 @@
     }
 }
 
-:global .Grid__innerScrollContainer {
+:global .ReactVirtualized__Grid__innerScrollContainer {
     overflow: visible;
 }
 
-:global .Grid {
+:global .ReactVirtualized__Grid {
     outline: none;
 }

src/tree-node.js

@@ -11,6 +11,13 @@ const TreeNode = ({
     isOver,
     draggedNode,
     canDrop,
+    treeIndex: _treeIndex,   // Delete from otherProps
+    getPrevRow: _getPrevRow, // Delete from otherProps
+    node: _node,             // Delete from otherProps
+    path: _path,             // Delete from otherProps
+    maxDepth: _maxDepth,     // Delete from otherProps
+    dragHover: _dragHover,   // Delete from otherProps
+    ...otherProps,
 }) => {
     // Construct the scaffold representing the structure of the tree
     const scaffoldBlockCount = lowerSiblingCounts.length;
@@ -72,7 +79,10 @@ const TreeNode = ({
     });
 
     return connectDropTarget(
-        <div className={styles.node}>
+        <div
+            {...otherProps}
+            className={styles.node}
+        >
             {scaffold}
 
             <div

src/tree-node.scss

@@ -1,7 +1,5 @@
 .node {
-    height: 100%;
     min-width: 100%;
-    position: relative;
     white-space: nowrap;
 }