xxf_react 0.6.2 → 0.6.4

package/dist/flow/{promise_ext.d.ts → PromiseExt.d.ts}

@@ -5,4 +5,4 @@ declare global {
 }
 export declare function isSafariLoadFailed(error: unknown): boolean;
 export declare function initPromiseErrorExtension(): void;
-//# sourceMappingURL=promise_ext.d.ts.map
+//# sourceMappingURL=PromiseExt.d.ts.map

package/dist/flow/PromiseExt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromiseExt.d.ts","sourceRoot":"","sources":["../../src/flow/PromiseExt.ts"],"names":[],"mappings":"AAIA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,OAAO,CAAC,CAAC;QACf,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;KACjE;CACJ;AAGD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAM1D;AAED,wBAAgB,yBAAyB,IAAI,IAAI,CAgDhD"}

package/dist/flow/PromiseLifecycle.d.ts

@@ -0,0 +1,33 @@
+export interface PromiseLifecycle<T> {
+    /** 开始执行时（同步调用） */
+    doOnStart?: () => void;
+    /** 成功时 */
+    doOnSuccess?: (value: T) => void;
+    /** 失败时 */
+    doOnError?: (error: unknown) => void;
+    /** 无论成功失败都会调用（类似 doFinally） */
+    doFinally?: () => void;
+}
+/**
+ * 为 Promise 添加生命周期钩子
+ *
+ * @param promiseFn - 返回 Promise 的函数（使用回调形式以确保 doOnStart 在 Promise 执行前调用）
+ * @param lifecycle - 生命周期回调配置
+ * @returns 原始 Promise 的结果
+ *
+ * @example
+ * ```ts
+ * // 基本用法：管理 loading 状态
+ * withLifecycle(
+ *   () => fetchUserData(userId),
+ *   {
+ *     doOnStart: () => setLoading(true),
+ *     doOnSuccess: (user) => setUser(user),
+ *     doOnError: (err) => setError(err.message),
+ *     doFinally: () => setLoading(false)
+ *   }
+ * );
+ * ```
+ */
+export declare function withLifecycle<T>(promiseFn: () => Promise<T>, lifecycle: PromiseLifecycle<T>): Promise<T>;
+//# sourceMappingURL=PromiseLifecycle.d.ts.map

package/dist/flow/PromiseLifecycle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromiseLifecycle.d.ts","sourceRoot":"","sources":["../../src/flow/PromiseLifecycle.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAC/B,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU;IACV,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjC,UAAU;IACV,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC3B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAC3B,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAC/B,OAAO,CAAC,CAAC,CAAC,CAiBZ"}

package/dist/flow/PromiseLifecycle.js

@@ -0,0 +1,37 @@
+/**
+ * 为 Promise 添加生命周期钩子
+ *
+ * @param promiseFn - 返回 Promise 的函数（使用回调形式以确保 doOnStart 在 Promise 执行前调用）
+ * @param lifecycle - 生命周期回调配置
+ * @returns 原始 Promise 的结果
+ *
+ * @example
+ * ```ts
+ * // 基本用法：管理 loading 状态
+ * withLifecycle(
+ *   () => fetchUserData(userId),
+ *   {
+ *     doOnStart: () => setLoading(true),
+ *     doOnSuccess: (user) => setUser(user),
+ *     doOnError: (err) => setError(err.message),
+ *     doFinally: () => setLoading(false)
+ *   }
+ * );
+ * ```
+ */
+export function withLifecycle(promiseFn, lifecycle) {
+    const { doOnStart, doOnSuccess, doOnError, doFinally } = lifecycle;
+    doOnStart === null || doOnStart === void 0 ? void 0 : doOnStart();
+    return promiseFn()
+        .then((value) => {
+        doOnSuccess === null || doOnSuccess === void 0 ? void 0 : doOnSuccess(value);
+        return value;
+    })
+        .catch((error) => {
+        doOnError === null || doOnError === void 0 ? void 0 : doOnError(error);
+        throw error; // 继续抛出，不吞掉错误
+    })
+        .finally(() => {
+        doFinally === null || doFinally === void 0 ? void 0 : doFinally();
+    });
+}

package/dist/flow/PromiseLoading.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 为 Promise 自动绑定 loading 状态
+ *
+ * @param promiseFn - 返回 Promise 的函数
+ * @param setLoading - React 的 setState 函数，用于设置 loading 状态
+ * @returns 原始 Promise 的结果
+ *
+ * @example
+ * ```tsx
+ * const [loading, setLoading] = useState(false);
+ *
+ * // 自动管理 loading 状态
+ * const handleSubmit = () => {
+ *   withLoading(() => submitForm(data), setLoading);
+ * };
+ *
+ * // 等价于
+ * withLifecycle(() => submitForm(data), {
+ *   doOnStart: () => setLoading(true),
+ *   doFinally: () => setLoading(false)
+ * });
+ * ```
+ */
+export declare function withLoading<T>(promiseFn: () => Promise<T>, setLoading: (loading: boolean) => void): Promise<T>;
+//# sourceMappingURL=PromiseLoading.d.ts.map

package/dist/flow/PromiseLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromiseLoading.d.ts","sourceRoot":"","sources":["../../src/flow/PromiseLoading.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,CAAC,EACzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,GACvC,OAAO,CAAC,CAAC,CAAC,CAKZ"}

package/dist/flow/PromiseLoading.js

@@ -0,0 +1,30 @@
+import { withLifecycle } from "./PromiseLifecycle";
+/**
+ * 为 Promise 自动绑定 loading 状态
+ *
+ * @param promiseFn - 返回 Promise 的函数
+ * @param setLoading - React 的 setState 函数，用于设置 loading 状态
+ * @returns 原始 Promise 的结果
+ *
+ * @example
+ * ```tsx
+ * const [loading, setLoading] = useState(false);
+ *
+ * // 自动管理 loading 状态
+ * const handleSubmit = () => {
+ *   withLoading(() => submitForm(data), setLoading);
+ * };
+ *
+ * // 等价于
+ * withLifecycle(() => submitForm(data), {
+ *   doOnStart: () => setLoading(true),
+ *   doFinally: () => setLoading(false)
+ * });
+ * ```
+ */
+export function withLoading(promiseFn, setLoading) {
+    return withLifecycle(promiseFn, {
+        doOnStart: () => setLoading(true),
+        doFinally: () => setLoading(false)
+    });
+}

package/dist/flow/index.d.ts

@@ -1,2 +1,4 @@
-export * from './promise_ext';
+export * from './PromiseExt';
+export * from './PromiseLifecycle';
+export * from './PromiseLoading';
 //# sourceMappingURL=index.d.ts.map

package/dist/flow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/flow/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/flow/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/dist/flow/index.js

@@ -1 +1,3 @@
-export * from './promise_ext';
+export * from './PromiseExt';
+export * from './PromiseLifecycle';
+export * from './PromiseLoading';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { initPromiseErrorExtension } from "./flow/promise_ext";
+import { initPromiseErrorExtension } from "./flow/PromiseExt";
 export * from './sse';
 export * from './fetch';
 export * from './utils';

package/dist/layout/button/XButton.d.ts

@@ -26,11 +26,13 @@ export interface XButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     loadingGravity?: LoadingGravity;
     /**
-     * 自定义加载指示器
-     * - 不传则使用默认的旋转圆环
+     * 自定义加载指示器（回调形式，懒创建）
+     * - 只有 loading=true 时才会调用
+     * - 不传则使用默认的 XSpinner
      * - 尺寸建议使用 `em` 单位以跟随字体大小
+     * @example () => <MySpinner className="w-5 h-5" />
      */
-    loadingIndicator?: ReactNode;
+    loadingIndicator?: () => ReactNode;
     /**
      * 指示器与内容的间距（像素）
      * - 仅在 `loadingGravity` 为 `start` 或 `end` 时生效
@@ -77,8 +79,8 @@ export interface XButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  *   加载中...
  * </XButton>
  *
- * // 自定义加载指示器
- * <XButton loading loadingIndicator={<MySpinner />}>
+ * // 自定义加载指示器（回调形式，懒创建）
+ * <XButton loading loadingIndicator={() => <MySpinner />}>
  *   处理中
  * </XButton>
  *

package/dist/layout/button/XButton.d.ts.map

@@ -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;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAE7B;;;;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,wFAyInB,CAAC"}
+{"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"}

package/dist/layout/button/XButton.js

@@ -26,8 +26,8 @@ import { XSpinner } from "../spinner/XSpinner";
  *   加载中...
  * </XButton>
  *
- * // 自定义加载指示器
- * <XButton loading loadingIndicator={<MySpinner />}>
+ * // 自定义加载指示器（回调形式，懒创建）
+ * <XButton loading loadingIndicator={() => <MySpinner />}>
  *   处理中
  * </XButton>
  *
@@ -43,8 +43,11 @@ import { XSpinner } from "../spinner/XSpinner";
  * ```
  */
 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) {
-    /** 使用自定义指示器或默认指示器 */
-    const indicator = loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : React.createElement(XSpinner, null);
+    /**
+     * 获取加载指示器（懒创建）
+     * - 只在 loading=true 时才实际创建节点
+     */
+    const getIndicator = () => { var _a; return (_a = loadingIndicator === null || loadingIndicator === void 0 ? void 0 : loadingIndicator()) !== null && _a !== void 0 ? _a : React.createElement(XSpinner, null); };
     /**
      * 防抖处理后的点击回调
      * - leading: true  首次点击立即执行
@@ -98,6 +101,7 @@ export const XButton = forwardRef(function XButton({ loading = false, loadingGra
         if (!loading) {
             return children;
         }
+        const indicator = getIndicator();
         switch (loadingGravity) {
             case 'start':
                 return (React.createElement(React.Fragment, null,

package/dist/layout/spinner/XSpinner.d.ts.map

@@ -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,sBAevD,CAAC"}
+{"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"}

package/dist/layout/spinner/XSpinner.js

@@ -30,11 +30,15 @@ import { cn } from "tailwind-variants";
  *
  * @see XButton - 内置 XSpinner 作为默认加载指示器
  */
-export const XSpinner = ({ className } = {}) => (React.createElement("div", { className: cn(
-    // 尺寸：1em 跟随字体大小
-    "w-[1em] h-[1em]", 
+export const XSpinner = ({ className } = {}) => (React.createElement("div", { style: {
+        // 使用内联样式确保 em 单位正确跟随 font-size
+        width: '1em',
+        height: '1em',
+        // 边框粗细也跟随字体大小
+        borderWidth: '0.125em',
+    }, className: cn(
     // 边框样式：白色圆环，顶部透明形成缺口
-    "border-2 border-white border-t-transparent rounded-full", 
+    "border-solid border-current border-t-transparent rounded-full", 
     // 动画：无限旋转
     "animate-spin", 
     // 透明度：略微降低避免过亮

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xxf_react",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "private": false,
   "type": "module",
   "main": "dist/index.js",

package/dist/flow/promise_ext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"promise_ext.d.ts","sourceRoot":"","sources":["../../src/flow/promise_ext.ts"],"names":[],"mappings":"AAIA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,OAAO,CAAC,CAAC;QACf,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;KACjE;CACJ;AAGD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAM1D;AAED,wBAAgB,yBAAyB,IAAI,IAAI,CAgDhD"}