Add onPanelSelectionChange and selectChildrenIfParentSelected properties

Author: Whiteshark57

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -1,4 +1,4 @@
-import { IPickerTerms } from './ITermPicker';
+import { IPickerTerm, IPickerTerms } from './ITermPicker';
 import { ITermSet, ITerm } from '../../services/ISPTermStorePickerService';
 import { IWebPartContext } from '@microsoft/sp-webpart-base';
 import { ITermActions } from './termActions/ITermsActions';
@@ -126,6 +126,17 @@ export interface ITaxonomyPickerProps  {
    * Default will be true
    */
    useSessionStorage?: boolean;
+
+   /**
+   * Panel selection change handler. Can be used to interact with the control while selecting items in the panel, before Click or Cancel is clicked.
+   */
+  onPanelSelectionChange?: (prevValue: IPickerTerms, newValue: IPickerTerms) => void;
+
+  /**
+   * Specifies if the childrens should be selected when parent is selected.
+   * By default this is set to false.
+   */
+  selectChildrenIfParentSelected?: boolean;
 }
 
 /**

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -15,8 +15,9 @@ import { sortBy, cloneDeep, isEqual } from '@microsoft/sp-lodash-subset';
 import uniqBy = require('lodash/uniqBy');
 import TermParent from './TermParent';
 import FieldErrorMessage from './ErrorMessage';
-
+import { initializeIcons } from '@uifabric/icons';
 import * as telemetry from '../../common/telemetry';
+import { EmptyGuid } from '../../common/Constants';
 
 /**
  * Image URLs / Base64
@@ -27,6 +28,8 @@ export const GROUP_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ
 export const TERMSET_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACaSURBVDhPrZLRCcAgDERdpZMIjuQA7uWH4CqdxMY0EQtNjKWB0A/77sxF55SKMTalk8a61lqCFqsLiwKac84ZRUUBi7MoYHVmAfjfjzE6vJqZQfie0AcwBQVW8ATi7AR7zGGGNSE6Q2cyLSPIjRswjO7qKhcPDN2hK46w05wZMcEUIG+HrzzcrRsQBIJ5hS8C9fGAPmRwu/9RFxW6L8CM4Ry8AAAAAElFTkSuQmCC'; // /_layouts/15/Images/EMMTermSet.png
 export const TERM_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACzSURBVDhPY2AYNKCoqIgTiOcD8X8S8F6wB4Aa1IH4akNDw+mPHz++/E8EuHTp0jmQRSDNCcXFxa/XrVt3gAh9KEpgBvx/9OjRLVI1g9TDDYBp3rlz5//Kysr/IJoYgGEASPPatWsbQDQxAMOAbdu2gZ0FookBcAOePHlyhxgN6GqQY+Hdhg0bDpJqCNgAaDrQAnJuNDY2nvr06dMbYgw6e/bsabgBUEN4yEiJ2wdNViLfIQC3sTh2vtJcswAAAABJRU5ErkJggg==';
 
+initializeIcons();
+
 /**
  * Renders the controls for PropertyFieldTermPicker component
  */
@@ -89,7 +92,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       };
     }
 
-    if (nextProps.errorMessage) {
+    if (nextProps.errorMessage !== this.props.errorMessage) {
       if (!newState) {
         newState = {};
       }
@@ -230,11 +233,20 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
    */
   private termsChanged(term: ITerm, checked: boolean): void {
 
-    let activeNodes = this.state.activeNodes;
+    let activeNodes = this.state.activeNodes.slice();
     if (typeof term === 'undefined' || term === null) {
       return;
     }
 
+    const {
+      allowMultipleSelections,
+      selectChildrenIfParentSelected
+    } = this.props;
+
+    const {
+      termSetAndTerms
+    } = this.state;
+
     // Term item to add to the active nodes array
     const termItem = {
       name: term.Name,
@@ -243,24 +255,58 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       termSet: term.TermSet.Id
     };
 
+    // Check if we need to process child terms
+    let children: ITerm[] = [];
+    if (allowMultipleSelections && selectChildrenIfParentSelected) {
+      if (term.Id === term.TermSet.Id) {
+        children = termSetAndTerms.Terms || [];
+      } else {
+        children = termSetAndTerms.Terms ? termSetAndTerms.Terms.filter(t => {
+          return t.PathOfTerm.indexOf(`${term.PathOfTerm}`) !== -1;
+        }) : [];
+      }
+    }
+
     // Check if the term is checked or unchecked
     if (checked) {
       // Check if it is allowed to select multiple terms
-      if (this.props.allowMultipleSelections) {
+      if (allowMultipleSelections) {
         // Add the checked term
         activeNodes.push(termItem);
-        // Filter out the duplicate terms
-        activeNodes = uniqBy(activeNodes, 'key');
       } else {
         // Only store the current selected item
         activeNodes = [termItem];
       }
+
+      if (children.length) {
+        activeNodes.push(...children.map(c => {
+          return {
+            name: c.Name,
+            key: c.Id,
+            path: c.PathOfTerm,
+            termSet: c.TermSet.Id
+          };
+        }));
+      }
+
+      // Filter out the duplicate terms
+      activeNodes = uniqBy(activeNodes, 'key');
     } else {
       // Remove the term from the list of active nodes
       activeNodes = activeNodes.filter(item => item.key !== term.Id);
+
+      if (children.length) {
+        const childIds = children.map(c => c.Id);
+        activeNodes = activeNodes.filter(item => childIds.indexOf(item.key) === -1);
+      }
     }
     // Sort all active nodes
     activeNodes = sortBy(activeNodes, 'path');
+
+    if (this.props.onPanelSelectionChange) {
+      this.props.onPanelSelectionChange(this.state.activeNodes.slice(), activeNodes);
+    }
+
     // Update the current state
     this.setState({
       activeNodes: activeNodes
@@ -313,22 +359,51 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     return input;
   }
 
+  private async validateOnGetErrorMessage(targetValue: string): Promise<boolean> {
+    const errorMessage = await this.props.onGetErrorMessage(
+      [
+        {
+          key: EmptyGuid,
+          name: targetValue,
+          path: targetValue,
+          termSet: this.termsService.cleanGuid(this.props.termsetNameOrID)
+        }
+      ]
+    );
+
+    if (!!errorMessage) {
+      this.setState({
+        errorMessage: errorMessage
+      });
+    } else {
+      this.setState({
+        errorMessage: null
+      });
+    }
+
+    return !errorMessage;
+  }
+
   /**
    * Triggers when taxonomy picker control loses focus
    */
-  private onBlur(event: React.FocusEvent<HTMLElement | Autofill>): void {
+  private async onBlur(event: React.FocusEvent<HTMLElement | Autofill>): Promise<void> {
     const { validateInput } = this.props;
     if (!!validateInput) {
       // Perform validation of input text, only if taxonomy picker is configured with validateInput={true} property.
       const target: HTMLInputElement = event.target as HTMLInputElement;
       const targetValue = !!target ? target.value : null;
-      if (!!targetValue) {
-        this.invalidTerm = targetValue;
-      }
-      else {
-        this.invalidTerm = null;
+      if (!!this.props.onGetErrorMessage && !!targetValue) {
+        await this.validateOnGetErrorMessage(targetValue);
+      } else {
+        if (!!targetValue) {
+          this.invalidTerm = targetValue;
+        }
+        else {
+          this.invalidTerm = null;
+        }
+        this.validateInputText();
       }
-      this.validateInputText();
     }
   }
 
@@ -404,6 +479,9 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     if (typeof result === 'string') {
       if (!result) {
         this.validated(value);
+        this.setState({
+          errorMessage: undefined
+        });
       }
       else {
         this.setState({
@@ -417,6 +495,9 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
 
         if (!resolvedResult) {
           this.validated(value);
+          this.setState({
+            errorMessage: undefined
+          });
         }
         else {
           this.setState({

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -658,6 +658,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         <div className="ms-font-m">Services tester:
           <TaxonomyPicker
             allowMultipleSelections={true}
+            selectChildrenIfParentSelected={true}
             //termsetNameOrID="61837936-29c5-46de-982c-d1adb6664b32" // id to termset that has a custom sort
             termsetNameOrID="8ea5ac06-fd7c-4269-8d0d-02f541df8eb9"
             initialValues={[{
@@ -709,6 +710,10 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               termActionsDisplayMode: TermActionsDisplayMode.buttons,
               termActionsDisplayStyle: TermActionsDisplayStyle.textAndIcon
             }}
+            onPanelSelectionChange={(prev, next) => {
+              console.log(prev);
+              console.log(next);
+            }}
           />
 
           <TaxonomyPicker