xxf_react 0.5.7 → 0.5.8

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.
Files changed (4) hide show
  1. package/dist/layout/hover/XHover.d.ts +25 -14
  2. package/dist/layout/hover/XHover.d.ts.map +1 -1
  3. package/dist/layout/hover/XHover.js +10 -10
  4. package/package.json +1 -1
package/dist/layout/hover/XHover.d.ts CHANGED
@@ -8,15 +8,26 @@ export interface XHoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onMou
8
8
  */
9
9
  children: ReactNode;
10
10
  /**
11
- * 悬浮延迟时间（毫秒）
11
+ * 悬浮触发延迟时间（毫秒）
12
12
  *
13
- * 鼠标悬浮指定时间后才触发 onHover 回调
13
+ * 鼠标进入后，需要持续悬浮该时间才会触发 onHover 回调和显示 hoverLayer。
14
+ * - 设为 0 或不设置：鼠标进入立即触发
15
+ * - 设为正数：鼠标需要停留指定毫秒后才触发
16
+ *
17
+ * @example
18
+ * ```tsx
19
+ * // 悬浮 2 秒后触发
20
+ * <XHover hoverDelay={2000} onHover={handleHover}>
21
+ *
22
+ * // 立即触发（默认）
23
+ * <XHover onHover={handleHover}>
24
+ * ```
14
25
  *
15
26
  * @default 0
16
27
  */
17
- delay?: number;
28
+ hoverDelay?: number;
18
29
  /**
19
- * 鼠标进入时立即触发的回调（不等待 delay）
30
+ * 鼠标进入时立即触发的回调（不等待 hoverDelay）
20
31
  *
21
32
  * 适用于需要在鼠标进入时立即做一些事情的场景，如显示边框高亮等
22
33
  */
@@ -24,7 +35,7 @@ export interface XHoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onMou
24
35
  /**
25
36
  * 悬浮回调
26
37
  *
27
- * 当鼠标悬浮达到 delay 时间后触发
38
+ * 当鼠标悬浮达到 hoverDelay 时间后触发
28
39
  */
29
40
  onHover?: () => void;
30
41
  /**
@@ -36,13 +47,13 @@ export interface XHoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onMou
36
47
  /**
37
48
  * 悬浮覆盖层
38
49
  *
39
- * 当悬浮触发（达到 delay 时间）后，显示在 children 上方的内容。
50
+ * 当悬浮触发（达到 hoverDelay 时间）后，显示在 children 上方的内容。
40
51
  * 鼠标离开后自动隐藏。
41
52
  *
42
53
  * @example
43
54
  * ```tsx
44
55
  * <XHover
45
- * delay={1000}
56
+ * hoverDelay={1000}
46
57
  * hoverLayer={() => (
47
58
  * <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
48
59
  * <span className="text-white">悬浮提示</span>
@@ -75,7 +86,7 @@ export interface XHoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onMou
75
86
  * @example
76
87
  * ```tsx
77
88
  * // 基础用法：鼠标悬浮 2 秒后触发
78
- * <XHover delay={2000} onHover={() => console.log('悬浮触发')}>
89
+ * <XHover hoverDelay={2000} onHover={() => console.log('悬浮触发')}>
79
90
  * <div>悬浮我</div>
80
91
  * </XHover>
81
92
  *
@@ -86,7 +97,7 @@ export interface XHoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onMou
86
97
  *
87
98
  * // 带离开回调，判断是否触发过
88
99
  * <XHover
89
- * delay={1000}
100
+ * hoverDelay={1000}
90
101
  * onHover={() => setShowTooltip(true)}
91
102
  * onLeave={(triggered) => {
92
103
  * if (triggered) setShowTooltip(false)
@@ -97,7 +108,7 @@ export interface XHoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onMou
97
108
  *
98
109
  * // 使用 hoverLayer 显示悬浮覆盖层
99
110
  * <XHover
100
- * delay={1000}
111
+ * hoverDelay={1000}
101
112
  * hoverLayer={() => (
102
113
  * <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
103
114
  * <PlayIcon className="text-white w-12 h-12" />
@@ -108,18 +119,18 @@ export interface XHoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onMou
108
119
  * </XHover>
109
120
  *
110
121
  * // 使用 span 作为容器（适用于 inline 场景）
111
- * <XHover as="span" delay={500} onHover={handleHover}>
122
+ * <XHover as="span" hoverDelay={500} onHover={handleHover}>
112
123
  * <span>inline 文本</span>
113
124
  * </XHover>
114
125
  *
115
126
  * // 禁用状态
116
- * <XHover disabled={isLoading} delay={1000} onHover={handleHover}>
127
+ * <XHover disabled={isLoading} hoverDelay={1000} onHover={handleHover}>
117
128
  * <div>内容</div>
118
129
  * </XHover>
119
130
  *
120
131
  * // 使用 onEnter 立即响应 + onHover 延迟响应
121
132
  * <XHover
122
- * delay={1000}
133
+ * hoverDelay={1000}
123
134
  * onEnter={() => setHighlight(true)}
124
135
  * onHover={() => setShowDetail(true)}
125
136
  * onLeave={() => {
@@ -131,6 +142,6 @@ export interface XHoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onMou
131
142
  * </XHover>
132
143
  * ```
133
144
  */
134
- export declare function XHover({ children, delay, onEnter, onHover, onLeave, hoverLayer, disabled, as: Component, style, ...rest }: XHoverProps): React.JSX.Element;
145
+ export declare function XHover({ children, hoverDelay, onEnter, onHover, onLeave, hoverLayer, disabled, as: Component, style, ...rest }: XHoverProps): React.JSX.Element;
135
146
  export default XHover;
136
147
  //# sourceMappingURL=XHover.d.ts.map
package/dist/layout/hover/XHover.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"XHover.d.ts","sourceRoot":"","sources":["../../../src/layout/hover/XHover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2C,SAAS,EAAE,cAAc,EAAC,MAAM,OAAO,CAAA;AAEhG;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,GAAG,cAAc,CAAC;IACtG;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IAEnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAEtC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,MAAM,SAAS,CAAA;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,wBAAgB,MAAM,CAAC,EACI,QAAQ,EACR,KAAS,EACT,OAAO,EACP,OAAO,EACP,OAAO,EACP,UAAU,EACV,QAAgB,EAChB,EAAE,EAAE,SAAiB,EACrB,KAAK,EACL,GAAG,IAAI,EACV,EAAE,WAAW,qBA0EpC;AAED,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"XHover.d.ts","sourceRoot":"","sources":["../../../src/layout/hover/XHover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2C,SAAS,EAAE,cAAc,EAAC,MAAM,OAAO,CAAA;AAEhG;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,GAAG,cAAc,CAAC;IACtG;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IAEnB;;;;;;;;;;;;;;;;;OAiBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAEtC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,MAAM,SAAS,CAAA;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,UAAc,EACd,OAAO,EACP,OAAO,EACP,OAAO,EACP,UAAU,EACV,QAAgB,EAChB,EAAE,EAAE,SAAiB,EACrB,KAAK,EACL,GAAG,IAAI,EACV,EAAE,WAAW,qBA0Eb;AAED,eAAe,MAAM,CAAA"}
package/dist/layout/hover/XHover.js CHANGED
@@ -7,7 +7,7 @@ import React, { useCallback, useRef, useEffect, useState } from 'react';
7
7
  * @example
8
8
  * ```tsx
9
9
  * // 基础用法：鼠标悬浮 2 秒后触发
10
- * <XHover delay={2000} onHover={() => console.log('悬浮触发')}>
10
+ * <XHover hoverDelay={2000} onHover={() => console.log('悬浮触发')}>
11
11
  * <div>悬浮我</div>
12
12
  * </XHover>
13
13
  *
@@ -18,7 +18,7 @@ import React, { useCallback, useRef, useEffect, useState } from 'react';
18
18
  *
19
19
  * // 带离开回调，判断是否触发过
20
20
  * <XHover
21
- * delay={1000}
21
+ * hoverDelay={1000}
22
22
  * onHover={() => setShowTooltip(true)}
23
23
  * onLeave={(triggered) => {
24
24
  * if (triggered) setShowTooltip(false)
@@ -29,7 +29,7 @@ import React, { useCallback, useRef, useEffect, useState } from 'react';
29
29
  *
30
30
  * // 使用 hoverLayer 显示悬浮覆盖层
31
31
  * <XHover
32
- * delay={1000}
32
+ * hoverDelay={1000}
33
33
  * hoverLayer={() => (
34
34
  * <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
35
35
  * <PlayIcon className="text-white w-12 h-12" />
@@ -40,18 +40,18 @@ import React, { useCallback, useRef, useEffect, useState } from 'react';
40
40
  * </XHover>
41
41
  *
42
42
  * // 使用 span 作为容器（适用于 inline 场景）
43
- * <XHover as="span" delay={500} onHover={handleHover}>
43
+ * <XHover as="span" hoverDelay={500} onHover={handleHover}>
44
44
  * <span>inline 文本</span>
45
45
  * </XHover>
46
46
  *
47
47
  * // 禁用状态
48
- * <XHover disabled={isLoading} delay={1000} onHover={handleHover}>
48
+ * <XHover disabled={isLoading} hoverDelay={1000} onHover={handleHover}>
49
49
  * <div>内容</div>
50
50
  * </XHover>
51
51
  *
52
52
  * // 使用 onEnter 立即响应 + onHover 延迟响应
53
53
  * <XHover
54
- * delay={1000}
54
+ * hoverDelay={1000}
55
55
  * onEnter={() => setHighlight(true)}
56
56
  * onHover={() => setShowDetail(true)}
57
57
  * onLeave={() => {
@@ -63,7 +63,7 @@ import React, { useCallback, useRef, useEffect, useState } from 'react';
63
63
  * </XHover>
64
64
  * ```
65
65
  */
66
- export function XHover({ children, delay = 0, onEnter, onHover, onLeave, hoverLayer, disabled = false, as: Component = 'div', style, ...rest }) {
66
+ export function XHover({ children, hoverDelay = 0, onEnter, onHover, onLeave, hoverLayer, disabled = false, as: Component = 'div', style, ...rest }) {
67
67
  const timerRef = useRef(null);
68
68
  const hasTriggeredRef = useRef(false);
69
69
  // 只有 hoverLayer 存在时才需要状态
@@ -94,7 +94,7 @@ export function XHover({ children, delay = 0, onEnter, onHover, onLeave, hoverLa
94
94
  clearTimer();
95
95
  // 立即触发 onEnter
96
96
  onEnter === null || onEnter === void 0 ? void 0 : onEnter();
97
- if (delay <= 0) {
97
+ if (hoverDelay <= 0) {
98
98
  hasTriggeredRef.current = true;
99
99
  if (hoverLayer)
100
100
  setShowLayer(true);
@@ -106,9 +106,9 @@ export function XHover({ children, delay = 0, onEnter, onHover, onLeave, hoverLa
106
106
  if (hoverLayer)
107
107
  setShowLayer(true);
108
108
  onHover === null || onHover === void 0 ? void 0 : onHover();
109
- }, delay);
109
+ }, hoverDelay);
110
110
  }
111
- }, [delay, onEnter, onHover, clearTimer, disabled, hoverLayer]);
111
+ }, [hoverDelay, onEnter, onHover, clearTimer, disabled, hoverLayer]);
112
112
  const handleMouseLeave = useCallback(() => {
113
113
  if (disabled)
114
114
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xxf_react",
3
- "version": "0.5.7",
3
+ "version": "0.5.8",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/index.js",