Enhancement #82

Author: estruyf

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Releases
 
+## 1.5.0
+
+**Enhancements**
+
+- Added a property to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#82](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/82)
+
 ## 1.4.0
 
 **New Controls**

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,11 @@
 # Releases
 
+## 1.5.0
+
+**Enhancements**
+
+- Added a property to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#82](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/82)
+
 ## 1.4.0
 
 **New Controls**

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -68,6 +68,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | termsetNameOrID | string | yes | The name or Id of your TermSet that you would like the Taxonomy Picker to chose terms from. |
 | onChange | function | no |  captures the event of when the terms in the picker has changed. |
 | isTermSetSelectable | boolean | no | Specify if the TermSet itself is selectable in the tree view. |
+| disabledTermIds | string[] | no | Specify which terms should be disabled in the term set so that they cannot be selected. |
 | anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. |
 
 Interface `IPickerTerm`

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "engines": {
     "node": ">=0.10.0"
   },

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -40,6 +40,10 @@ export interface ITaxonomyPickerProps  {
    * Specify if the term set itself is selectable in the tree view
    */
   isTermSetSelectable?: boolean;
+  /**
+   * Specify which terms should be disabled in the term set so that they cannot be selected
+   */
+  disabledTermIds?: string[];
   /**
    * Whether the property pane field is enabled or not.
    */
@@ -80,6 +84,7 @@ export interface ITaxonomyPickerState {
 export interface ITermChanges {
   changedCallback: (term: ITerm, checked: boolean) => void;
   activeNodes?: IPickerTerms;
+  disabledTermIds?: string[];
 }
 
 

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { IWebPartContext } from '@microsoft/sp-webpart-base';
-import { PrimaryButton, DefaultButton, IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { PrimaryButton, DefaultButton, IconButton } from 'office-ui-fabric-react/lib/Button';
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
 import { Spinner, SpinnerType } from 'office-ui-fabric-react/lib/Spinner';
-import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions } from '@microsoft/sp-http';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import TermPicker from './TermPicker';
-import { BasePicker, IBasePickerProps, IPickerItemProps } from 'office-ui-fabric-react/lib/Pickers';
 import { IPickerTerms, IPickerTerm } from './ITermPicker';
-import { ITaxonomyPickerProps, ITaxonomyPickerState, ITermParentProps, ITermParentState, ITermProps, ITermState } from './ITaxonomyPicker';
+import { ITaxonomyPickerProps, ITaxonomyPickerState } from './ITaxonomyPicker';
 import SPTermStorePickerService from './../../services/SPTermStorePickerService';
 import { ITermSet, IGroup, ITerm } from './../../services/ISPTermStorePickerService';
 import styles from './TaxonomyPicker.module.scss';
@@ -31,7 +28,6 @@ export const TERM_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQC
  * Renders the controls for PropertyFieldTermPicker component
  */
 export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxonomyPickerState> {
-  private delayedValidate: (value: IPickerTerms) => void;
   private termsService: SPTermStorePickerService;
   private previousValues: IPickerTerms = [];
   private cancel: boolean = true;
@@ -244,7 +240,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
                   isTermSetSelectable={this.props.isTermSetSelectable}
                   onChanged={this.termsFromPickerChanged}
                   allowMultipleSelections={this.props.allowMultipleSelections}
-                />
+                  disabledTermIds={this.props.disabledTermIds} />
               </td>
               <td className={styles.termFieldRow}>
                 <IconButton disabled={this.props.disabled} iconProps={{ iconName: 'Tag' }} onClick={this.onOpenPanel} />
@@ -286,6 +282,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
                             isTermSetSelectable={this.props.isTermSetSelectable}
                             termSetSelectedChange={this.termSetSelectedChange}
                             activeNodes={this.state.activeNodes}
+                            disabledTermIds={this.props.disabledTermIds}
                             changedCallback={this.termsChanged}
                             multiSelection={this.props.allowMultipleSelections} />
               </div>

src/controls/taxonomyPicker/Term.tsx

@@ -48,7 +48,22 @@ export default class Term extends React.Component<ITermProps, ITermState> {
     }
   }
 
+  /**
+   * Check if the current term needs to be disabled
+   */
+  private checkIfTermIsDisabled(): boolean {
+    // Check if disabled term IDs are provided
+    if (this.props.disabledTermIds && this.props.disabledTermIds.length > 0) {
+      // Check if the current term ID exists in the disabled term IDs array
+      return this.props.disabledTermIds.indexOf(this.props.term.Id) !== -1;
+    }
 
+    return false;
+  }
+
+  /**
+   * Default React render
+   */
   public render(): JSX.Element {
     const styleProps: React.CSSProperties = {
       marginLeft: `${(this.props.term.PathDepth * 30)}px`
@@ -58,7 +73,7 @@ export default class Term extends React.Component<ITermProps, ITermState> {
       <div className={`${styles.listItem} ${styles.term}`} style={styleProps}>
         <Checkbox
           checked={this.state.selected}
-          disabled={this.props.term.IsDeprecated}
+          disabled={this.props.term.IsDeprecated || this.checkIfTermIsDisabled()}
           className={this.props.term.IsDeprecated ? styles.termDisabled : styles.termEnabled}
           label={this.props.term.Name}
           onChange={this._handleChange} />

src/controls/taxonomyPicker/TermParent.tsx

@@ -73,32 +73,35 @@ export default class TermParent extends React.Component<ITermParentProps, ITermP
   }
 
 
+  /**
+   * Default React render method
+   */
   public render(): JSX.Element {
     // Specify the inline styling to show or hide the termsets
     const styleProps: React.CSSProperties = {
       display: this.state.expanded ? 'block' : 'none'
     };
 
     let termElm: JSX.Element = <div />;
-    // Check if the terms have been loaded
 
-      if (this.state.loaded) {
-        if (this._terms.length > 0) {
-          termElm = (
-            <div style={styleProps}>
-              {
-                this._terms.map(term => {
-                  return <Term key={term.Id} term={term} termset={this.props.termset.Id} activeNodes={this.props.activeNodes} changedCallback={this.props.changedCallback} multiSelection={this.props.multiSelection} />;
-                })
-              }
-            </div>
-          );
-        } else {
-          termElm = <div className={`${styles.listItem} ${styles.term}`}>{strings.TaxonomyPickerNoTerms}</div>;
-        }
+    // Check if the terms have been loaded
+    if (this.state.loaded) {
+      if (this._terms.length > 0) {
+        termElm = (
+          <div style={styleProps}>
+            {
+              this._terms.map(term => {
+                return <Term key={term.Id} term={term} termset={this.props.termset.Id} activeNodes={this.props.activeNodes} changedCallback={this.props.changedCallback} multiSelection={this.props.multiSelection} disabledTermIds={this.props.disabledTermIds} />;
+              })
+            }
+          </div>
+        );
       } else {
-        termElm = <Spinner type={SpinnerType.normal} />;
+        termElm = <div className={`${styles.listItem} ${styles.term}`}>{strings.TaxonomyPickerNoTerms}</div>;
       }
+    } else {
+      termElm = <Spinner type={SpinnerType.normal} />;
+    }
 
 
     return (

src/controls/taxonomyPicker/TermPicker.tsx

@@ -25,6 +25,8 @@ export interface ITermPickerProps {
   value: IPickerTerms;
   allowMultipleSelections : boolean;
   isTermSetSelectable?: boolean;
+  disabledTermIds?: string[];
+
   onChanged: (items: IPickerTerm[]) => void;
 }
 
@@ -83,7 +85,7 @@ export default class TermPicker extends React.Component<ITermPickerProps, ITermP
   /**
    * Renders the suggestions in the picker
    */
-  protected onRenderSuggestionsItem(term: IPickerTerm, props) {
+  protected onRenderSuggestionsItem(term: IPickerTerm) {
     let termParent = term.termSetName;
     let termTitle = `${term.name} [${term.termSetName}]`;
     if (term.path.indexOf(";") !== -1) {
@@ -125,6 +127,11 @@ export default class TermPicker extends React.Component<ITermPickerProps, ITermP
       // Filter out the terms which are already set
       const filteredTerms = [];
       for (const term of terms) {
+        // Check if term is not disabled
+        if (this.props.disabledTermIds && this.props.disabledTermIds.length > 0 && this.props.disabledTermIds.indexOf(term.key) !== -1) {
+          break;
+        }
+        // Only retrieve the terms which are not yet tagged
         if (tagList.filter(tag => tag.key === term.key).length === 0) {
           filteredTerms.push(term);
         }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -221,8 +221,9 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               <div className="ms-font-m">TaxonomyPicker tester:
                 <TaxonomyPicker
                   allowMultipleSelections={true}
-                  termsetNameOrID="8ed8c9ea-7052-4c1d-a4d7-b9c10bffea6f"
+                  termsetNameOrID="b3e9b754-2593-4ae6-abc2-35345402e186"
                   // anchorId="0ec2f948-3978-499e-9d3f-e51c4494d44c"
+                  disabledTermIds={["943fd9f0-3d7c-415c-9192-93c0e54573fb", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
                   panelTitle="Select Term"
                   label="Taxonomy Picker"
                   context={this.props.context}