UNPKG

react-instantsearch

Version:
149 lines 6.75 kB
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 })))); }