Fix to keep traversing tree, even if parent is selected. Potentially some children's keys are passed in as well to be default selected.

Added way more flexibility to decide when in the lifecycle the children of a selected item should be selected too.

Author: YannickRe

docs/documentation/docs/controls/TreeView.md

@@ -34,7 +34,7 @@ import { TreeView, ITreeItem, TreeViewSelectionMode } from "@pnp/spfx-controls-r
     items={treeitems}
     defaultExpanded={false}
     selectionMode={TreeViewSelectionMode.Multiple}
-    selectChildrenIfParentSelected={true}
+    selectChildrenMode={SelectChildrenMode.Select | SelectChildrenMode.Unselect}
     showCheckboxes={true}
     treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
     defaultSelectedKeys={['key1', 'key2']}
@@ -91,7 +91,8 @@ The `TreeView` control can be configured with the following properties:
 | 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.                                                |
 | 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).                                      |
+| selectChildrenIfParentSelected | boolean                    | no       | Specifies if the children should be selected when parent item is selected (defaults to false). __Deprecated__: prefer usage of `selectChildrenMode` for more flexibility.                                      |
+| selectChildrenMode | SelectChildrenMode                    | no       | Specifies if the children should be selected when parent item is selected (defaults to None). Flagged enum, values can be combined eg. `SelectChildrenMode.Select \| SelectChildrenMode.Unselect`                                     |
 | showCheckboxes                 | boolean                    | yes      | Specify if the checkboxes should be displayed for selection.                                                                       |
 | treeItemActionsDisplayMode     | TreeItemActionsDisplayMode | no       | Specifies the display mode of the tree item actions.                                                                                 |
 | defaultSelectedKeys            | string[]                   | no       | Specifies keys of items to be selected by default.                                                                                   |
@@ -111,6 +112,19 @@ Specifies the selection mode of tree item.
 | Multiple |
 | None     |
 
+Enum `SelectChildrenMode`
+
+Specifies when the children of a selected item need to be automatically selected.
+
+| Value    | Description                                                      |
+|----------|------------------------------------------------------------------|
+| None   | Children are never selected                                        |
+| Select | When selecting an item, its children are also selected             |
+| Unselect     | When unselecting an item, its children are also unselected   |
+| Mount     | When the component is mounted, all children of selected items are also selected |
+| Update     | When the component receives new props, all children of selected items are also selected |
+| All     | Shorthand for a combination of all of the above, same as `SelectChildrenMode.Select \| SelectChildrenMode.Unselect \| SelectChildrenMode.Mount \| SelectChildrenMode.Update` |                    |
+
 Interface `ITreeItem`
 
 Each tree item in the `treeitems` property is defined as `ITreeItem` as follows:

src/controls/treeView/ITreeViewProps.ts

@@ -10,6 +10,15 @@ export enum TreeViewSelectionMode {
   None = 2
 }
 
+export enum SelectChildrenMode {
+  None = 0,
+  Select = 1 << 0, // 0001
+  Unselect = 1 << 1,     // 0010
+  Mount = 1 << 2,    // 0100
+  Update = 1 << 3,   // 1000
+  All = ~(~0 << 4)   // 1111
+}
+
 /**
  * TreeView properties interface
  */
@@ -29,10 +38,16 @@ export interface ITreeViewProps {
    */
   selectionMode?: TreeViewSelectionMode;
   /**
+   * @deprecated Use selectChildrenMode instead
    * Specifies if the childrens should be selected when parent is selected.
    * By default this is set to false.
    */
   selectChildrenIfParentSelected?: boolean;
+    /**
+   * Specifies if the childrens should be selected when parent is selected. Flagged enum, so values can be combined eg. SelectChildrenMode.Select | SelectChildrenMode.Unselect
+   * By default this is set to None.
+   */
+  selectChildrenMode?: SelectChildrenMode;
   /**
   * Specifies if the checkboxes should be displayed for selection.
   */

src/controls/treeView/TreeView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from './TreeView.module.scss';
 import uniqBy from 'lodash/uniqBy';
-import { ITreeViewProps, TreeViewSelectionMode } from './ITreeViewProps';
+import { ITreeViewProps, SelectChildrenMode, TreeViewSelectionMode } from './ITreeViewProps';
 import { ITreeViewState } from './ITreeViewState';
 import { ITreeItem } from './ITreeItem';
 import TreeItem from './TreeItem';
@@ -68,6 +68,11 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
         if (selectedChildren) {
           this.selectAllChildren(item, selectedItems);
         }
+        else {
+          if (item.children) {
+            selectedItems.push(...this.getSelectedItems(item.children, selectedKeys, selectedChildren));
+          }
+        }
       }
       else {
         if (item.children) {
@@ -138,7 +143,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
         // Add the checked term
         selectedItems.push(item);
 
-        if (this.props.selectChildrenIfParentSelected) {
+        if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Select)) {
           this.selectAllChildren(item, selectedItems);
         }
 
@@ -163,7 +168,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
       let unselectArray: string[] = [];
       unselectArray.push(item.key);
 
-      if (this.props.selectChildrenIfParentSelected) {
+      if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Unselect)) {
         this.unSelectChildren(item, unselectArray);
       }
 
@@ -181,14 +186,30 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
     }
   }
 
+  private checkIfChildrenShouldBeSelected(testMode: SelectChildrenMode) {
+    let selectChildrenMode = SelectChildrenMode.None;
+    if (this.props.selectChildrenMode) {
+      selectChildrenMode = this.props.selectChildrenMode;
+    }
+    else {
+      if (this.props.selectChildrenIfParentSelected) {
+        selectChildrenMode = SelectChildrenMode.All;
+      }
+    }
+
+    if ((selectChildrenMode & testMode) === testMode) {
+      return true;
+    }
+    return false;
+  }
+
   public componentDidMount() {
     const {
       items,
-      defaultSelectedKeys,
-      selectChildrenIfParentSelected
+      defaultSelectedKeys
     } = this.props;
     if (defaultSelectedKeys) {
-      const selectedItems = this.getSelectedItems(items, defaultSelectedKeys, selectChildrenIfParentSelected);
+      const selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Mount));
       this.setState({
         activeItems: selectedItems
       });
@@ -198,11 +219,10 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
   public componentWillReceiveProps(nextProps: ITreeViewProps): void {
     const {
       items,
-      defaultSelectedKeys,
-      selectChildrenIfParentSelected,
+      defaultSelectedKeys
     } = nextProps;
     if (defaultSelectedKeys) {
-      const selectedItems = !defaultSelectedKeys ? [] : this.getSelectedItems(items, defaultSelectedKeys, selectChildrenIfParentSelected);
+      const selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Update));
       this.setState({
         activeItems: selectedItems
       });