react-elegant-ui/esm/hooks/behavior/useKeyboardPick.js

Elegant UI components, made by BEM best practices for react

import { useEffect } from 'react';
import { isKeyCode } from '../../lib/keyboard';
import { useImmutableCallback } from '../useImmutableCallback';
/**
 * Global hook which implement keyboard selection
 */
export var useKeyboardPick = function (_a) {
  var enabled = _a.enabled,
    onPick = _a.onPick,
    pickKeys = _a.pickKeys,
    _b = _a.pickStrategy,
    pickStrategy = _b === void 0 ? 'keydown' : _b,
    _c = _a.eventCapture,
    eventCapture = _c === void 0 ? true : _c;
  var onPickHandler = useImmutableCallback(function (evt) {
    if (pickKeys === undefined || !isKeyCode(evt.code, pickKeys)) return;
    // Prevent anyway
    evt.preventDefault();
    // Pick by strategy
    if (evt.type === pickStrategy) {
      if (onPick !== undefined) {
        onPick();
      }
    }
  }, [onPick, pickKeys, pickStrategy]);
  // Pick handler
  useEffect(function () {
    if (!enabled) return;
    document.addEventListener('keydown', onPickHandler, {
      capture: eventCapture
    });
    document.addEventListener('keyup', onPickHandler, {
      capture: eventCapture
    });
    return function () {
      document.removeEventListener('keydown', onPickHandler, {
        capture: eventCapture
      });
      document.removeEventListener('keyup', onPickHandler, {
        capture: eventCapture
      });
    };
  }, [enabled, eventCapture, onPickHandler]);
};