office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
241 lines • 12.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable */
var React = require("react");
/* tslint:enable */
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var ExtendedPeoplePicker_1 = require("../PeoplePicker/ExtendedPeoplePicker");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var PeopleExampleData_1 = require("./PeopleExampleData");
var FloatingPicker_1 = require("../../FloatingPicker");
var SelectedItemsList_1 = require("../../SelectedItemsList");
var stylesImport = require("./ExtendedPeoplePicker.Basic.Example.scss");
// tslint:disable-next-line:no-any
var styles = stylesImport;
// tslint:disable-next-line:no-any
var ExtendedPeoplePickerTypesExample = /** @class */ (function (_super) {
tslib_1.__extends(ExtendedPeoplePickerTypesExample, _super);
function ExtendedPeoplePickerTypesExample(props) {
var _this = _super.call(this, props) || this;
_this._setComponentRef = function (component) {
_this._picker = component;
};
_this._onSetFocusButtonClicked = function () {
if (_this._picker) {
_this._picker.focus();
}
};
_this._onExpandItem = function (item) {
if (_this._picker.selectedItemsList.current) {
// tslint:disable-next-line:no-any
_this._picker.selectedItemsList.current.replaceItem(item, _this._getExpandedGroupItems(item));
}
};
_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 _this._convertResultsToPromise(filteredPersonas);
}
else {
return _this._convertResultsToPromise([]);
}
};
_this._returnMostRecentlyUsed = function (currentPersonas) {
var mostRecentlyUsed = _this.state.mostRecentlyUsed;
mostRecentlyUsed = _this._removeDuplicates(mostRecentlyUsed, _this._picker.items);
return _this._convertResultsToPromise(mostRecentlyUsed);
};
_this._shouldShowForceResolve = function () {
return Boolean(_this._picker.floatingPicker.current &&
_this._validateInput(_this._picker.floatingPicker.current.inputText) &&
_this._picker.floatingPicker.current.suggestions.length === 0);
};
_this._shouldShowSuggestedContacts = function () {
return _this._picker !== undefined
&& _this._picker.inputElement !== null
&& _this._picker.inputElement.value === '';
};
_this._onInputChanged = function () {
_this.setState({ searchMoreAvailable: true });
};
_this._validateInput = function (input) {
if (input.indexOf('@') !== -1) {
return true;
}
else if (input.length > 1) {
return false;
}
else {
return false;
}
};
var peopleList = [];
PeopleExampleData_1.people.forEach(function (persona) {
var target = {};
Utilities_1.assign(target, persona);
peopleList.push(target);
});
_this.state = {
peopleList: peopleList,
mostRecentlyUsed: PeopleExampleData_1.mru,
searchMoreAvailable: true,
};
_this._suggestionProps = {
headerItemsProps: [{
renderItem: function () {
return (React.createElement("div", { className: styles.headerItem },
"Use this address: ",
_this._picker
&& _this._picker.inputElement
&& _this._picker.inputElement ? _this._picker.inputElement.value : ''));
},
shouldShow: function () {
return _this._picker !== undefined
&& _this._picker.inputElement !== null
&& _this._picker.inputElement.value.indexOf('@') > -1;
},
onExecute: function () {
if (_this._picker.floatingPicker.current !== null) {
_this._picker.floatingPicker.current.forceResolveSuggestion();
}
}
},
{
renderItem: function () {
return (React.createElement("div", { className: styles.headerItem }, "Suggested Contacts"));
},
shouldShow: _this._shouldShowSuggestedContacts,
}
],
footerItemsProps: [{
renderItem: function () {
return (React.createElement("div", { className: styles.footerItem }, "No results"));
},
shouldShow: function () {
return _this._picker !== undefined
&& _this._picker.floatingPicker !== undefined
&& _this._picker.floatingPicker.current !== null
&& _this._picker.floatingPicker.current.suggestions.length === 0;
}
},
{
renderItem: function () { return (React.createElement("div", { className: styles.footerItem }, "Search for more")); },
onExecute: function () { _this.setState({ searchMoreAvailable: false }); },
shouldShow: function () { return _this.state.searchMoreAvailable && !_this._shouldShowSuggestedContacts(); }
}],
shouldSelectFirstItem: function () { return !_this._shouldShowSuggestedContacts(); },
};
_this._floatingPickerProps = {
suggestionsStore: new FloatingPicker_1.SuggestionsStore(),
onResolveSuggestions: _this._onFilterChanged,
getTextFromItem: _this._getTextFromItem,
pickerSuggestionsProps: _this._suggestionProps,
key: 'normal',
onRemoveSuggestion: _this._onRemoveSuggestion,
onValidateInput: _this._validateInput,
onZeroQuerySuggestion: _this._returnMostRecentlyUsed,
showForceResolve: _this._shouldShowForceResolve,
onInputChanged: _this._onInputChanged,
onSuggestionsHidden: function () { console.log('FLOATINGPICKER: hidden'); },
onSuggestionsShown: function () { console.log('FLOATINGPICKER: shown'); },
};
_this._selectedItemsListProps = {
onCopyItems: _this._onCopyItems,
onExpandGroup: _this._onExpandItem,
removeMenuItemText: 'Remove',
copyMenuItemText: 'Copy name',
editMenuItemText: 'Edit',
getEditingItemText: _this._getEditingItemText,
onRenderFloatingPicker: _this._onRenderFloatingPicker,
floatingPickerProps: _this._floatingPickerProps,
};
return _this;
}
ExtendedPeoplePickerTypesExample.prototype.render = function () {
return (React.createElement("div", null,
this._renderExtendedPicker(),
React.createElement(Button_1.PrimaryButton, { text: 'Set focus', onClick: this._onSetFocusButtonClicked })));
};
ExtendedPeoplePickerTypesExample.prototype._renderExtendedPicker = function () {
return (React.createElement(ExtendedPeoplePicker_1.ExtendedPeoplePicker, { floatingPickerProps: this._floatingPickerProps, selectedItemsListProps: this._selectedItemsListProps, onRenderFloatingPicker: this._onRenderFloatingPicker, onRenderSelectedItems: this._onRenderSelectedItems, className: 'ms-PeoplePicker', key: 'normal', inputProps: {
onBlur: function (ev) { return console.log('onBlur called'); },
onFocus: function (ev) { return console.log('onFocus called'); },
'aria-label': 'People Picker'
}, componentRef: this._setComponentRef, headerComponent: this._renderHeader() }));
};
ExtendedPeoplePickerTypesExample.prototype._renderHeader = function () {
return React.createElement("div", null, "TO:");
};
ExtendedPeoplePickerTypesExample.prototype._onRenderFloatingPicker = function (props) {
return (React.createElement(FloatingPicker_1.FloatingPeoplePicker, tslib_1.__assign({}, props)));
};
ExtendedPeoplePickerTypesExample.prototype._onRenderSelectedItems = function (props) {
return (React.createElement(SelectedItemsList_1.SelectedPeopleList, tslib_1.__assign({}, props)));
};
ExtendedPeoplePickerTypesExample.prototype._getEditingItemText = function (item) {
return item.text;
};
ExtendedPeoplePickerTypesExample.prototype._onCopyItems = function (items) {
var copyText = '';
items.forEach(function (item, index) {
copyText += item.text;
if (index < items.length - 1) {
copyText += ', ';
}
});
return copyText;
};
ExtendedPeoplePickerTypesExample.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;
};
ExtendedPeoplePickerTypesExample.prototype._filterPersonasByText = function (filterText) {
var _this = this;
return this.state.peopleList.filter(function (item) { return _this._doesTextStartWith(item.text, filterText); });
};
ExtendedPeoplePickerTypesExample.prototype._doesTextStartWith = function (text, filterText) {
return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
};
ExtendedPeoplePickerTypesExample.prototype._removeDuplicates = function (personas, possibleDupes) {
var _this = this;
return personas.filter(function (persona) { return !_this._listContainsPersona(persona, possibleDupes); });
};
ExtendedPeoplePickerTypesExample.prototype._getTextFromItem = function (persona) {
return persona.text;
};
ExtendedPeoplePickerTypesExample.prototype._convertResultsToPromise = function (results) {
// tslint:disable-next-line:no-any
return new Promise(function (resolve, reject) { return setTimeout(function () { return resolve(results); }, 150); });
};
ExtendedPeoplePickerTypesExample.prototype._getExpandedGroupItems = function (item) {
switch (item.text) {
case 'Group One':
return PeopleExampleData_1.groupOne;
case 'Group Two':
return PeopleExampleData_1.groupTwo;
default:
return [];
}
};
return ExtendedPeoplePickerTypesExample;
}(Utilities_1.BaseComponent));
exports.ExtendedPeoplePickerTypesExample = ExtendedPeoplePickerTypesExample;
//# sourceMappingURL=ExtendedPeoplePicker.Basic.Example.js.map