@canmingir/link 1.2.38 → 1.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.38",
+  "version": "1.2.39",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/components/logo/logo.jsx

@@ -3,36 +3,56 @@ import Link from "@mui/material/Link";
 import { RouterLink } from "../../routes/components";
 import config from "../../config/config";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
-const Logo = ({ disabledLink = false, sx, maxSize = 99 }) => {
+const resolvedDimensions = {};
+
+const Logo = ({ disabledLink = false, sx, maxSize = 65, isLogin = false }) => {
   const { icon } = config().template.login;
-  const [dimensions, setDimensions] = useState({
-    width: maxSize,
-    height: maxSize,
-  });
+  const key = `${icon}`;
+
+  const [dimensions, setDimensions] = useState(
+    resolvedDimensions[key] || { width: maxSize, height: maxSize }
+  );
 
   useEffect(() => {
-    if (icon) {
-      const img = new Image();
-      img.onload = () => {
-        const { naturalWidth, naturalHeight } = img;
-
-        if (naturalWidth > maxSize || naturalHeight > maxSize) {
-          setDimensions({
-            width: 40,
-            height: 40,
-          });
+    if (!icon || resolvedDimensions[key]) return;
+
+    const img = new Image();
+    img.onload = () => {
+      const { naturalWidth, naturalHeight } = img;
+      const isSquare = naturalWidth === naturalHeight;
+      let newDimensions;
+
+      if (naturalWidth > maxSize || naturalHeight > maxSize) {
+        if (isSquare) {
+          newDimensions = {
+            width: isLogin ? maxSize : 40,
+            height: isLogin ? maxSize : 40,
+          };
         } else {
-          setDimensions({
-            width: naturalWidth,
-            height: naturalHeight,
-          });
+          const aspectRatio = naturalWidth / naturalHeight;
+          if (naturalWidth >= naturalHeight) {
+            newDimensions = {
+              width: maxSize,
+              height: Math.round(maxSize / aspectRatio),
+            };
+          } else {
+            newDimensions = {
+              width: Math.round(maxSize * aspectRatio),
+              height: maxSize,
+            };
+          }
         }
-      };
-      img.src = icon;
-    }
-  }, [icon, maxSize]);
+      } else {
+        newDimensions = { width: naturalWidth, height: naturalHeight };
+      }
+
+      resolvedDimensions[key] = newDimensions;
+      setDimensions(newDimensions);
+    };
+    img.src = icon;
+  }, [icon, maxSize, key]);
 
   const logo = (
     <Box
@@ -47,9 +67,7 @@ const Logo = ({ disabledLink = false, sx, maxSize = 99 }) => {
     />
   );
 
-  if (disabledLink) {
-    return logo;
-  }
+  if (disabledLink) return logo;
 
   return (
     <Link component={RouterLink} href="/" sx={{ display: "contents" }}>

package/src/layouts/DashboardLayout/nav-vertical.jsx

@@ -104,7 +104,7 @@ export default function NavVertical({ openNav, onCloseNav }) {
             mt: 3,
           }}
         >
-          <Logo sx={{ ml: 4, mb: 1 }} />
+          <Logo sx={{ ml: 4 }} />
           <Typography
             sx={{
               ml: 1,
@@ -130,8 +130,9 @@ export default function NavVertical({ openNav, onCloseNav }) {
           marginBottom: lgUp ? 3 : 0,
           position: lgUp ? "static" : "fixed",
           bottom: lgUp ? "auto" : 66,
-          width: "100%"
-        }}>
+          width: "100%",
+        }}
+      >
         {actionButtons &&
           actionButtons?.map((Action, index) => (
             <Box key={index} component={Action}></Box>
@@ -190,7 +191,7 @@ export default function NavVertical({ openNav, onCloseNav }) {
               sx: {
                 width: NAV.W_VERTICAL,
               },
-            }
+            },
           }}
         >
           {renderContent}

package/src/layouts/auth/modern.jsx

@@ -46,11 +46,10 @@ export default function AuthModernLayout() {
         }}
       >
         <Logo
+          isLogin={true}
           maxSize={140}
           sx={{
             mb: 2,
-            width: 72,
-            height: 72,
             alignSelf: "center",
           }}
         />

package/src/lib/Flow/core/FlowViewport.jsx

@@ -241,7 +241,7 @@ const FlowViewport = ({
       ref={containerRef}
       onMouseDown={handleViewportMouseDown}
       sx={{
-        width: "100vw",
+        width: "100%",
         height: "100vh",
         overflow: "hidden",
         bgcolor: "none",