@bbki.ng/components 1.5.34 → 1.5.37

package/dist/index.d.ts

@@ -257,6 +257,7 @@ interface RandomRowsLayoutProps {
 
 declare type ImageRenderer = (Img: ReactElement, index: number, col: number, randBool: boolean) => ReactNode;
 interface GalleryProps extends Omit<RandomRowsLayoutProps, "classNames" | "cellsCount" | "cellRenderer"> {
+    className?: string;
     images: ImgProps[];
     children?: ReactNode;
     imageRenderer?: ImageRenderer;

package/dist/index.js

@@ -376,7 +376,9 @@ var Error2 = (props) => {
   return /* @__PURE__ */ import_react10.default.createElement(NoiseCover, {
     color: "#ef4444",
     className: "flex justify-center items-center text-white"
-  }, /* @__PURE__ */ import_react10.default.createElement("code", null, error.name, ": ", error.message));
+  }, /* @__PURE__ */ import_react10.default.createElement("code", {
+    className: "p-32"
+  }, error.name, ": ", error.message));
 };
 var ErrorBoundary = class extends import_react10.default.Component {
   constructor(props) {
@@ -931,7 +933,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 }
@@ -972,7 +975,7 @@ var generateRandomColNum = (total) => {
   }
   return colNumArr;
 };
-var RandomRowsLayout = (props) => {
+var RandomRowsLayout = import_react20.default.memo((props) => {
   const {
     cellsCount,
     cellRenderer,
@@ -983,7 +986,7 @@ var RandomRowsLayout = (props) => {
   const indexRef = import_react20.default.useRef(0);
   import_react20.default.useEffect(() => {
     indexRef.current = 0;
-  });
+  }, []);
   return /* @__PURE__ */ import_react20.default.createElement("div", {
     className: classNames8
   }, colNums.map((colNum, row) => {
@@ -1002,7 +1005,9 @@ var RandomRowsLayout = (props) => {
       }, cellRenderer(indexRef.current - 1, randBoolArr[col], col));
     }));
   }));
-};
+}, (prevProps, nextProps) => {
+  return prevProps.cellsCount === nextProps.cellsCount;
+});
 
 // src/img/Gallery.tsx
 var defaultImageRenderer = (img, index, col) => {
@@ -1017,11 +1022,13 @@ var Gallery = (props) => {
   const _a = props, {
     images,
     children,
-    imageRenderer = defaultImageRenderer
+    imageRenderer = defaultImageRenderer,
+    className = ""
   } = _a, rest = __objRest(_a, [
     "images",
     "children",
-    "imageRenderer"
+    "imageRenderer",
+    "className"
   ]);
   const renderImage = (index, isLargeImage, col) => {
     const image = images[index];
@@ -1033,7 +1040,7 @@ var Gallery = (props) => {
     })), index, col, isLargeImage);
   };
   return /* @__PURE__ */ import_react21.default.createElement("div", {
-    className: "w-full flex justify-center"
+    className: (0, import_classnames12.default)("w-full flex justify-center", className)
   }, /* @__PURE__ */ import_react21.default.createElement(RandomRowsLayout, __spreadValues({
     classNames: "mx-32 mt-128 max-w-screen-xl",
     cellsCount: images.length,

package/dist/index.mjs

@@ -315,7 +315,9 @@ var Error2 = (props) => {
   return /* @__PURE__ */ React11.createElement(NoiseCover, {
     color: "#ef4444",
     className: "flex justify-center items-center text-white"
-  }, /* @__PURE__ */ React11.createElement("code", null, error.name, ": ", error.message));
+  }, /* @__PURE__ */ React11.createElement("code", {
+    className: "p-32"
+  }, error.name, ": ", error.message));
 };
 var ErrorBoundary = class extends React11.Component {
   constructor(props) {
@@ -873,7 +875,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 }
@@ -914,7 +917,7 @@ var generateRandomColNum = (total) => {
   }
   return colNumArr;
 };
-var RandomRowsLayout = (props) => {
+var RandomRowsLayout = React19.memo((props) => {
   const {
     cellsCount,
     cellRenderer,
@@ -925,7 +928,7 @@ var RandomRowsLayout = (props) => {
   const indexRef = React19.useRef(0);
   React19.useEffect(() => {
     indexRef.current = 0;
-  });
+  }, []);
   return /* @__PURE__ */ React19.createElement("div", {
     className: classNames8
   }, colNums.map((colNum, row) => {
@@ -944,7 +947,9 @@ var RandomRowsLayout = (props) => {
       }, cellRenderer(indexRef.current - 1, randBoolArr[col], col));
     }));
   }));
-};
+}, (prevProps, nextProps) => {
+  return prevProps.cellsCount === nextProps.cellsCount;
+});
 
 // src/img/Gallery.tsx
 var defaultImageRenderer = (img, index, col) => {
@@ -959,11 +964,13 @@ var Gallery = (props) => {
   const _a = props, {
     images,
     children,
-    imageRenderer = defaultImageRenderer
+    imageRenderer = defaultImageRenderer,
+    className = ""
   } = _a, rest = __objRest(_a, [
     "images",
     "children",
-    "imageRenderer"
+    "imageRenderer",
+    "className"
   ]);
   const renderImage = (index, isLargeImage, col) => {
     const image = images[index];
@@ -975,7 +982,7 @@ var Gallery = (props) => {
     })), index, col, isLargeImage);
   };
   return /* @__PURE__ */ React20.createElement("div", {
-    className: "w-full flex justify-center"
+    className: classnames3("w-full flex justify-center", className)
   }, /* @__PURE__ */ React20.createElement(RandomRowsLayout, __spreadValues({
     classNames: "mx-32 mt-128 max-w-screen-xl",
     cellsCount: images.length,

package/package.json

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