Fix for Enhancement #559

Fix for Enhancement #559.

Author: siddharth-vaghasia

docs/documentation/docs/controls/TreeView.md

@@ -37,7 +37,8 @@ import { TreeView, ITreeItem } from "@pnp/spfx-controls-react/lib/TreeView";
     selectChildrenIfParentSelected={true}
     showCheckboxes={true}
     treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
-    defaultSelectedKeys=['key1', 'key2'],
+    defaultSelectedKeys={['key1', 'key2']},
+    expandToSelected={true}
     onSelect={this.onTreeItemSelect}
     onExpandCollapse={this.onTreeItemExpandCollapse}
     onRenderItem={this.renderCustomTreeItem} />
@@ -93,6 +94,7 @@ The TreeView control can be configured with the following properties:
 | showCheckboxes                 | boolean                    | yes      | Specify if the checkboxes should be displayed for selection.                                                                       |
 | treeItemActionsDisplayMode     | TreeItemActionsDisplayMode | no       | Specify the display mode of the tree item actions.                                                                                 |
 | defaultSelectedKeys            | string[]                   | no       | Specify keys of items to be selected by default.                                                                                   |
+| expandToSelected               | boolean                    | no       | Specify if you want expand the parent nodes to see defaultSelectedKeys on render.                                                                                   |
 | onExpandCollapse               | function                   | no       | Defines a onExpandCollapse function to raise when the tree item has expanded or collapsed.                                         |
 | onSelect                       | function                   | no       | Captures the event of when the tree item selection has changed.                                                                    |
 | onRenderItem                   | function                   | no       | Optional callback to provide custom rendering of the item (default is simple text of item label and a checkbox for selection).     |

src/controls/treeView/ITreeViewProps.ts

@@ -46,6 +46,11 @@ export interface ITreeViewProps {
    */
   defaultSelectedKeys?: string[];
 
+   /**
+   * Specify if you want expand the parent nodes to see defaultSelectedKeys on render.
+   */
+  expandToSelected?:boolean;
+
   /**
    * Callback function called after a item is expanded / collapsed.
    * @argument item The expanded / collapsed item.

src/controls/treeView/TreeItem.tsx

@@ -59,8 +59,12 @@ export interface ITreeItemProps {
    * Customize how item is rendered.
    */
   onRenderItem?: (item: ITreeItem) => JSX.Element;
+
+  tobeExpandedParents:any[];
 }
 
+
+
 /**
  * TreeItem state interface
  */
@@ -97,9 +101,16 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
     // Check if current item is selected
     let active = this.props.activeItems.filter(item => item.key === this.props.treeItem.key);
 
+    var expanded = this.props.defaultExpanded;
+    if(this.props.tobeExpandedParents.indexOf(this.props.treeItem.key) != -1)
+    {
+        expanded = true;
+    }
+
     this.state = {
       selected: active.length > 0,
-      expanded: this.props.defaultExpanded
+      // expanded: this.props.defaultExpanded
+       expanded: expanded
     };
 
     // Bind control events
@@ -214,7 +225,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
         return (
           <TreeItem
             treeItem={item}
-            defaultExpanded={treeItem.key === item.key ? this.state.expanded : false}
+            defaultExpanded={this.state.expanded}
             leftOffset={paddingLeft}
             selectionMode={selectionMode}
             activeItems={activeItems}
@@ -224,6 +235,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
             onRenderItem={onRenderItem}
             showCheckboxes={showCheckboxes}
             treeItemActionsDisplayMode={treeItemActionsDisplayMode}
+            tobeExpandedParents = {this.props.tobeExpandedParents}
           />
         );
       });

src/controls/treeView/TreeView.tsx

@@ -12,6 +12,7 @@ import * as telemetry from '../../common/telemetry';
  */
 export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
 
+  private tobeExpandedParents = [];
   /**
    * Constructor method
    * @param props properties interface
@@ -29,8 +30,36 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
     // Bind control events
     this.handleTreeExpandCollapse = this.handleTreeExpandCollapse.bind(this);
     this.handleOnSelect = this.handleOnSelect.bind(this);
+
+    if(this.props.expandToSelected){
+    this.props.defaultSelectedKeys.forEach(element => {
+      this.pathTo(this.props.items, element)
+    });
+    console.log("tobeExpandedParents",this.tobeExpandedParents);
+    }
+
+    
   }
 
+
+  private pathTo = (array, target) => {
+    var result;
+    array.some(({ key, children = [] }) => {
+        if (key === target) 
+        {
+          this.tobeExpandedParents.push(key);
+          return result = key;
+        }
+        var temp = this.pathTo(children, target)
+        if (temp) 
+        {
+          this.tobeExpandedParents.push(key);
+          return result = key + '.' + temp;
+        }
+    });
+    return result;
+  };
+
   private getSelectedItems(treeItems: ITreeItem[], selectedKeys: string[], selectedChildren: boolean): ITreeItem[] {
     let selectedItems: ITreeItem[] = [];
 
@@ -176,7 +205,8 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
       selectionMode,
       onRenderItem,
       showCheckboxes,
-      treeItemActionsDisplayMode
+      treeItemActionsDisplayMode,
+      defaultExpanded
     } = this.props;
 
     return (
@@ -187,14 +217,15 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
               treeItem={treeNodeItem}
               leftOffset={20}
               isFirstRender={true}
-              defaultExpanded={true}
+              defaultExpanded={defaultExpanded}
               selectionMode={selectionMode}
               activeItems={this.state.activeItems}
               parentCallbackExpandCollapse={this.handleTreeExpandCollapse}
               parentCallbackOnSelect={this.handleOnSelect}
               onRenderItem={onRenderItem}
               showCheckboxes={showCheckboxes}
               treeItemActionsDisplayMode={treeItemActionsDisplayMode}
+              tobeExpandedParents = {this.tobeExpandedParents}
             />
           ))
         }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -952,9 +952,10 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             selectionMode={TreeViewSelectionMode.Multiple}
             showCheckboxes={true}
             treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
-            defaultSelectedKeys={['R2', '6']}
+            defaultSelectedKeys={['gc1', 'gc3']}
             onExpandCollapse={this.onExpandCollapseTree}
             onSelect={this.onItemSelected}
+            expandToSelected={true}
             // onRenderItem={this.renderCustomTreeItem}
             />
 
@@ -1090,12 +1091,57 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         {
           key: "8",
           label: "Parent 5"
+        },
+        {
+          key: "9",
+          label: "Parent 6",
+          children: [
+            {
+              key: "granchild",
+              label: "Child of Parent 6"
+            },
+          ]
+        },
+        {
+          key: "10",
+          label: "Parent 7"
+        },
+        {
+          key: "11",
+          label: "Parent 8"
+        }
+      ]
+    },
+    {
+      key: "R3",
+      label: "Root 3",
+      children: [
+        {
+          key: "12",
+          label: "Parent 9"
+        },
+        {
+          key: "13",
+          label: "Parent 10"
+        },
+        {
+          key: "14",
+          label: "Parent 11",
+          children: [
+            {
+              key: "gc3",
+              label: "Grand Child 2"
+            }]
+        },
+        {
+          key: "15",
+          label: "Parent 12"
         }
       ]
     }
   ];
 
-  private _onFolderSelect = (folder: IFolder): void => {
-    console.log('selected folder', folder);
-  }
+  // private _onFolderSelect = (folder: IFolder): void => {
+  //   console.log('selected folder', folder);
+  // }
 }