Merge pull request #864 from YannickRe/v2-dev

[V2] Fix default item selection in TreeView

Author: AJIXuMuK

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
       });