@etsoo/materialui 1.1.14 → 1.1.16

package/lib/pages/LeftDrawer.d.ts

@@ -1,14 +1,8 @@
 import React from "react";
-/**
- * Left drawer methods
- */
-export interface LeftDrawerMethods {
-    open(): void;
-}
 /**
  * Left drawer props
  */
-export interface LeftDrawerProps {
+export type LeftDrawerProps = React.PropsWithRef<{
     /**
      * Show when md up
      */
@@ -24,12 +18,14 @@ export interface LeftDrawerProps {
     /**
      * Application name
      */
-    appName: string;
+    appName?: string;
+    /**
+     * Is open or not
+     */
+    open?: boolean;
     /**
      * Minimize hanlder
      */
     onMinimize?: () => void;
-}
-export declare const LeftDrawer: React.ForwardRefExoticComponent<LeftDrawerProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<LeftDrawerMethods>>;
+}>;
+export declare function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>): JSX.Element;

package/lib/pages/LeftDrawer.js

@@ -3,31 +3,26 @@ import React from "react";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { DrawerHeader } from "./DrawerHeader";
 import { globalApp } from "../app/ReactApp";
-export const LeftDrawer = React.forwardRef((props, ref) => {
+export function LeftDrawer(props) {
     var _a;
     // Destruct
-    const { mdUp, width, appName, onMinimize, children } = props;
+    const { mdUp, width, appName = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("appName"), onMinimize, open = mdUp, children } = props;
     // Menu open/close state
-    const [open, setOpen] = React.useState();
+    const [openLocal, setOpen] = React.useState();
     const handleDrawerClose = () => {
         if (onMinimize)
             onMinimize();
         setOpen(false);
     };
-    React.useImperativeHandle(ref, () => ({
-        open() {
-            setOpen(true);
-        }
-    }));
     // Ready
     React.useEffect(() => {
-        setOpen(mdUp);
-    }, [mdUp]);
-    return (React.createElement(Drawer, { sx: {
-            width: open ? width : 0,
+        setOpen(open);
+    }, [open]);
+    return (React.createElement(Drawer, { hidden: !openLocal, sx: {
+            width,
             flexShrink: 0,
             "& .MuiDrawer-paper": {
-                width: open ? width : 0,
+                width,
                 boxSizing: "border-box"
             }
         }, anchor: "left", variant: mdUp ? "persistent" : "temporary", open: open, onClose: mdUp ? undefined : handleDrawerClose, ModalProps: {
@@ -36,9 +31,9 @@ export const LeftDrawer = React.forwardRef((props, ref) => {
         React.createElement(DrawerHeader, null,
             React.createElement("a", { href: "https://www.etsoo.com", title: (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("etsoo")) !== null && _a !== void 0 ? _a : "ETSOO", target: "_blank", rel: "noreferrer" },
                 React.createElement(Avatar, { src: process.env.PUBLIC_URL + "/logo192.png", variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } })),
-            React.createElement(Typography, { noWrap: true, component: "div", title: appName }, appName),
+            React.createElement(Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 } }, appName),
             React.createElement(IconButton, { size: "small", onClick: handleDrawerClose },
                 React.createElement(ChevronLeftIcon, null))),
         React.createElement(Divider, null),
         React.createElement(List, { onClick: mdUp ? undefined : handleDrawerClose }, children)));
-});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/pages/LeftDrawer.tsx

@@ -6,22 +6,15 @@ import {
   List,
   Typography
 } from "@mui/material";
-import React, { PropsWithChildren } from "react";
+import React from "react";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { DrawerHeader } from "./DrawerHeader";
 import { globalApp } from "../app/ReactApp";
 
-/**
- * Left drawer methods
- */
-export interface LeftDrawerMethods {
-  open(): void;
-}
-
 /**
  * Left drawer props
  */
-export interface LeftDrawerProps {
+export type LeftDrawerProps = React.PropsWithRef<{
   /**
    * Show when md up
    */
@@ -40,47 +33,51 @@ export interface LeftDrawerProps {
   /**
    * Application name
    */
-  appName: string;
+  appName?: string;
+
+  /**
+   * Is open or not
+   */
+  open?: boolean;
 
   /**
    * Minimize hanlder
    */
   onMinimize?: () => void;
-}
+}>;
 
-export const LeftDrawer = React.forwardRef<
-  LeftDrawerMethods,
-  PropsWithChildren<LeftDrawerProps>
->((props, ref) => {
+export function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>) {
   // Destruct
-  const { mdUp, width, appName, onMinimize, children } = props;
+  const {
+    mdUp,
+    width,
+    appName = globalApp?.get("appName"),
+    onMinimize,
+    open = mdUp,
+    children
+  } = props;
 
   // Menu open/close state
-  const [open, setOpen] = React.useState<boolean>();
+  const [openLocal, setOpen] = React.useState<boolean>();
 
   const handleDrawerClose = () => {
     if (onMinimize) onMinimize();
     setOpen(false);
   };
 
-  React.useImperativeHandle(ref, () => ({
-    open() {
-      setOpen(true);
-    }
-  }));
-
   // Ready
   React.useEffect(() => {
-    setOpen(mdUp);
-  }, [mdUp]);
+    setOpen(open);
+  }, [open]);
 
   return (
     <Drawer
+      hidden={!openLocal}
       sx={{
-        width: open ? width : 0,
+        width,
         flexShrink: 0,
         "& .MuiDrawer-paper": {
-          width: open ? width : 0,
+          width,
           boxSizing: "border-box"
         }
       }}
@@ -105,7 +102,7 @@ export const LeftDrawer = React.forwardRef<
             sx={{ marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 }}
           />
         </a>
-        <Typography noWrap component="div" title={appName}>
+        <Typography noWrap component="div" title={appName} sx={{ flexGrow: 2 }}>
           {appName}
         </Typography>
         <IconButton size="small" onClick={handleDrawerClose}>
@@ -116,4 +113,4 @@ export const LeftDrawer = React.forwardRef<
       <List onClick={mdUp ? undefined : handleDrawerClose}>{children}</List>
     </Drawer>
   );
-});
+}