Merge branch 'dev' of https://github.com/siata13/sp-dev-fx-controls-react into siata13-dev

Author: estruyf

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -42,6 +42,7 @@ import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/Taxon
   context={this.props.context}
   onChange={this.onTaxPickerChange}
   isTermSetSelectable={false}
+  termActions={termActions}
 />
 ```
 
@@ -71,6 +72,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | disabledTermIds | string[] | no | Specify which terms should be disabled in the term set so that they cannot be selected. |
 | disableChildrenOfDisabledParents | boolean | no | Specify if you want to disable the child terms when their parent is disabled. |
 | anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. |
+| termActions | ITermActions | no | Allows to execute custom action on the term like e.g. get other term labelsITermActions. |
 
 Interface `IPickerTerm`
 
@@ -86,4 +88,18 @@ Interface `IPickerTerms`
 
 An Array of IPickerTerm
 
+Interface `ITermActions`
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| actions | ITermAction[] | yes | The array of supported actions |
+| termActionsDisplayStyle | TermActionsDisplayStyle | no | Defines how to display term action button, available options: text (default), icon, text and icon |
+| termActionsDisplayMode | TermActionsDisplayMode | no | Defines how to display term actions, as buttons (default) or dropdown |
+
+Interface `ITermAction`
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| id | string | yes | Unique id of the term action |
+| displayText | string | no | Name of the action |
+| iconName | string | no | Name of the icon to be used to display action |
+
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Placeholder)

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -1,8 +1,8 @@
 import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
 import { IPickerTerms } from './ITermPicker';
-import { ITermStore, IGroup, ITermSet, ITerm } from '../../services/ISPTermStorePickerService';
-import SPTermStorePickerService from '../../services/SPTermStorePickerService';
+import { ITermSet, ITerm } from '../../services/ISPTermStorePickerService';
 import { IWebPartContext } from '@microsoft/sp-webpart-base';
+import { ITermActions } from './termActions/ITermsActions';
 
 /**
  * PropertyFieldTermPickerHost properties interface
@@ -52,6 +52,17 @@ export interface ITaxonomyPickerProps  {
    * Whether the property pane field is enabled or not.
    */
   disabled?: boolean;
+
+  /**
+   * Include standard term actions.
+   */
+  includeDefaultTermActions?: boolean;
+
+  /**
+   * Specifies the available term actions and their basic properties.
+   */
+  termActions?: ITermActions;
+
   /**
    * The method is used to get the validation error message and determine whether the input value is valid or not.
    *
@@ -77,7 +88,6 @@ export interface ITaxonomyPickerProps  {
  * PropertyFieldTermPickerHost state interface
  */
 export interface ITaxonomyPickerState {
-
   termSetAndTerms? : ITermSet;
   errorMessage?: string;
   openPanel?: boolean;
@@ -99,7 +109,9 @@ export interface ITermParentProps extends ITermChanges {
   anchorId? : string;
   isTermSetSelectable?: boolean;
 
+  termActions?: ITermActions;
   autoExpand: () => void;
+  updateTaxonomyTree: () => void;
   termSetSelectedChange?: (termSet: ITermSet, isChecked: boolean) => void;
 }
 
@@ -114,8 +126,12 @@ export interface ITermProps extends ITermChanges {
   term: ITerm;
   multiSelection: boolean;
   disabled: boolean;
+  termActions?: ITermActions;
+
+  updateTaxonomyTree: () => void;
 }
 
 export interface ITermState {
   selected?: boolean;
+  termLabel: string;
 }

src/controls/taxonomyPicker/ITermPicker.ts

@@ -1,8 +1,6 @@
 import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
 import { IWebPartContext } from '@microsoft/sp-webpart-base';
 
-
-
 /**
  * Selected terms
  */

src/controls/taxonomyPicker/TaxonomyPicker.module.scss

@@ -1,3 +1,7 @@
+.contextualMenu {
+  display: inline-block
+}
+
 .listItem {
   height: 36px;
   line-height: 36px;

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -7,13 +7,15 @@ import TermPicker from './TermPicker';
 import { IPickerTerms, IPickerTerm } from './ITermPicker';
 import { ITaxonomyPickerProps, ITaxonomyPickerState } from './ITaxonomyPicker';
 import SPTermStorePickerService from './../../services/SPTermStorePickerService';
-import { ITermSet, IGroup, ITerm } from './../../services/ISPTermStorePickerService';
+import { ITermSet, ITerm } from './../../services/ISPTermStorePickerService';
+import { TermLabelAction, ITermActions } from './termActions';
+
 import styles from './TaxonomyPicker.module.scss';
 import { sortBy, uniqBy, cloneDeep, isEqual } from '@microsoft/sp-lodash-subset';
 import TermParent from './TermParent';
 import FieldErrorMessage from './ErrorMessage';
-import * as telemetry from '../../common/telemetry';
 
+import * as telemetry from '../../common/telemetry';
 
 /**
  * Image URLs / Base64
@@ -81,19 +83,28 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
    */
   private loadTermStores(): void {
     this.termsService = new SPTermStorePickerService(this.props, this.props.context);
+
+    if (this.props.termActions) {
+      this.props.termActions.actions.map(x => {
+        x.initialize(this.termsService);
+      });
+    }
     this.termsService.getAllTerms(this.props.termsetNameOrID).then((response: ITermSet) => {
       // Check if a response was retrieved
-      if (response !== null) {
-        this.setState({
-          termSetAndTerms: response,
-          loaded: true
-        });
-      } else {
-        this.setState({
-          termSetAndTerms: null,
-          loaded: true
-        });
-      }
+      let termSetAndTerms = response ? response : null;
+      this.setState({
+        termSetAndTerms,
+        loaded: true
+      });
+    });
+  }
+
+  /**
+   * Force update of the taxonomy tree - required by term action in case the term has been added, deleted or moved.
+   */
+  private updateTaxonomyTree(): void {
+    this.setState({
+      termSetAndTerms: this.state.termSetAndTerms
     });
   }
 
@@ -304,7 +315,11 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
                             disabledTermIds={this.props.disabledTermIds}
                             disableChildrenOfDisabledParents={this.props.disableChildrenOfDisabledParents}
                             changedCallback={this.termsChanged}
-                            multiSelection={this.props.allowMultipleSelections} />
+                            multiSelection={this.props.allowMultipleSelections}
+
+                            updateTaxonomyTree={this.updateTaxonomyTree}
+                            termActions={this.props.termActions}
+                            />
               </div>
             )
           }

src/controls/taxonomyPicker/Term.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Checkbox, ICheckboxStyles } from 'office-ui-fabric-react/lib/Checkbox';
 import { ITermProps, ITermState } from './ITaxonomyPicker';
 
 import styles from './TaxonomyPicker.module.scss';
+import TermActionsControl from './termActions/TermActionsControl';
+import { UpdateAction, UpdateType } from './termActions';
 
 
 /**
@@ -17,7 +19,8 @@ export default class Term extends React.Component<ITermProps, ITermState> {
     let active = this.props.activeNodes.filter(item => item.key === this.props.term.Id);
 
     this.state = {
-      selected: active.length > 0
+      selected: active.length > 0,
+      termLabel: this.props.term.Name
     };
 
     this._handleChange = this._handleChange.bind(this);
@@ -43,7 +46,8 @@ export default class Term extends React.Component<ITermProps, ITermState> {
     if (!this.props.multiSelection) {
       let active = nextProps.activeNodes.filter(item => item.key === this.props.term.Id);
       this.state = {
-        selected: active.length > 0
+        selected: active.length > 0,
+        termLabel: this.state.termLabel
       };
     }
   }
@@ -63,23 +67,52 @@ export default class Term extends React.Component<ITermProps, ITermState> {
     return styles.termEnabled;
   }
 
+  private termActionCallback = (updateAction: UpdateAction): void => {
+    if (updateAction == null) {
+      return;
+    }
+
+    if (updateAction.updateActionType === UpdateType.updateTermLabel) {
+      this.props.term.Name = updateAction.value;
+      this.setState({
+        termLabel: updateAction.value
+      });
+    }
+    else {
+      this.props.updateTaxonomyTree();
+    }
+  }
+
   /**
    * Default React render
    */
   public render(): JSX.Element {
     const styleProps: React.CSSProperties = {
       marginLeft: `${(this.props.term.PathDepth * 30)}px`
     };
+    const checkBoxStyle: React.CSSProperties = {
+      display: "inline-flex"
+    };
 
     return (
-      <div className={`${styles.listItem} ${styles.term}`} style={styleProps}>
-        <Checkbox
-          checked={this.state.selected}
-          disabled={this.props.term.IsDeprecated || !this.props.term.IsAvailableForTagging || this.props.disabled}
-          className={this.getClassName()}
-          label={this.props.term.Name}
-          onChange={this._handleChange} />
+      <div>
+        <div className={`${styles.listItem} ${styles.term}`} style={styleProps}>
+          <div>
+            <Checkbox
+              checked={this.state.selected}
+              style={checkBoxStyle}
+              disabled={this.props.term.IsDeprecated || !this.props.term.IsAvailableForTagging || this.props.disabled}
+              className={this.getClassName()}
+              label={this.state.termLabel}
+              onChange={this._handleChange} />
+          </div>
+          {
+            this.props.termActions &&
+            <TermActionsControl term={this.props.term} termActions={this.props.termActions} termActionCallback={this.termActionCallback} />
+          }
+        </div>
       </div>
+
     );
   }
 }

src/controls/taxonomyPicker/TermParent.tsx

@@ -106,7 +106,10 @@ export default class TermParent extends React.Component<ITermParentProps, ITermP
                   disabled = parentPath && parentPath.length > 0;
                 }
 
-                return <Term key={term.Id} term={term} termset={this.props.termset.Id} activeNodes={this.props.activeNodes} changedCallback={this.props.changedCallback} multiSelection={this.props.multiSelection} disabled={disabled} />;
+                return <Term key={term.Id} term={term} termset={this.props.termset.Id}
+                                  activeNodes={this.props.activeNodes} changedCallback={this.props.changedCallback}
+                                  multiSelection={this.props.multiSelection} disabled={disabled}
+                                  termActions={this.props.termActions} updateTaxonomyTree={this.props.updateTaxonomyTree}/>;
               })
             }
           </div>

src/controls/taxonomyPicker/index.ts

@@ -1,3 +1,5 @@
 export * from './ITaxonomyPicker';
 export * from './TaxonomyPicker';
-export * from './ITermPicker';
+export * from './ITermPicker';
+export * from "./termActions/ITermsActions";
+export * from './termActions/TermActionsControl';

src/controls/taxonomyPicker/termActions/ButtonTermAction.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
+import { ITermAction, TermActionsDisplayStyle, IConreteTermActionProps } from './ITermsActions';
+
+export default class ButtonTermAction extends React.Component<IConreteTermActionProps> {
+  public render(): React.ReactElement<IConreteTermActionProps> {
+    const { term, termActions } = this.props;
+
+    return (
+      <div style={{ display: 'flex', alignItems: 'stretch', height: '32px' }}>
+        {
+          termActions &&
+          termActions.map(termAction => {
+            const { name, text, iconName } = this._prepareCommandBarButton(termAction);
+            return (
+              <div>
+                <CommandBarButton split={true}
+                  onClick={() => { this._onActionExecute(termAction); }}
+                  iconProps={{ iconName: iconName }}
+                  text={text}
+                  name={name}
+                  key={term.Id}
+                  style={this._getTermActionActionButtonStyle()}
+                />
+              </div>
+            );
+          })
+        }
+      </div>
+    );
+  }
+
+
+  private _prepareCommandBarButton = (termAction: ITermAction): { name: string, text: string, iconName: string } => {
+    let name, text, iconName = "";
+
+    if (this.props.displayStyle && (this.props.displayStyle === TermActionsDisplayStyle.text || this.props.displayStyle === TermActionsDisplayStyle.textAndIcon)) {
+      name = termAction.displayText;
+      text = termAction.displayText;
+    }
+    if (this.props.displayStyle && (this.props.displayStyle === TermActionsDisplayStyle.icon || this.props.displayStyle === TermActionsDisplayStyle.textAndIcon)) {
+      iconName = termAction.iconName;
+    }
+
+    return { name, text, iconName };
+  }
+
+  private _getTermActionActionButtonStyle = (): React.CSSProperties => {
+    let result: React.CSSProperties = {
+      backgroundColor: "transparent",
+      width: "32px",
+      height: "32px"
+    };
+
+    return result;
+  }
+
+  private _onActionExecute = async (termAction: ITermAction) => {
+    const updateAction = await termAction.actionCallback(this.props.term);
+    this.props.termActionCallback(updateAction);
+  }
+}