@orca-fe/hooks/lib/useHotkeyListener.js

React Hooks Collections

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultHotkeyDef = exports.default = exports.actionStack = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _ahooks = require("ahooks");
var _react = require("react");
var _utils = require("./hotkey-manager/utils");
var _syncGlobal = require("./utils/syncGlobal");
/**
 * 快捷键对象
 */

/**
 * 热键库
 */
var defaultHotkeyDef = exports.defaultHotkeyDef = {
  copy: ['Ctrl+C', 'Command+C'],
  paste: ['Ctrl+V', 'Command+V'],
  cut: ['Ctrl+X', 'Command+X'],
  undo: ['Ctrl+Z', 'Command+Z'],
  save: ['Ctrl+S', 'Command+S'],
  redo: [['Ctrl+Shift+Z', 'Ctrl+Y'], ['Command+Shift+Z', 'Command+Y']],
  confirm: ['Ctrl+Enter', 'Command+Enter'],
  delete: ['Delete', ['Delete', 'Backspace']],
  escape: ['Escape']
};
var mapping = (0, _utils.createHotkeyCache)(defaultHotkeyDef);
var actionStack = exports.actionStack = [];
var handleKeyDown = function handleKeyDown(e) {
  var hotkeyStr = (0, _utils.toHotkeyStr)(e);
  if (!hotkeyStr) return;
  var keyMapping = (0, _utils.isMac)() ? mapping.macHotkeyMapping : mapping.hotkeyMapping;
  var hotkeyName = keyMapping.get(hotkeyStr);
  if (window.sessionStorage.useHotkeyListenerDebug) {
    console.warn('hotkeyStr', hotkeyStr);
    console.warn('hotkeyName', hotkeyName);
  }

  // 在监听器中查找 action
  for (var _i = 0, _actionStack = actionStack; _i < _actionStack.length; _i++) {
    var action = _actionStack[_i];
    // 禁用的监听器，跳过
    if (action.disabled) continue;
    // 匹配事件名称（允许直接匹配）
    if (hotkeyName === action.hotkeyName || hotkeyStr === action.hotkeyName) {
      var _action$target, _ref, _action$action;
      var triggerTarget = e.target;
      if (action.input === false) {
        // 不对 input 内的快捷键进行响应，不做处理，继续/退出
        if ((0, _utils.isInput)(triggerTarget)) {
          if (action.through) {
            continue;
          } else {
            break;
          }
        }
      }
      // 事件监听有限制父节点
      var parentNode = (_action$target = action.target) === null || _action$target === void 0 ? void 0 : _action$target.call(action);
      if (parentNode) {
        // 有指定父节点，但触发目标节点不在范围内，不做处理，继续/退出
        if (!parentNode.contains(e.target)) {
          if (action.through) {
            continue;
          } else {
            break;
          }
        }
      }
      var through = (_ref = (_action$action = action.action(e)) !== null && _action$action !== void 0 ? _action$action : action.through) !== null && _ref !== void 0 ? _ref : true;
      if (!through) {
        // 不传递事件，中断，并标记事件已被触发
        break;
      }
    }
  }
};
var unregisterHotkeyAction = function unregisterHotkeyAction(action) {
  var index = actionStack.findIndex(function (item) {
    return item === action;
  });
  if (index >= 0) {
    actionStack.splice(index, 1);
  }
  if (actionStack.length <= 0) {
    window.removeEventListener('keydown', handleKeyDown);
  }
};
var registerHotkeyAction = function registerHotkeyAction(action) {
  if (actionStack.length <= 0) {
    window.addEventListener('keydown', handleKeyDown);
  }
  actionStack.unshift(action);
  actionStack.sort(function (a, b) {
    var _b$priority, _a$priority;
    return ((_b$priority = b.priority) !== null && _b$priority !== void 0 ? _b$priority : 0) - ((_a$priority = a.priority) !== null && _a$priority !== void 0 ? _a$priority : 0);
  });
  return function () {
    unregisterHotkeyAction(action);
  };
};

// 将内容挂载到 window 上，避免多个包重复，导致无法共享，重复触发等问题
var globalObj = (0, _syncGlobal.registerGlobal)('__orca-hooks-useHotkeyListener-global', {
  mapping: mapping,
  unregisterHotkeyAction: unregisterHotkeyAction,
  registerHotkeyAction: registerHotkeyAction
});
var useHotkeyListener = function useHotkeyListener(_hotkeyName, action) {
  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  var getOptionTarget = (0, _ahooks.useMemoizedFn)(function () {
    var _options$target;
    return (_options$target = options.target) === null || _options$target === void 0 ? void 0 : _options$target.call(options);
  });
  var memoAction = (0, _ahooks.useMemoizedFn)(action);
  var _useState = (0, _react.useState)(function () {
      return (0, _utils.isMac)();
    }),
    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
    isMacEnv = _useState2[0];
  var _useState3 = (0, _react.useState)({
      action: memoAction,
      hotkeyName: '',
      target: getOptionTarget
    }),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
    actionObject = _useState4[0];
  var hotkeyName = (Array.isArray(_hotkeyName) ? _hotkeyName : [_hotkeyName, _hotkeyName])[isMacEnv ? 1 : 0];
  actionObject.hotkeyName = (0, _react.useMemo)(function () {
    return (0, _utils.formatHotKeyStr)(hotkeyName);
  }, [hotkeyName]);
  actionObject.input = options.input;
  actionObject.through = options.through;
  actionObject.disabled = options.disabled;
  actionObject.priority = options.priority;
  (0, _react.useEffect)(function () {
    globalObj.registerHotkeyAction(actionObject);
    return function () {
      globalObj.unregisterHotkeyAction(actionObject);
    };
  }, [actionObject.priority]);
};

/**
 * 更新预设快捷键
 * @param hotkeys
 */
useHotkeyListener.updateHotkeyDefs = function (hotkeys) {
  var _createHotkeyCache = (0, _utils.createHotkeyCache)(hotkeys),
    hotkeyMapping = _createHotkeyCache.hotkeyMapping,
    macHotkeyMapping = _createHotkeyCache.macHotkeyMapping;
  globalObj.mapping.hotkeyMapping = hotkeyMapping;
  globalObj.mapping.macHotkeyMapping = macHotkeyMapping;
};
var _default = exports.default = useHotkeyListener;