Merge pull request #1084 from amirmsai/predefined-nodeToExpand

#default expanded treeItem
pnp · Mar 18, 2022 · fa80567 · fa80567
2 parents 96dae2f + 451a2b9
commit fa80567
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/controls/treeView/ITreeViewProps.ts b/src/controls/treeView/ITreeViewProps.ts
@@ -56,6 +56,10 @@ export interface ITreeViewProps {
    * Display mode of the tree item actions.
    */
   treeItemActionsDisplayMode?: TreeItemActionsDisplayMode;
+  /**
+   * Keys of items expanded by default
+   */
+   defaultExpandedKeys?: string[];
   /**
    * Keys of items selected by default
    */

diff --git a/src/controls/treeView/TreeItem.tsx b/src/controls/treeView/TreeItem.tsx
@@ -106,7 +106,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
     let active = props.activeItems.filter(item => item.key === props.treeItem.key);
 
     let expanded = props.defaultExpanded;
-    if (props.nodesToExpand.indexOf(props.treeItem.key) != -1) {
+    if (!expanded && props.nodesToExpand.indexOf(props.treeItem.key) != -1) {
       expanded = true;
     }
 
@@ -150,12 +150,20 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
    */
   public componentWillReceiveProps(nextProps: ITreeItemProps): void {
     // If selection is turned on, set the item as selected
-    if (this.props.selectionMode != TreeViewSelectionMode.None) {
+   if (this.props.selectionMode != TreeViewSelectionMode.None) {
       let active = nextProps.activeItems.filter(item => item.key === this.props.treeItem.key);
 
+      let _isExpanded:boolean=this.state.expanded;
+      if(!_isExpanded &&  this.props.nodesToExpand.indexOf(this.props.treeItem.key) != -1) {
+        _isExpanded = true;
+      }
+      if(_isExpanded && this.props.nodesToExpand.indexOf(this.props.treeItem.key) == -1){
+        _isExpanded=false;
+      }
+
       this.setState({
         selected: active.length > 0,
-        expanded: this.state.expanded
+        expanded: _isExpanded
       });
     }
   }

diff --git a/src/controls/treeView/TreeView.tsx b/src/controls/treeView/TreeView.tsx
@@ -240,7 +240,8 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
       showCheckboxes,
       treeItemActionsDisplayMode,
       defaultExpanded,
-      defaultExpandedChildren
+      defaultExpandedChildren,
+      defaultExpandedKeys
     } = this.props;
 
     return (
@@ -260,7 +261,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
               onRenderItem={onRenderItem}
               showCheckboxes={showCheckboxes}
               treeItemActionsDisplayMode={treeItemActionsDisplayMode}
-              nodesToExpand={this.nodesToExpand}
+              nodesToExpand={defaultExpandedKeys}
             />
           ))
         }