@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 {
    constructor(props) {
        super(props);
        this._inputElement = null;
        this._timeoutId = 0;
        this.state = {
            value: this.props.initialValue || "",
        };
        /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
        this._onValueChanged = (value, previousValue) => {
            if (value === previousValue)
                return;
            this.setState((_prevState) => {
                return {
                    value,
                };
            }, () => {
                this.props.onValueChanged(this.state.value);
            });
        };
        this._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);
            }
        };
        this._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;
            }
        };
        this._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();
        };
        this._unsetTimeout = () => {
            if (this._timeoutId) {
                window.clearTimeout(this._timeoutId);
                this._timeoutId = 0;
            }
        };
    }
    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 })))));
    }
    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