Add option to render without virtualization

Author: fritz-c

README.md

@@ -62,6 +62,7 @@ reactVirtualizedListProps | object         |                     |          | Cu
 rowHeight                 | number or func | `62`                |          | Used by react-virtualized. Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`
 slideRegionSize           | number         | `100`               |          | Size in px of the region near the edges that initiates scrolling on dragover.
 scaffoldBlockPxWidth      | number         | `44`                |          | The width of the blocks containing the lines representing the structure of the tree.
+isVirtualized             | bool           | `true`              |          | Set to false to disable virtualization. __NOTE__: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled.
 nodeContentRenderer       | any            | NodeRendererDefault |          | 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.
 
 ## Data Helper Functions

src/examples/basicExample/app.js

@@ -202,6 +202,9 @@ class App extends Component {
                 0,
         });
 
+        const isVirtualized = true;
+        const treeContainerStyle = isVirtualized ? { height: 450 } : {};
+
         return (
             <div>
                 <section className={styles['page-header']}>
@@ -265,7 +268,7 @@ class App extends Component {
                         </span>
                     </form>
 
-                    <div style={{ height: 450 }}>
+                    <div style={treeContainerStyle}>
                         <SortableTree
                             treeData={treeData}
                             onChange={this.updateTreeData}
@@ -285,6 +288,7 @@ class App extends Component {
                                     searchFocusIndex: matches.length > 0 ? searchFocusIndex % matches.length : 0,
                                 })
                             }
+                            isVirtualized={isVirtualized}
                             generateNodeProps={rowInfo => ({
                                 buttons: [
                                     <button

src/node-renderer-default.scss

@@ -3,12 +3,17 @@ $row-padding: 10px;
 .rowWrapper {
     padding: $row-padding $row-padding $row-padding 0;
     height: 100%;
+    box-sizing: border-box;
 }
 
 .row {
     height: 100%;
     white-space: nowrap;
     display: flex;
+
+    & > * {
+        box-sizing: border-box;
+    }
 }
 
 /**

src/react-sortable-tree.js

@@ -40,22 +40,32 @@ class ReactSortableTree extends Component {
     constructor(props) {
         super(props);
 
+        const {
+            dndType,
+            nodeContentRenderer,
+            isVirtualized,
+            slideRegionSize,
+            treeData,
+        } = props;
+
         // Wrapping classes for use with react-dnd
-        this.dndType             = props.dndType || `rst__${dndTypeCounter++}`;
-        this.nodeContentRenderer = dndWrapSource(props.nodeContentRenderer, this.dndType);
+        this.dndType             = dndType || `rst__${dndTypeCounter++}`;
+        this.nodeContentRenderer = dndWrapSource(nodeContentRenderer, this.dndType);
         this.treeNodeRenderer    = dndWrapTarget(TreeNode, this.dndType);
 
         // Prepare scroll-on-drag options for this list
-        this.scrollZoneVirtualList = withScrolling(List);
-        this.vStrength             = createVerticalStrength(props.slideRegionSize);
-        this.hStrength             = createHorizontalStrength(props.slideRegionSize);
+        if (isVirtualized) {
+            this.scrollZoneVirtualList = withScrolling(List);
+            this.vStrength             = createVerticalStrength(slideRegionSize);
+            this.hStrength             = createHorizontalStrength(slideRegionSize);
+        }
 
         this.state = {
             draggingTreeData: null,
             swapFrom: null,
             swapLength: null,
             swapDepth: null,
-            rows: this.getRows(props.treeData),
+            rows: this.getRows(treeData),
             searchMatches: [],
             searchFocusTreeIndex: null,
         };
@@ -309,6 +319,8 @@ class ReactSortableTree extends Component {
             className,
             innerStyle,
             rowHeight,
+            getNodeKey,
+            isVirtualized,
         } = this.props;
         const {
             rows,
@@ -323,14 +335,14 @@ class ReactSortableTree extends Component {
         // Seek to the focused search result if there is one specified
         const scrollToInfo = searchFocusTreeIndex !== null ? { scrollToIndex: searchFocusTreeIndex } : {};
 
-        const ScrollZoneVirtualList = this.scrollZoneVirtualList;
+        let containerStyle = style;
+        let list;
+        if (isVirtualized) {
+            containerStyle = { height: '100%', ...containerStyle  };
 
-        return (
-            <div
-                className={styles.tree + (className ? ` ${className}` : '')}
-                style={{ height: '100%', ...style }}
-                ref={(el) => { this.containerRef = el; }}
-            >
+            const ScrollZoneVirtualList = this.scrollZoneVirtualList;
+            // Render list with react-virtualized
+            list = (
                 <AutoSizer>
                     {({height, width}) => (
                         <ScrollZoneVirtualList
@@ -359,6 +371,28 @@ class ReactSortableTree extends Component {
                         />
                     )}
                 </AutoSizer>
+            );
+        } else {
+            // Render list without react-virtualized
+            list = rows.map((row, index) => this.renderRow(
+                row,
+                index,
+                getNodeKey({
+                    node:      row.node,
+                    treeIndex: row.treeIndex,
+                }),
+                { height: rowHeight },
+                () => (rows[index - 1] || null),
+                matchKeys
+            ));
+        }
+
+        return (
+            <div
+                className={styles.tree + (className ? ` ${className}` : '')}
+                style={containerStyle}
+            >
+                {list}
             </div>
         );
     }
@@ -471,6 +505,10 @@ ReactSortableTree.propTypes = {
     // or additional `style` / `className` settings.
     generateNodeProps: PropTypes.func,
 
+    // Set to false to disable virtualization.
+    // NOTE: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled.
+    isVirtualized: 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.
@@ -504,6 +542,7 @@ ReactSortableTree.defaultProps = {
     style: {},
     innerStyle: {},
     searchQuery: null,
+    isVirtualized: true,
 };
 
 export default dndWrapRoot(ReactSortableTree);

src/tree-node.scss

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