@churchapps/apphelper 0.4.50 → 0.5.0

package/src/components/header/PrimaryMenu.tsx

@@ -1,100 +1,100 @@
-import React, { useState, useRef } from "react";
-import { Box, Button, Icon, Paper, Popper, Grow, ClickAwayListener } from "@mui/material";
-import { NavItem } from "../wrapper/NavItem";
-
-interface Props {
-  label: string;
-  menuItems: { url: string; icon: string; label: string }[];
-  onNavigate: (url: string) => void;
-}
-
-export const PrimaryMenu = (props: Props) => {
-  const [open, setOpen] = useState(false);
-  const anchorRef = useRef<HTMLButtonElement>(null);
-
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  const handleClose = (event: Event | React.SyntheticEvent) => {
-    if (
-      anchorRef.current &&
-      anchorRef.current.contains(event.target as HTMLElement)
-    ) {
-      return;
-    }
-    setOpen(false);
-  };
-
-  const handleItemClick = (url: string) => {
-    setOpen(false);
-    props.onNavigate(url);
-  };
-
-  const getNavItems = () => {
-    let result: React.ReactElement[] = [];
-    props.menuItems.forEach((item) => {
-      result.push(
-        <NavItem
-          url={item.url}
-          label={item.label.toUpperCase()}
-          icon={item.icon}
-          key={item.url}
-          onNavigate={handleItemClick}
-        />
-      );
-    });
-    return result;
-  };
-
-  return (
-    <>
-      <Button
-        ref={anchorRef}
-        onClick={handleToggle}
-        color="inherit"
-        endIcon={<Icon>expand_more</Icon>}
-        id="primaryNavButton"
-      >
-        <img src="/images/logo-icon.png" alt="Primary Menu" />
-        <h2>{props.label}</h2>
-      </Button>
-
-      <Popper
-        open={open}
-        anchorEl={anchorRef.current}
-        role={undefined}
-        placement="bottom-end"
-        transition
-        disablePortal={true}
-        style={{ zIndex: 1300, color: "#FFF" }}
-      >
-        {({ TransitionProps }) => (
-          <Grow {...TransitionProps}>
-            <Paper
-              elevation={3}
-              sx={{
-                backgroundColor: "var(--c1)",
-                color: "#FFF",
-                minWidth: 300,
-                paddingY: "10px",
-                filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-              }}
-            >
-              <ClickAwayListener onClickAway={handleClose}>
-                <Box
-                  sx={{
-                    "& a": { color: "#FFF", textDecoration: "none" },
-                    "& a:hover": { color: "#DDD" },
-                  }}
-                >
-                  {getNavItems()}
-                </Box>
-              </ClickAwayListener>
-            </Paper>
-          </Grow>
-        )}
-      </Popper>
-    </>
-  );
-};
+import React, { useState, useRef } from "react";
+import { Box, Button, Icon, Paper, Popper, Grow, ClickAwayListener } from "@mui/material";
+import { NavItem } from "../wrapper/NavItem";
+
+interface Props {
+  label: string;
+  menuItems: { url: string; icon: string; label: string }[];
+  onNavigate: (url: string) => void;
+}
+
+export const PrimaryMenu = (props: Props) => {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event: Event | React.SyntheticEvent) => {
+    if (
+      anchorRef.current &&
+      anchorRef.current.contains(event.target as HTMLElement)
+    ) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  const handleItemClick = (url: string) => {
+    setOpen(false);
+    props.onNavigate(url);
+  };
+
+  const getNavItems = () => {
+    let result: React.ReactElement[] = [];
+    props.menuItems.forEach((item) => {
+      result.push(
+        <NavItem
+          url={item.url}
+          label={item.label.toUpperCase()}
+          icon={item.icon}
+          key={item.url}
+          onNavigate={handleItemClick}
+        />
+      );
+    });
+    return result;
+  };
+
+  return (
+    <>
+      <Button
+        ref={anchorRef}
+        onClick={handleToggle}
+        color="inherit"
+        endIcon={<Icon>expand_more</Icon>}
+        id="primaryNavButton"
+      >
+        <img src="/images/logo-icon.png" alt="Primary Menu" />
+        <h2>{props.label}</h2>
+      </Button>
+
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        placement="bottom-end"
+        transition
+        disablePortal={true}
+        style={{ zIndex: 1300, color: "#FFF" }}
+      >
+        {({ TransitionProps }) => (
+          <Grow {...TransitionProps}>
+            <Paper
+              elevation={3}
+              sx={{
+                backgroundColor: "var(--c1)",
+                color: "#FFF",
+                minWidth: 300,
+                paddingY: "10px",
+                filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+              }}
+            >
+              <ClickAwayListener onClickAway={handleClose}>
+                <Box
+                  sx={{
+                    "& a": { color: "#FFF", textDecoration: "none" },
+                    "& a:hover": { color: "#DDD" },
+                  }}
+                >
+                  {getNavItems()}
+                </Box>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+};

package/src/components/header/SecondaryMenu.tsx

@@ -1,23 +1,23 @@
-import { Chip } from "@mui/material";
-
-interface Props {
-  label: string,
-  menuItems: { url: string, label: string }[]
-	onNavigate: (url: string) => void;
-}
-
-export const SecondaryMenu= (props:Props) => {
-
-  const getItems = () => {
-    const result:any[] = [];
-    props.menuItems.forEach((item, index) => {
-      if (item.label === props.label) result.push(<Chip key={index} onClick={() => props.onNavigate(item.url)} label={item.label} component="a" variant="filled" clickable style={{backgroundColor:"var(--c1d2)", color:"#FFF", fontSize:16}} />);
-      else result.push(<a key={index} href="about:blank" onClick={(e) => { e.preventDefault(); props.onNavigate(item.url) }} style={{ color:"#FFF", textDecoration: "none", marginLeft:10, marginRight:10}}>{item.label}</a>);
-    });
-    return result;
-  }
-
-  return (<div id="secondaryMenu">
-    {getItems()}
-  </div>)
-}
+import { Chip } from "@mui/material";
+
+interface Props {
+  label: string,
+  menuItems: { url: string, label: string }[]
+	onNavigate: (url: string) => void;
+}
+
+export const SecondaryMenu= (props:Props) => {
+
+  const getItems = () => {
+    const result:any[] = [];
+    props.menuItems.forEach((item, index) => {
+      if (item.label === props.label) result.push(<Chip key={index} onClick={() => props.onNavigate(item.url)} label={item.label} component="a" variant="filled" clickable style={{backgroundColor:"var(--c1d2)", color:"#FFF", fontSize:16}} />);
+      else result.push(<a key={index} href="about:blank" onClick={(e) => { e.preventDefault(); props.onNavigate(item.url) }} style={{ color:"#FFF", textDecoration: "none", marginLeft:10, marginRight:10}}>{item.label}</a>);
+    });
+    return result;
+  }
+
+  return (<div id="secondaryMenu">
+    {getItems()}
+  </div>)
+}

package/src/components/header/SecondaryMenuAlt.tsx

@@ -1,40 +1,40 @@
-import React from "react";
-import { Box, Button, Icon, Menu  } from "@mui/material";
-import { NavItem } from "../wrapper/NavItem";
-
-interface Props {
-  label: string,
-  menuItems: { url: string, label: string }[]
-	onNavigate: (url: string) => void;
-}
-
-export const SecondaryMenuAlt = (props:Props) => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const handleClose = () => { setAnchorEl(null); };
-  const open = Boolean(anchorEl);
-
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    setAnchorEl(e.currentTarget);
-  };
-
-  const getItems = () => {
-    const result:any[] = [];
-    props.menuItems.forEach(item => {
-      result.push(<NavItem url={item.url} label={item.label} key={item.url} onNavigate={props.onNavigate} icon="people" />);
-    });
-    return result;
-  }
-
-  return (
-    <div id="secondaryMenuAlt">
-      <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} endIcon={<Icon>expand_more</Icon>} id="secondaryMenuButton">
-        <h3 style={{lineHeight:1}}>{props.label}</h3>
-      </Button>
-      <Menu anchorEl={anchorEl} id="account-menu" open={anchorEl!==null} onClose={handleClose} transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ "& .MuiBox-root": { borderBottom: 0 } }}>
-        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-          {getItems()}
-        </Box>
-      </Menu>
-    </div>)
-}
+import React from "react";
+import { Box, Button, Icon, Menu  } from "@mui/material";
+import { NavItem } from "../wrapper/NavItem";
+
+interface Props {
+  label: string,
+  menuItems: { url: string, label: string }[]
+	onNavigate: (url: string) => void;
+}
+
+export const SecondaryMenuAlt = (props:Props) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const handleClose = () => { setAnchorEl(null); };
+  const open = Boolean(anchorEl);
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    setAnchorEl(e.currentTarget);
+  };
+
+  const getItems = () => {
+    const result:any[] = [];
+    props.menuItems.forEach(item => {
+      result.push(<NavItem url={item.url} label={item.label} key={item.url} onNavigate={props.onNavigate} icon="people" />);
+    });
+    return result;
+  }
+
+  return (
+    <div id="secondaryMenuAlt">
+      <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} endIcon={<Icon>expand_more</Icon>} id="secondaryMenuButton">
+        <h3 style={{lineHeight:1}}>{props.label}</h3>
+      </Button>
+      <Menu anchorEl={anchorEl} id="account-menu" open={anchorEl!==null} onClose={handleClose} transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ "& .MuiBox-root": { borderBottom: 0 } }}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          {getItems()}
+        </Box>
+      </Menu>
+    </div>)
+}