azure-devops-ui/Utilities/EditableDropdownItemProvider.js

React components for building web UI in Azure DevOps

import { ObservableArray, ObservableCollection, ObservableLike } from '../Core/Observable';
import { format } from '../Core/Util/String';
import { wrapListBoxItems } from '../ListBox';
import * as Resources from '../Resources.Dropdown';
export class EditableDropdownItemProvider {
    /**
     * Create a Provider that manages focus on rows with a focused class.
     * @param listItems the current set of filtered items.
     * @param selection The selection object associstaed with items.
     */
    constructor(listItems, selection) {
        this.itemCollection = new ObservableCollection();
        if (ObservableLike.isObservable(listItems)) {
            this.listItems = listItems;
        }
        else {
            this.listItems = new ObservableArray(wrapListBoxItems(listItems) || listItems);
        }
        this.itemCollection.push(this.listItems);
        this.extraItem = new ObservableArray();
        this.itemCollection.push(this.extraItem);
        this.selection = selection;
    }
    /**
     * Get the length of the listItems array.
     */
    get length() {
        return this.itemCollection.length;
    }
    /**
     * Get the interal array of listItems.
     */
    get value() {
        return this.itemCollection.value;
    }
    /**
     * Return whether or not there is currently an extra item added for a freeform EditableDropdown.
     */
    get hasExtraItem() {
        return this.extraItem.length > 0;
    }
    /**
     * Subscribe to changes in the underlying set of items.
     * @param observer the delegate to be called when there are updates.
     * @param action the action on the set to observe.
     */
    subscribe(observer, action) {
        return this.itemCollection.subscribe(observer, action);
    }
    /**
     * Unsubscribe from changes in the underlying set of items.
     * @param observer the delegate that was used to subscribe.
     * @param action the action that was used to subsribe.
     */
    unsubscribe(observer, action) {
        return this.itemCollection.unsubscribe(observer, action);
    }
    /**
     * Set the text value currently typed in the EditableDropdown to see if an extra item needs to be added
     * to represent that value.  Only call this if allowFreeform is true.
     * @param value
     */
    setTextValue(value) {
        if (this.hasExtraItem) {
            this.extraItem.splice(0, 1);
        }
        if (value) {
            const index = this.listItems.value.findIndex(item => item.text === value);
            if (index === -1 || !this.selection.selectable(index)) {
                this.extraItem.push({ id: value, text: format(Resources.UseItem, value), className: editableDropdownExtraItemClassName });
            }
        }
    }
}
export const editableDropdownExtraItemClassName = "editable-dropdown-extra-item";