123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- var _excluded = ["event", "props", "refresh", "store"];
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
- 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 { onInput } from './onInput';
- import { getActiveItem } from './utils';
- export function onKeyDown(_ref) {
- var event = _ref.event,
- props = _ref.props,
- refresh = _ref.refresh,
- store = _ref.store,
- setters = _objectWithoutProperties(_ref, _excluded);
- if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
- // eslint-disable-next-line no-inner-declarations
- var triggerScrollIntoView = function triggerScrollIntoView() {
- var nodeItem = props.environment.document.getElementById("".concat(props.id, "-item-").concat(store.getState().activeItemId));
- if (nodeItem) {
- if (nodeItem.scrollIntoViewIfNeeded) {
- nodeItem.scrollIntoViewIfNeeded(false);
- } else {
- nodeItem.scrollIntoView(false);
- }
- }
- }; // eslint-disable-next-line no-inner-declarations
- var triggerOnActive = function triggerOnActive() {
- var highlightedItem = getActiveItem(store.getState());
- if (store.getState().activeItemId !== null && highlightedItem) {
- var item = highlightedItem.item,
- itemInputValue = highlightedItem.itemInputValue,
- itemUrl = highlightedItem.itemUrl,
- source = highlightedItem.source;
- source.onActive(_objectSpread({
- event: event,
- item: item,
- itemInputValue: itemInputValue,
- itemUrl: itemUrl,
- refresh: refresh,
- source: source,
- state: store.getState()
- }, setters));
- }
- }; // Default browser behavior changes the caret placement on ArrowUp and
- // ArrowDown.
- event.preventDefault(); // When re-opening the panel, we need to split the logic to keep the actions
- // synchronized as `onInput` returns a promise.
- if (store.getState().isOpen === false && (props.openOnFocus || Boolean(store.getState().query))) {
- onInput(_objectSpread({
- event: event,
- props: props,
- query: store.getState().query,
- refresh: refresh,
- store: store
- }, setters)).then(function () {
- store.dispatch(event.key, {
- nextActiveItemId: props.defaultActiveItemId
- });
- triggerOnActive(); // Since we rely on the DOM, we need to wait for all the micro tasks to
- // finish (which include re-opening the panel) to make sure all the
- // elements are available.
- setTimeout(triggerScrollIntoView, 0);
- });
- } else {
- store.dispatch(event.key, {});
- triggerOnActive();
- triggerScrollIntoView();
- }
- } else if (event.key === 'Escape') {
- // This prevents the default browser behavior on `input[type="search"]`
- // from removing the query right away because we first want to close the
- // panel.
- event.preventDefault();
- store.dispatch(event.key, null); // Hitting the `Escape` key signals the end of a user interaction with the
- // autocomplete. At this point, we should ignore any requests that are still
- // pending and could reopen the panel once they resolve, because that would
- // result in an unsolicited UI behavior.
- store.pendingRequests.cancelAll();
- } else if (event.key === 'Enter') {
- // No active item, so we let the browser handle the native `onSubmit` form
- // event.
- if (store.getState().activeItemId === null || store.getState().collections.every(function (collection) {
- return collection.items.length === 0;
- })) {
- return;
- } // This prevents the `onSubmit` event to be sent because an item is
- // highlighted.
- event.preventDefault();
- var _ref2 = getActiveItem(store.getState()),
- item = _ref2.item,
- itemInputValue = _ref2.itemInputValue,
- itemUrl = _ref2.itemUrl,
- source = _ref2.source;
- if (event.metaKey || event.ctrlKey) {
- if (itemUrl !== undefined) {
- source.onSelect(_objectSpread({
- event: event,
- item: item,
- itemInputValue: itemInputValue,
- itemUrl: itemUrl,
- refresh: refresh,
- source: source,
- state: store.getState()
- }, setters));
- props.navigator.navigateNewTab({
- itemUrl: itemUrl,
- item: item,
- state: store.getState()
- });
- }
- } else if (event.shiftKey) {
- if (itemUrl !== undefined) {
- source.onSelect(_objectSpread({
- event: event,
- item: item,
- itemInputValue: itemInputValue,
- itemUrl: itemUrl,
- refresh: refresh,
- source: source,
- state: store.getState()
- }, setters));
- props.navigator.navigateNewWindow({
- itemUrl: itemUrl,
- item: item,
- state: store.getState()
- });
- }
- } else if (event.altKey) {// Keep native browser behavior
- } else {
- if (itemUrl !== undefined) {
- source.onSelect(_objectSpread({
- event: event,
- item: item,
- itemInputValue: itemInputValue,
- itemUrl: itemUrl,
- refresh: refresh,
- source: source,
- state: store.getState()
- }, setters));
- props.navigator.navigate({
- itemUrl: itemUrl,
- item: item,
- state: store.getState()
- });
- return;
- }
- onInput(_objectSpread({
- event: event,
- nextState: {
- isOpen: false
- },
- props: props,
- query: itemInputValue,
- refresh: refresh,
- store: store
- }, setters)).then(function () {
- source.onSelect(_objectSpread({
- event: event,
- item: item,
- itemInputValue: itemInputValue,
- itemUrl: itemUrl,
- refresh: refresh,
- source: source,
- state: store.getState()
- }, setters));
- });
- }
- }
- }
|