Implemented property Disabled for PeoplePicker Control. Updated Documentation.

Author: Octavie van Haaften

docs/documentation/docs/controls/PeoplePicker.md

@@ -34,6 +34,7 @@ import { PeoplePicker } from "@pnp/spfx-controls-react/lib/PeoplePicker";
     groupName={"Team Site Owners"} // Leave this blank in case you want to filter from all users
     showtooltip={true}
     isRequired={true}
+    disabled={true}
     selectedItems={this._getPeoplePickerItems} />
 ```
 
@@ -56,6 +57,7 @@ The People picker control can be configured with the following properties:
 | groupName | string | no | group from which users are fetched. Leave it blank if need to filter all users |
 | personSelectionLimit | number | no | Defines the limit of people that can be selected in the control|
 | isRequired | boolean | no | Set if the control is required or not |
+| disabled | boolean | no | Set if the control is disabled or not |
 | errorMessage | string | no | Specify the error message to display |
 | errorMessageclassName | string | no | applies custom styling to the error message section|
 | showtooltip | boolean | no | Defines if need a tooltip or not |

docs/documentation/docs/index.md

@@ -36,7 +36,8 @@ The following controls are currently available:
 - [ListView](./controls/ListView) (List view control)
 - [Placeholder](./controls/Placeholder) (Control that can be used to show an initial placeholder if the web part has to be configured)
 - [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb control)
-- [SiteBreadcrumb](./controls/TaxonomyPicker) (Taxonomy Picker)
+- [TaxonomyPicker](./controls/TaxonomyPicker) (Taxonomy Picker)
+- [PeoplePicker](./controls/PeoplePicker) (People Picker)
 - [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)
 - [IFrameDialog](./controls/IFrameDialog) (renders a Dialog with an iframe as a content)
 

docs/documentation/mkdocs.yml

@@ -11,6 +11,7 @@ pages:
     - WebPartTitle: 'controls/WebPartTitle.md'
     - SecurityTrimmedControl: 'controls/SecurityTrimmedControl.md'
     - TaxonomyPicker: 'controls/TaxonomyPicker.md'
+    - PeoplePicker: 'controls/PeoplePicker.md'
     - IFrameDialog: 'controls/IFrameDialog.md'
   - 'Field Controls':
     - 'Getting started': 'controls/fields/main.md'

src/controls/peoplepicker/IPeoplePicker.ts

@@ -14,6 +14,10 @@ export interface IPeoplePickerProps {
    * Text of the Control
   */
   titleText: string;
+  /**
+   * Whether the control is enabled or not
+   */
+  disabled?: boolean;
   /**
    * Name of SharePoint Group
    */

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -267,6 +267,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
                               'aria-label': 'People Picker'
                             }}
                             itemLimit={this.props.personSelectionLimit || 1}
+                            disabled={this.props.disabled}
                             onChange={this._onPersonItemsChange} />
       </div>
     );

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -309,6 +309,16 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             showtooltip={true}
             isRequired={true}
             selectedItems={this._getPeoplePickerItems} />
+
+          <PeoplePicker
+            context={this.props.context}
+            titleText="People Picker (disabled)"
+            // personSelectionLimit={3}
+            // groupName={"Team Site Owners"}
+            disabled={true}
+            showtooltip={true}
+            isRequired={true}
+            selectedItems={this._getPeoplePickerItems} />
       </div>
     );
   }