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

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./EditableDropdown.css";
import * as React from "react";
import { ObservableLike, ObservableValue } from '../../Core/Observable';
import { CustomEditableDropdown } from "./CustomEditableDropdown";
export class EditableDropdown extends React.Component {
    constructor(props) {
        super(props);
        this.dropdown = React.createRef();
        this.collapse = () => {
            if (this.dropdown.current) {
                this.dropdown.current.collapse();
            }
        };
        this.expand = () => {
            if (this.dropdown.current) {
                this.dropdown.current.expand();
            }
        };
        this.onExpand = () => {
            const { allowTextSelection, onExpand } = this.props;
            if (onExpand) {
                onExpand();
            }
            if (allowTextSelection) {
                this.text.value = this.selectedText.value;
            }
        };
        this.onTextChange = (event, value) => {
            if (this.props.onTextChange) {
                this.props.onTextChange(event, value);
            }
            this.text.value = value;
        };
        this.onValueChange = (value) => {
            if (this.props.onValueChange) {
                this.props.onValueChange(value);
            }
            this.selectedText.value = (value && value.text) || "";
        };
        this.text = ObservableLike.isObservable(props.text)
            ? props.text
            : new ObservableValue(props.text || "");
        this.selectedText = ObservableLike.isObservable(props.selectedText)
            ? props.selectedText
            : new ObservableValue(props.selectedText);
    }
    focus() {
        if (this.dropdown.current) {
            this.dropdown.current.focus();
        }
    }
    render() {
        return (React.createElement(CustomEditableDropdown, Object.assign({}, this.props, { onExpand: this.onExpand, onTextChange: this.onTextChange, onValueChange: this.onValueChange, ref: this.dropdown, selectedText: this.selectedText, text: this.text })));
    }
}