azure-devops-ui/Components/IdentityPickerSuggestionsList/IdentityPickerSuggestionsList.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./IdentityPickerSuggestionsList.css";
import * as React from "react";
import { Callout } from '../../Callout';
import { IdentityCard } from '../../IdentityCard';
import { Observer } from '../../Observer';
import * as Resources from '../../Resources.IdentityPicker';
import { SuggestionsList } from '../../SuggestionsList';
import { css } from '../../Util';
export class IdentityPickerSuggestionsList extends React.Component {
    constructor() {
        super(...arguments);
        this.renderNoIdentitiesFound = () => {
            return (React.createElement("div", { className: "bolt-identitypickerdropdown-noresults flex-row flex-grow flex-center" }, this.props.noResultsFoundText || Resources.IdentityPickerNoResultsText));
        };
    }
    render() {
        return (React.createElement(React.Fragment, null,
            React.createElement(Observer, { suggestionsVisible: this.props.suggestionsVisible, suggestionsLoading: this.props.isLoading, selectedIndex: this.props.selectedIndex, suggestions: this.props.suggestions }, (props) => {
                var _a, _b;
                return props.suggestionsVisible ? (React.createElement(Callout, Object.assign({}, this.props.calloutProps, { className: css("bolt-identitypickerdropdown-callout", this.props.calloutProps.className), contentClassName: css("bolt-identitypickerdropdown-callout-content flex-row flex-grow", this.props.calloutProps.contentClassName) }),
                    React.createElement(SuggestionsList, Object.assign({}, this.props, { className: css("bolt-identitypickerdropdown-list", this.props.className), isLoading: props.suggestionsLoading, loadingText: this.props.loadingText || Resources.IdentityPickerLoadingText, renderNoResultFound: this.renderNoIdentitiesFound, renderSuggestion: this.props.renderSuggestion, onBlur: this.props.onBlur, onFocus: this.props.onFocus, resultsMaximumNumber: ((_a = this.props.resultsMaximumNumber) !== null && _a !== void 0 ? _a : 25) > 0 ? (_b = this.props.resultsMaximumNumber) !== null && _b !== void 0 ? _b : 25 : undefined, suggestionsItemClassName: css("bolt-identitypickerdropdown-item", this.props.suggestionsItemClassName), suggestions: props.suggestions, selectedIndex: props.selectedIndex, width: this.props.width, suggestionsContainerAriaLabel: this.props.suggestionsContainerAriaLabel })))) : (React.createElement("div", null));
            }),
            React.createElement(Observer, { openedIdentityCard: this.props.openedIdentityCard }, (props) => {
                return props.openedIdentityCard ? (React.createElement(IdentityCard, { getEntityFromUniqueAttribute: this.props.pickerProvider.getEntityFromUniqueAttribute, key: props.openedIdentityCard.entityId, identity: props.openedIdentityCard, target: this.props.suggestionTarget, onDismissCallback: this.props.onClosePersonaCard, onRequestConnectionInformation: this.props.pickerProvider.onRequestConnectionInformation })) : (React.createElement("div", null));
            })));
    }
}