@bbki.ng/components 1.5.35 → 1.5.38

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;
@@ -252,11 +253,12 @@ 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;
 interface GalleryProps extends Omit<RandomRowsLayoutProps, "classNames" | "cellsCount" | "cellRenderer"> {
+    className?: string;
     images: ImgProps[];
     children?: ReactNode;
     imageRenderer?: ImageRenderer;

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"));
@@ -933,7 +935,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 }
@@ -974,7 +977,7 @@ var generateRandomColNum = (total) => {
   }
   return colNumArr;
 };
-var RandomRowsLayout = (props) => {
+var RandomRowsLayout = import_react20.default.memo((props) => {
   const {
     cellsCount,
     cellRenderer,
@@ -985,7 +988,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) => {
@@ -1004,7 +1007,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) => {
@@ -1019,11 +1024,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];
@@ -1035,7 +1042,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

@@ -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";
@@ -875,7 +877,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 }
@@ -916,7 +919,7 @@ var generateRandomColNum = (total) => {
   }
   return colNumArr;
 };
-var RandomRowsLayout = (props) => {
+var RandomRowsLayout = React19.memo((props) => {
   const {
     cellsCount,
     cellRenderer,
@@ -927,7 +930,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) => {
@@ -946,7 +949,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) => {
@@ -961,11 +966,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];
@@ -977,7 +984,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.35",
+  "version": "1.5.38",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",