Skip to content

Commit 5e7e92a

Browse files
estruyfestruyf
committed
Updates for #98 
1 parent 4b3e530 commit 5e7e92a

File tree

8 files changed

+114
-23
lines changed

8 files changed

+114
-23
lines changed

‎CHANGELOG.JSON

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
{
22
"versions": [
3+
{
4+
"version": "1.7.0",
5+
"changes": {
6+
"new": [],
7+
"enhancements": [
8+
"`PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)"
9+
],
10+
"fixes": []
11+
},
12+
"contributions": ["Octavie van Haaften"]
13+
},
314
{
415
"version": "1.6.0",
516
"changes": {

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Releases
22

3+
## 1.7.0
4+
5+
**Enhancements**
6+
7+
- `PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)
8+
39
## 1.6.0
410

511
**Enhancements**

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Releases
22

3+
## 1.7.0
4+
5+
**Enhancements**
6+
7+
- `PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)
8+
39
## 1.6.0
410

511
**Enhancements**

‎docs/documentation/docs/controls/PeoplePicker.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,10 @@ The People picker control can be configured with the following properties:
6363
| showtooltip | boolean | no | Defines if need a tooltip or not |
6464
| tooltip | string | no | Specify the tooltip message to display |
6565
| tooltipDirectional | DirectionalHint | no | Direction where the tooltip would be shown |
66-
| selectedItems | function | no | get the selected users in the control|
67-
| peoplePickerWPclassName | string | no | applies custom styling to the people picker element|
68-
| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only|
66+
| selectedItems | function | no | get the selected users in the control |
67+
| peoplePickerWPclassName | string | no | applies custom styling to the people picker element |
68+
| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only |
69+
| defaultSelectedUsers | string[] | no | Default selected user emails |
6970

7071

7172
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker)

‎package-lock.json

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/controls/peoplepicker/IPeoplePicker.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ export interface IPeoplePickerProps {
6262
* Class Name for the Error Section
6363
*/
6464
errorMessageclassName?: string;
65+
/**
66+
* Default Selected User Emails
67+
*/
68+
defaultSelectedUsers? : string[];
6569
}
6670

6771
export interface IPeoplePickerState {

‎src/controls/peoplepicker/PeoplePickerComponent.tsx

Lines changed: 73 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBa
1111
import { SPHttpClient } from '@microsoft/sp-http';
1212
import styles from './PeoplePickerComponent.module.scss';
1313
import * as telemetry from '../../common/telemetry';
14-
import {
15-
assign
16-
} from 'office-ui-fabric-react/lib/Utilities';
14+
import { assign } from 'office-ui-fabric-react/lib/Utilities';
1715
import { IUsers } from './IUsers';
1816
import { Label } from 'office-ui-fabric-react/lib/Label';
1917
import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
@@ -170,6 +168,18 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
170168
});
171169
}
172170

171+
// Set Default selected persons
172+
let defaultUsers : any = [];
173+
let defaultPeopleList: IPersonaWithMenu[] = [];
174+
if (this.props.defaultSelectedUsers !== null) {
175+
defaultUsers = this.getDefaultUsers(userValuesArray, this.props.defaultSelectedUsers);
176+
for (const persona of defaultUsers) {
177+
let selectedPeople: IPersonaWithMenu = {};
178+
assign(selectedPeople, persona);
179+
defaultPeopleList.push(selectedPeople);
180+
}
181+
}
182+
173183
let personaList: IPersonaWithMenu[] = [];
174184
for (const persona of userValuesArray) {
175185
let personaWithMenu: IPersonaWithMenu = {};
@@ -180,13 +190,14 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
180190
// Update the current state
181191
this.setState({
182192
allPersons : userValuesArray,
193+
selectedPersons : defaultPeopleList.length != 0 ? defaultPeopleList : [],
183194
peoplePersonaMenu : personaList,
184195
mostRecentlyUsedPersons : personaList.slice(0,5),
185196
showmessageerror: this.props.isRequired && this.state.selectedPersons.length === 0
186197
});
187198
}
188199
} catch (e) {
189-
console.error("Error occured while fetching the users.", e);
200+
console.error("Error occured while fetching the users and setting selected users.", e);
190201
}
191202
}
192203

@@ -231,7 +242,6 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
231242
return this._removeDuplicates(mostRecentlyUsedPersons, currentPersonas);
232243
}
233244

234-
235245
/**
236246
* On filter changed event
237247
*
@@ -242,7 +252,6 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
242252
private _onPersonFilterChanged = (filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): IPersonaProps[] => {
243253
if (filterText) {
244254
let filteredPersonas: IPersonaProps[] = this._filterPersons(filterText);
245-
246255
filteredPersonas = this._removeDuplicates(filteredPersonas, currentPersonas);
247256
filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas;
248257
return filteredPersonas;
@@ -252,14 +261,19 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
252261
}
253262

254263
/**
255-
* Filter persons
264+
* Filter persons based on Name and Email (starting with and contains)
256265
*
257266
* @param filterText
258267
*/
259-
private _filterPersons = (filterText: string): IPersonaProps[] => {
260-
return this.state.peoplePersonaMenu.filter(item => this._doesTextStartWith(item.primaryText as string, filterText));
268+
private _filterPersons(filterText: string): IPersonaProps[] {
269+
return this.state.peoplePersonaMenu.filter(item =>
270+
this._doesTextStartWith(item.primaryText as string, filterText)
271+
|| this._doesTextContains(item.primaryText as string, filterText)
272+
|| this._doesTextStartWith(item.secondaryText as string, filterText)
273+
|| this._doesTextContains(item.secondaryText as string, filterText));
261274
}
262275

276+
263277
/**
264278
* Removes duplicates
265279
*
@@ -276,10 +290,20 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
276290
* @param text
277291
* @param filterText
278292
*/
279-
private _doesTextStartWith = (text: string, filterText: string): boolean => {
293+
private _doesTextStartWith(text: string, filterText: string): boolean {
280294
return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
281295
}
282296

297+
/**
298+
* Checks if text contains
299+
*
300+
* @param text
301+
* @param filterText
302+
*/
303+
private _doesTextContains(text: string, filterText: string): boolean {
304+
return text.toLowerCase().indexOf(filterText.toLowerCase()) > 0;
305+
}
306+
283307
/**
284308
* Checks if list contains the person
285309
*
@@ -293,6 +317,44 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
293317
return personas.filter(item => item.primaryText === persona.primaryText).length > 0;
294318
}
295319

320+
/**
321+
* Gets the default users based on the provided email address.
322+
* Adds emails that are not found with a random generated User Id
323+
*
324+
* @param userValuesArray
325+
* @param selectedUsers
326+
*/
327+
private getDefaultUsers(userValuesArray : any[], selectedUsers : string[]) : any {
328+
let defaultuserValuesArray: any[] = [];
329+
for (let i = 0; i < selectedUsers.length; i++) {
330+
const obj = { valToCompare: selectedUsers[i] };
331+
const length = defaultuserValuesArray.length;
332+
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj);
333+
if (length === defaultuserValuesArray.length) {
334+
const defaultUnknownUser = [{
335+
id: 1000 + i, //just a random number
336+
imageUrl: "",
337+
imageInitials: "",
338+
primaryText: selectedUsers[i] , //Name
339+
secondaryText: selectedUsers[i], //Role
340+
tertiaryText: "", //status
341+
optionalText: "" //stgring
342+
}];
343+
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(defaultUnknownUser) : defaultUnknownUser;
344+
}
345+
}
346+
return defaultuserValuesArray;
347+
}
348+
349+
/**
350+
* Filters Users based on email
351+
*/
352+
private filterUsers = function (value: any, index: number, ar: any[]) {
353+
if (value.secondaryText.toLowerCase().indexOf(this.valToCompare.toLowerCase()) !== -1) {
354+
return value;
355+
}
356+
};
357+
296358
/**
297359
* Default React component render method
298360
*/
@@ -312,6 +374,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
312374
inputProps={{
313375
'aria-label': 'People Picker'
314376
}}
377+
selectedItems={this.state.selectedPersons}
315378
itemLimit={this.props.personSelectionLimit || 1}
316379
disabled={this.props.disabled}
317380
onChange={this._onPersonItemsChange} />

‎src/webparts/controlsTest/components/ControlsTest.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -308,14 +308,14 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
308308
// groupName={"Team Site Owners"}
309309
showtooltip={true}
310310
isRequired={true}
311+
defaultSelectedUsers={["[email protected]", "[email protected]"]}
311312
selectedItems={this._getPeoplePickerItems} />
312313

313314
<PeoplePicker
314315
context={this.props.context}
315316
titleText="People Picker (disabled)"
316317
disabled={true}
317-
showtooltip={true}
318-
/>
318+
showtooltip={true} />
319319
</div>
320320
);
321321
}

0 commit comments

Comments
 (0)