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

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useKeyboardPick = void 0;
var _react = require("react");
var _keyboard = require("../../lib/keyboard");
var _useImmutableCallback = require("../useImmutableCallback");
/**
 * Global hook which implement keyboard selection
 */
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 = (0, _useImmutableCallback.useImmutableCallback)(function (evt) {
    if (pickKeys === undefined || !(0, _keyboard.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
  (0, _react.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]);
};
exports.useKeyboardPick = useKeyboardPick;