@findify/react-components/lib/helpers/useArrowSelection.js

Findify react UI components

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
import { useQuery } from '@findify/react-connect';
import { List } from 'immutable';

var reduceIndexCreator = function reduceIndexCreator(ref, cursor) {
  var getValue = function getValue(state, action) {
    if (action === 0) return -1;

    if (action > 0) {
      var newState = state + 1;
      return newState > cursor.current.items.size - 1 ? 0 : newState;
    }

    return state < 0 ? cursor.current.items.size - 1 : state - 1;
  };

  return function (state, action) {
    return ref.current = getValue(state, action);
  };
};

var createCursor = function createCursor(meta) {
  var items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
  return {
    hash: meta.hashCode(),
    items: items || List()
  };
};

export default (function () {
  var _useQuery = useQuery(),
      query = _useQuery.query,
      config = _useQuery.config;

  var actualIndex = useRef(0);
  var cursor = useRef(createCursor(query));

  var _useReducer = useReducer(reduceIndexCreator(actualIndex, cursor), -1),
      _useReducer2 = _slicedToArray(_useReducer, 2),
      highlightedIndex = _useReducer2[0],
      setHighlightedIndex = _useReducer2[1];

  var registerItems = useCallback(function (_items, limit) {
    var hash = query.hashCode();

    var items = _items.slice(0, limit);

    if (hash !== cursor.current.hash) {
      return cursor.current = createCursor(query, items);
    }

    if (!cursor.current.items.includes(items.get(0))) {
      cursor.current.items = cursor.current.items.concat(items);
    }
  }, [query]);
  var clickItem = useCallback(function (e) {
    if (actualIndex.current < 0) return;
    var item = cursor.current.items.get(actualIndex.current);
    e.preventDefault();
    e.stopPropagation();
    if (item.onClick) return item.onClick(e);
  }, []);
  var handleKey = useCallback(function (e) {
    if (e.target !== config.get('node')) return;
    if (e.key === 'Enter') return clickItem(e);
    if (e.key === 'ArrowUp') return setHighlightedIndex(-1);
    if (e.key === 'ArrowDown') return setHighlightedIndex(1);
  }, []);
  useEffect(function () {
    setHighlightedIndex(0);
  }, [query]);
  useEffect(function () {
    var _document$querySelect;

    (_document$querySelect = document.querySelector('body')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.addEventListener('keydown', handleKey, true);
    return function () {
      var _document$querySelect2;

      return (_document$querySelect2 = document.querySelector('body')) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.removeEventListener('keydown', handleKey, true);
    };
  }, [handleKey]);
  return useMemo(function () {
    return [!!~highlightedIndex && cursor.current.items.get(highlightedIndex), registerItems];
  }, [highlightedIndex]);
});