office-ui-fabric-react/lib/demo/pages/PeoplePickerPage/examples/PeoplePicker.Types.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "/* tslint:disable */\nimport * as React from 'react';\n/* tslint:enable */\nimport {\n  ListPeoplePicker,\n  NormalPeoplePicker,\n  CompactPeoplePicker,\n  IContextualMenuItem,\n  Dropdown,\n  IDropdownOption,\n  IPersonaProps,\n  IBasePickerSuggestionsProps,\n  BaseComponent,\n  autobind,\n  Toggle\n} from '../../../../index';\nimport { IPersonaWithMenu } from '../../../../components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.Props';\nimport { people } from './PeoplePickerExampleData';\nimport { assign } from '../../../../utilities/object';\nimport './PeoplePicker.Types.Example.scss';\n\nexport interface IPeoplePickerExampleState {\n  currentPicker?: number | string;\n  delayResults?: boolean;\n}\n\nconst suggestionProps: IBasePickerSuggestionsProps = {\n  suggestionsHeaderText: 'Suggested People',\n  noResultsFoundText: 'No results found',\n  loadingText: 'Loading'\n};\n\nexport class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerExampleState> {\n  private _peopleList;\n  private contextualMenuItems: IContextualMenuItem[] = [\n    {\n      key: 'newItem',\n      icon: 'circlePlus',\n      name: 'New'\n    },\n    {\n      key: 'upload',\n      icon: 'upload',\n      name: 'Upload'\n    },\n    {\n      key: 'divider_1',\n      name: '-',\n    },\n    {\n      key: 'rename',\n      name: 'Rename'\n    },\n    {\n      key: 'properties',\n      name: 'Properties'\n    },\n    {\n      key: 'disabled',\n      name: 'Disabled item',\n      isDisabled: true\n    }\n  ];\n\n  constructor() {\n    super();\n    this._peopleList = [];\n    people.forEach((persona: IPersonaProps) => {\n      let target: IPersonaWithMenu = {};\n\n      assign(target, persona, { menuItems: this.contextualMenuItems });\n      this._peopleList.push(target);\n    });\n\n    this.state = {\n      currentPicker: 1,\n      delayResults: false\n    };\n  }\n\n  public render() {\n    let currentPicker: JSX.Element;\n\n    switch (this.state.currentPicker) {\n      case 1:\n        currentPicker = this._renderNormalPicker();\n        break;\n      case 2:\n        currentPicker = this._renderCompactPicker();\n        break;\n      case 3:\n        currentPicker = this._renderListPicker();\n        break;\n      case 4:\n        currentPicker = this._renderPreselectedItemsPicker();\n        break;\n      case 5:\n        currentPicker = this._renderLimitedSearch();\n        break;\n    }\n\n    return (\n      <div>\n        { currentPicker }\n        <div className={'dropdown-div'}>\n          <Dropdown label='Select People Picker Type'\n            options={[\n              { key: 1, text: 'Normal' },\n              { key: 2, text: 'Compact' },\n              { key: 3, text: 'Members List' },\n              { key: 4, text: 'Preselected Items' },\n              { key: 5, text: 'Limit Search' }\n            ]}\n            selectedKey={ this.state.currentPicker }\n            onChanged={ this._dropDownSelected }\n            />\n          <Toggle\n            label='Delay Suggestion Results'\n            defaultChecked={ false }\n            onChanged={ this._toggleChange }/>\n        </div>\n      </div>\n    );\n  }\n\n  public _renderListPicker() {\n    return (\n      <ListPeoplePicker\n        onResolveSuggestions={ this._onFilterChanged }\n        getTextFromItem={ (persona: IPersonaProps) => persona.primaryText }\n        className={ 'ms-PeoplePicker' }\n        pickerSuggestionsProps={ suggestionProps }\n        key={'list'}\n        />\n    );\n  }\n\n  public _renderNormalPicker() {\n    return (\n      <NormalPeoplePicker\n        onResolveSuggestions={ this._onFilterChanged }\n        getTextFromItem={ (persona: IPersonaProps) => persona.primaryText }\n        pickerSuggestionsProps={ suggestionProps }\n        className={ 'ms-PeoplePicker' }\n        key={ 'normal' }\n        />\n    );\n  }\n\n  public _renderCompactPicker() {\n    return (\n      <CompactPeoplePicker\n        onResolveSuggestions={ this._onFilterChanged }\n        getTextFromItem={ (persona: IPersonaProps) => persona.primaryText }\n        pickerSuggestionsProps={ suggestionProps }\n        className={ 'ms-PeoplePicker' }\n        />\n    );\n  }\n\n  public _renderPreselectedItemsPicker() {\n    return (\n      <CompactPeoplePicker\n        onResolveSuggestions={ this._onFilterChanged }\n        getTextFromItem={ (persona: IPersonaProps) => persona.primaryText }\n        className={ 'ms-PeoplePicker' }\n        defaultSelectedItems={ people.splice(0, 3) }\n        key={ 'list' }\n        pickerSuggestionsProps={ suggestionProps }\n        />\n    );\n  }\n\n  public _renderLimitedSearch() {\n    let limitedSearchSuggestionProps = suggestionProps;\n    limitedSearchSuggestionProps.searchForMoreText = 'Load all Results';\n    return (\n      <CompactPeoplePicker\n        onResolveSuggestions={ this._onFilterChangedWithLimit }\n        getTextFromItem={ (persona: IPersonaProps) => persona.primaryText }\n        className={ 'ms-PeoplePicker' }\n        onGetMoreResults={ this._onFilterChanged }\n        pickerSuggestionsProps={ limitedSearchSuggestionProps }\n        />\n    );\n  }\n\n  @autobind\n  private _onFilterChanged(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number) {\n    if (filterText) {\n      let filteredPersonas: IPersonaProps[] = this._filterPersonasByText(filterText);\n\n      filteredPersonas = this._removeDuplicates(filteredPersonas, currentPersonas);\n      filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas;\n      return this._filterPromise(filteredPersonas);\n    } else {\n      return [];\n    }\n  }\n\n  @autobind\n  private _onFilterChangedWithLimit(filterText: string, currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> {\n    return this._onFilterChanged(filterText, currentPersonas, 3);\n  }\n\n  private _filterPromise(personasToReturn: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> {\n    if (this.state.delayResults) {\n      return this._convertResultsToPromise(personasToReturn);\n    } else {\n      return personasToReturn;\n    }\n  }\n\n  private _listContainsPersona(persona: IPersonaProps, personas: IPersonaProps[]) {\n    if (!personas || !personas.length || personas.length === 0) {\n      return false;\n    }\n    return personas.filter(item => item.primaryText === persona.primaryText).length > 0;\n  }\n\n  private _filterPersonasByText(filterText: string): IPersonaProps[] {\n    return this._peopleList.filter(item => this._doesTextStartWith(item.primaryText, filterText));\n  }\n\n  private _doesTextStartWith(text: string, filterText: string): boolean {\n    return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;\n  }\n\n  private _convertResultsToPromise(results: IPersonaProps[]): Promise<IPersonaProps[]> {\n    return new Promise<IPersonaProps[]>((resolve, reject) => setTimeout(() => resolve(results), 2000));\n  }\n\n  private _removeDuplicates(personas: IPersonaProps[], possibleDupes: IPersonaProps[]) {\n    return personas.filter(persona => !this._listContainsPersona(persona, possibleDupes));\n  }\n\n  @autobind\n  private _toggleChange(toggleState: boolean) {\n    this.setState({ delayResults: toggleState });\n  }\n\n  @autobind\n  private _dropDownSelected(option: IDropdownOption) {\n    this.setState({ currentPicker: option.key });\n  }\n\n}\n";