@bbki.ng/components 1.5.33 → 1.5.36

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) {
@@ -972,7 +974,7 @@ var generateRandomColNum = (total) => {
   }
   return colNumArr;
 };
-var RandomRowsLayout = (props) => {
+var RandomRowsLayout = import_react20.default.memo((props) => {
   const {
     cellsCount,
     cellRenderer,
@@ -983,7 +985,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 +1004,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 +1021,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 +1039,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,
@@ -1210,7 +1216,7 @@ var LoadingSpiral = (props) => {
     phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
   }, []);
   return /* @__PURE__ */ import_react23.default.createElement("div", {
-    className: (0, import_classnames13.default)("fixed h-full w-full overflow-hidden flex justify-center items-center", className),
+    className: (0, import_classnames13.default)("h-full w-full overflow-hidden flex justify-center items-center", className),
     ref: containerRef
   }, /* @__PURE__ */ import_react23.default.createElement("canvas", {
     ref: canvasRef,

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) {
@@ -914,7 +916,7 @@ var generateRandomColNum = (total) => {
   }
   return colNumArr;
 };
-var RandomRowsLayout = (props) => {
+var RandomRowsLayout = React19.memo((props) => {
   const {
     cellsCount,
     cellRenderer,
@@ -925,7 +927,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 +946,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 +963,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 +981,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,
@@ -1152,7 +1158,7 @@ var LoadingSpiral = (props) => {
     phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
   }, []);
   return /* @__PURE__ */ React21.createElement("div", {
-    className: classNames7("fixed h-full w-full overflow-hidden flex justify-center items-center", className),
+    className: classNames7("h-full w-full overflow-hidden flex justify-center items-center", className),
     ref: containerRef
   }, /* @__PURE__ */ React21.createElement("canvas", {
     ref: canvasRef,

package/package.json

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