@sikka/hawa 0.0.35 → 0.0.36

package/src/elements/HawaSnackbar.js

@@ -1,12 +1,41 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Snackbar from "@mui/material/Snackbar";
 import AlertTitle from "@mui/material/AlertTitle";
 import Alert from "@mui/material/Alert";
+import { IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 
 export const HawaSnackbar = (props) => {
+
+  const [position, setPosition] = useState({vertical : "", horizontal : ""});
+
+  useEffect(() => {
+    if(props.position){
+      const p = props.position.split("-");
+      setPosition({vertical : p[0], horizontal : p[1]});
+    }
+  }, [props.position])
+
   return (
-    <Snackbar open={props.open} onClose={props.handleClose}>
-      <Alert icon={false} severity={props.severity}>
+    <Snackbar
+      open={props.open}
+      autoHideDuration={props.duration ? props.duration : null}
+      onClose={props.handleClose}
+      anchorOrigin={position}
+      action={
+        <>
+          <IconButton
+            aria-label="close"
+            style={{color: "black"}}
+            sx={{ p: 0.5 }}
+            onClick={props.handleClose}
+          >
+            <CloseIcon />
+          </IconButton>
+        </>
+      }
+    >
+      <Alert icon={false} severity={props.severity} onClose={props.isClosable ? props.handleClose : null}>
         {props.title && <AlertTitle>{props.title}</AlertTitle>}
         {props.text}
       </Alert>

package/src/layout/HawaAppLayout.js

@@ -1,7 +1,8 @@
-import React from "react";
+import * as React from "react";
 import { styled, useTheme } from "@mui/material/styles";
 import Box from "@mui/material/Box";
-import MuiDrawer from "@mui/material/Drawer";
+import Drawer from "@mui/material/Drawer";
+import CssBaseline from "@mui/material/CssBaseline";
 import MuiAppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import List from "@mui/material/List";
@@ -11,211 +12,234 @@ import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import ListItemButton from "@mui/material/ListItemButton";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import Avatar from "@mui/material/Avatar";
-import Tooltip from "@mui/material/Tooltip";
-import { HawaPopMenu } from "../elements/HawaPopMenu";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+import MailIcon from "@mui/icons-material/Mail";
 
 const drawerWidth = 240;
 
-const openedMixin = (theme) => ({
-  width: drawerWidth,
-  transition: theme.transitions.create("width", {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.enteringScreen
-  }),
-  overflowX: "hidden"
-});
-
-const closedMixin = (theme) => ({
-  transition: theme.transitions.create("width", {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen
-  }),
-  overflowX: "hidden",
-  width: `calc(${theme.spacing(8)} + 1px)`,
-  [theme.breakpoints.up("sm")]: {
-    width: `calc(${theme.spacing(8)} + 1px)`
-  }
-});
-
-const DrawerHeader = styled("div")(({ theme, direction }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: direction === "rtl" ? "flex-start" : "flex-end",
-  padding: theme.spacing(0, 1),
-  // necessary for content to be below app bar
-  ...theme.mixins.toolbar
-}));
+const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
+  ({ theme, open, direction }) => ({
+    flexGrow: 1,
+    padding: theme.spacing(3),
+    transition: theme.transitions.create("margin", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    marginLeft: direction === "rtl" ? 0 : `-${drawerWidth}px`,
+    marginRight: direction === "rtl" ? `-${drawerWidth}px` : 0,
+    ...(open && {
+      transition: theme.transitions.create("margin", {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen
+      }),
+      marginLeft: direction === "ltr" && 0,
+      marginRight: direction === "rtl" && 0
+    })
+  })
+);
 
 const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== "open"
 })(({ theme, open, direction }) => ({
-  zIndex: theme.zIndex.drawer + 1,
-  transition: theme.transitions.create(["width", "margin"], {
+  transition: theme.transitions.create(["margin", "width"], {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen
   }),
-
   ...(open && {
-    marginLeft: direction === "rtl" ? 0 : drawerWidth,
-    marginRight: direction === "rtl" ? drawerWidth : 0,
     width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(["width", "margin"], {
-      easing: theme.transitions.easing.sharp,
+    marginLeft: direction === "rtl" ? 0 : `${drawerWidth}px`,
+    marginRight: direction === "rtl" ? `${drawerWidth}px` : 0,
+    // marginLeft: `${drawerWidth}px`,
+    transition: theme.transitions.create(["margin", "width"], {
+      easing: theme.transitions.easing.easeOut,
       duration: theme.transitions.duration.enteringScreen
     })
   })
 }));
 
-const Drawer = styled(MuiDrawer, {
-  shouldForwardProp: (prop) => prop !== "open"
-})(({ theme, open }) => ({
-  width: drawerWidth,
-  flexShrink: 0,
-  whiteSpace: "nowrap",
-  boxSizing: "border-box",
-  ...(open && {
-    ...openedMixin(theme),
-    "& .MuiDrawer-paper": openedMixin(theme)
-  }),
-  ...(!open && {
-    ...closedMixin(theme),
-    "& .MuiDrawer-paper": closedMixin(theme)
-  })
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  padding: theme.spacing(0, 1),
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar,
+  justifyContent: "flex-end"
 }));
 
-export function HawaAppLayout(props) {
+export const HawaAppLayout = (props) => {
   const theme = useTheme();
-  const [open, setOpen] = React.useState(true);
+  const [open, setOpen] = React.useState(false);
   const isArabic = props.lang === "ar";
-  const [anchorElNav, setAnchorElNav] = React.useState(null);
-  const [anchorElUser, setAnchorElUser] = React.useState(null);
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
 
-  const handleOpenNavMenu = (event) => setAnchorElNav(event.currentTarget);
-  const handleOpenUserMenu = (event) => setAnchorElUser(event.currentTarget);
-  const handleCloseNavMenu = () => setAnchorElNav(null);
-  const handleCloseUserMenu = () => setAnchorElUser(null);
-  const handleDrawerOpen = () => setOpen(true);
-  const handleDrawerClose = () => setOpen(false);
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
 
   return (
-    <Box sx={{ display: "flex", direction: isArabic ? "rtl" : "ltr" }}>
+    <Box sx={{ display: "flex" }}>
+      <CssBaseline />
       <AppBar
-        variant="appbar"
         position="fixed"
         open={open}
         direction={isArabic ? "rtl" : "ltr"}
+        style={{
+          alignItems: isArabic ? "flex-end" : "flex-start",
+          justifyContent: "center"
+        }}
       >
-        <Toolbar
-          variant="appbar"
-          sx={{ paddingLeft: { xs: 3 }, paddingRight: { xs: 3 } }}
-        >
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            onClick={handleDrawerOpen}
-            edge="start"
-            s
+        <Toolbar>
+          {isArabic ? (
+            <>
+              <Typography variant="h6" noWrap component="div">
+                Persistent drawer
+              </Typography>
+              <IconButton
+                color="inherit"
+                aria-label="open drawer"
+                onClick={handleDrawerOpen}
+                edge={isArabic ? "end" : "start"}
+                sx={{ mr: 2, ...(open && { display: "none" }) }}
+              >
+                <MenuIcon />
+              </IconButton>
+            </>
+          ) : (
+            <>
+              <IconButton
+                color="inherit"
+                aria-label="open drawer"
+                onClick={handleDrawerOpen}
+                edge={isArabic ? "end" : "start"}
+                sx={{
+                  marginRight: isArabic ? 0 : 2,
+                  marginLeft: isArabic ? 2 : 0,
+                  ...(open && { display: "none" })
+                }}
+              >
+                <MenuIcon />
+              </IconButton>
+              <Typography variant="h6" noWrap component="div">
+                Persistent drawer
+              </Typography>
+            </>
+          )}
+        </Toolbar>
+      </AppBar>
+      {!isArabic ? (
+        <>
+          <Drawer
             sx={{
-              marginRight: 5,
-              ...(open && { display: "none" })
+              width: drawerWidth,
+              flexShrink: 0,
+              "& .MuiDrawer-paper": {
+                width: drawerWidth,
+                boxSizing: "border-box"
+              }
             }}
+            variant="persistent"
+            anchor={isArabic ? "right" : "left"}
+            open={open}
           >
-            <MenuIcon />
-          </IconButton>
-
-          <div
-            style={{
-              //   backgroundColor: "red",
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-              width: "100%",
-              margin: 0
+            <DrawerHeader>
+              <IconButton onClick={handleDrawerClose}>
+                {theme.direction === "ltr" ? (
+                  <ChevronLeftIcon />
+                ) : (
+                  <ChevronRightIcon />
+                )}
+              </IconButton>
+            </DrawerHeader>
+            <Divider />
+            <List>
+              {["Inbox", "Starred", "Send email", "Drafts"].map(
+                (text, index) => (
+                  <ListItem button key={text}>
+                    <ListItemIcon>
+                      {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                    </ListItemIcon>
+                    <ListItemText primary={text} />
+                  </ListItem>
+                )
+              )}
+            </List>
+            <Divider />
+            <List>
+              {["All mail", "Trash", "Spam"].map((text, index) => (
+                <ListItem button key={text}>
+                  <ListItemIcon>
+                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                  </ListItemIcon>
+                  <ListItemText primary={text} />
+                </ListItem>
+              ))}
+            </List>
+          </Drawer>
+          <Main open={open} direction={isArabic ? "rtl" : "ltr"}>
+            <DrawerHeader />
+            {props.children}
+          </Main>
+        </>
+      ) : (
+        <>
+          <Main open={open} direction={isArabic ? "rtl" : "ltr"}>
+            <DrawerHeader />
+            {props.children}
+          </Main>
+          <Drawer
+            sx={{
+              width: drawerWidth,
+              flexShrink: 0,
+              "& .MuiDrawer-paper": {
+                width: drawerWidth,
+                boxSizing: "border-box"
+              }
             }}
+            variant="persistent"
+            anchor={isArabic ? "right" : "left"}
+            open={open}
           >
-            <Typography variant="h6" noWrap component="div">
-              {props.pageTitle}
-            </Typography>
-
-            <Box>
-              <Tooltip title="Open settings">
-                <IconButton
-                  onClick={handleOpenUserMenu}
-                  sx={{ p: 0 }}
-                  size="small"
-                >
-                  <Avatar />
-                </IconButton>
-              </Tooltip>
-              <HawaPopMenu
-                menuItems={props.accountMenu}
-                anchor={anchorElUser}
-                handleClose={handleCloseUserMenu}
-              />
-            </Box>
-          </div>
-        </Toolbar>
-      </AppBar>
-      <Drawer
-        // anchor="left"
-
-        variant="permanent"
-        open={open}
-      >
-        <DrawerHeader direction={isArabic ? "rtl" : "ltr"}>
-          {props.logo}
-          <IconButton onClick={handleDrawerClose}>
-            {theme.direction === "rtl" ? (
-              <ChevronRightIcon />
-            ) : (
-              <ChevronLeftIcon />
-            )}
-          </IconButton>
-        </DrawerHeader>
-        <Divider />
-        <List>
-          {props.pages.map((p, jk) => {
-            return (
-              <Tooltip
-                title={p.text}
-                key={jk}
-                placement={"right"}
-                arrow={true}
-                PopperProps={{ style: { opacity: open ? 0 : 1 } }}
-              >
-                <ListItemButton
-                  variant={
-                    props.pageName?.toLowerCase() === p.slug?.toLowerCase() &&
-                    "clicked"
-                  }
-                  onClick={p.action}
-                  key={p.text}
-                  sx={{
-                    minHeight: 48,
-                    justifyContent: open ? "initial" : "center",
-                    px: 2.5
-                  }}
-                >
-                  <p.icon />
-                  <div style={{ width: 20 }} />
-                  <ListItemText
-                    primary={p.text}
-                    sx={{ opacity: open ? 1 : 0 }}
-                  />
-                </ListItemButton>
-              </Tooltip>
-            );
-          })}
-        </List>
-      </Drawer>
-      <Box sx={{ flexGrow: 1, p: 3 }}>
-        <DrawerHeader />
-        {props.children}
-      </Box>
+            <DrawerHeader>
+              <IconButton onClick={handleDrawerClose}>
+                {theme.direction === "ltr" ? (
+                  <ChevronLeftIcon />
+                ) : (
+                  <ChevronRightIcon />
+                )}
+              </IconButton>
+            </DrawerHeader>
+            <Divider />
+            <List>
+              {["Inbox", "Starred", "Send email", "Drafts"].map(
+                (text, index) => (
+                  <ListItem button key={text}>
+                    <ListItemIcon>
+                      {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                    </ListItemIcon>
+                    <ListItemText primary={text} />
+                  </ListItem>
+                )
+              )}
+            </List>
+            <Divider />
+            <List>
+              {["All mail", "Trash", "Spam"].map((text, index) => (
+                <ListItem button key={text}>
+                  <ListItemIcon>
+                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                  </ListItemIcon>
+                  <ListItemText primary={text} />
+                </ListItem>
+              ))}
+            </List>
+          </Drawer>
+        </>
+      )}
     </Box>
   );
-}
+};