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

React Hooks Collections

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useCombineKeyListener;
exports.divOnlyFilter = divOnlyFilter;
exports.isMac = isMac;
exports.normalizeHotkeyStr = normalizeHotkeyStr;
exports.toHotkeyStr = toHotkeyStr;
var _ahooks = require("ahooks");
var _detectBrowser = require("detect-browser");
var _react = require("react");
// deprecated

/** * 是否为mac系统（包含iphone手机） * */
function isMac() {
  var info = (0, _detectBrowser.detect)();
  return (info === null || info === void 0 ? void 0 : info.os) === 'Mac OS' || (info === null || info === void 0 ? void 0 : info.os) === 'darwin';
}
function toHotkeyStr(event) {
  var metaKey = event.metaKey,
    ctrlKey = event.ctrlKey,
    altKey = event.altKey,
    shiftKey = event.shiftKey,
    key = event.key;
  if (key === 'Command' || key === 'Control' || key === 'Meta' || key === 'Shift' || key === 'Alt') return '';
  var keyArr = [];
  if (isMac()) {
    if (metaKey) {
      keyArr.push('Command');
    }
    if (ctrlKey) {
      keyArr.push('Ctrl');
    }
    if (shiftKey) {
      keyArr.push('Shift');
    }
    if (altKey) {
      keyArr.push('Alt');
    }
    if (key.length === 1) {
      keyArr.push(key.toUpperCase());
    } else {
      keyArr.push(key);
    }
  } else {
    if (ctrlKey) {
      keyArr.push('Ctrl');
    }
    if (shiftKey) {
      keyArr.push('Shift');
    }
    if (altKey) {
      keyArr.push('Alt');
    }
    if (metaKey) {
      keyArr.push('Meta');
    }
    if (key.length === 1) {
      keyArr.push(key.toUpperCase());
    } else {
      keyArr.push(key);
    }
  }
  return keyArr.join('+');
}

// 功能键权重
var fnKeyOrder = {
  Command: -10,
  Ctrl: -8,
  Shift: -6,
  Alt: -4,
  Meta: -2
};

// 将 hotkey 标准化
function normalizeHotkeyStr(hotkeyStr) {
  var keyArr = hotkeyStr.trim().split('+');
  return keyArr.map(function (key) {
    return key.trim();
  })
  // 按功能键权重排序
  .sort(function (key1, key2) {
    return (fnKeyOrder[key1] || 0) - (fnKeyOrder[key2] || 0);
  }).join('+');
}
function divOnlyFilter(e) {
  var _e$target;
  if (((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target['tagName']) === 'DIV') {
    return true;
  }
  return false;
}
function useCombineKeyListener(combineKey, callback) {
  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  var _options$stopPropagat = options.stopPropagation,
    stopPropagation = _options$stopPropagat === void 0 ? false : _options$stopPropagat,
    _options$preventDefau = options.preventDefault,
    preventDefault = _options$preventDefau === void 0 ? false : _options$preventDefau,
    filter = options.filter,
    _options$allElement = options.allElement,
    allElement = _options$allElement === void 0 ? false : _options$allElement;

  // 支持逗号分隔
  var hotkeyStrArr = (0, _react.useMemo)(function () {
    return combineKey.split(',').map(normalizeHotkeyStr);
  }, [combineKey]);
  (0, _ahooks.useEventListener)('keydown', function (e) {
    var hotkeyStr = toHotkeyStr(e);
    if (!hotkeyStr) return;
    // 判断是否匹配 hotkey
    if (!hotkeyStrArr.includes(hotkeyStr)) {
      return;
    }
    // 过滤
    if (typeof filter === 'function') {
      if (filter(e) === false) {
        return;
      }
    } else if (!allElement) {
      // 没有设置 filter，自动判断，排除不监听的内容
      if (['INPUT', 'TEXTAREA', 'BUTTON'].includes(e.target.tagName)) {
        return;
      }
    }
    if (stopPropagation) {
      e.stopPropagation();
    }
    if (preventDefault) {
      e.preventDefault();
    }
    callback(e);
  }, {
    target: options.target
  });
}