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

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./IdentityPickerDropdown.css";
import * as React from "react";
import { ObservableLike, useObservable } from '../../Core/Observable';
import { Observer } from '../../Observer';
import { CustomIdentityPickerDropdown } from "./CustomIdentityPickerDropdown";
export const IdentityPickerDropdown = (props) => {
    const [textValue, setTextValue] = useObservable(getTextValue(props.value));
    const [suggestionsVisible, setSuggestionsVisible] = useObservable(false);
    const { onChange } = props;
    const suggestionsVisibleChanged = (opened) => {
        props.onSuggestionsVisibleChanged && props.onSuggestionsVisibleChanged(opened);
        setSuggestionsVisible(opened);
    };
    const onPersonaChange = (item) => {
        if (onChange(item) !== false) {
            setTextValue(item ? item.displayName || item.mailNickname : "");
            return true;
        }
        else {
            setTextValue("");
            return false;
        }
    };
    if (!ObservableLike.isObservable(props.value)) {
        React.useEffect(() => {
            setTextValue((props.value && ObservableLike.getValue(props.value) && ObservableLike.getValue(props.value).displayName) || "");
        }, [props.value]);
    }
    return (React.createElement(Observer, { value: {
            observableValue: props.value,
            filter: () => {
                setTextValue(getTextValue(props.value));
                return false;
            }
        } }, () => (React.createElement(CustomIdentityPickerDropdown, Object.assign({}, props, { suggestionsVisible: suggestionsVisible, onChange: onPersonaChange, onInputChange: setTextValue, onSuggestionsVisibleChanged: suggestionsVisibleChanged, textValue: textValue, suggestionItemsMaximumCount: props.suggestionItemsMaximumCount, suggestionsContainerAriaLabel: props.suggestionsContainerAriaLabel })))));
};
function getTextValue(value) {
    return value && ObservableLike.getValue(value) ? ObservableLike.getValue(value).displayName : "";
}