Use react-virtualized CellMeasurer

Author: bpneal

src/node-renderer-default.js

@@ -34,10 +34,11 @@ class NodeRendererDefault extends Component {
             className,
             style = {},
             didDrop,
-            isOver:     _isOver,     // Not needed, but preserved for other renderers
-            parentNode: _parentNode, // Needed for drag-and-drop utils
-            endDrag:    _endDrag,    // Needed for drag-and-drop utils
-            startDrag:  _startDrag,  // Needed for drag-and-drop utils
+            isOver:         _isOver,         // Not needed, but preserved for other renderers
+            parentNode:     _parentNode,     // Needed for drag-and-drop utils
+            endDrag:        _endDrag,        // Needed for drag-and-drop utils
+            startDrag:      _startDrag,      // Needed for drag-and-drop utils
+            onHeightChange: _onHeightChange, // Not needed, but preserved for other renderers
             ...otherProps,
         } = this.props;
 
@@ -165,6 +166,7 @@ NodeRendererDefault.propTypes = {
     buttons:                  PropTypes.arrayOf(PropTypes.node),
     className:                PropTypes.string,
     style:                    PropTypes.object,
+    onHeightChange:           PropTypes.func,
 
     // Drag and drop API functions
     // Drag source

src/node-renderer-default.scss

@@ -103,7 +103,6 @@ $row-padding: 10px;
 .moveHandle {
     @extend %rowItem;
 
-    height: 100%;
     width: 44px;
     background: #D9D9D9 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MiI+PGcgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIuOSIgPjxwYXRoIGQ9Ik0xNCAxNS43aDE0LjQiLz48cGF0aCBkPSJNMTQgMjEuNGgxNC40Ii8+PHBhdGggZD0iTTE0IDI3LjFoMTQuNCIvPjwvZz4KPC9zdmc+') no-repeat center;
     border: solid #AAA 1px;

src/react-sortable-tree.js

@@ -4,8 +4,8 @@
  * @license Open source under the MIT License
  */
 
-import React, { Component, PropTypes } from 'react';
-import { AutoSizer, List } from 'react-virtualized';
+import React, { Component, PropTypes, cloneElement } from 'react';
+import { AutoSizer, List, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
 import isEqual from 'lodash.isequal';
 import withScrolling, { createVerticalStrength, createHorizontalStrength } from 'react-dnd-scrollzone';
 import 'react-virtualized/styles.css';
@@ -39,6 +39,28 @@ import styles from './react-sortable-tree.scss';
 
 let dndTypeCounter = 1;
 
+const cellMeasurerCache = new CellMeasurerCache({
+    fixedWidth: true
+});
+
+const DynamicRow = ({ parent, rowIndex, children, ...extraProps }) => (
+    <CellMeasurer
+        cache={cellMeasurerCache}
+        columnIndex={0}
+        parent={parent}
+        rowIndex={rowIndex}
+    >
+        {cloneElement(children, extraProps)}
+    </CellMeasurer>
+);
+
+DynamicRow.propTypes = {
+    rowIndex: PropTypes.number,
+    parent: PropTypes.any,
+    children: PropTypes.node
+};
+
+
 class ReactSortableTree extends Component {
     constructor(props) {
         super(props);
@@ -78,6 +100,7 @@ class ReactSortableTree extends Component {
         this.startDrag                = this.startDrag.bind(this);
         this.dragHover                = this.dragHover.bind(this);
         this.endDrag                  = this.endDrag.bind(this);
+        this.handleResize             = this.handleResize.bind(this);
     }
 
     componentWillMount() {
@@ -86,6 +109,10 @@ class ReactSortableTree extends Component {
         this.ignoreOneTreeUpdate = false;
     }
 
+    componentWillUnmount() {
+        cellMeasurerCache.clearAll();
+    }
+
     toggleChildrenVisibility({ node: targetNode, path, treeIndex: _treeIndex }) {
         const treeData = changeNodeAtPath({
             treeData: this.props.treeData,
@@ -121,6 +148,8 @@ class ReactSortableTree extends Component {
 
         this.props.onChange(treeData);
 
+        this.handleResize();
+
         if (this.props.onMoveNode) {
             this.props.onMoveNode({ treeData, node, treeIndex, path });
         }
@@ -317,6 +346,15 @@ class ReactSortableTree extends Component {
         });
     }
 
+    handleResize() {
+        const { isDynamicHeight } = this.props;
+
+        if (isDynamicHeight && this._list) {
+            cellMeasurerCache.clearAll();
+            this._list.wrappedInstance.recomputeRowHeights();
+        }
+    }
+
     render() {
         const {
             style,
@@ -325,6 +363,7 @@ class ReactSortableTree extends Component {
             rowHeight,
             getNodeKey,
             isVirtualized,
+            isDynamicHeight,
         } = this.props;
         const {
             rows,
@@ -347,9 +386,12 @@ class ReactSortableTree extends Component {
             const ScrollZoneVirtualList = this.scrollZoneVirtualList;
             // Render list with react-virtualized
             list = (
-                <AutoSizer>
+                <AutoSizer onResize={this.handleResize}>
                     {({height, width}) => (
                         <ScrollZoneVirtualList
+                            ref={(ref) => {
+                                this._list = ref;
+                            }}
                             {...scrollToInfo}
                             verticalStrength={this.vStrength}
                             horizontalStrength={this.hStrength}
@@ -362,14 +404,16 @@ class ReactSortableTree extends Component {
                             style={innerStyle}
                             rowCount={rows.length}
                             estimatedRowSize={typeof rowHeight !== 'function' ? rowHeight : undefined}
-                            rowHeight={rowHeight}
-                            rowRenderer={({ index, key, style: rowStyle }) => this.renderRow(
+                            deferredMeasurementCache={isDynamicHeight ? cellMeasurerCache : undefined}
+                            rowHeight={isDynamicHeight ? cellMeasurerCache.rowHeight : rowHeight}
+                            rowRenderer={({ index, key, style: rowStyle, parent }) => this.renderRow(
                                 rows[index],
                                 index,
                                 key,
                                 rowStyle,
                                 () => (rows[index - 1] || null),
-                                matchKeys
+                                matchKeys,
+                                parent
                             )}
                             {...this.props.reactVirtualizedListProps}
                         />
@@ -407,7 +451,8 @@ class ReactSortableTree extends Component {
         key,
         style,
         getPrevRow,
-        matchKeys
+        matchKeys,
+        parent
     ) {
         const TreeNodeRenderer    = this.treeNodeRenderer;
         const NodeContentRenderer = this.nodeContentRenderer;
@@ -426,6 +471,34 @@ class ReactSortableTree extends Component {
             isSearchFocus,
         });
 
+        const content = (
+            <NodeContentRenderer
+                node={node}
+                parentNode={parentNode}
+                path={path}
+                isSearchMatch={isSearchMatch}
+                isSearchFocus={isSearchFocus}
+                treeIndex={treeIndex}
+                startDrag={this.startDrag}
+                endDrag={this.endDrag}
+                toggleChildrenVisibility={this.toggleChildrenVisibility}
+                scaffoldBlockPxWidth={this.props.scaffoldBlockPxWidth}
+                onHeightChange={() => cellMeasurerCache.clear(treeIndex, 0)}
+                {...nodeProps}
+            />
+        );
+
+        let row;
+        if (this.props.isDynamicHeight) {
+            row = (
+                <DynamicRow parent={parent} rowIndex={listIndex}>
+                    {content}
+                </DynamicRow>
+            );
+        } else {
+            row = content;
+        }
+
         return (
             <TreeNodeRenderer
                 style={style}
@@ -446,19 +519,7 @@ class ReactSortableTree extends Component {
                 maxDepth={this.props.maxDepth}
                 dragHover={this.dragHover}
             >
-                <NodeContentRenderer
-                    node={node}
-                    parentNode={parentNode}
-                    path={path}
-                    isSearchMatch={isSearchMatch}
-                    isSearchFocus={isSearchFocus}
-                    treeIndex={treeIndex}
-                    startDrag={this.startDrag}
-                    endDrag={this.endDrag}
-                    toggleChildrenVisibility={this.toggleChildrenVisibility}
-                    scaffoldBlockPxWidth={this.props.scaffoldBlockPxWidth}
-                    {...nodeProps}
-                />
+                {row}
             </TreeNodeRenderer>
         );
     }
@@ -525,6 +586,10 @@ ReactSortableTree.propTypes = {
     // NOTE: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled.
     isVirtualized: PropTypes.bool,
 
+    // Set to false to disable CellMeasurer.
+    // NOTE: rowHeight will be ignored.
+    isDynamicHeight: PropTypes.bool,
+
     // Override the default component for rendering nodes (but keep the scaffolding generator)
     // This is an advanced option for complete customization of the appearance.
     // It is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed.