react-hotkeys-hook.esm.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import hotkeys from 'hotkeys-js';
  2. import { useRef, useCallback, useEffect } from 'react';
  3. /**
  4. * @deprecated Use isHotkeyPressed instead. Will be removed version 4.
  5. */
  6. function useIsHotkeyPressed() {
  7. return hotkeys.isPressed;
  8. }
  9. hotkeys.filter = function () {
  10. return true;
  11. };
  12. var tagFilter = function tagFilter(_ref, enableOnTags) {
  13. var target = _ref.target;
  14. var targetTagName = target && target.tagName;
  15. return Boolean(targetTagName && enableOnTags && enableOnTags.includes(targetTagName));
  16. };
  17. var isKeyboardEventTriggeredByInput = function isKeyboardEventTriggeredByInput(ev) {
  18. return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);
  19. };
  20. function useHotkeys(keys, callback, options, deps) {
  21. if (options instanceof Array) {
  22. deps = options;
  23. options = undefined;
  24. }
  25. var _ref2 = options || {},
  26. enableOnTags = _ref2.enableOnTags,
  27. filter = _ref2.filter,
  28. keyup = _ref2.keyup,
  29. keydown = _ref2.keydown,
  30. _ref2$filterPreventDe = _ref2.filterPreventDefault,
  31. filterPreventDefault = _ref2$filterPreventDe === void 0 ? true : _ref2$filterPreventDe,
  32. _ref2$enabled = _ref2.enabled,
  33. enabled = _ref2$enabled === void 0 ? true : _ref2$enabled,
  34. _ref2$enableOnContent = _ref2.enableOnContentEditable,
  35. enableOnContentEditable = _ref2$enableOnContent === void 0 ? false : _ref2$enableOnContent;
  36. var ref = useRef(null); // The return value of this callback determines if the browsers default behavior is prevented.
  37. var memoisedCallback = useCallback(function (keyboardEvent, hotkeysEvent) {
  38. var _keyboardEvent$target, _ref$current;
  39. if (filter && !filter(keyboardEvent)) {
  40. return !filterPreventDefault;
  41. } // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.
  42. if (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags) || (_keyboardEvent$target = keyboardEvent.target) != null && _keyboardEvent$target.isContentEditable && !enableOnContentEditable) {
  43. return true;
  44. }
  45. if (ref.current === null || document.activeElement === ref.current || (_ref$current = ref.current) != null && _ref$current.contains(document.activeElement)) {
  46. callback(keyboardEvent, hotkeysEvent);
  47. return true;
  48. }
  49. return false;
  50. }, deps ? [ref, enableOnTags, filter].concat(deps) : [ref, enableOnTags, filter]);
  51. useEffect(function () {
  52. if (!enabled) {
  53. hotkeys.unbind(keys, memoisedCallback);
  54. return;
  55. } // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.
  56. if (keyup && keydown !== true) {
  57. options.keydown = false;
  58. }
  59. hotkeys(keys, options || {}, memoisedCallback);
  60. return function () {
  61. return hotkeys.unbind(keys, memoisedCallback);
  62. };
  63. }, [memoisedCallback, keys, enabled]);
  64. return ref;
  65. }
  66. var isHotkeyPressed = hotkeys.isPressed;
  67. export { isHotkeyPressed, useHotkeys, useIsHotkeyPressed };
  68. //# sourceMappingURL=react-hotkeys-hook.esm.js.map