xxf_react 0.3.9 → 0.4.1

package/dist/index.d.ts

@@ -7,5 +7,6 @@ export * from './media';
 export * from './flow';
 export * from './responsive';
 export * from './foundation';
+export * from './layout';
 export declare function initXXF(): void;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAG7B,wBAAgB,OAAO,SAEtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAGzB,wBAAgB,OAAO,SAEtB"}

package/dist/index.js

@@ -8,6 +8,7 @@ export * from './media';
 export * from './flow';
 export * from './responsive';
 export * from './foundation';
+export * from './layout';
 ///框架初始化函数，调用后会初始化一些全局功能
 export function initXXF() {
     initPromiseErrorExtension();

package/dist/layout/image/XImage.d.ts

@@ -1,16 +1,18 @@
 import { ImageProps } from "next/image";
-import React from "react";
+import React, { ReactNode } from "react";
 export interface XImageProps extends ImageProps {
-    /** 图片加载失败时显示的备用图片 URL */
-    fallback?: string;
+    /** 图片加载失败时显示的备用图片 URL 或自定义组件
+     * 可选:urlPlaceholder函数来生成失败的占位图
+     */
+    fallback?: string | ReactNode;
 }
 /**
- * 增强的 image 组件，支持加载失败时显示备用图片
+ * 增强的 Image 组件，支持加载失败时显示备用图片或自定义组件
  * @param src - 图片地址
- * @param fallback - 加载失败时显示的备用图片 URL
+ * @param fallback - 加载失败时显示的备用图片 URL 或 ReactNode,可选:urlPlaceholder函数来生成失败的占位图
  * @param onError - 加载失败回调
  * @param className - 样式类名
- * @param props - 其他 Next.js image 支持的属性
+ * @param props - 其他 Next.js Image 支持的属性
  */
 export declare function XImage({ src, fallback, onError, ...props }: XImageProps): React.JSX.Element;
 export default XImage;

package/dist/layout/image/XImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XImage.d.ts","sourceRoot":"","sources":["../../../src/layout/image/XImage.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAC,UAAU,EAAC,MAAM,YAAY,CAAC;AAC7C,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC3C,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACI,GAAG,EACH,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACX,EAAE,WAAW,qBAsBpC;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"XImage.d.ts","sourceRoot":"","sources":["../../../src/layout/image/XImage.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAC,UAAU,EAAC,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAsB,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC3C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACI,GAAG,EACH,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACX,EAAE,WAAW,qBAkDpC;AAED,eAAe,MAAM,CAAC"}

package/dist/layout/image/XImage.js

@@ -2,25 +2,44 @@
 import Image from "next/image";
 import React, { useState, useEffect } from "react";
 /**
- * 增强的 image 组件，支持加载失败时显示备用图片
+ * 增强的 Image 组件，支持加载失败时显示备用图片或自定义组件
  * @param src - 图片地址
- * @param fallback - 加载失败时显示的备用图片 URL
+ * @param fallback - 加载失败时显示的备用图片 URL 或 ReactNode,可选:urlPlaceholder函数来生成失败的占位图
  * @param onError - 加载失败回调
  * @param className - 样式类名
- * @param props - 其他 Next.js image 支持的属性
+ * @param props - 其他 Next.js Image 支持的属性
  */
 export function XImage({ src, fallback, onError, ...props }) {
     const [imgSrc, setImgSrc] = useState(src);
-    // src 变化时重置 imgSrc
+    const [hasError, setHasError] = useState(false);
+    // src 变化时重置状态
     useEffect(() => {
         setImgSrc(src);
+        setHasError(false);
     }, [src]);
     const handleError = (e) => {
-        if (fallback && imgSrc !== fallback) {
-            setImgSrc(fallback);
+        if (fallback && !hasError) {
+            setHasError(true);
+            // 如果 fallback 是字符串（URL），则切换图片源
+            if (typeof fallback === "string") {
+                setImgSrc(fallback);
+                return; // fallback 切换时不触发 onError，等 fallback 也失败再触发
+            }
         }
         onError === null || onError === void 0 ? void 0 : onError(e);
     };
+    // fallback 是 ReactNode 且已出错，用容器包裹并应用样式属性
+    if (hasError && fallback && typeof fallback !== "string") {
+        const width = typeof props.width === "number" ? props.width : props.width ? Number(props.width) : undefined;
+        const height = typeof props.height === "number" ? props.height : props.height ? Number(props.height) : undefined;
+        return (React.createElement("div", { className: props.className, style: {
+                width,
+                height,
+                position: props.fill ? "absolute" : undefined,
+                inset: props.fill ? 0 : undefined,
+                ...props.style,
+            } }, fallback));
+    }
     return (React.createElement(Image, { ...props, src: imgSrc, onError: handleError }));
 }
 export default XImage;

package/package.json

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