react-instantsearch/dist/es/widgets/SearchBox.js

⚡ Lightning-fast search for React, by Algolia

import { _ as _$2 } from '@swc/helpers/cjs/_object_spread.cjs';
import { _ } from '@swc/helpers/cjs/_object_without_properties.cjs';
import { _ as _$1 } from '@swc/helpers/cjs/_sliced_to_array.cjs';
import React, { useState, useRef } from 'react';
import { useSearchBox } from 'react-instantsearch-core';
import { SearchBox as SearchBox$1 } from '../ui/SearchBox.js';

function SearchBox(_0) {
    var queryHook = _0.queryHook, _0_searchAsYouType = _0.searchAsYouType, searchAsYouType = _0_searchAsYouType === void 0 ? true : _0_searchAsYouType, _0_ignoreCompositionEvents = _0.ignoreCompositionEvents, ignoreCompositionEvents = _0_ignoreCompositionEvents === void 0 ? false : _0_ignoreCompositionEvents, translations = _0.translations, props = _(_0, [
        "queryHook",
        "searchAsYouType",
        "ignoreCompositionEvents",
        "translations"
    ]);
    var _useSearchBox = useSearchBox({
        queryHook: queryHook
    }, {
        $$widgetType: 'ais.searchBox'
    }), query = _useSearchBox.query, refine = _useSearchBox.refine, isSearchStalled = _useSearchBox.isSearchStalled;
    var _useState = _$1(useState(query), 2), inputValue = _useState[0], setInputValue = _useState[1];
    var inputRef = useRef(null);
    function setQuery(newQuery) {
        var isComposing = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
        setInputValue(newQuery);
        if (searchAsYouType && !(ignoreCompositionEvents && isComposing)) {
            refine(newQuery);
        }
    }
    function onReset() {
        setQuery('');
        if (!searchAsYouType) {
            refine('');
        }
    }
    function onChange(event) {
        setQuery(event.currentTarget.value, event.nativeEvent.isComposing);
    }
    function onSubmit(event) {
        if (!searchAsYouType) {
            refine(inputValue);
        }
        if (props.onSubmit) {
            props.onSubmit(event);
        }
    }
    // Track when the InstantSearch query changes to synchronize it with
    // the React state.
    // We bypass the state update if the input is focused to avoid concurrent
    // updates when typing.
    if (query !== inputValue && document.activeElement !== inputRef.current) {
        setInputValue(query);
    }
    var uiProps = {
        inputRef: inputRef,
        isSearchStalled: isSearchStalled,
        onChange: onChange,
        onReset: onReset,
        onSubmit: onSubmit,
        value: inputValue,
        translations: _$2({
            submitButtonTitle: 'Submit the search query',
            resetButtonTitle: 'Clear the search query'
        }, translations)
    };
    return /*#__PURE__*/ React.createElement(SearchBox$1, _$2({}, props, uiProps));
}

export { SearchBox };