office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
194 lines (192 loc) • 11.9 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Dropdown", "office-ui-fabric-react/lib/Toggle", "office-ui-fabric-react/lib/Pickers", "./PeoplePickerExampleData", "es6-promise", "./PeoplePicker.Types.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, Dropdown_1, Toggle_1, Pickers_1, PeoplePickerExampleData_1, es6_promise_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var suggestionProps = {
suggestionsHeaderText: 'Suggested People',
mostRecentlyUsedHeaderText: 'Suggested Contacts',
noResultsFoundText: 'No results found',
loadingText: 'Loading',
showRemoveButtons: true
};
var limitedSearchAdditionalProps = {
searchForMoreText: 'Load all Results',
resultsMaximumNumber: 10,
searchingText: 'Searching...'
};
var limitedSearchSuggestionProps = Utilities_1.assign(limitedSearchAdditionalProps, suggestionProps);
var PeoplePickerTypesExample = (function (_super) {
tslib_1.__extends(PeoplePickerTypesExample, _super);
function PeoplePickerTypesExample() {
var _this = _super.call(this) || this;
var peopleList = [];
PeoplePickerExampleData_1.people.forEach(function (persona) {
var target = {};
Utilities_1.assign(target, persona);
peopleList.push(target);
});
_this.state = {
currentPicker: 1,
delayResults: false,
peopleList: peopleList,
mostRecentlyUsed: PeoplePickerExampleData_1.mostRecentlyUsed
};
return _this;
}
PeoplePickerTypesExample.prototype.render = function () {
var currentPicker;
switch (this.state.currentPicker) {
case 1:
currentPicker = this._renderNormalPicker();
break;
case 2:
currentPicker = this._renderCompactPicker();
break;
case 3:
currentPicker = this._renderListPicker();
break;
case 4:
currentPicker = this._renderPreselectedItemsPicker();
break;
case 5:
currentPicker = this._renderLimitedSearch();
break;
}
return (React.createElement("div", null,
currentPicker,
React.createElement("div", { className: 'dropdown-div' },
React.createElement(Dropdown_1.Dropdown, { label: 'Select People Picker Type', options: [
{ key: 1, text: 'Normal' },
{ key: 2, text: 'Compact' },
{ key: 3, text: 'Members List' },
{ key: 4, text: 'Preselected Items' },
{ key: 5, text: 'Limit Search' }
], selectedKey: this.state.currentPicker, onChanged: this._dropDownSelected }),
React.createElement(Toggle_1.Toggle, { label: 'Delay Suggestion Results', defaultChecked: false, onChanged: this._toggleDelayResultsChange }))));
};
PeoplePickerTypesExample.prototype._renderListPicker = function () {
return (React.createElement(Pickers_1.ListPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: function (persona) { return persona.primaryText; }, className: 'ms-PeoplePicker', pickerSuggestionsProps: suggestionProps, key: 'list', onRemoveSuggestion: this._onRemoveSuggestion }));
};
PeoplePickerTypesExample.prototype._renderNormalPicker = function () {
return (React.createElement(Pickers_1.NormalPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: function (persona) { return persona.primaryText; }, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', key: 'normal', onRemoveSuggestion: this._onRemoveSuggestion }));
};
PeoplePickerTypesExample.prototype._renderCompactPicker = function () {
return (React.createElement(Pickers_1.CompactPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: function (persona) { return persona.primaryText; }, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', onRemoveSuggestion: this._onRemoveSuggestion }));
};
PeoplePickerTypesExample.prototype._renderPreselectedItemsPicker = function () {
return (React.createElement(Pickers_1.CompactPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: function (persona) { return persona.primaryText; }, className: 'ms-PeoplePicker', defaultSelectedItems: PeoplePickerExampleData_1.people.splice(0, 3), key: 'list', pickerSuggestionsProps: suggestionProps, onRemoveSuggestion: this._onRemoveSuggestion }));
};
PeoplePickerTypesExample.prototype._renderLimitedSearch = function () {
limitedSearchSuggestionProps.resultsFooter = this._renderFooterText;
limitedSearchSuggestionProps.resultsFooterFull = this._renderFooterFullText;
return (React.createElement(Pickers_1.CompactPeoplePicker, { onResolveSuggestions: this._onFilterChangedWithLimit, onEmptyInputFocus: this._returnMostRecentlyUsedWithLimit, getTextFromItem: function (persona) { return persona.primaryText; }, className: 'ms-PeoplePicker', onGetMoreResults: this._onFilterChanged, pickerSuggestionsProps: limitedSearchSuggestionProps, onRemoveSuggestion: this._onRemoveSuggestion }));
};
PeoplePickerTypesExample.prototype._renderFooterText = function () {
return React.createElement("div", null, "No additional results");
};
PeoplePickerTypesExample.prototype._renderFooterFullText = function () {
return React.createElement("div", null, "Top 10 results");
};
PeoplePickerTypesExample.prototype._onRemoveSuggestion = function (item) {
var _a = this.state, peopleList = _a.peopleList, mostRecentlyUsed = _a.mostRecentlyUsed;
var indexPeopleList = peopleList.indexOf(item);
var indexMostRecentlyUsed = mostRecentlyUsed.indexOf(item);
if (indexPeopleList >= 0) {
var newPeople = peopleList.slice(0, indexPeopleList).concat(peopleList.slice(indexPeopleList + 1));
this.setState({ peopleList: newPeople });
}
if (indexMostRecentlyUsed >= 0) {
var newSuggestedPeople = mostRecentlyUsed.slice(0, indexMostRecentlyUsed).concat(mostRecentlyUsed.slice(indexMostRecentlyUsed + 1));
this.setState({ mostRecentlyUsed: newSuggestedPeople });
}
};
PeoplePickerTypesExample.prototype._onFilterChanged = function (filterText, currentPersonas, limitResults) {
if (filterText) {
var filteredPersonas = this._filterPersonasByText(filterText);
filteredPersonas = this._removeDuplicates(filteredPersonas, currentPersonas);
filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas;
return this._filterPromise(filteredPersonas);
}
else {
return [];
}
};
PeoplePickerTypesExample.prototype._returnMostRecentlyUsed = function (currentPersonas) {
var mostRecentlyUsed = this.state.mostRecentlyUsed;
mostRecentlyUsed = this._removeDuplicates(mostRecentlyUsed, currentPersonas);
return this._filterPromise(mostRecentlyUsed);
};
PeoplePickerTypesExample.prototype._returnMostRecentlyUsedWithLimit = function (currentPersonas) {
var mostRecentlyUsed = this.state.mostRecentlyUsed;
mostRecentlyUsed = this._removeDuplicates(mostRecentlyUsed, currentPersonas);
mostRecentlyUsed = mostRecentlyUsed.splice(0, 3);
return this._filterPromise(mostRecentlyUsed);
};
PeoplePickerTypesExample.prototype._onFilterChangedWithLimit = function (filterText, currentPersonas) {
return this._onFilterChanged(filterText, currentPersonas, 3);
};
PeoplePickerTypesExample.prototype._filterPromise = function (personasToReturn) {
if (this.state.delayResults) {
return this._convertResultsToPromise(personasToReturn);
}
else {
return personasToReturn;
}
};
PeoplePickerTypesExample.prototype._listContainsPersona = function (persona, personas) {
if (!personas || !personas.length || personas.length === 0) {
return false;
}
return personas.filter(function (item) { return item.primaryText === persona.primaryText; }).length > 0;
};
PeoplePickerTypesExample.prototype._filterPersonasByText = function (filterText) {
var _this = this;
return this.state.peopleList.filter(function (item) { return _this._doesTextStartWith(item.primaryText, filterText); });
};
PeoplePickerTypesExample.prototype._doesTextStartWith = function (text, filterText) {
return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
};
PeoplePickerTypesExample.prototype._convertResultsToPromise = function (results) {
return new es6_promise_1.Promise(function (resolve, reject) { return setTimeout(function () { return resolve(results); }, 2000); });
};
PeoplePickerTypesExample.prototype._removeDuplicates = function (personas, possibleDupes) {
var _this = this;
return personas.filter(function (persona) { return !_this._listContainsPersona(persona, possibleDupes); });
};
PeoplePickerTypesExample.prototype._toggleDelayResultsChange = function (toggleState) {
this.setState({ delayResults: toggleState });
};
PeoplePickerTypesExample.prototype._dropDownSelected = function (option) {
this.setState({ currentPicker: option.key });
};
return PeoplePickerTypesExample;
}(Utilities_1.BaseComponent));
tslib_1.__decorate([
Utilities_1.autobind
], PeoplePickerTypesExample.prototype, "_renderFooterText", null);
tslib_1.__decorate([
Utilities_1.autobind
], PeoplePickerTypesExample.prototype, "_renderFooterFullText", null);
tslib_1.__decorate([
Utilities_1.autobind
], PeoplePickerTypesExample.prototype, "_onRemoveSuggestion", null);
tslib_1.__decorate([
Utilities_1.autobind
], PeoplePickerTypesExample.prototype, "_onFilterChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], PeoplePickerTypesExample.prototype, "_returnMostRecentlyUsed", null);
tslib_1.__decorate([
Utilities_1.autobind
], PeoplePickerTypesExample.prototype, "_returnMostRecentlyUsedWithLimit", null);
tslib_1.__decorate([
Utilities_1.autobind
], PeoplePickerTypesExample.prototype, "_onFilterChangedWithLimit", null);
tslib_1.__decorate([
Utilities_1.autobind
], PeoplePickerTypesExample.prototype, "_toggleDelayResultsChange", null);
tslib_1.__decorate([
Utilities_1.autobind
], PeoplePickerTypesExample.prototype, "_dropDownSelected", null);
exports.PeoplePickerTypesExample = PeoplePickerTypesExample;
});
//# sourceMappingURL=PeoplePicker.Types.Example.js.map