instantsearch-ui-components
Version:
Common UI components for InstantSearch.
108 lines (106 loc) • 5.51 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createAutocompleteSearchComponent", {
enumerable: true,
get: function() {
return createAutocompleteSearchComponent;
}
});
var _object_spread = require("@swc/helpers/_/_object_spread");
var _cx = require("../../lib/cx");
var _icons = require("./icons");
function createAutocompleteSearchComponent(param) {
var createElement = param.createElement;
return function AutocompleteSearch(userProps) {
var inputProps = userProps.inputProps, onClear = userProps.onClear, query = userProps.query, isSearchStalled = userProps.isSearchStalled, onCancel = userProps.onCancel, isDetached = userProps.isDetached, submitTitle = userProps.submitTitle, onAiModeClick = userProps.onAiModeClick, _userProps_aiModeButtonDisabled = userProps.aiModeButtonDisabled, aiModeButtonDisabled = _userProps_aiModeButtonDisabled === void 0 ? false : _userProps_aiModeButtonDisabled, _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames;
var isBackButton = Boolean(isDetached && onCancel);
var resolvedCancelTitle = submitTitle !== null && submitTitle !== void 0 ? submitTitle : 'Close';
var inputRef = inputProps.ref;
return /*#__PURE__*/ createElement("form", {
className: (0, _cx.cx)('ais-AutocompleteForm', classNames.form),
action: "",
noValidate: true,
role: "search",
onSubmit: function onSubmit(e) {
e.preventDefault();
},
onReset: function onReset() {
var _inputRef_current;
return (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
}
}, /*#__PURE__*/ createElement("div", {
className: (0, _cx.cx)('ais-AutocompleteInputWrapperPrefix', classNames.inputWrapperPrefix)
}, isBackButton && /*#__PURE__*/ createElement("button", {
className: (0, _cx.cx)('ais-AutocompleteBackButton', classNames.backButton),
type: "button",
title: resolvedCancelTitle,
onClick: onCancel,
hidden: isSearchStalled
}, /*#__PURE__*/ createElement(_icons.BackIcon, {
createElement: createElement,
className: classNames.backButtonIcon
})), /*#__PURE__*/ createElement("label", {
className: (0, _cx.cx)('ais-AutocompleteLabel', classNames.label),
"aria-label": "Submit",
htmlFor: inputProps.id,
id: "".concat(inputProps.id, "-label"),
hidden: isBackButton || undefined
}, /*#__PURE__*/ createElement("button", {
className: (0, _cx.cx)('ais-AutocompleteSubmitButton', classNames.submitButton),
type: "submit",
title: "Submit",
hidden: isSearchStalled
}, /*#__PURE__*/ createElement(_icons.SubmitIcon, {
createElement: createElement,
className: classNames.submitButtonIcon
}))), /*#__PURE__*/ createElement("div", {
className: (0, _cx.cx)('ais-AutocompleteLoadingIndicator', classNames.loadingIndicator),
hidden: !isSearchStalled
}, /*#__PURE__*/ createElement(_icons.LoadingIcon, {
createElement: createElement,
isSearchStalled: isSearchStalled,
className: classNames.loadingIndicatorIcon
}))), /*#__PURE__*/ createElement("div", {
className: (0, _cx.cx)('ais-AutocompleteInputWrapper', classNames.inputWrapper)
}, /*#__PURE__*/ createElement("input", _object_spread._({
className: (0, _cx.cx)('ais-AutocompleteInput', classNames.input),
"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))), /*#__PURE__*/ createElement("div", {
className: (0, _cx.cx)('ais-AutocompleteInputWrapperSuffix', classNames.inputWrapperSuffix)
}, /*#__PURE__*/ createElement("button", {
className: (0, _cx.cx)('ais-AutocompleteClearButton', classNames.resetButton),
type: "reset",
title: "Clear",
hidden: query.length === 0 || isSearchStalled,
onClick: onClear
}, /*#__PURE__*/ createElement(_icons.ClearIcon, {
createElement: createElement,
className: classNames.resetButtonIcon
})), onAiModeClick && /*#__PURE__*/ createElement("button", {
className: (0, _cx.cx)('ais-AiModeButton', classNames.aiModeButton),
type: "button",
title: "AI Mode",
disabled: aiModeButtonDisabled,
onClick: function onClick(e) {
e.preventDefault();
onAiModeClick();
}
}, /*#__PURE__*/ createElement(_icons.AiModeIcon, {
createElement: createElement,
className: classNames.aiModeButtonIcon
}), /*#__PURE__*/ createElement("span", {
className: (0, _cx.cx)('ais-AiModeButton-label', classNames.aiModeButtonLabel)
}, "AI Mode"))));
};
}