react-instantsearch
Version:
⚡ Lightning-fast search for React, by Algolia
78 lines (76 loc) • 3.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "SearchBox", {
enumerable: true,
get: function() {
return SearchBox;
}
});
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
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 = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _reactinstantsearchcore = require("react-instantsearch-core");
var _SearchBox = require("../ui/SearchBox");
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 = (0, _reactinstantsearchcore.useSearchBox)({
queryHook: queryHook
}, {
$$widgetType: 'ais.searchBox'
}), query = _useSearchBox.query, refine = _useSearchBox.refine, isSearchStalled = _useSearchBox.isSearchStalled;
var _useState = _sliced_to_array._((0, _react.useState)(query), 2), inputValue = _useState[0], setInputValue = _useState[1];
var inputRef = (0, _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.default.createElement(_SearchBox.SearchBox, _object_spread._({}, props, uiProps));
}