@canmingir/link 1.2.37 → 1.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.37",
+  "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/DrawerLayout/DrawerLayout.jsx

@@ -0,0 +1,81 @@
+import { Close } from "@mui/icons-material";
+import React from "react";
+
+import {
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Drawer,
+  IconButton,
+} from "@mui/material";
+
+const NARROW_WIDTH = 450;
+const modeWidth = {
+  narrow: NARROW_WIDTH,
+  wide: undefined,
+  fullscreen: "100vw",
+};
+
+const DrawerLayout = ({
+  open,
+  onClose,
+  children,
+  title,
+  extraActions,
+  sx,
+  contentSx,
+  paperSx,
+  titleSx,
+  mode = "fullscreen",
+}) => {
+  const width = modeWidth[mode];
+
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={onClose}
+      sx={sx}
+      slotProps={{
+        paper: {
+          sx: {
+            backgroundColor: (theme) =>
+              `${theme.palette.background.default} !important`,
+            display: "flex",
+            flexDirection: "column",
+            maxWidth: "100vw",
+            width: width ?? { xs: "100vw", sm: "90vw", md: "85vw" },
+            transition: "width 0.4s cubic-bezier(0.22, 1, 0.36, 1)",
+            "@keyframes slideInFromRight": {
+              from: { transform: "translateX(100%)" },
+              to: { transform: "translateX(0)" },
+            },
+            animation: open
+              ? "slideInFromRight 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards"
+              : "none",
+            ...(paperSx ?? {}),
+          },
+        },
+      }}
+    >
+      {title && (
+        <DialogTitle sx={{ flexShrink: 0, ...(titleSx ?? {}) }}>
+          {title}
+        </DialogTitle>
+      )}
+
+      <DialogContent sx={{ flex: 1, overflow: "auto", ...(contentSx ?? {}) }}>
+        {children}
+      </DialogContent>
+
+      <DialogActions sx={{ position: "absolute", top: -10, right: 0 }}>
+        {extraActions}
+        <IconButton onClick={onClose} size="small">
+          <Close />
+        </IconButton>
+      </DialogActions>
+    </Drawer>
+  );
+};
+
+export default DrawerLayout;

package/src/layouts/DrawerLayout/index.js

@@ -0,0 +1 @@
+export { default } from "./DrawerLayout";

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/layouts/index.js

@@ -5,3 +5,4 @@ export { default as MainLayout } from "./MainLayout";
 export { default as SimpleLayout } from "./SimpleLayout";
 export { default as TwoSideLayout } from "./TwoSideLayout";
 export { default as FullScreenLayout } from "./FullScreenLayout";
+export { default as DrawerLayout } from "./DrawerLayout";

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",