azure-devops-ui/Components/IdentityPickerDropdown/IdentityPickerDropdownFilterBarItem.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, ObservableValue } from '../../Core/Observable';
import { FilterBarItem } from '../../FilterBarItem';
import { css } from '../../Util';
import { CustomIdentityPickerDropdown } from "./CustomIdentityPickerDropdown";
export class IdentityPickerDropdownFilterBarItem extends FilterBarItem {
    constructor(props) {
        super(props);
        this.selectedUser = new ObservableValue(undefined);
        this.selectedUserFriendlyName = new ObservableValue("");
        this.areSuggestionsVisible = new ObservableValue(false);
        this.onFilterChanged = (filterState) => {
            super.onFilterChanged(filterState);
            if (!filterState || !filterState.value) {
                this.selectedUser.value = undefined;
                this.setTextValue("");
            }
        };
        this.onSuggestionsVisibleChanged = (areSuggestionsVisible) => {
            this.areSuggestionsVisible.value = areSuggestionsVisible;
        };
        this.onIdentityChanged = (identity) => {
            this.selectedUser.value = identity;
            this.setFilterValue({ value: this.selectedUser.value });
            this.setTextValue((identity && identity.displayName) || "");
        };
        this.setTextValue = (text) => {
            this.selectedUserFriendlyName.value = text;
        };
        if (props.initialValue) {
            if (ObservableLike.isObservable(props.initialValue)) {
                this.selectedUser = props.initialValue;
            }
            else {
                this.selectedUser.value = props.initialValue;
            }
            this.selectedUserFriendlyName.value = (this.selectedUser.value && this.selectedUser.value.displayName) || "";
        }
        if (props.initialTextValue) {
            if (ObservableLike.isObservable(props.initialTextValue)) {
                this.selectedUserFriendlyName = props.initialTextValue;
            }
            else {
                this.selectedUserFriendlyName.value = props.initialTextValue;
            }
        }
    }
    focus() {
        // CustomIdentityPickerDropdown needs a focus() method for this to work
        return false;
    }
    render() {
        return (React.createElement(CustomIdentityPickerDropdown, { className: css(this.props.className, "bolt-identitypicker-filterbaritem"), pickerProvider: this.props.pickerProvider, onChange: this.onIdentityChanged, placeholder: this.props.placeholder, editPlaceholder: this.props.editPlaceholder, value: this.selectedUser, textValue: this.selectedUserFriendlyName, resolveUnrecognizedIdentity: this.props.resolveUnrecognizedIdentity, suggestionsVisible: this.areSuggestionsVisible, onSuggestionsVisibleChanged: this.onSuggestionsVisibleChanged, onInputChange: this.setTextValue }));
    }
}