instantsearch-ui-components
Version:
Common UI components for InstantSearch.
74 lines (73 loc) • 2.66 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createAutocompleteSearchComponent = createAutocompleteSearchComponent;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _icons = require("./icons");
function createAutocompleteSearchComponent(_ref) {
var createElement = _ref.createElement;
return function AutocompleteSearch(userProps) {
var inputProps = userProps.inputProps,
onClear = userProps.onClear,
query = userProps.query,
isSearchStalled = userProps.isSearchStalled;
var inputRef = inputProps.ref;
return createElement("form", {
className: "ais-AutocompleteForm",
action: "",
noValidate: true,
role: "search",
onSubmit: function onSubmit(e) {
return e.preventDefault();
},
onReset: function onReset() {
var _inputRef$current;
return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
}
}, createElement("div", {
className: "ais-AutocompleteInputWrapperPrefix"
}, createElement("label", {
className: "ais-AutocompleteLabel",
"aria-label": "Submit",
htmlFor: inputProps.id,
id: "".concat(inputProps.id, "-label")
}, createElement("button", {
className: "ais-AutocompleteSubmitButton",
type: "submit",
title: "Submit"
}, createElement(_icons.SubmitIcon, {
createElement: createElement
}))), createElement("div", {
className: "ais-AutocompleteLoadingIndicator",
hidden: !isSearchStalled
}, createElement(_icons.LoadingIcon, {
createElement: createElement
}))), createElement("div", {
className: "ais-AutocompleteInputWrapper"
}, createElement("input", (0, _extends2.default)({
className: "ais-AutocompleteInput",
"aria-autocomplete": "both",
"aria-labelledby": "".concat(inputProps.id, "-label"),
autoComplete: "off",
autoCorrect: "off",
autoCapitalize: "off",
enterKeyHint: "search",
spellCheck: "false",
maxLength: 512,
type: "search",
value: query
}, inputProps))), createElement("div", {
className: "ais-AutocompleteInputWrapperSuffix"
}, createElement("button", {
className: "ais-AutocompleteClearButton",
type: "reset",
title: "Clear",
hidden: query.length === 0 || isSearchStalled,
onClick: onClear
}, createElement(_icons.ClearIcon, {
createElement: createElement
}))));
};
}