office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
135 lines • 7.47 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "../../Suggestions/SuggestionsStore", "office-ui-fabric-react/lib/FloatingPicker", "office-ui-fabric-react/lib/ExtendedPicker", "office-ui-fabric-react/lib/SearchBox", "./FloatingPeoplePicker.Basic.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, SuggestionsStore_1, FloatingPicker_1, ExtendedPicker_1, SearchBox_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FloatingPeoplePickerTypesExample = /** @class */ (function (_super) {
tslib_1.__extends(FloatingPeoplePickerTypesExample, _super);
function FloatingPeoplePickerTypesExample(props) {
var _this = _super.call(this, props) || this;
_this._onFocus = function () {
if (_this._picker) {
_this._picker.showPicker();
}
};
_this._setInputElementRef = function (ref) {
if (ref && ref.getElementsByClassName('ms-SearchBox-field').length > 0) {
_this._inputElement = ref.getElementsByClassName('ms-SearchBox-field')[0];
}
};
_this._setComponentRef = function (component) {
_this._picker = component;
};
_this._onSearchChange = function (newValue) {
if (newValue !== _this.state.searchValue) {
_this.setState({ searchValue: newValue });
_this._picker.onQueryStringChanged(newValue);
}
};
_this._onPickerChange = function (selectedSuggestion) {
_this.setState({ searchValue: selectedSuggestion.text ? selectedSuggestion.text : '' });
_this._picker.hidePicker();
};
_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._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 filteredPersonas;
}
else {
return [];
}
};
_this._validateInput = function (input) {
if (input.indexOf('@') !== -1) {
return true;
}
else if (input.length > 1) {
return false;
}
else {
return false;
}
};
var peopleList = [];
ExtendedPicker_1.people.forEach(function (persona) {
var target = {};
Utilities_1.assign(target, persona);
peopleList.push(target);
});
_this.state = {
peopleList: peopleList,
mostRecentlyUsed: ExtendedPicker_1.mru,
currentSelectedItems: [],
searchValue: ''
};
return _this;
}
FloatingPeoplePickerTypesExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement("div", { className: "ms-SearchBoxSmallExample", ref: this._setInputElementRef },
React.createElement(SearchBox_1.SearchBox, { placeholder: 'Search a person', onChange: this._onSearchChange, value: this.state.searchValue, onFocus: this._onFocus })),
this._renderFloatingPicker()));
};
FloatingPeoplePickerTypesExample.prototype._renderFloatingPicker = function () {
var _this = this;
var suggestionProps = {
footerItemsProps: [
{
renderItem: function () {
return React.createElement("div", null,
"Showing ",
_this._picker.suggestions.length,
" results");
},
shouldShow: function () {
return _this._picker.suggestions.length > 0;
}
}
]
};
return (React.createElement(FloatingPicker_1.FloatingPeoplePicker, { suggestionsStore: new SuggestionsStore_1.SuggestionsStore(), onResolveSuggestions: this._onFilterChanged, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: suggestionProps, key: 'normal', onRemoveSuggestion: this._onRemoveSuggestion, onValidateInput: this._validateInput, componentRef: this._setComponentRef, onChange: this._onPickerChange, inputElement: this._inputElement, resolveDelay: 300 }));
};
FloatingPeoplePickerTypesExample.prototype._getTextFromItem = function (persona) {
return persona.text;
};
FloatingPeoplePickerTypesExample.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;
};
FloatingPeoplePickerTypesExample.prototype._filterPersonasByText = function (filterText) {
var _this = this;
return this.state.peopleList.filter(function (item) {
return _this._doesTextStartWith(item.text, filterText);
});
};
FloatingPeoplePickerTypesExample.prototype._doesTextStartWith = function (text, filterText) {
return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
};
FloatingPeoplePickerTypesExample.prototype._removeDuplicates = function (personas, possibleDupes) {
var _this = this;
return personas.filter(function (persona) { return !_this._listContainsPersona(persona, possibleDupes); });
};
return FloatingPeoplePickerTypesExample;
}(React.Component));
exports.FloatingPeoplePickerTypesExample = FloatingPeoplePickerTypesExample;
});
//# sourceMappingURL=FloatingPeoplePicker.Basic.Example.js.map