@itwin/core-react/lib/core-react/searchbox/SearchBox.js

A react component library of iTwin.js UI general purpose components

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module SearchBox
 */
import "./SearchBox.scss";
import classnames from "classnames";
import * as React from "react";
import { Key } from "ts-key-enum";
import { Input } from "@itwin/itwinui-react";
import { Icon } from "../icons/IconComponent.js";
import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
import { useTranslation } from "../l10n/useTranslation.js";
/** Input box for entering text to search for.
 * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.
 * @public
 * @deprecated in 4.12.0. Use {@link https://itwinui.bentley.com/docs/searchbox iTwinUI SearchBox} instead.
 */
export class SearchBox extends React.Component {
    _inputElement = null;
    _timeoutId = 0;
    state = {
        value: this.props.initialValue || "",
    };
    constructor(props) {
        super(props);
    }
    render() {
        const searchClassName = classnames("core-searchbox", this.props.className);
        const emptyString = this.state.value === "";
        const iconClassName = classnames("core-searchbox-icon", "icon");
        const iconSpec = emptyString ? React.createElement(SvgSearch, null) : React.createElement(SvgClose, null);
        return (React.createElement("div", { className: searchClassName, style: this.props.style, "data-testid": "core-searchbox-instance" },
            React.createElement(SearchBoxInput, { defaultValue: this.props.initialValue, ref: (el) => {
                    this._inputElement = el;
                }, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: this.props.placeholder, role: "searchbox", "data-testid": "core-searchbox-input" }),
            React.createElement(SearchBoxButton, { className: "core-searchbox-button", onClick: this._handleIconClick, role: "button", tabIndex: -1, emptyString: emptyString },
                React.createElement("span", { className: iconClassName },
                    React.createElement(Icon, { iconSpec: iconSpec })))));
    }
    /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
    _onValueChanged = (value, previousValue) => {
        if (value === previousValue)
            return;
        this.setState((_prevState) => {
            return {
                value,
            };
        }, () => {
            this.props.onValueChanged(this.state.value);
        });
    };
    _trackChange = (_event) => {
        let value = "";
        const previousValue = this.state.value;
        if (this._inputElement)
            value = this._inputElement.value;
        if (this.props.valueChangedDelay) {
            this._unsetTimeout();
            this._timeoutId = window.setTimeout(() => {
                this._onValueChanged(value, previousValue);
            }, this.props.valueChangedDelay);
        }
        else {
            this._onValueChanged(value, previousValue);
        }
    };
    _handleKeyDown = (e) => {
        switch (e.key) {
            case Key.Escape.valueOf():
                if (this.props.onEscPressed)
                    this.props.onEscPressed();
                break;
            case Key.Enter.valueOf():
                if (this.props.onEnterPressed)
                    this.props.onEnterPressed();
                break;
        }
    };
    _handleIconClick = (_event) => {
        if (this._inputElement) {
            const clear = this.state.value !== "";
            this._inputElement.value = "";
            if (clear && this.props.onClear)
                this.props.onClear();
            this._inputElement.focus();
        }
        this._trackChange();
    };
    _unsetTimeout = () => {
        if (this._timeoutId) {
            window.clearTimeout(this._timeoutId);
            this._timeoutId = 0;
        }
    };
    componentWillUnmount() {
        this._unsetTimeout();
    }
    focus() {
        if (this._inputElement)
            this._inputElement.focus();
    }
}
const SearchBoxInput = React.forwardRef(function SearchBoxInput({ placeholder, ...props }, ref) {
    const { translate } = useTranslation();
    return (React.createElement(Input, { ref: ref, placeholder: placeholder || translate("general.search"), ...props }));
});
function SearchBoxButton({ emptyString, ...props }) {
    const { translate } = useTranslation();
    const buttonTitle = translate(emptyString ? "general.search" : "general.clear");
    return React.createElement("div", { title: buttonTitle, ...props });
}
//# sourceMappingURL=SearchBox.js.map