@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
282 lines (269 loc) • 14.1 kB
JavaScript
'use client';
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { isEqual } from 'lodash-es';
import { Undo2Icon } from 'lucide-react';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';
import { Flexbox } from 'react-layout-kit';
import useControlledState from 'use-merge-value';
import ActionIcon from "../ActionIcon";
import Hotkey from "../Hotkey";
import { checkIsAppleDevice, splitKeysByPlus } from "../Hotkey/utils";
import { useStyles } from "./style";
// 修饰键列表
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var MODIFIER_KEYS = new Set(['alt', 'mod', 'shift', 'meta', 'ctrl', 'control']);
var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
var _ref$value = _ref.value,
value = _ref$value === void 0 ? '' : _ref$value,
_ref$defaultValue = _ref.defaultValue,
defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
_ref$resetValue = _ref.resetValue,
resetValue = _ref$resetValue === void 0 ? '' : _ref$resetValue,
onChange = _ref.onChange,
onConflict = _ref.onConflict,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? 'Press keys to record shortcut' : _ref$placeholder,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$allowReset = _ref.allowReset,
allowReset = _ref$allowReset === void 0 ? true : _ref$allowReset,
style = _ref.style,
className = _ref.className,
_ref$hotkeyConflicts = _ref.hotkeyConflicts,
hotkeyConflicts = _ref$hotkeyConflicts === void 0 ? [] : _ref$hotkeyConflicts,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'default' : _ref$variant,
texts = _ref.texts,
isApple = _ref.isApple,
onBlur = _ref.onBlur,
onReset = _ref.onReset,
onFocus = _ref.onFocus;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isFocused = _useState2[0],
setIsFocused = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
hasConflict = _useState4[0],
setHasConflict = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
hasInvalidCombination = _useState6[0],
setHasInvalidCombination = _useState6[1];
var inputRef = useRef(null);
var _useStyles = useStyles({
variant: variant
}),
cx = _useStyles.cx,
styles = _useStyles.styles;
var isAppleDevice = useMemo(function () {
return checkIsAppleDevice(isApple);
}, [isApple]);
var _useControlledState = useControlledState(defaultValue, {
defaultValue: defaultValue,
onChange: onChange,
value: value
}),
_useControlledState2 = _slicedToArray(_useControlledState, 2),
hotkeyValue = _useControlledState2[0],
setHotkeyValue = _useControlledState2[1];
// 使用 useRecordHotkeys 处理快捷键录入
var _useRecordHotkeys = useRecordHotkeys(),
_useRecordHotkeys2 = _slicedToArray(_useRecordHotkeys, 2),
recordedKeys = _useRecordHotkeys2[0],
_useRecordHotkeys2$ = _useRecordHotkeys2[1],
start = _useRecordHotkeys2$.start,
stop = _useRecordHotkeys2$.stop,
isRecording = _useRecordHotkeys2$.isRecording,
resetKeys = _useRecordHotkeys2$.resetKeys;
useHotkeys('*', function () {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
}, {
enableOnContentEditable: true,
enableOnFormTags: true,
enabled: isRecording && !disabled,
keydown: false,
keyup: true,
preventDefault: true
});
// 处理按键，保证格式正确：修饰键在前，最多一个非修饰键在后
var formatKeys = useCallback(function (keysSet) {
var modifiers = [];
var normalKeys = [];
var _iterator = _createForOfIteratorHelper(keysSet),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var key = _step.value;
// 处理不同表示的修饰键
var normalizedKey = key.toLowerCase();
if (MODIFIER_KEYS.has(normalizedKey)) {
// 统一修饰键表示
if (!isAppleDevice && normalizedKey === 'ctrl' || isAppleDevice && normalizedKey === 'meta') {
if (!modifiers.includes('mod')) modifiers.push('mod');
} else if (!modifiers.includes(normalizedKey)) {
modifiers.push(normalizedKey);
}
} else {
normalKeys.push(key);
}
}
// 至少需要一个修饰键
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
if (modifiers.length === 0 && normalKeys.length > 0) {
return {
isValid: false,
keys: []
};
}
// 只允许一个非修饰键，如果有多个，只保留最后一个
var finalKey = normalKeys.length > 0 ? [normalKeys.at(-1)] : [];
var validKeys = [].concat(modifiers, finalKey);
// 组合必须包含至少一个按键
return {
isValid: validKeys.length > 0,
keys: validKeys
};
}, []);
// 获取格式化后的按键字符串
var _formatKeys = formatKeys(recordedKeys),
isValid = _formatKeys.isValid,
keys = _formatKeys.keys;
var keysString = keys.join('+');
// 检查快捷键冲突
var checkHotkeyConflict = useCallback(function (newHotkey) {
return hotkeyConflicts.filter(function (conflictKey) {
return conflictKey !== resetValue;
}).some(function (conflictKey) {
var newKeys = splitKeysByPlus(newHotkey);
var conflictKeys = splitKeysByPlus(conflictKey);
return isEqual(newKeys.sort(), conflictKeys.sort());
});
}, [hotkeyConflicts]);
// 当按键组合完成时处理结果
useEffect(function () {
if (recordedKeys.size > 0 && !isRecording) {
if (!isValid) {
setHasInvalidCombination(true);
setHasConflict(false);
return;
}
setHasInvalidCombination(false);
var newKeysString = keysString;
// 检查冲突
var conflict = checkHotkeyConflict(newKeysString);
if (conflict) {
setHasConflict(true);
onConflict === null || onConflict === void 0 || onConflict(newKeysString);
} else {
setHasConflict(false);
setHotkeyValue === null || setHotkeyValue === void 0 || setHotkeyValue(newKeysString);
}
}
}, [recordedKeys, isRecording, isValid, keysString, checkHotkeyConflict, setHotkeyValue, onConflict]);
// 处理输入框焦点
var handleFocus = function handleFocus(e) {
if (disabled) return;
setIsFocused(true);
setHasConflict(false);
setHasInvalidCombination(false);
start(); // 开始记录
onFocus === null || onFocus === void 0 || onFocus(e);
};
var handleBlur = function handleBlur(e) {
setIsFocused(false);
stop(); // 停止记录
onBlur === null || onBlur === void 0 || onBlur(e);
};
// 重置功能
var handleReset = function handleReset(e) {
e.preventDefault();
e.stopPropagation();
setHotkeyValue === null || setHotkeyValue === void 0 || setHotkeyValue(resetValue);
resetKeys();
setHasConflict(false);
setHasInvalidCombination(false);
setIsFocused(false);
stop(); // 停止记录
onReset === null || onReset === void 0 || onReset(hotkeyValue, resetValue);
};
var handleClick = function handleClick(e) {
var _inputRef$current2;
e.preventDefault();
e.stopPropagation();
if (disabled || isFocused) return;
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
};
return /*#__PURE__*/_jsxs(Flexbox, {
className: className,
gap: 8,
style: _objectSpread({
position: 'relative'
}, style),
children: [/*#__PURE__*/_jsxs(Flexbox, {
align: 'center',
className: cx(styles.input, isFocused && styles.inputFocused, (hasConflict || hasInvalidCombination) && styles.inputError, disabled && styles.inputDisabled),
horizontal: true,
justify: 'space-between',
onClick: handleClick,
children: [/*#__PURE__*/_jsx("div", {
style: {
pointerEvents: 'none'
},
children: isRecording ? /*#__PURE__*/_jsx("span", {
className: styles.placeholder,
children: keys.length > 0 ? /*#__PURE__*/_jsx(Hotkey, {
keys: keysString
}) : placeholder
}) : hotkeyValue ? /*#__PURE__*/_jsx(Hotkey, {
keys: hotkeyValue
}) : /*#__PURE__*/_jsx("span", {
className: styles.placeholder,
children: placeholder
})
}), /*#__PURE__*/_jsx("input", {
className: styles.hiddenInput,
disabled: disabled,
onBlur: handleBlur,
onFocus: handleFocus,
readOnly: true,
ref: inputRef,
style: {
pointerEvents: 'none'
}
}), allowReset && hotkeyValue && hotkeyValue !== resetValue && !disabled && /*#__PURE__*/_jsx(ActionIcon, {
active: true,
icon: Undo2Icon,
onClick: handleReset,
size: 'small',
title: (texts === null || texts === void 0 ? void 0 : texts.reset) || 'Reset to default'
})]
}), hasConflict && /*#__PURE__*/_jsx("div", {
className: styles.errorText,
children: (texts === null || texts === void 0 ? void 0 : texts.conflicts) || 'This shortcut conflicts with an existing one.'
}), hasInvalidCombination && /*#__PURE__*/_jsx("div", {
className: styles.errorText,
children: (texts === null || texts === void 0 ? void 0 : texts.invalidCombination) || 'Shortcut must include a modifier key (Ctrl, Alt, Shift) and only one regular key.'
})]
});
});
export default HotkeyInput;