azure-devops-ui/Components/TextField/TextFieldWithMessage.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./TextField.css";
import * as React from "react";
import { Observer } from '../../Observer';
import { css, getSafeId } from '../../Util';
import { TextField } from "./TextField";
let messageId = 1;
export class TextFieldWithMessage extends React.Component {
    constructor(props) {
        super(props);
        this.innerTextField = React.createRef();
        this.select = () => {
            if (this.innerTextField.current) {
                this.innerTextField.current.select();
            }
        };
        this.setSelectionRange = (start, length) => {
            if (this.innerTextField.current) {
                this.innerTextField.current.setSelectionRange(start, length);
            }
        };
        this.descriptionId = `textfield-message-${messageId++}`;
    }
    focus() {
        if (this.innerTextField.current) {
            this.innerTextField.current.focus();
        }
    }
    get selectionEnd() {
        return this.innerTextField.current ? this.innerTextField.current.selectionEnd : null;
    }
    get selectionStart() {
        return this.innerTextField.current ? this.innerTextField.current.selectionStart : null;
    }
    render() {
        const { message, error } = this.props;
        return (React.createElement(Observer, { error: error, message: message }, (observerProps) => {
            const textFieldProps = Object.assign({}, this.props.textFieldProps);
            let messageClassName = this.props.messageClassName;
            if (observerProps.error) {
                textFieldProps.className = css(textFieldProps.className, "bolt-textfield-error");
                messageClassName = css(messageClassName, "bolt-textfield-message-error");
                textFieldProps.suffixIconProps = textFieldProps.suffixIconProps || {
                    className: "bolt-textfield-message-error",
                    iconName: "Error"
                };
            }
            return (React.createElement("div", { className: css(this.props.className, "flex-column") },
                React.createElement(TextField, Object.assign({ ariaDescribedBy: observerProps.message && this.descriptionId, ref: this.innerTextField }, textFieldProps)),
                observerProps.message && (React.createElement("span", { role: error ? "alert" : undefined, id: getSafeId(this.descriptionId), className: css(messageClassName, "bolt-textfield-message") }, observerProps.message))));
        }));
    }
}