text: import * as tslib_1 from "tslib";
  import * as React from 'react';
  import { SuggestionsStore } from '../../Suggestions/SuggestionsStore';
  import { FloatingPeoplePicker } from 'office-ui-fabric-react/lib/FloatingPicker';
  import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
  // Helper imports to generate data for this particular examples. Not exported by any package.
  import { people, mru } from '../../../ExtendedPicker/examples/PeopleExampleData';
  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) {
              if (filterText) {
                  var filteredPersonas = _this._filterPersonasByText(filterText);
                  filteredPersonas = _this._removeDuplicates(filteredPersonas, currentPersonas);
                  return filteredPersonas;
              }
              else {
                  return [];
              }
          };
          _this._validateInput = function (input) {
              if (input.indexOf('@') !== -1) {
                  return true;
              }
              else if (input.length > 1) {
                  return false;
              }
              else {
                  return false;
              }
          };
          _this.state = {
              peopleList: people,
              mostRecentlyUsed: mru,
              currentSelectedItems: [],
              searchValue: ''
          };
          return _this;
      }
      FloatingPeoplePickerTypesExample.prototype.render = function () {
          return (React.createElement("div", null,
              React.createElement("div", { style: { width: 208 }, ref: this._setInputElementRef },
                  React.createElement(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(FloatingPeoplePicker, { suggestionsStore: new 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));
  export { FloatingPeoplePickerTypesExample };
  //# sourceMappingURL=FloatingPeoplePicker.Basic.Example.js.map