office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
298 lines • 15.3 kB
JavaScript
import * as tslib_1 from "tslib";
/* tslint:disable */
import * as React from 'react';
/* tslint:enable */
import { assign } from 'office-ui-fabric-react/lib/Utilities';
import { ExtendedPeoplePicker } from 'office-ui-fabric-react/lib/ExtendedPicker';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { people, mru, groupOne, groupTwo } from './PeopleExampleData';
import { SuggestionsStore, FloatingPeoplePicker } from 'office-ui-fabric-react/lib/FloatingPicker';
import { SelectedPeopleList } from 'office-ui-fabric-react/lib/SelectedItemsList';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import * as stylesImport from './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._toggleControlledComponent = function (ev, toggleState) {
_this.setState({ controlledComponent: toggleState });
};
_this._setComponentRef = function (component) {
_this._picker = component;
};
_this._onSetFocusButtonClicked = function () {
if (_this._picker) {
_this._picker.focus();
}
};
_this._onExpandItem = function (item) {
if (_this.state.controlledComponent) {
var currentlySelectedItems = _this.state.currentlySelectedItems;
var indexToRemove = currentlySelectedItems.indexOf(item);
var newItems = currentlySelectedItems;
newItems.splice.apply(newItems, [indexToRemove, 1].concat(_this._getExpandedGroupItems(item)));
_this.setState({ currentlySelectedItems: newItems });
}
else {
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) {
var controlledComponent = _this.state.controlledComponent;
var filteredPersonas = [];
if (filterText) {
filteredPersonas = _this._filterPersonasByText(filterText);
filteredPersonas = _this._removeDuplicates(filteredPersonas, currentPersonas);
filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas;
}
if (controlledComponent) {
_this.setState({ suggestionItems: filteredPersonas });
}
return controlledComponent ? null : _this._convertResultsToPromise(filteredPersonas);
};
_this._returnMostRecentlyUsed = function (currentPersonas) {
var controlledComponent = _this.state.controlledComponent;
var mostRecentlyUsed = _this.state.mostRecentlyUsed;
mostRecentlyUsed = _this._removeDuplicates(mostRecentlyUsed, _this._picker.items);
if (controlledComponent) {
_this.setState({ suggestionItems: mostRecentlyUsed });
}
return controlledComponent ? null : _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._onItemAdded = function (selectedSuggestion) {
_this.setState({ currentlySelectedItems: _this.state.currentlySelectedItems.concat(selectedSuggestion) });
};
_this._onItemsRemoved = function (items) {
var newItems = _this.state.currentlySelectedItems.filter(function (value) { return items.indexOf(value) === -1; });
_this.setState({ currentlySelectedItems: newItems });
};
_this._validateInput = function (input) {
if (input.indexOf('@') !== -1) {
return true;
}
else if (input.length > 1) {
return false;
}
else {
return false;
}
};
var peopleList = [];
people.forEach(function (persona) {
var target = {};
assign(target, persona);
peopleList.push(target);
});
_this.state = {
peopleList: peopleList,
mostRecentlyUsed: mru,
searchMoreAvailable: true,
currentlySelectedItems: [],
controlledComponent: false,
suggestionItems: []
};
_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();
}
},
ariaLabel: 'Use the typed address'
},
{
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();
},
ariaLabel: 'Search more'
}
],
shouldSelectFirstItem: function () {
return !_this._shouldShowSuggestedContacts();
}
};
_this._floatingPickerProps = {
suggestionsStore: new 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
};
_this._focusZoneProps = {
shouldInputLoseFocusOnArrowKey: _this._shouldInputLoseFocusOnArrowKey,
handleTabKey: 1 /* all */
};
return _this;
}
ExtendedPeoplePickerTypesExample.prototype.render = function () {
return (React.createElement("div", null,
this._renderExtendedPicker(),
React.createElement(Toggle, { label: "Controlled component", defaultChecked: false, onChange: this._toggleControlledComponent }),
React.createElement(PrimaryButton, { text: "Set focus", onClick: this._onSetFocusButtonClicked })));
};
ExtendedPeoplePickerTypesExample.prototype._renderExtendedPicker = function () {
return (React.createElement(ExtendedPeoplePicker, { selectedItems: this.state.controlledComponent ? this.state.currentlySelectedItems : undefined, suggestionItems: this.state.controlledComponent ? this.state.suggestionItems : undefined, onItemAdded: this.state.controlledComponent ? this._onItemAdded : undefined, onItemsRemoved: this.state.controlledComponent ? this._onItemsRemoved : undefined, 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(), focusZoneProps: this._focusZoneProps }));
};
ExtendedPeoplePickerTypesExample.prototype._renderHeader = function () {
return React.createElement("div", { "data-is-focusable": true }, "TO:");
};
ExtendedPeoplePickerTypesExample.prototype._onRenderFloatingPicker = function (props) {
return React.createElement(FloatingPeoplePicker, tslib_1.__assign({}, props));
};
ExtendedPeoplePickerTypesExample.prototype._onRenderSelectedItems = function (props) {
return React.createElement(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 groupOne;
case 'Group Two':
return groupTwo;
default:
return [];
}
};
ExtendedPeoplePickerTypesExample.prototype._shouldInputLoseFocusOnArrowKey = function () {
return true;
};
return ExtendedPeoplePickerTypesExample;
}(React.Component));
export { ExtendedPeoplePickerTypesExample };
//# sourceMappingURL=ExtendedPeoplePicker.Basic.Example.js.map