Merge pull request #46 from rbenton/virtuoso-props

Add virtuosoProps property to ReactSortableTree

Author: nosferatu500

.gitignore

@@ -26,3 +26,4 @@ yarn-error.log
 
 .vscode
 .eslintcache
+.nvmrc

README.md

@@ -125,6 +125,9 @@ export default class Tree extends Component {
 | scaffoldBlockPxWidth           |     number     | The width of the blocks containing the lines representing the structure of the tree. Defaults to `44`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | nodeContentRenderer            |      any       | Override the default component ([`NodeRendererDefault`](./src/node-renderer-default.tsx)) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with `generateNodeProps`, a `theme` or CSS rules. If you must use it, is best to copy the component in `node-renderer-default.tsx` to use as a base, and customize as needed.                                                                                                                                                     |
 | placeholderRenderer            |      any       | Override the default placeholder component ([`PlaceholderRendererDefault`](./src/placeholder-renderer-default.tsx)) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with a `theme` or custom CSS instead.                                                                                                                                                                                                                                                                                                   |
+| virtuosoProps | object | Properties to set directly on the underlying [Virtuoso](https://virtuoso.dev/virtuoso-api-reference/) component.
+| virtuosoRef | ref | A [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) via which to access the underlying [Virtuoso](https://virtuoso.dev/virtuoso-api-reference/) component's methods.
+
 ## Data Helper Functions
 
 Need a hand turning your flat data into nested tree data?

package.json

@@ -70,7 +70,7 @@
     "lodash.isequal": "^4.5.0",
     "react-dnd": "14.0.4",
     "react-dnd-html5-backend": "^14.1.0",
-    "react-virtuoso": "^4.1.0"
+    "react-virtuoso": "^4.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",

src/react-sortable-tree.tsx

@@ -9,7 +9,7 @@ import withScrolling, {
 import isEqual from 'lodash.isequal'
 import { DndContext, DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
+import { Virtuoso, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso'
 import NodeRendererDefault from './node-renderer-default'
 import PlaceholderRendererDefault from './placeholder-renderer-default'
 import './react-sortable-tree.css'
@@ -186,6 +186,7 @@ class ReactSortableTree extends Component {
     super(props)
 
     this.listRef = props.virtuosoRef || React.createRef()
+    this.listProps = props.virtuosoProps || {}
 
     const { dndType, nodeContentRenderer, treeNodeRenderer, slideRegionSize } =
       mergeTheme(props)
@@ -721,6 +722,7 @@ class ReactSortableTree extends Component {
               swapLength,
             })
           }
+          {...this.listProps}
         />
       )
     }
@@ -814,6 +816,10 @@ export type ReactSortableTreeProps = {
   // Class name for the container wrapping the tree
   className?: string
 
+  // Properties passed directly to the underlying Virtuoso component
+  // See https://virtuoso.dev/virtuoso-api-reference/#virtuoso-properties
+  virtuosoProps?: VirtuosoProps
+
   // Ref for Virtuoso component
   // Use virtuosoRef when you wont to use virtuoso handler
   // (ex. scrollTo scrollToIndex)

stories/index.js

@@ -18,6 +18,7 @@ import ThemesExample from './themes'
 import TouchSupportExample from './touch-support'
 import TreeDataIOExample from './tree-data-io'
 import TreeToTreeExample from './tree-to-tree'
+import VirtuosoPropsExample from './virtuoso-props'
 
 storiesOf('Basics', module)
   .add('Minimal implementation', () => <BarebonesExample />)
@@ -29,6 +30,7 @@ storiesOf('Basics', module)
   .add('Themes', () => <ThemesExample />)
   .add('Callbacks', () => <CallbacksExample />)
   .add('Row direction support', () => <RowDirectionExample />)
+  .add('Virtuoso properties', () => <VirtuosoPropsExample />)
 
 storiesOf('Advanced', module)
   .add('Drag from external source', () => <ExternalNodeExample />)

stories/virtuoso-props.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import SortableTree from '../src'
+// In your own app, you would need to use import styles once in the app
+// import 'react-sortable-tree/styles.css';
+
+export default class App extends Component {
+  constructor(props) {
+    super(props)
+
+    this.virtuosoRef = React.createRef()
+
+    this.state = {
+      isScrolling: false,
+      scrollTop: 0,
+      treeData: [
+        {
+          title: 'Chicken',
+          expanded: true,
+          children: [
+            { title: 'Egg' },
+            { title: 'Egg' },
+            { title: 'Egg' },
+            { title: 'Egg' },
+            { title: 'Egg' },
+            { title: 'Egg' },
+            { title: 'Egg' },
+          ],
+        },
+      ],
+    }
+  }
+
+  isScrolling = scrollingState => {
+    if (this.virtuosoRef?.current) {
+      this.virtuosoRef?.current.getState(virtuosoState => {
+        this.setState(prevState => ({
+          ...prevState,
+          ...{
+            isScrolling: scrollingState,
+            scrollTop: virtuosoState.scrollTop,
+          },
+        }))
+      })
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <div style={{ height: 300 }}>
+          <SortableTree
+            treeData={this.state.treeData}
+            onChange={treeData => this.setState({ treeData })}
+            virtuosoRef={this.virtuosoRef}
+            virtuosoProps={{ isScrolling: this.isScrolling }}
+          />
+        </div>
+        <hr />
+        Current scrollTop:{' '}
+        {this.state.isScrolling ? '...' : this.state.scrollTop}
+      </div>
+    )
+  }
+}