Merge branch 'Abderahman88-TreeViewFix' into dev

Author: AJIXuMuK

docs/documentation/docs/controls/TreeView.md

@@ -39,6 +39,7 @@ import { TreeView, ITreeItem } from "@pnp/spfx-controls-react/lib/TreeView";
     treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
     defaultSelectedKeys={['key1', 'key2']},
     expandToSelected={true}
+    defaultExpandedChildren={true}
     onSelect={this.onTreeItemSelect}
     onExpandCollapse={this.onTreeItemExpandCollapse}
     onRenderItem={this.renderCustomTreeItem} />
@@ -88,7 +89,7 @@ The `TreeView` control can be configured with the following properties:
 | Property                       | Type                       | Required | Description                                                                                                                        |
 |--------------------------------|----------------------------|----------|------------------------------------------------------------------------------------------------------------------------------------|
 | items                          | ITreeItem[]                | yes      | An array of tree items to display. refer [example](#example-of-array-of-tree-items-used-to-render-control-as-in-first-screenshot). |
-| defaultExpanded                | boolean                    | no       | Specify if the tree items are displayed as expanded by default (defaults to false).                                                |
+| defaultExpanded                | boolean                    | no       | Specify if the tree items are displayed as expanded by default (defaults to false.                                                |
 | selectionMode                  | enum                       | no       | Specifies the selection mode of tree view (defaults to Single selection).                                                            |
 | selectChildrenIfParentSelected | boolean                    | no       | Specifies if the childrens should be selected when parent item is selected (defaults to false).                                      |
 | showCheckboxes                 | boolean                    | yes      | Specify if the checkboxes should be displayed for selection.                                                                       |
@@ -98,6 +99,7 @@ The `TreeView` control can be configured with the following properties:
 | 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).     |
+| defaultExpandedChildren        | boolean                    | no       | Default expand / collapse behavior for the child nodes. By default this is set to true. |
 
 Enum `TreeViewSelectionMode`
 

src/controls/treeView/ITreeViewProps.ts

@@ -67,4 +67,9 @@ export interface ITreeViewProps {
    * @argument item The tree item.
    */
   onRenderItem?: (item: ITreeItem) => JSX.Element;
+   /**
+   * Default expand / collapse behavior for the child nodes.
+   * By default this is set to true.
+   */
+  defaultExpandedChildren?: boolean;
 }

src/controls/treeView/TreeItem.tsx

@@ -61,6 +61,10 @@ export interface ITreeItemProps {
   onRenderItem?: (item: ITreeItem) => JSX.Element;
 
   nodesToExpand: any[];
+   /**
+   * Specifies whether current tree item's children should be rendered as expanded.
+   */
+  defaultExpandedChildren?: boolean;
 }
 
 
@@ -217,14 +221,18 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
         parentCallbackOnSelect,
         onRenderItem,
         showCheckboxes,
-        treeItemActionsDisplayMode
+        treeItemActionsDisplayMode,
+        defaultExpandedChildren
       } = this.props;
 
+      const { expanded } = this.state;
+
       let childrenWithHandlers = list.map((item, index) => {
         return (
           <TreeItem
             treeItem={item}
-            defaultExpanded={this.state.expanded}
+            defaultExpanded={defaultExpandedChildren ? expanded : expanded && !item.hasOwnProperty('children')}
+            defaultExpandedChildren={defaultExpandedChildren}
             leftOffset={paddingLeft}
             selectionMode={selectionMode}
             activeItems={activeItems}

src/controls/treeView/TreeView.tsx

@@ -203,7 +203,8 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
       onRenderItem,
       showCheckboxes,
       treeItemActionsDisplayMode,
-      defaultExpanded
+      defaultExpanded,
+      defaultExpandedChildren
     } = this.props;
 
     return (
@@ -215,6 +216,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
               leftOffset={20}
               isFirstRender={true}
               defaultExpanded={defaultExpanded}
+              defaultExpandedChildren={defaultExpandedChildren !== undefined ? defaultExpandedChildren : true}
               selectionMode={selectionMode}
               activeItems={this.state.activeItems}
               parentCallbackExpandCollapse={this.handleTreeExpandCollapse}

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -271,7 +271,13 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           children: [
             {
               key: "gc3",
-              label: "Child of Parent 10"
+              label: "Child of Parent 10",
+              children: [
+                {
+                  key: "ggc1",
+                  label: "Grandchild of Parent 10"
+                }
+              ]
             },
           ]
         },
@@ -1317,7 +1323,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             defaultSelectedKeys={['gc1', 'gc3']}
             onExpandCollapse={this.onExpandCollapseTree}
             onSelect={this.onItemSelected}
-          //expandToSelected={true}
+            defaultExpandedChildren={true}
+            //expandToSelected={true}
           // onRenderItem={this.renderCustomTreeItem}
           />