react-instantsearch
Version:
⚡ Lightning-fast search for React, by Algolia
149 lines • 6.75 kB
JavaScript
var _excluded = ["formRef", "inputRef", "isSearchStalled", "onChange", "onReset", "onSubmit", "placeholder", "value", "autoFocus", "resetIconComponent", "submitIconComponent", "loadingIconComponent", "classNames", "translations"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import { cx } from 'instantsearch-ui-components';
import React from 'react';
var _ref2 = /*#__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 DefaultSubmitIcon(_ref) {
var classNames = _ref.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"
}, _ref2);
}
var _ref4 = /*#__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 DefaultResetIcon(_ref3) {
var classNames = _ref3.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"
}, _ref4);
}
var _ref6 = /*#__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 DefaultLoadingIcon(_ref5) {
var classNames = _ref5.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"
}, _ref6);
}
export function SearchBox(_ref7) {
var formRef = _ref7.formRef,
inputRef = _ref7.inputRef,
isSearchStalled = _ref7.isSearchStalled,
onChange = _ref7.onChange,
onReset = _ref7.onReset,
onSubmit = _ref7.onSubmit,
_ref7$placeholder = _ref7.placeholder,
placeholder = _ref7$placeholder === void 0 ? '' : _ref7$placeholder,
value = _ref7.value,
autoFocus = _ref7.autoFocus,
_ref7$resetIconCompon = _ref7.resetIconComponent,
ResetIcon = _ref7$resetIconCompon === void 0 ? DefaultResetIcon : _ref7$resetIconCompon,
_ref7$submitIconCompo = _ref7.submitIconComponent,
SubmitIcon = _ref7$submitIconCompo === void 0 ? DefaultSubmitIcon : _ref7$submitIconCompo,
_ref7$loadingIconComp = _ref7.loadingIconComponent,
LoadingIcon = _ref7$loadingIconComp === void 0 ? DefaultLoadingIcon : _ref7$loadingIconComp,
_ref7$classNames = _ref7.classNames,
classNames = _ref7$classNames === void 0 ? {} : _ref7$classNames,
translations = _ref7.translations,
props = _objectWithoutProperties(_ref7, _excluded);
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", _extends({}, 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", {
ref: inputRef,
className: cx('ais-SearchBox-input', classNames.input),
"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
}))));
}