office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
283 lines • 16.6 kB
JavaScript
import * as tslib_1 from "tslib";
/* tslint:disable */
import * as React from 'react';
/* tslint:enable */
import { BaseComponent, assign } from 'office-ui-fabric-react/lib/Utilities';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { Persona } from 'office-ui-fabric-react/lib/Persona';
import { CompactPeoplePicker, ListPeoplePicker, NormalPeoplePicker, ValidationState } from 'office-ui-fabric-react/lib/Pickers';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { people, mru } from './PeoplePickerExampleData';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Promise } from 'es6-promise';
import './PeoplePicker.Types.Example.scss';
var suggestionProps = {
suggestionsHeaderText: 'Suggested People',
mostRecentlyUsedHeaderText: 'Suggested Contacts',
noResultsFoundText: 'No results found',
loadingText: 'Loading',
showRemoveButtons: true,
suggestionsAvailableAlertText: 'People Picker Suggestions available',
suggestionsContainerAriaLabel: 'Suggested contacts'
};
var limitedSearchAdditionalProps = {
searchForMoreText: 'Load all Results',
resultsMaximumNumber: 10,
searchingText: 'Searching...'
};
var limitedSearchSuggestionProps = assign(limitedSearchAdditionalProps, suggestionProps);
var PeoplePickerTypesExample = /** @class */ (function (_super) {
tslib_1.__extends(PeoplePickerTypesExample, _super);
function PeoplePickerTypesExample(props) {
var _this = _super.call(this, props) || this;
_this._onItemsChange = function (items) {
_this.setState({
currentSelectedItems: items
});
};
_this._onSetFocusButtonClicked = function () {
if (_this._picker) {
_this._picker.focusInput();
}
};
_this._renderFooterText = function () {
return React.createElement("div", null, "No additional results");
};
_this._onRemoveSuggestion = function (item) {
var _a = _this.state, peopleList = _a.peopleList, mruState = _a.mostRecentlyUsed;
var indexPeopleList = peopleList.indexOf(item);
var indexMostRecentlyUsed = mruState.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 = mruState
.slice(0, indexMostRecentlyUsed)
.concat(mruState.slice(indexMostRecentlyUsed + 1));
_this.setState({ mostRecentlyUsed: newSuggestedPeople });
}
};
_this._onItemSelected = function (item) {
var processedItem = Object.assign({}, item);
processedItem.text = item.text + " (selected)";
return new Promise(function (resolve, reject) { return setTimeout(function () { return resolve(processedItem); }, 250); });
};
_this._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 [];
}
};
_this._returnMostRecentlyUsed = function (currentPersonas) {
var mostRecentlyUsed = _this.state.mostRecentlyUsed;
mostRecentlyUsed = _this._removeDuplicates(mostRecentlyUsed, currentPersonas);
return _this._filterPromise(mostRecentlyUsed);
};
_this._returnMostRecentlyUsedWithLimit = function (currentPersonas) {
var mostRecentlyUsed = _this.state.mostRecentlyUsed;
mostRecentlyUsed = _this._removeDuplicates(mostRecentlyUsed, currentPersonas);
mostRecentlyUsed = mostRecentlyUsed.splice(0, 3);
return _this._filterPromise(mostRecentlyUsed);
};
_this._onFilterChangedWithLimit = function (filterText, currentPersonas) {
return _this._onFilterChanged(filterText, currentPersonas, 3);
};
_this._toggleDelayResultsChange = function (ev, toggleState) {
_this.setState({ delayResults: toggleState });
};
_this._dropDownSelected = function (event, option) {
_this.setState({ currentPicker: option.key });
};
_this._validateInput = function (input) {
if (input.indexOf('@') !== -1) {
return ValidationState.valid;
}
else if (input.length > 1) {
return ValidationState.warning;
}
else {
return ValidationState.invalid;
}
};
var peopleList = [];
people.forEach(function (persona) {
var target = {};
assign(target, persona);
peopleList.push(target);
});
_this.state = {
currentPicker: 1,
delayResults: false,
peopleList: peopleList,
mostRecentlyUsed: mru,
currentSelectedItems: []
};
return _this;
}
PeoplePickerTypesExample.prototype.render = function () {
var currentPicker = undefined;
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;
case 6:
currentPicker = this._renderProcessSelectionPicker();
case 7:
currentPicker = this._renderControlledPicker();
break;
default:
}
return (React.createElement("div", null,
currentPicker,
React.createElement("div", { className: 'dropdown-div' },
React.createElement(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' },
{ key: 6, text: 'Process Selection' },
{ key: 7, text: 'Controlled Picker' }
], selectedKey: this.state.currentPicker, onChange: this._dropDownSelected }),
React.createElement(Toggle, { label: "Delay Suggestion Results", defaultChecked: false, onChange: this._toggleDelayResultsChange })),
React.createElement(PrimaryButton, { text: "Set focus", onClick: this._onSetFocusButtonClicked })));
};
PeoplePickerTypesExample.prototype._getTextFromItem = function (persona) {
return persona.text;
};
PeoplePickerTypesExample.prototype._renderListPicker = function () {
return (React.createElement(ListPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: this._getTextFromItem, className: 'ms-PeoplePicker', pickerSuggestionsProps: suggestionProps, key: 'list', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, inputProps: {
onBlur: function (ev) { return console.log('onBlur called'); },
onFocus: function (ev) { return console.log('onFocus called'); },
'aria-label': 'People Picker'
}, componentRef: this._resolveRef('_picker'), resolveDelay: 300 }));
};
PeoplePickerTypesExample.prototype._renderNormalPicker = function () {
return (React.createElement(NormalPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', key: 'normal', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, removeButtonAriaLabel: 'Remove', inputProps: {
onBlur: function (ev) { return console.log('onBlur called'); },
onFocus: function (ev) { return console.log('onFocus called'); },
'aria-label': 'People Picker'
}, componentRef: this._resolveRef('_picker'), onInputChange: this._onInputChange, resolveDelay: 300 }));
};
PeoplePickerTypesExample.prototype._renderCompactPicker = function () {
return (React.createElement(CompactPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, inputProps: {
onBlur: function (ev) { return console.log('onBlur called'); },
onFocus: function (ev) { return console.log('onFocus called'); },
'aria-label': 'People Picker'
}, componentRef: this._resolveRef('_picker'), resolveDelay: 300 }));
};
PeoplePickerTypesExample.prototype._renderPreselectedItemsPicker = function () {
return (React.createElement(CompactPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: this._getTextFromItem, className: 'ms-PeoplePicker', defaultSelectedItems: people.splice(0, 3), key: 'list', pickerSuggestionsProps: suggestionProps, onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, inputProps: {
onBlur: function (ev) { return console.log('onBlur called'); },
onFocus: function (ev) { return console.log('onFocus called'); },
'aria-label': 'People Picker'
}, componentRef: this._resolveRef('_picker'), resolveDelay: 300 }));
};
PeoplePickerTypesExample.prototype._renderLimitedSearch = function () {
limitedSearchSuggestionProps.resultsFooter = this._renderFooterText;
return (React.createElement(CompactPeoplePicker, { onResolveSuggestions: this._onFilterChangedWithLimit, onEmptyInputFocus: this._returnMostRecentlyUsedWithLimit, getTextFromItem: this._getTextFromItem, className: 'ms-PeoplePicker', onGetMoreResults: this._onFilterChanged, pickerSuggestionsProps: limitedSearchSuggestionProps, onRemoveSuggestion: this._onRemoveSuggestion, inputProps: {
onBlur: function (ev) { return console.log('onBlur called'); },
onFocus: function (ev) { return console.log('onFocus called'); },
'aria-label': 'People Picker'
}, componentRef: this._resolveRef('_picker'), resolveDelay: 300 }));
};
PeoplePickerTypesExample.prototype._renderProcessSelectionPicker = function () {
return (React.createElement(NormalPeoplePicker, { onResolveSuggestions: this._onFilterChanged, onEmptyInputFocus: this._returnMostRecentlyUsed, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, removeButtonAriaLabel: 'Remove', onItemSelected: this._onItemSelected, inputProps: {
onBlur: function (ev) { return console.log('onBlur called'); },
onFocus: function (ev) { return console.log('onFocus called'); },
'aria-label': 'People Picker'
}, componentRef: this._resolveRef('_picker'), resolveDelay: 300 }));
};
PeoplePickerTypesExample.prototype._renderControlledPicker = function () {
var _this = this;
var controlledItems = [];
for (var i = 0; i < 5; i++) {
var item = this.state.peopleList[i];
if (this.state.currentSelectedItems.indexOf(item) === -1) {
controlledItems.push(this.state.peopleList[i]);
}
}
return (React.createElement("div", null,
React.createElement(NormalPeoplePicker, { onResolveSuggestions: this._onFilterChanged, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', key: 'controlled', selectedItems: this.state.currentSelectedItems, onChange: this._onItemsChange, inputProps: {
onBlur: function (ev) { return console.log('onBlur called'); },
onFocus: function (ev) { return console.log('onFocus called'); }
}, componentRef: this._resolveRef('_picker'), resolveDelay: 300 }),
React.createElement("label", null, " Click to Add a person "),
controlledItems.map(function (item, index) { return (React.createElement("div", { key: index },
React.createElement(DefaultButton, { className: "controlledPickerButton",
// tslint:disable-next-line:jsx-no-lambda
onClick: function () {
_this.setState({
currentSelectedItems: _this.state.currentSelectedItems.concat([item])
});
} },
React.createElement(Persona, tslib_1.__assign({}, item))))); })));
};
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.text === persona.text; }).length > 0;
};
PeoplePickerTypesExample.prototype._filterPersonasByText = function (filterText) {
var _this = this;
return this.state.peopleList.filter(function (item) { return _this._doesTextStartWith(item.text, filterText); });
};
PeoplePickerTypesExample.prototype._doesTextStartWith = function (text, filterText) {
return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
};
PeoplePickerTypesExample.prototype._convertResultsToPromise = function (results) {
return new 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); });
};
/**
* Takes in the picker input and modifies it in whichever way
* the caller wants, i.e. parsing entries copied from Outlook (sample
* input: "Aaron Reid <aaron>").
*
* @param input The text entered into the picker.
*/
PeoplePickerTypesExample.prototype._onInputChange = function (input) {
var outlookRegEx = /<.*>/g;
var emailAddress = outlookRegEx.exec(input);
if (emailAddress && emailAddress[0]) {
return emailAddress[0].substring(1, emailAddress[0].length - 1);
}
return input;
};
return PeoplePickerTypesExample;
}(BaseComponent));
export { PeoplePickerTypesExample };
//# sourceMappingURL=PeoplePicker.Types.Example.js.map