onPanelSelectionChange for TaxonomyPicker (#761)

Author: AJIXuMuK

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -172,6 +172,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | onGetErrorMessage | (value: IPickerTerms) => string \| Promise&lt;string&gt; | no | The method is used to get the validation error message and determine whether the picker value is valid or not. Mutually exclusive with the static string `errorMessage` (it will take precedence over this).<br />When it returns string:<ul><li>If valid, it returns empty string.</li><li>If invalid, it returns the error message string to be shown below the picker.</li></ul><br />When it returns Promise&lt;string&gt;:<ul><li>The resolved value is display as error message.</li><li>The rejected, the value is thrown away.</li></ul> |
 | required | boolean | no | Specifies if to display an asterisk near the label. Note that error message should be specified in `onGetErrorMessage` or `errorMessage` |
 | useSessionStorage | boolean | no | Specify if the control uses session storage. Default is set to true for better performance. |
+| onPanelSelectionChange | (prevValue: IPickerTerms, newValue: IPickerTerms) => void | no | Panel selection change handler. Can be used to interact with the control while selecting items in the panel, before Click or Cancel is clicked. |
 
 
 Interface `IPickerTerm`

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -126,6 +126,11 @@ 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;
 }
 
 /**

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -231,7 +231,7 @@ 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;
     }
@@ -262,10 +262,16 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     }
     // 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
     });
+
   }
 
   /**

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -746,7 +746,11 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                 // new TermLabelAction("Get Labels")
               ],
               termActionsDisplayMode: TermActionsDisplayMode.buttons,
-              termActionsDisplayStyle: TermActionsDisplayStyle.textAndIcon
+              termActionsDisplayStyle: TermActionsDisplayStyle.textAndIcon,
+            }}
+            onPanelSelectionChange={(prev, next) => {
+              console.log(prev);
+              console.log(next);
             }}
           />