clear tree-view selected options when empty array

Author: joelfmrodrigues

scripts/create-changelog.js

@@ -1,4 +1,4 @@
-const changelog = require('../CHANGELOG.json');
+const changelog = require('../CHANGELOG.JSON');
 const fs = require('fs');
 
 if (changelog.versions && changelog.versions.length > 0) {

src/controls/treeView/TreeView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from './TreeView.module.scss';
-import uniqBy  from 'lodash/uniqBy';
+import uniqBy from 'lodash/uniqBy';
 import { ITreeViewProps, TreeViewSelectionMode } from './ITreeViewProps';
 import { ITreeViewState } from './ITreeViewState';
 import { ITreeItem } from './ITreeItem';
@@ -193,6 +193,20 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
     }
   }
 
+  public componentWillReceiveProps(nextProps: ITreeViewProps): void {
+    const {
+      items,
+      defaultSelectedKeys,
+      selectChildrenIfParentSelected,
+    } = nextProps;
+    if (defaultSelectedKeys) {
+      const selectedItems = !defaultSelectedKeys ? [] : this.getSelectedItems(items, defaultSelectedKeys, selectChildrenIfParentSelected);
+      this.setState({
+        activeItems: selectedItems
+      });
+    }
+  }
+
   /**
    * Default React render method
    */

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -310,7 +310,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       canMovePrev: false,
       canMoveNext: true,
       currentCarouselElement: this.carouselElements[0],
-      comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da'
+      comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da',
+      treeViewSelectedKeys: ['gc1', 'gc3'],
     };
 
     this._onIconSizeChange = this._onIconSizeChange.bind(this);
@@ -1347,13 +1348,14 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             selectionMode={TreeViewSelectionMode.Multiple}
             showCheckboxes={true}
             treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
-            defaultSelectedKeys={['gc1', 'gc3']}
+            defaultSelectedKeys={this.state.treeViewSelectedKeys}
             onExpandCollapse={this.onExpandCollapseTree}
             onSelect={this.onItemSelected}
             defaultExpandedChildren={true}
-          //expandToSelected={true}
-          // onRenderItem={this.renderCustomTreeItem}
+            //expandToSelected={true}
+            // onRenderItem={this.renderCustomTreeItem}
           />
+          <PrimaryButton onClick={() => { this.setState({ treeViewSelectedKeys: [] }); }}>Clear selection</PrimaryButton>
 
         </div>
 

src/webparts/controlsTest/components/IControlsTestProps.ts

@@ -29,6 +29,6 @@ export interface IControlsTestState {
   canMovePrev: boolean;
   canMoveNext: boolean;
   comboBoxListItemPickerListId: string;
-
   filePickerResult?: IFilePickerResult;
+  treeViewSelectedKeys?: string[];
 }