@bbki.ng/components 1.5.19 → 1.5.20

package/dist/index.d.ts

@@ -225,4 +225,27 @@ interface NoiseCoverProps {
 }
 declare const NoiseCover: (props: NoiseCoverProps) => JSX.Element;
 
-export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, ImageDropProps, ImagePreviewerProps, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };
+declare enum ossProcessType {
+    THUMBNAIL = "thumbnail",
+    WEBP = "webp",
+    NULL = "null",
+    oWEBP = "owebp",
+    PROG = "prog"
+}
+interface Photo {
+    src: string;
+    width: number;
+    height: number;
+    processType?: ossProcessType;
+    avgColor?: string;
+    thumbnailSrc?: string;
+    renderedWidth?: number;
+}
+
+interface ImgProps extends Photo {
+    className?: string;
+    size?: "large" | "normal";
+}
+declare const Img: (props: ImgProps) => JSX.Element;
+
+export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, ImageDropProps, ImagePreviewerProps, Img, ImgProps, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };

package/dist/index.js

@@ -67,6 +67,7 @@ __export(src_exports, {
   DropImage: () => DropImage,
   Error: () => Error2,
   ErrorBoundary: () => ErrorBoundary,
+  Img: () => Img,
   Link: () => Link,
   LinkColor: () => LinkColor,
   LinkList: () => LinkList,
@@ -576,7 +577,7 @@ var useDropImage = (params) => {
     setIsDragOver(false);
     imageFile.current = null;
   };
-  const calcDefaultImgSize = (img, defaultWidth) => {
+  const calcDefaultImgSize2 = (img, defaultWidth) => {
     const { width, height } = img;
     const whRatio = width / height;
     const isHorizontal = width > height;
@@ -619,7 +620,7 @@ var useDropImage = (params) => {
         await p();
       } catch (e) {
       }
-      setImageSize(calcDefaultImgSize({
+      setImageSize(calcDefaultImgSize2({
         width: img.naturalWidth,
         height: img.naturalHeight
       }));
@@ -832,6 +833,108 @@ var ThreeColLayout = (props) => {
     className: (0, import_classnames9.default)("hidden", colCls)
   }, rightRenderer && rightRenderer()));
 };
+
+// src/img/Img.tsx
+var import_classnames10 = __toESM(require("classnames"));
+var import_react19 = __toESM(require("react"));
+
+// src/img/utils.ts
+var addOssWebpProcessStyle = (originUrl, style) => {
+  const OSS_ADDRESS = "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com";
+  const isInvalidOSSImgUrl = !originUrl.startsWith(OSS_ADDRESS);
+  const isProcessedOssImg = /x-oss-process=style\/\w+/.test(originUrl);
+  const isWebpImg = /webp$/.test(originUrl);
+  if (isInvalidOSSImgUrl || isProcessedOssImg || isWebpImg && style === "webp" /* WEBP */ || style === "null" /* NULL */) {
+    return originUrl;
+  }
+  return `${originUrl}?x-oss-process=style/${style}`;
+};
+var calcDefaultImgSize = (img, defaultWidth, scale) => {
+  const { width, height } = img;
+  const whRatio = width / height;
+  const isHorizontal = width > height;
+  const finalWidth = (defaultWidth || (isHorizontal ? 576 : 384)) * (scale || 1);
+  return {
+    width: finalWidth,
+    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";
+var Img = (props) => {
+  const {
+    src,
+    className,
+    renderedWidth,
+    avgColor,
+    thumbnailSrc,
+    processType,
+    size
+  } = props;
+  const { width, height } = calcDefaultImgSize(props, renderedWidth, size === "normal" ? 0.6 : 1);
+  const [loaded, setLoaded] = (0, import_react19.useState)(false);
+  const [decoded, setDecoded] = (0, import_react19.useState)(false);
+  const baseWrapperStyle = {
+    width: "initial",
+    height: "initial",
+    backgroundColor: avgColor || "unset"
+  };
+  const dynamicWrapperStyle = loaded ? {
+    backgroundImage: "none"
+  } : {
+    backgroundSize: "cover",
+    backgroundPosition: "0% 0%",
+    backgroundImage: `url(${thumbnailSrc ? thumbnailSrc : addOssWebpProcessStyle(src, "thumbnail" /* THUMBNAIL */)})`
+  };
+  const handleImgLoad = (img) => {
+    const updateFunc = async () => {
+      const p = "decode" in img ? img.decode : Promise.resolve;
+      try {
+        await p();
+      } catch (e) {
+      }
+      await delay(500);
+      setDecoded(true);
+      await delay(500);
+      setLoaded(true);
+    };
+    img.onload = updateFunc;
+  };
+  return /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: (0, import_classnames10.default)(className, "inline-block", "relative", "overflow-hidden", "leading-none", "align-bottom", "border-0"),
+    style: Object.assign({}, baseWrapperStyle, dynamicWrapperStyle)
+  }, /* @__PURE__ */ import_react19.default.createElement("img", {
+    ref: (input) => {
+      if (!input) {
+        return;
+      }
+      handleImgLoad(input);
+    },
+    width,
+    height,
+    src: addOssWebpProcessStyle(src, processType || "webp" /* WEBP */),
+    decoding: "async",
+    loading: "lazy",
+    style: {
+      contentVisibility: "auto"
+    },
+    className: (0, import_classnames10.default)("transition-opacity", "opacity-100", {
+      "opacity-0": !decoded
+    })
+  }), /* @__PURE__ */ import_react19.default.createElement("img", {
+    src: emptyDataURL,
+    className: (0, import_classnames10.default)("lqip-blur", "absolute", "h-full", "w-full", "transition-opacity", "opacity-100", {
+      "opacity-0": decoded
+    }),
+    style: { top: 0, left: 0 }
+  }));
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -844,6 +947,7 @@ module.exports = __toCommonJS(src_exports);
   DropImage,
   Error,
   ErrorBoundary,
+  Img,
   Link,
   LinkColor,
   LinkList,

package/dist/index.mjs

@@ -521,7 +521,7 @@ var useDropImage = (params) => {
     setIsDragOver(false);
     imageFile.current = null;
   };
-  const calcDefaultImgSize = (img, defaultWidth) => {
+  const calcDefaultImgSize2 = (img, defaultWidth) => {
     const { width, height } = img;
     const whRatio = width / height;
     const isHorizontal = width > height;
@@ -564,7 +564,7 @@ var useDropImage = (params) => {
         await p();
       } catch (e) {
       }
-      setImageSize(calcDefaultImgSize({
+      setImageSize(calcDefaultImgSize2({
         width: img.naturalWidth,
         height: img.naturalHeight
       }));
@@ -777,6 +777,108 @@ var ThreeColLayout = (props) => {
     className: cls3("hidden", colCls)
   }, rightRenderer && rightRenderer()));
 };
+
+// src/img/Img.tsx
+import classnames from "classnames";
+import React18, { useState as useState5 } from "react";
+
+// src/img/utils.ts
+var addOssWebpProcessStyle = (originUrl, style) => {
+  const OSS_ADDRESS = "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com";
+  const isInvalidOSSImgUrl = !originUrl.startsWith(OSS_ADDRESS);
+  const isProcessedOssImg = /x-oss-process=style\/\w+/.test(originUrl);
+  const isWebpImg = /webp$/.test(originUrl);
+  if (isInvalidOSSImgUrl || isProcessedOssImg || isWebpImg && style === "webp" /* WEBP */ || style === "null" /* NULL */) {
+    return originUrl;
+  }
+  return `${originUrl}?x-oss-process=style/${style}`;
+};
+var calcDefaultImgSize = (img, defaultWidth, scale) => {
+  const { width, height } = img;
+  const whRatio = width / height;
+  const isHorizontal = width > height;
+  const finalWidth = (defaultWidth || (isHorizontal ? 576 : 384)) * (scale || 1);
+  return {
+    width: finalWidth,
+    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";
+var Img = (props) => {
+  const {
+    src,
+    className,
+    renderedWidth,
+    avgColor,
+    thumbnailSrc,
+    processType,
+    size
+  } = props;
+  const { width, height } = calcDefaultImgSize(props, renderedWidth, size === "normal" ? 0.6 : 1);
+  const [loaded, setLoaded] = useState5(false);
+  const [decoded, setDecoded] = useState5(false);
+  const baseWrapperStyle = {
+    width: "initial",
+    height: "initial",
+    backgroundColor: avgColor || "unset"
+  };
+  const dynamicWrapperStyle = loaded ? {
+    backgroundImage: "none"
+  } : {
+    backgroundSize: "cover",
+    backgroundPosition: "0% 0%",
+    backgroundImage: `url(${thumbnailSrc ? thumbnailSrc : addOssWebpProcessStyle(src, "thumbnail" /* THUMBNAIL */)})`
+  };
+  const handleImgLoad = (img) => {
+    const updateFunc = async () => {
+      const p = "decode" in img ? img.decode : Promise.resolve;
+      try {
+        await p();
+      } catch (e) {
+      }
+      await delay(500);
+      setDecoded(true);
+      await delay(500);
+      setLoaded(true);
+    };
+    img.onload = updateFunc;
+  };
+  return /* @__PURE__ */ React18.createElement("span", {
+    className: classnames(className, "inline-block", "relative", "overflow-hidden", "leading-none", "align-bottom", "border-0"),
+    style: Object.assign({}, baseWrapperStyle, dynamicWrapperStyle)
+  }, /* @__PURE__ */ React18.createElement("img", {
+    ref: (input) => {
+      if (!input) {
+        return;
+      }
+      handleImgLoad(input);
+    },
+    width,
+    height,
+    src: addOssWebpProcessStyle(src, processType || "webp" /* WEBP */),
+    decoding: "async",
+    loading: "lazy",
+    style: {
+      contentVisibility: "auto"
+    },
+    className: classnames("transition-opacity", "opacity-100", {
+      "opacity-0": !decoded
+    })
+  }), /* @__PURE__ */ React18.createElement("img", {
+    src: emptyDataURL,
+    className: classnames("lqip-blur", "absolute", "h-full", "w-full", "transition-opacity", "opacity-100", {
+      "opacity-0": decoded
+    }),
+    style: { top: 0, left: 0 }
+  }));
+};
 export {
   Article,
   ArticleSkeleton,
@@ -787,6 +889,7 @@ export {
   DropImage,
   Error2 as Error,
   ErrorBoundary,
+  Img,
   Link,
   LinkColor,
   LinkList,

package/package.json

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