office-ui-fabric-react/lib-amd/components/PeoplePicker/PeoplePicker.d.ts

Reusable React components for building experiences for Office 365.

import * as React from 'react';
import { IPeoplePickerProps } from './PeoplePicker.Props';
import { IPersonaProps } from '../../Persona';
import './PeoplePicker.scss';
export interface IPeoplePickerState {
    isActive?: boolean;
    isSearching?: boolean;
    searchTextValue?: string;
    highlightedSearchResultIndex?: number;
    selectedPersonas?: IPersonaProps[];
}
export declare class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePickerState> {
    static defaultProps: IPeoplePickerProps;
    refs: {
        [key: string]: React.ReactInstance;
        root: HTMLElement;
        _searchBox: HTMLElement;
        searchField: HTMLInputElement;
        pickerResults: HTMLElement;
        pickerResultGroups: HTMLElement;
        selectedSearchResult: HTMLElement;
        focusZone: HTMLElement;
    };
    private _events;
    private _suggestionsCount;
    private _highlightedSearchResult;
    private _focusedPersonaIndex;
    constructor(props: IPeoplePickerProps);
    componentDidMount(): void;
    componentWillUnmount(): void;
    componentDidUpdate(): void;
    render(): JSX.Element;
    private _onSearchBoxKeyDown(ev);
    /**
     *
     */
    private _onSelectedPersonaFocus(element, ev);
    /**
     * Handles closing the people picker whenever focus is lost
     */
    private _onFocusCapture(ev);
    /**
     * Handles closing the people picker whenever focus is lost through mouse.
     */
    private _onClickCapture(ev);
    /**
     * Click handler for when the user clicks on the Search For Results button.
     */
    private _searchForMoreResults(event);
    /**
     * Opens the people picker dropdown.
     */
    private _activatePeoplePicker();
    /**
     * Closes the people picker dropdown.
     */
    private _dismissPeoplePicker();
    /**
     *
     */
    private _removeSuggestedPersona(index, personaInfo);
    /**
     * Selects the persona, dismisses the people picker, and clears out the search field.
     */
    private _addPersonaToSelectedList(personaInfo);
    /**
     * Creates a new persona based on what the user has typed (non search result persona)
     */
    private _addManualPersonaToSelectedList();
    /**
     * Handles keyboard inputs for the PeoplePicker.
     */
    private _onSearchFieldKeyDown(ev);
    /**
     * Sets which persona in the search results is currently selected/highlighted.
     */
    private _setSelectedSearchResultIndex(index);
    /**
     * Handles changes in the input text box value, so we can notify the host
     * of the search value change.
     */
    private _onSearchFieldTextChanged();
    /**
     * Handles keeping the currently selected persona in view.
     * If there's no search result selected, then reset the scroll to 0.
     */
    private _setScollPosition();
    /**
     * Removes one of the selected personas
     */
    private _removeSelectedPersona(index);
    /**
     * Renders a list of personas using the list of selected personas, for the Member List variant.
     */
    private _renderSelectedPersonasAsMemberList();
    /**
     * Renders a list of personas using the list of selected personas. Uses the default layout
     * of displaying the personas in the search box.
     */
    private _renderSelectedPersonas();
    /**
     * Renders the search field, which is the input element inside the searchbox.
     */
    private _renderSearchField();
    /**
     * Renders the popup search results
     */
    private _renderSearchResults();
    /**
     * Renders the popup search results, for the Member List variant.
     */
    private _renderSearchResultsForMemberList();
    /**
     * Renders a single persona as part of a list to be displayed in the search results.
     */
    private _renderSearchResultItem(personaInfo, id);
}