react-instantsearch
Version:
⚡ Lightning-fast search for React, by Algolia
146 lines (143 loc) • 6.16 kB
JavaScript
import { _ as _$2 } from '@swc/helpers/cjs/_object_spread.cjs';
import { _ as _$1 } from '@swc/helpers/cjs/_object_spread_props.cjs';
import { _ } from '@swc/helpers/cjs/_object_without_properties.cjs';
import { cx } from 'instantsearch-ui-components';
import React from 'react';
function DefaultSubmitIcon(param) {
var classNames = param.classNames;
return /*#__PURE__*/ React.createElement("svg", {
className: cx('ais-SearchBox-submitIcon', classNames.submitIcon),
width: "10",
height: "10",
viewBox: "0 0 40 40",
"aria-hidden": "true"
}, /*#__PURE__*/ React.createElement("path", {
d: "M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
}));
}
function DefaultResetIcon(param) {
var classNames = param.classNames;
return /*#__PURE__*/ React.createElement("svg", {
className: cx('ais-SearchBox-resetIcon', classNames.resetIcon),
viewBox: "0 0 20 20",
width: "10",
height: "10",
"aria-hidden": "true"
}, /*#__PURE__*/ React.createElement("path", {
d: "M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
}));
}
function DefaultLoadingIcon(param) {
var classNames = param.classNames;
return /*#__PURE__*/ React.createElement("svg", {
"aria-label": "Results are loading",
width: "16",
height: "16",
viewBox: "0 0 38 38",
stroke: "#444",
className: cx('ais-SearchBox-loadingIcon', classNames.loadingIcon),
"aria-hidden": "true"
}, /*#__PURE__*/ React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/ React.createElement("g", {
transform: "translate(1 1)",
strokeWidth: "2"
}, /*#__PURE__*/ React.createElement("circle", {
strokeOpacity: ".5",
cx: "18",
cy: "18",
r: "18"
}), /*#__PURE__*/ React.createElement("path", {
d: "M36 18c0-9.94-8.06-18-18-18"
}, /*#__PURE__*/ React.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "1s",
repeatCount: "indefinite"
})))));
}
function SearchBox(_0) {
var formRef = _0.formRef, inputRef = _0.inputRef, inputProps = _0.inputProps, isSearchStalled = _0.isSearchStalled, onChange = _0.onChange, onReset = _0.onReset, onSubmit = _0.onSubmit, _0_placeholder = _0.placeholder, placeholder = _0_placeholder === void 0 ? '' : _0_placeholder, value = _0.value, autoFocus = _0.autoFocus, tmp = _0.resetIconComponent, ResetIcon = tmp === void 0 ? DefaultResetIcon : tmp, tmp1 = _0.submitIconComponent, SubmitIcon = tmp1 === void 0 ? DefaultSubmitIcon : tmp1, tmp2 = _0.loadingIconComponent, LoadingIcon = tmp2 === void 0 ? DefaultLoadingIcon : tmp2, _0_classNames = _0.classNames, classNames = _0_classNames === void 0 ? {} : _0_classNames, translations = _0.translations, props = _(_0, [
"formRef",
"inputRef",
"inputProps",
"isSearchStalled",
"onChange",
"onReset",
"onSubmit",
"placeholder",
"value",
"autoFocus",
"resetIconComponent",
"submitIconComponent",
"loadingIconComponent",
"classNames",
"translations"
]);
function handleSubmit(event) {
event.preventDefault();
event.stopPropagation();
if (onSubmit) {
onSubmit(event);
}
if (inputRef.current) {
inputRef.current.blur();
}
}
function handleReset(event) {
event.preventDefault();
event.stopPropagation();
onReset(event);
if (inputRef.current) {
inputRef.current.focus();
}
}
return /*#__PURE__*/ React.createElement("div", _$1(_$2({}, props), {
className: cx('ais-SearchBox', classNames.root, props.className)
}), /*#__PURE__*/ React.createElement("form", {
ref: formRef,
action: "",
className: cx('ais-SearchBox-form', classNames.form),
noValidate: true,
onSubmit: handleSubmit,
onReset: handleReset,
role: "search"
}, /*#__PURE__*/ React.createElement("input", _$1(_$2({}, inputProps), {
ref: inputRef,
className: cx('ais-SearchBox-input', classNames.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
"aria-label": "Search",
autoComplete: "off",
autoCorrect: "off",
autoCapitalize: "off",
placeholder: placeholder,
spellCheck: false,
maxLength: 512,
type: "search",
value: value,
onChange: onChange,
onCompositionEnd: onChange,
autoFocus: autoFocus
})), /*#__PURE__*/ React.createElement("button", {
className: cx('ais-SearchBox-submit', classNames.submit),
type: "submit",
title: translations.submitButtonTitle
}, /*#__PURE__*/ React.createElement(SubmitIcon, {
classNames: classNames
})), /*#__PURE__*/ React.createElement("button", {
className: cx('ais-SearchBox-reset', classNames.reset),
type: "reset",
title: translations.resetButtonTitle,
hidden: value.length === 0 || isSearchStalled
}, /*#__PURE__*/ React.createElement(ResetIcon, {
classNames: classNames
})), /*#__PURE__*/ React.createElement("span", {
className: cx('ais-SearchBox-loadingIndicator', classNames.loadingIndicator),
hidden: !isSearchStalled
}, /*#__PURE__*/ React.createElement(LoadingIcon, {
classNames: classNames
}))));
}
export { SearchBox };