Merge branch 'Octavie-dev' into dev

Author: estruyf

CHANGELOG.JSON

@@ -6,10 +6,12 @@
         "new": [],
         "enhancements": [],
         "fixes": [
-          "New telemetry approach which allows you to use Application Insights [#81](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/81)"
+          "New telemetry approach which allows you to use Application Insights [#81](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/81)",
+          "Disabled property for PeoplePicker [#88](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/88)",
+          "PeoplePicker property selectedItems not implemented? [#90](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/90)"
         ]
       },
-      "contributions": []
+      "contributions": ["Octavie van Haaften"]
     },
     {
       "version": "1.5.0",

CHANGELOG.md

@@ -5,6 +5,8 @@
 **Fixes**
 
 - New telemetry approach which allows you to use Application Insights [#81](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/81)
+- Disabled property for PeoplePicker [#88](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/88)
+- PeoplePicker property selectedItems not implemented? [#90](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/90)
 
 ## 1.5.0
 

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

@@ -5,6 +5,8 @@
 **Fixes**
 
 - New telemetry approach which allows you to use Application Insights [#81](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/81)
+- Disabled property for PeoplePicker [#88](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/88)
+- PeoplePicker property selectedItems not implemented? [#90](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/90)
 
 ## 1.5.0
 

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

@@ -154,10 +154,16 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
    * On persona item changed event
    */
   private _onPersonItemsChange = (items: any[]) => {
+    const { selectedItems } = this.props;
+
     this.setState({
       selectedPersons: items,
       showmessageerror: items.length > 0 ? false : true
     });
+
+    if (selectedItems) {
+      selectedItems(items);
+    }
   }
 
   /**
@@ -248,8 +254,8 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
   }
 
   /**
-  * Default React component render method
-  */
+   * Default React component render method
+   */
   public render(): React.ReactElement<IPeoplePickerProps> {
     const peoplepicker = (
       <div id="people" className={`${styles.defaultClass} ${this.props.peoplePickerWPclassName ? this.props.peoplePickerWPclassName : ''}`}>
@@ -267,6 +273,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

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