@algolia/autocomplete-js
Version:
Fast and fully-featured autocomplete JavaScript library.
186 lines • 7.79 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { ClearIcon, Input, LoadingIcon, SearchIcon } from './elements';
import { getCreateDomElement } from './getCreateDomElement';
import { setProperties } from './utils';
export function createAutocompleteDom(_ref) {
var autocomplete = _ref.autocomplete,
autocompleteScopeApi = _ref.autocompleteScopeApi,
classNames = _ref.classNames,
environment = _ref.environment,
isDetached = _ref.isDetached,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? 'Search' : _ref$placeholder,
propGetters = _ref.propGetters,
setIsModalOpen = _ref.setIsModalOpen,
state = _ref.state,
translations = _ref.translations;
var createDomElement = getCreateDomElement(environment);
var rootProps = propGetters.getRootProps(_objectSpread({
state: state,
props: autocomplete.getRootProps({})
}, autocompleteScopeApi));
var root = createDomElement('div', _objectSpread({
class: classNames.root
}, rootProps));
var detachedContainer = createDomElement('div', {
class: classNames.detachedContainer,
onMouseDown: function onMouseDown(event) {
event.stopPropagation();
}
});
var detachedOverlay = createDomElement('div', {
class: classNames.detachedOverlay,
children: [detachedContainer],
onMouseDown: function onMouseDown() {
setIsModalOpen(false);
autocomplete.setIsOpen(false);
}
});
var labelProps = propGetters.getLabelProps(_objectSpread({
state: state,
props: autocomplete.getLabelProps({})
}, autocompleteScopeApi));
var submitButton = createDomElement('button', {
class: classNames.submitButton,
type: 'submit',
title: translations.submitButtonTitle,
children: [SearchIcon({
environment: environment
})]
});
// @MAJOR Remove the label wrapper for the submit button.
// The submit button is sufficient for accessibility purposes, and
// wrapping it with the label actually makes it less accessible (see CR-6077).
var label = createDomElement('label', _objectSpread({
class: classNames.label,
children: [submitButton],
ariaLabel: translations.submitButtonTitle
}, labelProps));
var clearButton = createDomElement('button', {
class: classNames.clearButton,
type: 'reset',
title: translations.clearButtonTitle,
children: [ClearIcon({
environment: environment
})]
});
var loadingIndicator = createDomElement('div', {
class: classNames.loadingIndicator,
children: [LoadingIcon({
environment: environment
})]
});
var input = Input({
class: classNames.input,
environment: environment,
state: state,
getInputProps: propGetters.getInputProps,
getInputPropsCore: autocomplete.getInputProps,
autocompleteScopeApi: autocompleteScopeApi,
isDetached: isDetached
});
var inputWrapperPrefix = createDomElement('div', {
class: classNames.inputWrapperPrefix,
children: [label, loadingIndicator]
});
var inputWrapperSuffix = createDomElement('div', {
class: classNames.inputWrapperSuffix,
children: [clearButton]
});
var inputWrapper = createDomElement('div', {
class: classNames.inputWrapper,
children: [input]
});
var formProps = propGetters.getFormProps(_objectSpread({
state: state,
props: autocomplete.getFormProps({
inputElement: input
})
}, autocompleteScopeApi));
var form = createDomElement('form', _objectSpread({
class: classNames.form,
children: [inputWrapperPrefix, inputWrapper, inputWrapperSuffix]
}, formProps));
var panelProps = propGetters.getPanelProps(_objectSpread({
state: state,
props: autocomplete.getPanelProps({})
}, autocompleteScopeApi));
var panel = createDomElement('div', _objectSpread({
class: classNames.panel
}, panelProps));
var detachedSearchButtonQuery = createDomElement('div', {
class: classNames.detachedSearchButtonQuery,
textContent: state.query
});
var detachedSearchButtonPlaceholder = createDomElement('div', {
class: classNames.detachedSearchButtonPlaceholder,
hidden: Boolean(state.query),
textContent: placeholder
});
if (process.env.NODE_ENV === 'test') {
setProperties(panel, {
'data-testid': 'panel'
});
}
if (isDetached) {
var detachedSearchButtonIcon = createDomElement('div', {
class: classNames.detachedSearchButtonIcon,
ariaLabel: translations.detachedSearchButtonTitle,
children: [SearchIcon({
environment: environment
})]
});
var detachedSearchButton = createDomElement('button', {
type: 'button',
class: classNames.detachedSearchButton,
title: translations.detachedSearchButtonTitle,
id: labelProps.id,
onClick: function onClick() {
setIsModalOpen(true);
},
children: [detachedSearchButtonIcon, detachedSearchButtonPlaceholder, detachedSearchButtonQuery]
});
var detachedCancelButton = createDomElement('button', {
type: 'button',
class: classNames.detachedCancelButton,
textContent: translations.detachedCancelButtonText,
// Prevent `onTouchStart` from closing the panel
// since it should be initiated by `onClick` only
onTouchStart: function onTouchStart(event) {
event.stopPropagation();
},
onClick: function onClick() {
autocomplete.setIsOpen(false);
setIsModalOpen(false);
}
});
var detachedFormContainer = createDomElement('div', {
class: classNames.detachedFormContainer,
children: [form, detachedCancelButton]
});
detachedContainer.appendChild(detachedFormContainer);
root.appendChild(detachedSearchButton);
} else {
root.appendChild(form);
}
return {
detachedContainer: detachedContainer,
detachedOverlay: detachedOverlay,
detachedSearchButtonQuery: detachedSearchButtonQuery,
detachedSearchButtonPlaceholder: detachedSearchButtonPlaceholder,
inputWrapper: inputWrapper,
input: input,
root: root,
form: form,
label: label,
submitButton: submitButton,
clearButton: clearButton,
loadingIndicator: loadingIndicator,
panel: panel
};
}