fixed people picker

Author: AJIXuMuK

docs/documentation/docs/guides/migrate-from-v1.md

@@ -1,10 +1,10 @@
 # Migrating from v1 to v2
-Most of the controls have no breaking changes when moving from v1 to v2. However, some APIs were changed to make the libary more stable and controls behavior more even.
+Most of the controls have no breaking changes when moving from v1 to v2. However, some APIs were changed to make the library more stable and controls behavior more even.
 Also, we've bumped up React and Fluent UI versions used in the library. It means you will need to update `package.json` file in your SPFx projects.
 The below guide is an overview of what it takes to migrate from v1 to v2.  If we missed something, please let us know in the issues list so we can update the guide. Thanks!
 
 ## v2 Supports SharePoint Online Only
-v2 of Reusable Controls is based on SharePoint Framework 1.11 and, as a result, does not support SharePoint On-Premise. **Please, use v1 if you plan to deploy your soluition on-prem.**
+v2 of Reusable Controls is based on SharePoint Framework 1.11 and, as a result, does not support SharePoint On-Premise. **Please, use v1 if you plan to deploy your solution on-prem.**
 
 ## React and Fluent UI versions
 v2 of Reusable Controls uses React.js v16.8.5 and Fluent UI (Office UI Fabric React) v6.189.2.
@@ -28,9 +28,9 @@ Please, update the `package.json` accordingly:
 `isRequred` is renamed to `required`.<br/>
 The property has been renamed to use the common approach for mandatory field naming.
 
-`errorMessage` represents static error message to be displayed in the control. <br />
+`errorMessage` represents a static error message to be displayed in the control. <br />
 In v1 `errorMessage` is used to provide the text that will be displayed if the field is set as `required` and no value is selected.
-In v2 you can use this property to statically display error message for whatever reason.
+In v2 you can use this property to display an error message for whatever reason statically.
 ```typescript
 /**
  * Static error message displayed below the text field. Use onGetErrorMessage to dynamically change the error message displayed (if any) based on the current value. errorMessage and onGetErrorMessage are mutually exclusive (errorMessage takes precedence).
@@ -42,7 +42,7 @@ In v2 you can use this property to statically display error message for whatever
 The method is used to get the validation error message and determine whether the input value is valid or not. Mutually exclusive with the static string errorMessage (it will take precedence over this).
 ```typescript
 /**
- * The method is used to get the validation error message and determine whether the picker value is valid or not.
+ * The method is used to get the validation error message and determine whether the picker value is valid.
  * Mutually exclusive with the static string errorMessage (it will take precedence over this).
  *
  *   When it returns string:

src/controls/errorMessage/ErrorMessage.tsx

@@ -4,19 +4,24 @@ import { Icon } from 'office-ui-fabric-react/lib/Icon';
 
 export interface IFieldErrorMessageProps {
   errorMessage: string;
+  className?: 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 !== '') {
+    const {
+      errorMessage,
+      className
+    } = this.props;
+    if (errorMessage !== undefined && errorMessage !== null && errorMessage !== '') {
       return (
         <div aria-live="assertive">
-          <p className={`ms-TextField-errorMessage ${styles.errorMessage}`}>
+          <p className={`ms-TextField-errorMessage ${styles.errorMessage} ${className || ''}`}>
             <Icon iconName='Error' className={styles.errorIcon} />
-            <span data-automation-id="error-message">{this.props.errorMessage}</span>
+            <span data-automation-id="error-message">{errorMessage}</span>
           </p>
         </div>
       );

src/controls/peoplepicker/IPeoplePicker.ts

@@ -116,10 +116,10 @@ export interface IPeoplePickerProps {
 }
 
 export interface IPeoplePickerState {
-  mostRecentlyUsedPersons: IPersonaProps[];
-  showRequiredError: boolean;
-  errorMessage: string;
-  resolveDelay : number;
+  mostRecentlyUsedPersons?: IPersonaProps[];
+  errorMessage?: string;
+  internalErrorMessage?: string;
+  resolveDelay?: number;
 
   selectedPersons?: IPersonaProps[];
   peoplePersonaMenu?: IPersonaProps[];

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -10,6 +10,7 @@ import { Label } from 'office-ui-fabric-react/lib/components/Label';
 import { IBasePickerSuggestionsProps } from "office-ui-fabric-react/lib/components/pickers/BasePicker.types";
 import { IPersonaProps } from "office-ui-fabric-react/lib/components/Persona/Persona.types";
 import { Icon } from "office-ui-fabric-react/lib/components/Icon";
+import FieldErrorMessage from '../errorMessage/ErrorMessage';
 import isEqual from 'lodash/isEqual';
 import uniqBy from 'lodash/uniqBy';
 
@@ -36,9 +37,8 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
     this.state = {
       selectedPersons: [],
       mostRecentlyUsedPersons: [],
-      showRequiredError: false,
       resolveDelay: this.props.resolveDelay || 200,
-      errorMessage: null
+      errorMessage: props.errorMessage
     };
   }
 
@@ -64,9 +64,9 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
   }
 
   public componentWillReceiveProps(nextProps: IPeoplePickerProps) {
-    if (this.props.showRequiredError !== nextProps.showRequiredError && nextProps.showRequiredError) {
+    if (nextProps.errorMessage) {
       this.setState({
-        showRequiredError: !this.state.selectedPersons || !this.state.selectedPersons.length
+        errorMessage: nextProps.errorMessage
       });
     }
   }
@@ -82,7 +82,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
       this.groupId = await this.peopleSearchService.getGroupId(groupName, webAbsoluteUrl);
       if (!this.groupId) {
         this.setState({
-          errorMessage: strings.PeoplePickerGroupNotFound
+          internalErrorMessage: strings.PeoplePickerGroupNotFound
         });
         return;
       }
@@ -101,7 +101,8 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
       }
 
       this.setState({
-        selectedPersons
+        selectedPersons,
+        internalErrorMessage: undefined
       });
     }
   }
@@ -132,16 +133,12 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
    * On item selection change event
    */
   private onChange = (items: IPersonaProps[]): void => {
-    const { selectedItems: triggerUpdate } = this.props;
 
     this.setState({
-      selectedPersons: items,
-      showRequiredError: items.length > 0 ? false : true
+      selectedPersons: items
     });
 
-    if (triggerUpdate) {
-      triggerUpdate(items);
-    }
+    this.validate(items);
   }
 
 
@@ -166,6 +163,55 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
     return personas.filter(persona => !this.listContainsPersona(persona, possibleDupes));
   }
 
+  private validate = async (items: IPersonaProps[]): Promise<void> => {
+
+    if (this.props.errorMessage || !this.props.onGetErrorMessage) { // ignoring all onGetErrorMessage logic
+      this.validated(items);
+      return;
+    }
+
+    const result: string | PromiseLike<string> = this.props.onGetErrorMessage(items || []);
+
+    if (!result) {
+      this.validated(items);
+      return;
+    }
+
+    if (typeof result === 'string') {
+      if (!result) {
+        this.validated(items);
+      }
+      else {
+        this.setState({
+          errorMessage: result
+        });
+      }
+    }
+    else {
+      try {
+        const resolvedResult = await result;
+
+        if (!resolvedResult) {
+          this.validated(items);
+        }
+        else {
+          this.setState({
+            errorMessage: resolvedResult
+          });
+        }
+      }
+      catch (err) {
+        this.validated(items);
+      }
+    }
+  }
+
+  private validated = (value: IPersonaProps[]): void => {
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+  }
+
 
   /**
    * Checks if list contains the person
@@ -189,7 +235,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
     const {
       peoplePickerCntrlclassName,
       peoplePickerWPclassName,
-      isRequired,
+      required,
       titleText,
       suggestionsLimit,
       placeholder,
@@ -198,15 +244,14 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
       showtooltip,
       tooltipMessage,
       tooltipDirectional,
-      errorMessageClassName,
-      errorMessage
+      errorMessageClassName
     } = this.props;
 
     const {
       selectedPersons,
       resolveDelay,
-      errorMessage: stateErrorMessage,
-      showRequiredError
+      errorMessage,
+      internalErrorMessage
     } = this.state;
 
     const suggestionProps: IBasePickerSuggestionsProps = {
@@ -220,7 +265,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
 
     const peoplepicker = (
       <div id="people" className={`${styles.defaultClass} ${peoplePickerWPclassName ? peoplePickerWPclassName : ''}`}>
-        {titleText && <Label required={isRequired}>{titleText}</Label>}
+        {titleText && <Label required={required}>{titleText}</Label>}
 
         <NormalPeoplePicker pickerSuggestionsProps={suggestionProps}
           onResolveSuggestions={this.onSearchFieldChanged}
@@ -235,7 +280,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
           }}
           selectedItems={selectedPersons}
           itemLimit={personSelectionLimit || 1}
-          disabled={disabled || !!stateErrorMessage}
+          disabled={disabled || !!internalErrorMessage}
           onChange={this.onChange}
           resolveDelay={resolveDelay} />
       </div>
@@ -257,21 +302,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
               </div>
             )
         }
-
-        {
-          ((isRequired && showRequiredError) || (stateErrorMessage)) && (
-            <p className={`ms-TextField-errorMessage ${styles.errorMessage} ${errorMessageClassName ? errorMessageClassName : ''}`}>
-              <Icon iconName='Error' className={styles.errorIcon} />
-              {
-                stateErrorMessage && <span data-automation-id="error-message">{stateErrorMessage}</span>
-              }
-
-              {
-                (isRequired && showRequiredError) && <span data-automation-id="error-message">{errorMessage ? errorMessage : strings.peoplePickerComponentErrorMessage}</span>
-              }
-            </p>
-          )
-        }
+        <FieldErrorMessage errorMessage={errorMessage || internalErrorMessage} className={errorMessageClassName} />
       </div>
     );
   }

src/controls/taxonomyPicker/ErrorMessage.tsx

@@ -13,7 +13,7 @@ import styles from './TaxonomyPicker.module.scss';
 import { sortBy, cloneDeep, isEqual } from '@microsoft/sp-lodash-subset';
 import uniqBy from 'lodash/uniqBy';
 import TermParent from './TermParent';
-import FieldErrorMessage from './ErrorMessage';
+import FieldErrorMessage from '../errorMessage/ErrorMessage';
 
 import * as telemetry from '../../common/telemetry';
 

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -802,20 +802,20 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           ensureUser={true}
           principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
           defaultSelectedUsers={["[email protected]", "[email protected]"]}
-          selectedItems={this._getPeoplePickerItems} />
+          onChange={this._getPeoplePickerItems} />
 
         <PeoplePicker context={this.props.context}
           titleText="People Picker (search for group)"
           groupName="Team Site Visitors"
           principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
           defaultSelectedUsers={["[email protected]", "[email protected]"]}
-          selectedItems={this._getPeoplePickerItems} />
+          onChange={this._getPeoplePickerItems} />
 
         <PeoplePicker context={this.props.context}
           titleText="People Picker (pre-set global users)"
           principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
           defaultSelectedUsers={["[email protected]", "[email protected]"]}
-          selectedItems={this._getPeoplePickerItems}
+          onChange={this._getPeoplePickerItems}
           personSelectionLimit={2}
           ensureUser={true} />
 
@@ -824,17 +824,17 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           webAbsoluteUrl={this.props.context.pageContext.site.absoluteUrl}
           principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
           defaultSelectedUsers={["[email protected]", "[email protected]"]}
-          selectedItems={this._getPeoplePickerItems} />
+          onChange={this._getPeoplePickerItems} />
 
         <PeoplePicker context={this.props.context}
           titleText="People Picker (tenant scoped)"
           personSelectionLimit={5}
           // groupName={"Team Site Owners"}
           showtooltip={true}
-          isRequired={true}
+          required={true}
           //defaultSelectedUsers={["tenantUser@domain.onmicrosoft.com", "[email protected]"]}
           //defaultSelectedUsers={this.state.authorEmails}
-          selectedItems={this._getPeoplePickerItems}
+          onChange={this._getPeoplePickerItems}
           showHiddenInUI={false}
           principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
           suggestionsLimit={2}
@@ -847,10 +847,10 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           personSelectionLimit={5}
           // groupName={"Team Site Owners"}
           showtooltip={true}
-          isRequired={true}
+          required={true}
           //defaultSelectedUsers={["tenantUser@domain.onmicrosoft.com", "[email protected]"]}
           //defaultSelectedUsers={this.state.authorEmails}
-          selectedItems={this._getPeoplePickerItems}
+          onChange={this._getPeoplePickerItems}
           showHiddenInUI={false}
           principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
           suggestionsLimit={2}