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

⚡ Lightning-fast search for React, by Algolia

'use strict';

var _object_spread = require('@swc/helpers/_/_object_spread');
var _object_without_properties = require('@swc/helpers/_/_object_without_properties');
var _sliced_to_array = require('@swc/helpers/_/_sliced_to_array');
var React = require('react');
var reactInstantsearchCore = require('react-instantsearch-core');
var SearchBox$1 = require('../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 = _object_without_properties._(_0, [
        "queryHook",
        "searchAsYouType",
        "ignoreCompositionEvents",
        "translations"
    ]);
    var _useSearchBox = reactInstantsearchCore.useSearchBox({
        queryHook: queryHook
    }, {
        $$widgetType: 'ais.searchBox'
    }), query = _useSearchBox.query, refine = _useSearchBox.refine, isSearchStalled = _useSearchBox.isSearchStalled;
    var _useState = _sliced_to_array._(React.useState(query), 2), inputValue = _useState[0], setInputValue = _useState[1];
    var inputRef = React.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: _object_spread._({
            submitButtonTitle: 'Submit the search query',
            resetButtonTitle: 'Clear the search query'
        }, translations)
    };
    return /*#__PURE__*/ React.createElement(SearchBox$1.SearchBox, _object_spread._({}, props, uiProps));
}

exports.SearchBox = SearchBox;