@sikka/hawa 0.0.35 → 0.0.38

package/src/elements/HawaSelectInput.js

@@ -0,0 +1,30 @@
+import Select from "react-select";
+import Creatable from "react-select/creatable";
+
+export default function HawaSelectInput(props) {
+  return (
+    <>
+      {!props.isCreatable && (
+        <Select
+          options={props.options}
+          isClearable={props.isClearable}
+          isMulti={props.isMulti}
+          isSearchable={props.isSearchable}
+          onChange={(newValue, action) => props.onChange(newValue, action)}
+        />
+      )}
+      {props.isCreatable && (
+        <Creatable
+          options={props.options}
+          isClearable={props.isClearable}
+          isMulti={props.isMulti}
+          isSearchable={props.isSearchable}
+          onChange={(newValue, action) => props.onChange(newValue, action)}
+          onInputChange={(newValue, action) =>
+            props.onInputChange(newValue, action)
+          }
+        />
+      )}
+    </>
+  );
+}

package/src/elements/HawaSnackbar.js

@@ -1,12 +1,44 @@
-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.autoHide ? 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/elements/PinInput.js

@@ -0,0 +1,141 @@
+import {
+  Input,
+  makeStyles,
+  TextField,
+  InputLabel,
+  Typography,
+  Stack
+} from "@mui/material";
+import { object } from "prop-types";
+import React, { useEffect, useState } from "react";
+import { replaceAt } from "../util";
+
+export const HawaPinInput = ({
+  children,
+  type,
+  defaultValue,
+  onChange,
+  onComplete,
+  ...props
+}) => {
+  const [value, setValue] = useState(
+    defaultValue ? defaultValue.split("") : []
+  );
+  const [pinLength, setPinLength] = useState(0);
+
+  useEffect(() => {
+    let length = 0;
+    React.Children.map(children, (child) => {
+      if (
+        React.isValidElement(child) &&
+        child.type?.displayName &&
+        child.type?.displayName === "HawaPinInputField"
+      ) {
+        length++;
+      }
+    });
+    setPinLength(length);
+  }, []);
+
+  const childrenWithProps = React.Children.map(children, (child, index) => {
+    if (React.isValidElement(child)) {
+      if (
+        child.type?.displayName &&
+        child.type?.displayName === "HawaPinInputField" &&
+        defaultValue &&
+        defaultValue[index]
+      ) {
+        return React.cloneElement(child, {
+          type,
+          defaultValue: defaultValue[index],
+          index: index,
+          setValue: setValue,
+          value: value,
+          onChangeAction: (currentValue) => onChange(currentValue),
+          onCompleteAction: (finalValue) => onComplete(finalValue),
+          pinLength: pinLength
+        });
+      }
+      return React.cloneElement(child, {
+        type,
+        setValue: setValue,
+        value: value,
+        index: index,
+        onChangeAction: (currentValue) => onChange(currentValue),
+        onCompleteAction: (finalValue) => onComplete(finalValue),
+        pinLength: pinLength
+      });
+    }
+    return child;
+  });
+
+  useEffect(() => {
+    if (value.length === pinLength) {
+      onComplete(value);
+    }
+  }, [value]);
+
+  return (
+    <div style={props.inForm && { width: "100%" }}>
+      <div style={{ width: props.fullWidth ? "100%" : "fit-content" }}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center"
+          }}
+        >
+          {props.label && <InputLabel>{props.label}</InputLabel>}
+          {props.helperText && (
+            <Typography
+              style={{ marginBottom: !props.label && 10 }}
+              variant="validation"
+            >
+              {props.helperText}
+            </Typography>
+          )}
+        </div>
+        <Stack
+          direction={"row"}
+          spacing={2}
+          justifyContent="center"
+          alignItems={"center"}
+        >
+          {childrenWithProps}
+        </Stack>
+      </div>
+    </div>
+  );
+};
+
+export const HawaPinInputField = (props) => {
+  return (
+    <Input
+      type={props.type && props.type == "alphanumeric" ? "text" : "number"}
+      id={"pinInput" + props.index}
+      defaultValue={props.defaultValue || ""}
+      variant="pin"
+      disableUnderline
+      inputProps={{ maxLength: 1 }}
+      onChange={(e) => {
+        let newValue = props.value;
+        newValue[props.index] = e.target.value;
+        props.setValue(newValue);
+        props.onChangeAction(newValue.toString().replaceAll(",", ""));
+        if (
+          parseInt(e.target.attributes["maxlength"].value) >= 1 &&
+          e.target.value != ""
+        ) {
+          let i = document.getElementById("pinInput" + (props.index + 1));
+          if (i) {
+            i.focus();
+          }
+        }
+        if (props.value.length === props.pinLength) {
+          props.onCompleteAction(props.value.toString().replaceAll(",", ""));
+        }
+      }}
+    />
+  );
+};

package/src/index.js

@@ -1,3 +1,4 @@
 export * from "./blocks";
 export * from "./elements";
 export * from "./layout";
+export * from "./theme";

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>
   );
-}
+};