feat: Add scrollToIndex (#53)

* add scroll to index

* add scroll to index

* Remove useless index argument

* Moving logic into TreeContainer

* remove comma

* Add scrollToId to TreeContainer interface

Author: Avivhdr

index.d.ts

@@ -35,6 +35,7 @@ export interface TreeProps {
   onChange: (nodes: Node[]) => void;
   children: (props: RendererProps) => JSX.Element
   nodeMarginLeft?: number;
+  scrollToId?: number;
 }
 
 export default class Tree extends React.Component<TreeProps> {}

src/Tree.js

@@ -32,7 +32,7 @@ export default class Tree extends React.Component {
   };
 
   render() {
-    const {nodes} = this.props;
+    const {nodes, scrollToIndex} = this.props;
 
     return (
       <AutoSizer>
@@ -45,6 +45,7 @@ export default class Tree extends React.Component {
             rowHeight={this._cache.rowHeight}
             rowRenderer={this.measureRowRenderer(nodes)}
             width={width}
+            scrollToIndex={scrollToIndex}
           />
         )}
       </AutoSizer>

src/TreeContainer.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Tree from './Tree';
 import {UPDATE_TYPE} from './contants';
 import {getFlattenedTree} from './selectors/getFlattenedTree';
-import {deleteNodeFromTree, replaceNodeFromTree} from './selectors/nodes';
+import {deleteNodeFromTree, replaceNodeFromTree, getRowIndexFromId} from './selectors/nodes';
 import {Node} from './shapes/nodeShapes';
 import {createSelector} from 'reselect';
 
@@ -42,13 +42,17 @@ export default class TreeContainer extends React.Component {
     this.props.onChange(updatedNodes);
   };
 
+  
   render() {
+    const flattenedTree = getFlattenedTree(this.props.nodes) 
+    const rowIndex = getRowIndexFromId(flattenedTree, this.props.scrollToId);
     return (
       <Tree
         nodeMarginLeft={this.props.nodeMarginLeft}
-        nodes={getFlattenedTree(this.props.nodes)}
+        nodes={flattenedTree}
         onChange={this.handleChange}
         NodeRenderer={this.props.children}
+        scrollToIndex={rowIndex}
       />
     );
   }
@@ -62,6 +66,7 @@ TreeContainer.propTypes = {
   onChange: PropTypes.func,
   children: PropTypes.func.isRequired,
   nodeMarginLeft: PropTypes.number,
+  scrollToId: PropTypes.number,
 };
 
 TreeContainer.defaultProps = {

src/selectors/nodes.js

@@ -3,6 +3,8 @@ import omit from 'lodash.omit';
 
 import {UPDATE_TYPE} from '../contants';
 
+export { getFlattenedTree } from './getFlattenedTree';
+
 export const getNodeRenderOptions = createSelector(
   node => (node.state || {}).expanded,
   node => (node.state || {}).favorite,
@@ -86,3 +88,6 @@ export const addNode = node => ({
   node,
   type: UPDATE_TYPE.ADD,
 });
+
+export const getRowIndexFromId = (flattenedTree, id) => 
+  flattenedTree.findIndex((node) => node.id === id);