Merge branch 'spdavid-dev' into dev

Author: estruyf

config/tslint.json

@@ -39,7 +39,8 @@
       "use-named-parameter": true,
       "valid-typeof": true,
       "variable-name": false,
-      "whitespace": false
+      "whitespace": false,
+      "no-debugger": true
     }
   }
-}
+}

docs/documentation/docs/beta.md

@@ -0,0 +1,17 @@
+# Testing out a beta release ![](https://img.shields.io/npm/v/@pnp/spfx-controls-react/next.svg)
+
+All you need to do for testing out a beta release of `@pnp/spfx-controls-react` is to install the dependency as follows:
+
+```
+npm install @pnp/spfx-controls-react@next --save
+```
+
+## Beta control documentation
+
+The control documentation is only live for public releases, not for beta versions. If you want to checkout the markdown files of all controls in the `dev` branch: [beta documentation](https://github.com/SharePoint/sp-dev-fx-controls-react/tree/dev/docs/documentation/docs/controls).
+
+## Next Steps
+
+Once you installed the beta version, you can start using the controls in your solution. Go to the homepage to get an overview of all the available controls and the steps to get started: [home](./).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/beta)

docs/documentation/docs/index.md

@@ -2,7 +2,8 @@
 
 This repository provides developers with a set of reusable React controls that can be used in SharePoint Framework (SPFx) solutions. The project provides controls for building web parts and extensions.
 
-!!! attention The controls project has a minimal dependency on SharePoint Framework version `1.3.0`. Be aware that the controls might not work in solutions your building for on-premises. As for on-premises solutions version `1.1.0` is currently used.
+!!! attention
+    The controls project has a minimal dependency on SharePoint Framework version `1.3.0`. Be aware that the controls might not work in solutions your building for on-premises. As for on-premises solutions version `1.1.0` is currently used.
 
 ## Getting started
 

docs/documentation/mkdocs.yml

@@ -21,6 +21,7 @@ pages:
     - FieldTitleRenderer: 'controls/fields/FieldTitleRenderer.md'
     - FieldUrlRenderer: 'controls/fields/FieldUrlRenderer.md'
     - FieldUserRenderer: 'controls/fields/FieldUserRenderer.md'
+  - 'Beta testing': 'beta.md'
   - About:
     - 'Release notes': 'about/release-notes.md'
     - License: 'about/license.md'

src/TaxonomyPicker.ts

@@ -0,0 +1 @@
+export * from './controls/taxonomyPicker/index';

src/controls/taxonomyPicker/ErrorMessage.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styles from './TaxonomyPicker.module.scss';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+
+export interface IFieldErrorMessageProps {
+  errorMessage: string;
+}
+
+/**
+ * Component that shows an error message when something went wront with the property control
+ */
+export default class FieldErrorMessage extends React.Component<IFieldErrorMessageProps> {
+  public render(): JSX.Element {
+    if (this.props.errorMessage !== 'undefined' && this.props.errorMessage !== null && this.props.errorMessage !== '') {
+      return (
+        <div aria-live="assertive">
+          <p className={`ms-TextField-errorMessage ${styles.errorMessage}`}>
+            <Icon iconName='Error' className={styles.errorIcon} />
+            <span data-automation-id="error-message">{this.props.errorMessage}</span>
+          </p>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+}

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -0,0 +1,102 @@
+import { IPickerTerms } from './ITermPicker';
+import { ITermStore, IGroup, ITermSet, ITerm } from '../../services/ISPTermStorePickerService';
+import SPTermStorePickerService from '../../services/SPTermStorePickerService';
+import { IWebPartContext } from '@microsoft/sp-webpart-base';
+
+/**
+ * PropertyFieldTermPickerHost properties interface
+//  */
+export interface ITaxonomyPickerProps  {
+   /**
+   * Property field label displayed on top
+   */
+  label: string;
+  /**
+   * TermSet Picker Panel title
+   */
+  panelTitle: string;
+  /**
+   * Defines if the user can select only one or many term sets. Default value is false.
+   */
+  allowMultipleSelections?: boolean;
+  /**
+   * Defines the selected by default term sets.
+   */
+  initialValues?: IPickerTerms;
+  /**
+   * WebPart's context
+   */
+  context: IWebPartContext;
+  /**
+   * Limit the terms that can be picked by the Term Set name or ID
+   */
+  termsetNameOrID: string;
+  /**
+   * Id of a child term in the termset where to be able to selected and search the terms from
+   */
+  ancoreId?: string;
+  /**
+   * Whether the property pane field is enabled or not.
+   */
+  disabled?: boolean;
+  /**
+   * The method is used to get the validation error message and determine whether the input value is valid or not.
+   *
+   *   When it returns string:
+   *   - If valid, it returns empty string.
+   *   - If invalid, it returns the error message string and the text field will
+   *     show a red border and show an error message below the text field.
+   *
+   *   When it returns Promise<string>:
+   *   - The resolved value is display as error message.
+   *   - The rejected, the value is thrown away.
+   *
+   */
+  onGetErrorMessage?: (value: IPickerTerms) => string | Promise<string>;
+
+  /**
+   * onChange Event
+   */
+  onChange?: (newValue?: IPickerTerms) => void;
+}
+
+/**
+ * PropertyFieldTermPickerHost state interface
+ */
+export interface ITaxonomyPickerState {
+
+  termSetAndTerms? : ITermSet;
+  errorMessage?: string;
+  openPanel?: boolean;
+  loaded?: boolean;
+  activeNodes?: IPickerTerms;
+}
+
+export interface ITermChanges {
+  changedCallback: (term: ITerm, checked: boolean) => void;
+  activeNodes?: IPickerTerms;
+}
+
+
+export interface ITermParentProps extends ITermChanges {
+  termset: ITermSet;
+  autoExpand: () => void;
+  multiSelection: boolean;
+  anchorId? : string;
+}
+
+export interface ITermParentState {
+
+  loaded?: boolean;
+  expanded?: boolean;
+}
+
+export interface ITermProps extends ITermChanges {
+  termset: string;
+  term: ITerm;
+  multiSelection: boolean;
+}
+
+export interface ITermState {
+  selected?: boolean;
+}

src/controls/taxonomyPicker/ITermPicker.ts

@@ -0,0 +1,93 @@
+import { IWebPartContext } from '@microsoft/sp-webpart-base';
+
+
+
+/**
+ * Selected terms
+ */
+export interface IPickerTerm  {
+  name: string;
+  key: string;
+  path: string;
+  termSet: string;
+  termSetName? : string;
+}
+
+export interface IPickerTerms extends Array<IPickerTerm> { }
+
+/**
+ * Public properties of the PropertyFieldTermPicker custom field
+ */
+export interface IPropertyFieldTermPickerProps {
+  /**
+   * Property field label displayed on top
+   */
+  label: string;
+  /**
+   * TermSet Picker Panel title
+   */
+  panelTitle: string;
+  /**
+   * Defines if the user can select only one or many term sets. Default value is false.
+   */
+  allowMultipleSelections?: boolean;
+  /**
+   * Defines the selected by default term sets.
+   */
+  initialValues?: IPickerTerms;
+  /**
+   * Indicator to define if the system Groups are exclude. Default is false.
+   */
+  excludeSystemGroup?: boolean;
+  /**
+   * WebPart's context
+   */
+  context: IWebPartContext;
+  /**
+   * Limit the term sets that can be used by the group name or ID
+   */
+  limitByGroupNameOrID?: string;
+  /**
+   * Limit the terms that can be picked by the Term Set name or ID
+   */
+  limitByTermsetNameOrID?: string;
+  /**
+   * Defines a onPropertyChange function to raise when the selected value changed.
+   * Normally this function must be always defined with the 'this.onPropertyChange'
+   * method of the web part object.
+   */
+  onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;
+  /**
+   * Parent Web Part properties
+   */
+  properties: any;
+  /**
+   * An UNIQUE key indicates the identity of this control
+   */
+  key: string;
+  /**
+   * Whether the property pane field is enabled or not.
+   */
+  disabled?: boolean;
+  /**
+   * The method is used to get the validation error message and determine whether the input value is valid or not.
+   *
+   *   When it returns string:
+   *   - If valid, it returns empty string.
+   *   - If invalid, it returns the error message string and the text field will
+   *     show a red border and show an error message below the text field.
+   *
+   *   When it returns Promise<string>:
+   *   - The resolved value is display as error message.
+   *   - The rejected, the value is thrown away.
+   *
+   */
+  onGetErrorMessage?: (value: IPickerTerms) => string | Promise<string>;
+  /**
+   * Custom Field will start to validate after users stop typing for `deferredValidationTime` milliseconds.
+   * Default value is 200.
+   */
+  deferredValidationTime?: number;
+  
+}
+