@bbki.ng/components 1.5.19 → 1.5.22

package/dist/index.d.ts

@@ -225,4 +225,42 @@ 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;
+
+interface RandomRowsLayoutProps {
+    classNames?: string;
+    cellWrapperClsGenerator?: (colNum: number, randBoolean: boolean) => string;
+    cellsCount: number;
+    cellRenderer: (index: number, randomBool: boolean, col: number) => React.ReactNode;
+}
+
+declare type ImageRenderer = (Img: ReactElement, index: number, col: number, randBool: boolean) => ReactNode;
+interface GalleryProps extends Omit<RandomRowsLayoutProps, "classNames" | "cellsCount" | "cellRenderer"> {
+    images: ImgProps[];
+    children?: ReactNode;
+    imageRenderer?: ImageRenderer;
+}
+declare const Gallery: (props: GalleryProps) => JSX.Element;
+
+export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, Gallery, GalleryProps, ImageDropProps, ImagePreviewerProps, ImageRenderer, Img, 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,8 @@ __export(src_exports, {
   DropImage: () => DropImage,
   Error: () => Error2,
   ErrorBoundary: () => ErrorBoundary,
+  Gallery: () => Gallery,
+  Img: () => Img,
   Link: () => Link,
   LinkColor: () => LinkColor,
   LinkList: () => LinkList,
@@ -576,7 +578,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 +621,7 @@ var useDropImage = (params) => {
         await p();
       } catch (e) {
       }
-      setImageSize(calcDefaultImgSize({
+      setImageSize(calcDefaultImgSize2({
         width: img.naturalWidth,
         height: img.naturalHeight
       }));
@@ -832,6 +834,211 @@ 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 }
+  }));
+};
+
+// src/img/Gallery.tsx
+var import_classnames12 = __toESM(require("classnames"));
+var import_react21 = __toESM(require("react"));
+
+// src/img/RandomRowsLayout.tsx
+var import_classnames11 = __toESM(require("classnames"));
+var import_react20 = __toESM(require("react"));
+var last = (arr) => {
+  if (arr.length < 2) {
+    return arr[0];
+  }
+  return arr[arr.length - 1];
+};
+var defaultCellClsGenerator = (colNum, isCenterSingleCell) => {
+  const isSingleCell = colNum === 1;
+  const singleCellWidth = isCenterSingleCell ? "full" : "1/2";
+  const cellWidth = isSingleCell ? singleCellWidth : "1/2";
+  return `md:basis-${cellWidth}`;
+};
+var generateRandomBoolean = (p = 0.5) => Math.random() < p;
+var generateRandomColNum = (total) => {
+  const colNumArr = [];
+  if (total <= 2) {
+    return [total];
+  }
+  let colSum = 0;
+  while (colSum < total) {
+    const p = last(colNumArr) === 2 ? 0.9 : 0.5;
+    const num = generateRandomBoolean(p) ? 1 : 2;
+    colNumArr.push(num);
+    colSum += num;
+  }
+  return colNumArr;
+};
+var RandomRowsLayout = (props) => {
+  const {
+    cellsCount,
+    cellRenderer,
+    classNames: classNames7 = "",
+    cellWrapperClsGenerator = defaultCellClsGenerator
+  } = props;
+  const colNums = generateRandomColNum(cellsCount);
+  const indexRef = import_react20.default.useRef(0);
+  import_react20.default.useEffect(() => {
+    indexRef.current = 0;
+  });
+  return /* @__PURE__ */ import_react20.default.createElement("div", {
+    className: classNames7
+  }, colNums.map((colNum, row) => {
+    const randBool = generateRandomBoolean(colNum < 2 ? 0.6 : 0.5);
+    const randBoolArr = [randBool, !randBool];
+    return /* @__PURE__ */ import_react20.default.createElement("div", {
+      className: "flex items-center flex-wrap",
+      key: row
+    }, new Array(colNum).fill(null).map((_, col) => {
+      indexRef.current += 1;
+      const generatedCls = cellWrapperClsGenerator(colNum, generateRandomBoolean());
+      const cls4 = (0, import_classnames11.default)("flex items-center justify-center flex-shrink-0 flex-grow-0", "basis-full", generatedCls);
+      return /* @__PURE__ */ import_react20.default.createElement("div", {
+        className: cls4,
+        key: col
+      }, cellRenderer(indexRef.current - 1, randBoolArr[col], col));
+    }));
+  }));
+};
+
+// src/img/Gallery.tsx
+var defaultImageRenderer = (img, index, col) => {
+  return /* @__PURE__ */ import_react21.default.createElement("div", {
+    className: (0, import_classnames12.default)("mb-256", {
+      "md:mr-64": col === 0,
+      "md:ml-64": col !== 0
+    })
+  }, img);
+};
+var Gallery = (props) => {
+  const _a = props, {
+    images,
+    children,
+    imageRenderer = defaultImageRenderer
+  } = _a, rest = __objRest(_a, [
+    "images",
+    "children",
+    "imageRenderer"
+  ]);
+  const renderImage = (index, isLargeImage, col) => {
+    const image = images[index];
+    if (!image) {
+      return null;
+    }
+    return imageRenderer(/* @__PURE__ */ import_react21.default.createElement(Img, __spreadProps(__spreadValues({}, image), {
+      size: isLargeImage ? "large" : "normal"
+    })), index, col, isLargeImage);
+  };
+  return /* @__PURE__ */ import_react21.default.createElement("div", {
+    className: "w-full flex justify-center"
+  }, /* @__PURE__ */ import_react21.default.createElement(RandomRowsLayout, __spreadValues({
+    classNames: "mx-32 mt-128 max-w-screen-xl",
+    cellsCount: images.length,
+    cellRenderer: renderImage
+  }, rest)), children);
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -844,6 +1051,8 @@ module.exports = __toCommonJS(src_exports);
   DropImage,
   Error,
   ErrorBoundary,
+  Gallery,
+  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,211 @@ 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 }
+  }));
+};
+
+// src/img/Gallery.tsx
+import classnames3 from "classnames";
+import React20 from "react";
+
+// src/img/RandomRowsLayout.tsx
+import classnames2 from "classnames";
+import React19 from "react";
+var last = (arr) => {
+  if (arr.length < 2) {
+    return arr[0];
+  }
+  return arr[arr.length - 1];
+};
+var defaultCellClsGenerator = (colNum, isCenterSingleCell) => {
+  const isSingleCell = colNum === 1;
+  const singleCellWidth = isCenterSingleCell ? "full" : "1/2";
+  const cellWidth = isSingleCell ? singleCellWidth : "1/2";
+  return `md:basis-${cellWidth}`;
+};
+var generateRandomBoolean = (p = 0.5) => Math.random() < p;
+var generateRandomColNum = (total) => {
+  const colNumArr = [];
+  if (total <= 2) {
+    return [total];
+  }
+  let colSum = 0;
+  while (colSum < total) {
+    const p = last(colNumArr) === 2 ? 0.9 : 0.5;
+    const num = generateRandomBoolean(p) ? 1 : 2;
+    colNumArr.push(num);
+    colSum += num;
+  }
+  return colNumArr;
+};
+var RandomRowsLayout = (props) => {
+  const {
+    cellsCount,
+    cellRenderer,
+    classNames: classNames7 = "",
+    cellWrapperClsGenerator = defaultCellClsGenerator
+  } = props;
+  const colNums = generateRandomColNum(cellsCount);
+  const indexRef = React19.useRef(0);
+  React19.useEffect(() => {
+    indexRef.current = 0;
+  });
+  return /* @__PURE__ */ React19.createElement("div", {
+    className: classNames7
+  }, colNums.map((colNum, row) => {
+    const randBool = generateRandomBoolean(colNum < 2 ? 0.6 : 0.5);
+    const randBoolArr = [randBool, !randBool];
+    return /* @__PURE__ */ React19.createElement("div", {
+      className: "flex items-center flex-wrap",
+      key: row
+    }, new Array(colNum).fill(null).map((_, col) => {
+      indexRef.current += 1;
+      const generatedCls = cellWrapperClsGenerator(colNum, generateRandomBoolean());
+      const cls4 = classnames2("flex items-center justify-center flex-shrink-0 flex-grow-0", "basis-full", generatedCls);
+      return /* @__PURE__ */ React19.createElement("div", {
+        className: cls4,
+        key: col
+      }, cellRenderer(indexRef.current - 1, randBoolArr[col], col));
+    }));
+  }));
+};
+
+// src/img/Gallery.tsx
+var defaultImageRenderer = (img, index, col) => {
+  return /* @__PURE__ */ React20.createElement("div", {
+    className: classnames3("mb-256", {
+      "md:mr-64": col === 0,
+      "md:ml-64": col !== 0
+    })
+  }, img);
+};
+var Gallery = (props) => {
+  const _a = props, {
+    images,
+    children,
+    imageRenderer = defaultImageRenderer
+  } = _a, rest = __objRest(_a, [
+    "images",
+    "children",
+    "imageRenderer"
+  ]);
+  const renderImage = (index, isLargeImage, col) => {
+    const image = images[index];
+    if (!image) {
+      return null;
+    }
+    return imageRenderer(/* @__PURE__ */ React20.createElement(Img, __spreadProps(__spreadValues({}, image), {
+      size: isLargeImage ? "large" : "normal"
+    })), index, col, isLargeImage);
+  };
+  return /* @__PURE__ */ React20.createElement("div", {
+    className: "w-full flex justify-center"
+  }, /* @__PURE__ */ React20.createElement(RandomRowsLayout, __spreadValues({
+    classNames: "mx-32 mt-128 max-w-screen-xl",
+    cellsCount: images.length,
+    cellRenderer: renderImage
+  }, rest)), children);
+};
 export {
   Article,
   ArticleSkeleton,
@@ -787,6 +992,8 @@ export {
   DropImage,
   Error2 as Error,
   ErrorBoundary,
+  Gallery,
+  Img,
   Link,
   LinkColor,
   LinkList,

package/package.json

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