@gowiz/searchbar/lib/components/input.js

Different search bars powered by Gowiz search engine technology

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CancelIconClass = exports.SearchIconClass = void 0;
const react_1 = __importDefault(require("react"));
const icons_1 = require("../assets/icons");
exports.SearchIconClass = ({ useDarkTheme = false, showInputSearchIcon, }) => {
    if (showInputSearchIcon) {
        const classname = useDarkTheme ? 'search_icon dark_search_icon' : 'search_icon';
        return (react_1.default.createElement("div", { className: classname },
            react_1.default.createElement(icons_1.SearchIcon, { "data-testid": "search_icon_svg" })));
    }
    return null;
};
exports.CancelIconClass = ({ useDarkTheme = false, query, onCancel }) => {
    const cancel_button_is_needed = query != undefined && query.length > 0;
    if (cancel_button_is_needed) {
        const classname = useDarkTheme ? 'cancel_icon dark_cancel_icon' : 'cancel_icon';
        return (react_1.default.createElement("div", { id: 'cancel_icon', tabIndex: 2, className: classname, title: 'Clear', onClick: onCancel },
            react_1.default.createElement(icons_1.CancelIcon, { "data-testid": "cancel_icon_svg" })));
    }
    return null;
};
class Input extends react_1.default.PureComponent {
    render() {
        const { showInputSearchIcon = true, onChange, onCancel, useAutoFocus = false, useDarkTheme = false } = this.props;
        let placeholder;
        switch (this.props.placeholder) {
            case undefined:
                placeholder = 'Search on Gowiz';
                break;
            case null:
                placeholder = '';
                break;
            default:
                placeholder = this.props.placeholder;
        }
        const query = this.props.query === undefined || this.props.query === null ? '' : this.props.query;
        const title = query.length === 0 ? 'Search on Gowiz' : 'Search ' + query + ' on Gowiz';
        const container_class = useDarkTheme ? 'search_input dark_input' : 'search_input';
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(exports.SearchIconClass, { useDarkTheme: useDarkTheme, showInputSearchIcon: showInputSearchIcon }),
            react_1.default.createElement("div", { className: container_class },
                react_1.default.createElement("input", { "data-testid": 'search_input_input', spellCheck: true, defaultValue: query, placeholder: placeholder, onChange: (e) => onChange(e.target.value), autoComplete: "off", name: "query", type: "text", title: title, "aria-required": "true", "aria-label": "Search query input", autoFocus: useAutoFocus, tabIndex: 1 })),
            react_1.default.createElement(exports.CancelIconClass, { query: query, onCancel: (e) => onCancel(e), useDarkTheme: useDarkTheme })));
    }
}
exports.default = Input;
//# sourceMappingURL=input.js.map