react-instantsearch
Version:
⚡ Lightning-fast search for React, by Algolia
157 lines (156 loc) • 7.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SearchBox = SearchBox;
var _instantsearchUiComponents = require("instantsearch-ui-components");
var _react = _interopRequireDefault(require("react"));
var _excluded = ["formRef", "inputRef", "inputProps", "isSearchStalled", "onChange", "onReset", "onSubmit", "placeholder", "value", "autoFocus", "resetIconComponent", "submitIconComponent", "loadingIconComponent", "classNames", "translations"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var _ref2 = /*#__PURE__*/_react.default.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.default.createElement("svg", {
className: (0, _instantsearchUiComponents.cx)('ais-SearchBox-submitIcon', classNames.submitIcon),
width: "10",
height: "10",
viewBox: "0 0 40 40",
"aria-hidden": "true"
}, _ref2);
}
var _ref4 = /*#__PURE__*/_react.default.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.default.createElement("svg", {
className: (0, _instantsearchUiComponents.cx)('ais-SearchBox-resetIcon', classNames.resetIcon),
viewBox: "0 0 20 20",
width: "10",
height: "10",
"aria-hidden": "true"
}, _ref4);
}
var _ref6 = /*#__PURE__*/_react.default.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/_react.default.createElement("g", {
transform: "translate(1 1)",
strokeWidth: "2"
}, /*#__PURE__*/_react.default.createElement("circle", {
strokeOpacity: ".5",
cx: "18",
cy: "18",
r: "18"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M36 18c0-9.94-8.06-18-18-18"
}, /*#__PURE__*/_react.default.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.default.createElement("svg", {
"aria-label": "Results are loading",
width: "16",
height: "16",
viewBox: "0 0 38 38",
stroke: "#444",
className: (0, _instantsearchUiComponents.cx)('ais-SearchBox-loadingIcon', classNames.loadingIcon),
"aria-hidden": "true"
}, _ref6);
}
function SearchBox(_ref7) {
var formRef = _ref7.formRef,
inputRef = _ref7.inputRef,
inputProps = _ref7.inputProps,
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.default.createElement("div", _extends({}, props, {
className: (0, _instantsearchUiComponents.cx)('ais-SearchBox', classNames.root, props.className)
}), /*#__PURE__*/_react.default.createElement("form", {
ref: formRef,
action: "",
className: (0, _instantsearchUiComponents.cx)('ais-SearchBox-form', classNames.form),
noValidate: true,
onSubmit: handleSubmit,
onReset: handleReset,
role: "search"
}, /*#__PURE__*/_react.default.createElement("input", _extends({}, inputProps, {
ref: inputRef,
className: (0, _instantsearchUiComponents.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.default.createElement("button", {
className: (0, _instantsearchUiComponents.cx)('ais-SearchBox-submit', classNames.submit),
type: "submit",
title: translations.submitButtonTitle
}, /*#__PURE__*/_react.default.createElement(SubmitIcon, {
classNames: classNames
})), /*#__PURE__*/_react.default.createElement("button", {
className: (0, _instantsearchUiComponents.cx)('ais-SearchBox-reset', classNames.reset),
type: "reset",
title: translations.resetButtonTitle,
hidden: value.length === 0 || isSearchStalled
}, /*#__PURE__*/_react.default.createElement(ResetIcon, {
classNames: classNames
})), /*#__PURE__*/_react.default.createElement("span", {
className: (0, _instantsearchUiComponents.cx)('ais-SearchBox-loadingIndicator', classNames.loadingIndicator),
hidden: !isSearchStalled
}, /*#__PURE__*/_react.default.createElement(LoadingIcon, {
classNames: classNames
}))));
}