xxf_react 0.6.2 → 0.6.3
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.
|
@@ -26,11 +26,13 @@ export interface XButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
26
26
|
*/
|
|
27
27
|
loadingGravity?: LoadingGravity;
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
30
|
-
* -
|
|
29
|
+
* 自定义加载指示器（回调形式，懒创建）
|
|
30
|
+
* - 只有 loading=true 时才会调用
|
|
31
|
+
* - 不传则使用默认的 XSpinner
|
|
31
32
|
* - 尺寸建议使用 `em` 单位以跟随字体大小
|
|
33
|
+
* @example () => <MySpinner className="w-5 h-5" />
|
|
32
34
|
*/
|
|
33
|
-
loadingIndicator?: ReactNode;
|
|
35
|
+
loadingIndicator?: () => ReactNode;
|
|
34
36
|
/**
|
|
35
37
|
* 指示器与内容的间距（像素）
|
|
36
38
|
* - 仅在 `loadingGravity` 为 `start` 或 `end` 时生效
|
|
@@ -77,8 +79,8 @@ export interface XButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
77
79
|
* 加载中...
|
|
78
80
|
* </XButton>
|
|
79
81
|
*
|
|
80
|
-
* //
|
|
81
|
-
* <XButton loading loadingIndicator={<MySpinner />}>
|
|
82
|
+
* // 自定义加载指示器（回调形式，懒创建）
|
|
83
|
+
* <XButton loading loadingIndicator={() => <MySpinner />}>
|
|
82
84
|
* 处理中
|
|
83
85
|
* </XButton>
|
|
84
86
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"XButton.d.ts","sourceRoot":"","sources":["../../../src/layout/button/XButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAa,oBAAoB,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAIxF;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACzE;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC
|
|
1
|
+
{"version":3,"file":"XButton.d.ts","sourceRoot":"","sources":["../../../src/layout/button/XButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAa,oBAAoB,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAIxF;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACzE;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;IAEnC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,OAAO,wFA6InB,CAAC"}
|
|
@@ -26,8 +26,8 @@ import { XSpinner } from "../spinner/XSpinner";
|
|
|
26
26
|
* 加载中...
|
|
27
27
|
* </XButton>
|
|
28
28
|
*
|
|
29
|
-
* //
|
|
30
|
-
* <XButton loading loadingIndicator={<MySpinner />}>
|
|
29
|
+
* // 自定义加载指示器（回调形式，懒创建）
|
|
30
|
+
* <XButton loading loadingIndicator={() => <MySpinner />}>
|
|
31
31
|
* 处理中
|
|
32
32
|
* </XButton>
|
|
33
33
|
*
|
|
@@ -43,8 +43,11 @@ import { XSpinner } from "../spinner/XSpinner";
|
|
|
43
43
|
* ```
|
|
44
44
|
*/
|
|
45
45
|
export const XButton = forwardRef(function XButton({ loading = false, loadingGravity = 'start', loadingIndicator, loadingGap = 8, debounceWait = 500, stopPropagation = false, children, onClick, disabled, style, type = 'button', ...rest }, ref) {
|
|
46
|
-
/**
|
|
47
|
-
|
|
46
|
+
/**
|
|
47
|
+
* 获取加载指示器（懒创建）
|
|
48
|
+
* - 只在 loading=true 时才实际创建节点
|
|
49
|
+
*/
|
|
50
|
+
const getIndicator = () => { var _a; return (_a = loadingIndicator === null || loadingIndicator === void 0 ? void 0 : loadingIndicator()) !== null && _a !== void 0 ? _a : React.createElement(XSpinner, null); };
|
|
48
51
|
/**
|
|
49
52
|
* 防抖处理后的点击回调
|
|
50
53
|
* - leading: true 首次点击立即执行
|
|
@@ -98,6 +101,7 @@ export const XButton = forwardRef(function XButton({ loading = false, loadingGra
|
|
|
98
101
|
if (!loading) {
|
|
99
102
|
return children;
|
|
100
103
|
}
|
|
104
|
+
const indicator = getIndicator();
|
|
101
105
|
switch (loadingGravity) {
|
|
102
106
|
case 'start':
|
|
103
107
|
return (React.createElement(React.Fragment, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"XSpinner.d.ts","sourceRoot":"","sources":["../../../src/layout/spinner/XSpinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,gBAAa,aAAkB,
|
|
1
|
+
{"version":3,"file":"XSpinner.d.ts","sourceRoot":"","sources":["../../../src/layout/spinner/XSpinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,gBAAa,aAAkB,sBAoBvD,CAAC"}
|
|
@@ -30,11 +30,15 @@ import { cn } from "tailwind-variants";
|
|
|
30
30
|
*
|
|
31
31
|
* @see XButton - 内置 XSpinner 作为默认加载指示器
|
|
32
32
|
*/
|
|
33
|
-
export const XSpinner = ({ className } = {}) => (React.createElement("div", {
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
export const XSpinner = ({ className } = {}) => (React.createElement("div", { style: {
|
|
34
|
+
// 使用内联样式确保 em 单位正确跟随 font-size
|
|
35
|
+
width: '1em',
|
|
36
|
+
height: '1em',
|
|
37
|
+
// 边框粗细也跟随字体大小
|
|
38
|
+
borderWidth: '0.125em',
|
|
39
|
+
}, className: cn(
|
|
36
40
|
// 边框样式：白色圆环，顶部透明形成缺口
|
|
37
|
-
"border-
|
|
41
|
+
"border-solid border-current border-t-transparent rounded-full",
|
|
38
42
|
// 动画：无限旋转
|
|
39
43
|
"animate-spin",
|
|
40
44
|
// 透明度：略微降低避免过亮
|