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

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import * as React from "react";
import { Button } from '../../Button';
import { FilterBarItem } from '../../FilterBarItem';
import * as Resources from '../../Resources.Input';
import { TextField, TextFieldFocusTreatmentBehavior } from '../../TextField';
import { css, KeyCode } from '../../Util';
const DEFAULT_MAX_TEXT_LENGTH = 200;
const DEFAULT_THROTTLE_WAIT = 200;
export class TextFilterBarItem extends FilterBarItem {
    constructor() {
        super(...arguments);
        this.textField = React.createRef();
        this.onClickClearButton = (event) => {
            this.setFilterValue({ value: "" });
            if (this.textField.current) {
                this.textField.current.focus();
            }
        };
        this.onTextChanged = (ev, text) => {
            if (this.props.onlyChangeOnEnter) {
                this.setState({ value: text });
            }
            else {
                this.setFilterValue({ value: text });
            }
        };
        this.onKeyDown = (ev) => {
            if (this.props.filter) {
                switch (ev.which) {
                    case KeyCode.enter:
                        this.props.filter.setFilterItemState(this.props.filterItemKey, { value: this.state.value });
                        this.props.filter.applyChanges();
                        break;
                    case KeyCode.escape:
                        this.setFilterValue({ value: "" });
                        this.setState({
                            value: ""
                        });
                        this.props.filter.applyChanges();
                        break;
                    default:
                        return;
                }
                // We only get here if the keypress has been handled.
                ev.preventDefault();
                ev.stopPropagation();
            }
        };
    }
    focus() {
        if (this.textField.current) {
            return this.textField.current.focus();
        }
    }
    render() {
        const { value } = this.state;
        const { className, clearable, placeholder, maxTextLength, inputClassName, style, width, ariaLabel } = this.props;
        const tooltipProps = {
            text: value || placeholder,
            overflowOnly: true,
            overflowDetected: this.overflowDetected
        };
        let clearButtonIconProps = undefined;
        if (clearable && value) {
            clearButtonIconProps = {
                render: className => {
                    return (React.createElement(Button, { ariaLabel: Resources.ClearFilter, className: css(className, "bolt-text-filterbaritem-clear"), iconProps: { iconName: "Cancel" }, onClick: this.onClickClearButton }));
                }
            };
        }
        return (React.createElement(TextField, Object.assign({ ariaLabel: ariaLabel || placeholder, className: css(className, "bolt-text-filterbaritem flex-grow"), containerClassName: "flex-grow", inputClassName: css(inputClassName, "bolt-text-filterbaritem-input"), inputType: "text", focusTreatment: TextFieldFocusTreatmentBehavior.keyboardOnly, maxLength: maxTextLength || DEFAULT_MAX_TEXT_LENGTH, onChange: this.onTextChanged, onKeyDown: this.onKeyDown, placeholder: placeholder, ref: this.textField, style: style, suffixIconProps: clearButtonIconProps, value: value || "", width: width, tooltipProps: tooltipProps }, this.getExtraTextFieldProps())));
    }
    overflowDetected(anchorElement) {
        let isOverflowed = true;
        if (anchorElement.value && anchorElement.value.length > 0) {
            isOverflowed = anchorElement.scrollWidth > anchorElement.clientWidth;
        }
        else {
            const placeholderText = anchorElement.getAttribute("placeholder");
            anchorElement.value = placeholderText ? placeholderText : "";
            isOverflowed = anchorElement.scrollWidth > anchorElement.clientWidth;
            anchorElement.value = "";
        }
        return isOverflowed;
    }
    getExtraTextFieldProps() {
        return null;
    }
    getThrottleWait() {
        const { throttleWait } = this.props;
        return throttleWait === undefined ? DEFAULT_THROTTLE_WAIT : throttleWait;
    }
}
TextFilterBarItem.defaultProps = {
    isTextItem: true
};