@bbki.ng/components 1.5.38 → 1.5.41

package/dist/index.d.ts

@@ -45,6 +45,7 @@ declare const Breadcrumb: (props: BreadcrumbProps) => JSX.Element;
 declare type NavProps = {
     paths: PathObj[];
     loading?: boolean;
+    mini?: boolean;
     className?: string;
 };
 declare const Nav: (props: NavProps) => JSX.Element;
@@ -245,6 +246,7 @@ interface Photo {
 interface ImgProps extends Photo {
     className?: string;
     size?: "large" | "normal";
+    removeBlurBgAfterLoad?: boolean;
 }
 
 declare const Img: (props: ImgProps) => JSX.Element;

package/dist/index.js

@@ -264,6 +264,13 @@ var BlinkDot = (props) => {
 
 // src/nav/Nav.tsx
 var Nav = (props) => {
+  if (props.mini) {
+    return /* @__PURE__ */ import_react6.default.createElement("div", {
+      className: `p-8 w-full flex items-center ${props.className}`
+    }, /* @__PURE__ */ import_react6.default.createElement(Breadcrumb, {
+      paths: props.paths
+    }));
+  }
   return /* @__PURE__ */ import_react6.default.createElement("div", {
     className: `p-8 w-full flex items-center ${props.className}`
   }, /* @__PURE__ */ import_react6.default.createElement(Logo, {
@@ -865,11 +872,6 @@ var calcDefaultImgSize = (img, defaultWidth, scale) => {
     height: finalWidth / whRatio
   };
 };
-var delay = (time) => {
-  return new Promise((resolve) => {
-    setTimeout(resolve, time);
-  });
-};
 
 // src/img/Img.tsx
 var emptyDataURL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
@@ -881,7 +883,8 @@ var Img = (props) => {
     avgColor,
     thumbnailSrc,
     processType,
-    size
+    size,
+    removeBlurBgAfterLoad
   } = props;
   const { width, height } = calcDefaultImgSize(props, renderedWidth, size === "normal" ? 0.6 : 1);
   const [loaded, setLoaded] = (0, import_react19.useState)(false);
@@ -889,15 +892,14 @@ var Img = (props) => {
   const baseWrapperStyle = {
     width: "initial",
     height: "initial",
-    backgroundColor: avgColor || "unset"
-  };
-  const dynamicWrapperStyle = loaded ? {
-    backgroundImage: "none"
-  } : {
     backgroundSize: "cover",
     backgroundPosition: "0% 0%",
+    backgroundColor: avgColor || "#f1f1f1",
     backgroundImage: `url(${thumbnailSrc ? thumbnailSrc : addOssWebpProcessStyle(src, "thumbnail" /* THUMBNAIL */)})`
   };
+  const dynamicWrapperStyle = loaded && removeBlurBgAfterLoad ? {
+    backgroundImage: "none"
+  } : {};
   const handleImgLoad = (img) => {
     const updateFunc = async () => {
       const p = "decode" in img ? img.decode : Promise.resolve;
@@ -905,11 +907,13 @@ var Img = (props) => {
         await p();
       } catch (e) {
       }
-      await delay(500);
       setDecoded(true);
-      await delay(500);
       setLoaded(true);
     };
+    if (img.complete) {
+      updateFunc().then();
+      return;
+    }
     img.onload = updateFunc;
   };
   return /* @__PURE__ */ import_react19.default.createElement("span", {

package/dist/index.mjs

@@ -203,6 +203,13 @@ var BlinkDot = (props) => {
 
 // src/nav/Nav.tsx
 var Nav = (props) => {
+  if (props.mini) {
+    return /* @__PURE__ */ React7.createElement("div", {
+      className: `p-8 w-full flex items-center ${props.className}`
+    }, /* @__PURE__ */ React7.createElement(Breadcrumb, {
+      paths: props.paths
+    }));
+  }
   return /* @__PURE__ */ React7.createElement("div", {
     className: `p-8 w-full flex items-center ${props.className}`
   }, /* @__PURE__ */ React7.createElement(Logo, {
@@ -807,11 +814,6 @@ var calcDefaultImgSize = (img, defaultWidth, scale) => {
     height: finalWidth / whRatio
   };
 };
-var delay = (time) => {
-  return new Promise((resolve) => {
-    setTimeout(resolve, time);
-  });
-};
 
 // src/img/Img.tsx
 var emptyDataURL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
@@ -823,7 +825,8 @@ var Img = (props) => {
     avgColor,
     thumbnailSrc,
     processType,
-    size
+    size,
+    removeBlurBgAfterLoad
   } = props;
   const { width, height } = calcDefaultImgSize(props, renderedWidth, size === "normal" ? 0.6 : 1);
   const [loaded, setLoaded] = useState5(false);
@@ -831,15 +834,14 @@ var Img = (props) => {
   const baseWrapperStyle = {
     width: "initial",
     height: "initial",
-    backgroundColor: avgColor || "unset"
-  };
-  const dynamicWrapperStyle = loaded ? {
-    backgroundImage: "none"
-  } : {
     backgroundSize: "cover",
     backgroundPosition: "0% 0%",
+    backgroundColor: avgColor || "#f1f1f1",
     backgroundImage: `url(${thumbnailSrc ? thumbnailSrc : addOssWebpProcessStyle(src, "thumbnail" /* THUMBNAIL */)})`
   };
+  const dynamicWrapperStyle = loaded && removeBlurBgAfterLoad ? {
+    backgroundImage: "none"
+  } : {};
   const handleImgLoad = (img) => {
     const updateFunc = async () => {
       const p = "decode" in img ? img.decode : Promise.resolve;
@@ -847,11 +849,13 @@ var Img = (props) => {
         await p();
       } catch (e) {
       }
-      await delay(500);
       setDecoded(true);
-      await delay(500);
       setLoaded(true);
     };
+    if (img.complete) {
+      updateFunc().then();
+      return;
+    }
     img.onload = updateFunc;
   };
   return /* @__PURE__ */ React18.createElement("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.5.38",
+  "version": "1.5.41",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",