@bbki.ng/components 1.5.36 → 1.5.39

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import React, { FunctionComponent, EventHandler, ReactElement, ReactNode, CSSProperties, Ref } from 'react';
+import * as React from 'react';
+import React__default, { FunctionComponent, EventHandler, ReactElement, ReactNode, CSSProperties, Ref } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
@@ -18,9 +19,9 @@ declare enum ButtonType {
 }
 interface ButtonProps {
     className?: string;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     type?: ButtonType;
-    onClick: EventHandler<React.MouseEvent<HTMLButtonElement>>;
+    onClick: EventHandler<React__default.MouseEvent<HTMLButtonElement>>;
 }
 declare function Button(props: ButtonProps): JSX.Element;
 declare namespace Button {
@@ -30,7 +31,7 @@ declare namespace Button {
 declare type LogoProps = {
     className?: string;
 };
-declare const Logo: (props: LogoProps) => JSX.Element;
+declare const Logo: React.MemoExoticComponent<(props: LogoProps) => JSX.Element>;
 
 declare type PathObj = {
     path?: string;
@@ -91,7 +92,7 @@ declare const NotFound: (props: {
 declare const Error: (props: {
     error: Error;
 }) => JSX.Element;
-declare class ErrorBoundary extends React.Component<{
+declare class ErrorBoundary extends React__default.Component<{
     children: any;
 }, {
     error?: Error;
@@ -108,8 +109,8 @@ declare class ErrorBoundary extends React.Component<{
 }
 
 declare type PopConfirmProps = {
-    onOk?: EventHandler<React.MouseEvent<HTMLButtonElement>> | (() => Promise<void>);
-    onCancel?: EventHandler<React.MouseEvent<HTMLButtonElement>>;
+    onOk?: EventHandler<React__default.MouseEvent<HTMLButtonElement>> | (() => Promise<void>);
+    onCancel?: EventHandler<React__default.MouseEvent<HTMLButtonElement>>;
     className?: string;
     content?: any;
     children?: any;
@@ -244,6 +245,7 @@ interface Photo {
 interface ImgProps extends Photo {
     className?: string;
     size?: "large" | "normal";
+    removeBlurBgAfterLoad?: boolean;
 }
 
 declare const Img: (props: ImgProps) => JSX.Element;
@@ -252,7 +254,7 @@ interface RandomRowsLayoutProps {
     classNames?: string;
     cellWrapperClsGenerator?: (colNum: number, randBoolean: boolean) => string;
     cellsCount: number;
-    cellRenderer: (index: number, randomBool: boolean, col: number) => React.ReactNode;
+    cellRenderer: (index: number, randomBool: boolean, col: number) => React__default.ReactNode;
 }
 
 declare type ImageRenderer = (Img: ReactElement, index: number, col: number, randBool: boolean) => ReactNode;

package/dist/index.js

@@ -134,7 +134,7 @@ Button.displayName = "Button";
 
 // src/logo/Logo.tsx
 var React3 = __toESM(require("react"));
-var Logo = (props) => /* @__PURE__ */ React3.createElement("svg", {
+var Logo = React3.memo((props) => /* @__PURE__ */ React3.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "48",
   height: "48",
@@ -162,7 +162,9 @@ var Logo = (props) => /* @__PURE__ */ React3.createElement("svg", {
 }), /* @__PURE__ */ React3.createElement("path", {
   d: "M35.7842 15.9373C35.7842 16.6792 35.186 17.2806 34.4481 17.2806C33.7102 17.2806 33.112 16.6792 33.112 15.9373C33.112 15.1954 33.7102 14.594 34.4481 14.594C35.186 14.594 35.7842 15.1954 35.7842 15.9373Z",
   fill: "#9CA3AF"
-}));
+})), () => {
+  return true;
+});
 
 // src/nav/Nav.tsx
 var import_react6 = __toESM(require("react"));
@@ -863,11 +865,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";
@@ -879,7 +876,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);
@@ -887,15 +885,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;
@@ -903,11 +900,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", {
@@ -933,7 +932,8 @@ var Img = (props) => {
     })
   }), /* @__PURE__ */ import_react19.default.createElement("img", {
     src: emptyDataURL,
-    className: (0, import_classnames10.default)("lqip-blur", "absolute", "h-full", "w-full", "transition-opacity", "opacity-100", {
+    className: (0, import_classnames10.default)("lqip-blur", "absolute", "h-full", "w-full", "transition-opacity", {
+      "opacity-100": !decoded,
       "opacity-0": decoded
     }),
     style: { top: 0, left: 0 }

package/dist/index.mjs

@@ -73,7 +73,7 @@ Button.displayName = "Button";
 
 // src/logo/Logo.tsx
 import * as React3 from "react";
-var Logo = (props) => /* @__PURE__ */ React3.createElement("svg", {
+var Logo = React3.memo((props) => /* @__PURE__ */ React3.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "48",
   height: "48",
@@ -101,7 +101,9 @@ var Logo = (props) => /* @__PURE__ */ React3.createElement("svg", {
 }), /* @__PURE__ */ React3.createElement("path", {
   d: "M35.7842 15.9373C35.7842 16.6792 35.186 17.2806 34.4481 17.2806C33.7102 17.2806 33.112 16.6792 33.112 15.9373C33.112 15.1954 33.7102 14.594 34.4481 14.594C35.186 14.594 35.7842 15.1954 35.7842 15.9373Z",
   fill: "#9CA3AF"
-}));
+})), () => {
+  return true;
+});
 
 // src/nav/Nav.tsx
 import React7 from "react";
@@ -805,11 +807,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";
@@ -821,7 +818,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);
@@ -829,15 +827,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;
@@ -845,11 +842,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", {
@@ -875,7 +874,8 @@ var Img = (props) => {
     })
   }), /* @__PURE__ */ React18.createElement("img", {
     src: emptyDataURL,
-    className: classnames("lqip-blur", "absolute", "h-full", "w-full", "transition-opacity", "opacity-100", {
+    className: classnames("lqip-blur", "absolute", "h-full", "w-full", "transition-opacity", {
+      "opacity-100": !decoded,
       "opacity-0": decoded
     }),
     style: { top: 0, left: 0 }

package/package.json

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