@lobehub/ui 1.168.4 → 1.168.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,4 @@
1
+ import type { InputProps } from 'antd';
1
2
  import { type CSSProperties } from 'react';
2
3
  export interface HotkeyInputProps {
3
4
  allowReset?: boolean;
@@ -6,8 +7,11 @@ export interface HotkeyInputProps {
6
7
  disabled?: boolean;
7
8
  hotkeyConflicts?: string[];
8
9
  isApple?: boolean;
10
+ onBlur?: InputProps['onBlur'];
9
11
  onChange?: (value: string) => void;
10
12
  onConflict?: (conflictKey: string) => void;
13
+ onFocus?: InputProps['onFocus'];
14
+ onReset?: (currentValue: string, resetValue: string) => void;
11
15
  placeholder?: string;
12
16
  resetValue?: string;
13
17
  style?: CSSProperties;
@@ -17,7 +21,7 @@ export interface HotkeyInputProps {
17
21
  reset?: string;
18
22
  };
19
23
  value?: string;
20
- variant?: 'ghost' | 'block' | 'pure';
24
+ variant?: 'default' | 'ghost' | 'block' | 'pure';
21
25
  }
22
26
  declare const HotkeyInput: import("react").NamedExoticComponent<HotkeyInputProps>;
23
27
  export default HotkeyInput;
@@ -18,6 +18,7 @@ import { Undo2Icon } from 'lucide-react';
18
18
  import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
19
19
  import { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';
20
20
  import { Flexbox } from 'react-layout-kit';
21
+ import useControlledState from 'use-merge-value';
21
22
  import ActionIcon from "../ActionIcon";
22
23
  import Hotkey from "../Hotkey";
23
24
  import { checkIsAppleDevice, splitKeysByPlus } from "../Hotkey/utils";
@@ -32,7 +33,8 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
32
33
  value = _ref$value === void 0 ? '' : _ref$value,
33
34
  _ref$defaultValue = _ref.defaultValue,
34
35
  defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
35
- resetValue = _ref.resetValue,
36
+ _ref$resetValue = _ref.resetValue,
37
+ resetValue = _ref$resetValue === void 0 ? '' : _ref$resetValue,
36
38
  onChange = _ref.onChange,
37
39
  onConflict = _ref.onConflict,
38
40
  _ref$placeholder = _ref.placeholder,
@@ -46,9 +48,12 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
46
48
  _ref$hotkeyConflicts = _ref.hotkeyConflicts,
47
49
  hotkeyConflicts = _ref$hotkeyConflicts === void 0 ? [] : _ref$hotkeyConflicts,
48
50
  _ref$variant = _ref.variant,
49
- variant = _ref$variant === void 0 ? 'ghost' : _ref$variant,
51
+ variant = _ref$variant === void 0 ? 'default' : _ref$variant,
50
52
  texts = _ref.texts,
51
- isApple = _ref.isApple;
53
+ isApple = _ref.isApple,
54
+ onBlur = _ref.onBlur,
55
+ onReset = _ref.onReset,
56
+ onFocus = _ref.onFocus;
52
57
  var _useState = useState(false),
53
58
  _useState2 = _slicedToArray(_useState, 2),
54
59
  isFocused = _useState2[0],
@@ -70,6 +75,14 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
70
75
  var isAppleDevice = useMemo(function () {
71
76
  return checkIsAppleDevice(isApple);
72
77
  }, [isApple]);
78
+ var _useControlledState = useControlledState(defaultValue, {
79
+ defaultValue: defaultValue,
80
+ onChange: onChange,
81
+ value: value
82
+ }),
83
+ _useControlledState2 = _slicedToArray(_useControlledState, 2),
84
+ hotkeyValue = _useControlledState2[0],
85
+ setHotkeyValue = _useControlledState2[1];
73
86
 
74
87
  // 使用 useRecordHotkeys 处理快捷键录入
75
88
  var _useRecordHotkeys = useRecordHotkeys(),
@@ -80,7 +93,6 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
80
93
  stop = _useRecordHotkeys2$.stop,
81
94
  isRecording = _useRecordHotkeys2$.isRecording,
82
95
  resetKeys = _useRecordHotkeys2$.resetKeys;
83
- var oldValue = resetValue || defaultValue;
84
96
  useHotkeys('*', function () {
85
97
  var _inputRef$current;
86
98
  (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
@@ -89,7 +101,8 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
89
101
  enableOnFormTags: true,
90
102
  enabled: isRecording && !disabled,
91
103
  keydown: false,
92
- keyup: true
104
+ keyup: true,
105
+ preventDefault: true
93
106
  });
94
107
 
95
108
  // 处理按键,保证格式正确:修饰键在前,最多一个非修饰键在后
@@ -148,7 +161,7 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
148
161
  // 检查快捷键冲突
149
162
  var checkHotkeyConflict = useCallback(function (newHotkey) {
150
163
  return hotkeyConflicts.filter(function (conflictKey) {
151
- return conflictKey !== oldValue;
164
+ return conflictKey !== resetValue;
152
165
  }).some(function (conflictKey) {
153
166
  var newKeys = splitKeysByPlus(newHotkey);
154
167
  var conflictKeys = splitKeysByPlus(conflictKey);
@@ -170,38 +183,48 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
170
183
  // 检查冲突
171
184
  var conflict = checkHotkeyConflict(newKeysString);
172
185
  if (conflict) {
173
- console.log('conflict');
174
186
  setHasConflict(true);
175
187
  onConflict === null || onConflict === void 0 || onConflict(newKeysString);
176
188
  } else {
177
189
  setHasConflict(false);
178
- onChange === null || onChange === void 0 || onChange(newKeysString);
190
+ setHotkeyValue === null || setHotkeyValue === void 0 || setHotkeyValue(newKeysString);
179
191
  }
180
192
  }
181
- }, [recordedKeys, isRecording, isValid, keysString, checkHotkeyConflict, onChange, onConflict]);
193
+ }, [recordedKeys, isRecording, isValid, keysString, checkHotkeyConflict, setHotkeyValue, onConflict]);
182
194
 
183
195
  // 处理输入框焦点
184
- var handleFocus = function handleFocus() {
196
+ var handleFocus = function handleFocus(e) {
185
197
  if (disabled) return;
186
198
  setIsFocused(true);
187
199
  setHasConflict(false);
188
200
  setHasInvalidCombination(false);
189
201
  start(); // 开始记录
202
+ onFocus === null || onFocus === void 0 || onFocus(e);
190
203
  };
191
- var handleBlur = function handleBlur() {
204
+ var handleBlur = function handleBlur(e) {
192
205
  setIsFocused(false);
193
206
  stop(); // 停止记录
207
+ onBlur === null || onBlur === void 0 || onBlur(e);
194
208
  };
195
209
 
196
210
  // 重置功能
197
211
  var handleReset = function handleReset(e) {
198
212
  e.preventDefault();
199
213
  e.stopPropagation();
200
- onChange === null || onChange === void 0 || onChange(oldValue);
214
+ setHotkeyValue === null || setHotkeyValue === void 0 || setHotkeyValue(resetValue);
201
215
  resetKeys();
202
216
  setHasConflict(false);
203
217
  setHasInvalidCombination(false);
204
- handleBlur();
218
+ setIsFocused(false);
219
+ stop(); // 停止记录
220
+ onReset === null || onReset === void 0 || onReset(hotkeyValue, resetValue);
221
+ };
222
+ var handleClick = function handleClick(e) {
223
+ var _inputRef$current2;
224
+ e.preventDefault();
225
+ e.stopPropagation();
226
+ if (disabled || isFocused) return;
227
+ (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
205
228
  };
206
229
  return /*#__PURE__*/_jsxs(Flexbox, {
207
230
  className: className,
@@ -214,10 +237,7 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
214
237
  className: cx(styles.input, isFocused && styles.inputFocused, (hasConflict || hasInvalidCombination) && styles.inputError, disabled && styles.inputDisabled),
215
238
  horizontal: true,
216
239
  justify: 'space-between',
217
- onClick: function onClick() {
218
- var _inputRef$current2;
219
- return !disabled && !isFocused && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus());
220
- },
240
+ onClick: handleClick,
221
241
  children: [/*#__PURE__*/_jsx("div", {
222
242
  style: {
223
243
  pointerEvents: 'none'
@@ -227,8 +247,8 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
227
247
  children: keys.length > 0 ? /*#__PURE__*/_jsx(Hotkey, {
228
248
  keys: keysString
229
249
  }) : placeholder
230
- }) : value ? /*#__PURE__*/_jsx(Hotkey, {
231
- keys: value
250
+ }) : hotkeyValue ? /*#__PURE__*/_jsx(Hotkey, {
251
+ keys: hotkeyValue
232
252
  }) : /*#__PURE__*/_jsx("span", {
233
253
  className: styles.placeholder,
234
254
  children: placeholder
@@ -243,7 +263,7 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
243
263
  style: {
244
264
  pointerEvents: 'none'
245
265
  }
246
- }), allowReset && value && value !== oldValue && !disabled && /*#__PURE__*/_jsx(ActionIcon, {
266
+ }), allowReset && hotkeyValue && hotkeyValue !== resetValue && !disabled && /*#__PURE__*/_jsx(ActionIcon, {
247
267
  active: true,
248
268
  icon: Undo2Icon,
249
269
  onClick: handleReset,
@@ -1,5 +1,5 @@
1
1
  export declare const useStyles: (props?: {
2
- variant: 'ghost' | 'block' | 'pure';
2
+ variant: 'default' | 'ghost' | 'block' | 'pure';
3
3
  } | undefined) => import("antd-style").ReturnStyles<{
4
4
  errorText: import("antd-style").SerializedStyles;
5
5
  hiddenInput: import("antd-style").SerializedStyles;
@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
7
7
  token = _ref.token,
8
8
  prefixCls = _ref.prefixCls;
9
9
  var variant = _ref2.variant;
10
- var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n transition:\n background-color 100ms ", ",\n border-color 200ms ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &.", "-input-affix-wrapper-focused {\n border-color: ", ";\n }\n "])), variant === 'block' ? token.colorFillTertiary : 'transparent', variant === 'block' ? 'transparent' : token.colorBorder, token.borderRadius, token.motionEaseOut, token.motionEaseOut, token.colorFillTertiary, token.colorTextQuaternary, prefixCls, token.colorTextQuaternary);
10
+ var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n transition:\n background-color 100ms ", ",\n border-color 200ms ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &.", "-input-affix-wrapper-focused {\n border-color: ", ";\n }\n "])), variant === 'block' || variant === 'default' ? token.colorFillTertiary : 'transparent', variant === 'block' ? 'transparent' : token.colorBorder, token.borderRadius, token.motionEaseOut, token.motionEaseOut, token.colorFillTertiary, token.colorTextQuaternary, prefixCls, token.colorTextQuaternary);
11
11
  return {
12
12
  errorText: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 12px;\n color: ", ";\n "])), token.colorError),
13
13
  hiddenInput: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n cursor: text;\n\n position: absolute;\n z-index: -1;\n inset-block-start: 0;\n inset-inline-start: 0;\n\n width: 100%;\n height: 100%;\n\n opacity: 0;\n "]))),
@@ -129,7 +129,9 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
129
129
  var innerRemarkPlugins = Array.isArray(remarkPlugins) ? remarkPlugins : [remarkPlugins];
130
130
  var innerRemarkPluginsAhead = Array.isArray(remarkPluginsAhead) ? remarkPluginsAhead : [remarkPluginsAhead];
131
131
  var memoRemarkPlugins = useMemo(function () {
132
- return [].concat(_toConsumableArray(innerRemarkPluginsAhead), [remarkGfm, enableCustomFootnotes && remarkCustomFootnotes, enableLatex && remarkMath, isChatMode && remarkBreaks], _toConsumableArray(innerRemarkPlugins)).filter(Boolean);
132
+ return [].concat(_toConsumableArray(innerRemarkPluginsAhead), [[remarkGfm, {
133
+ singleTilde: false
134
+ }], enableCustomFootnotes && remarkCustomFootnotes, enableLatex && remarkMath, isChatMode && remarkBreaks], _toConsumableArray(innerRemarkPlugins)).filter(Boolean);
133
135
  }, [isChatMode, enableCustomFootnotes, enableLatex].concat(_toConsumableArray(innerRemarkPluginsAhead), _toConsumableArray(innerRemarkPlugins)));
134
136
  var defaultDOM = /*#__PURE__*/_jsx(ImageGallery, {
135
137
  enable: enableImageGallery,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "1.168.4",
3
+ "version": "1.168.6",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",