@churchapps/apphelper 0.5.1 → 0.5.3

package/src/components/gallery/StockPhotos.tsx

@@ -1,96 +1,96 @@
-"use client";
-import { Button, Grid, TextField } from "@mui/material";
-import React, { useState } from "react";
-import { ApiHelper } from "../../helpers";
-import { Locale } from "../../helpers";
-import { CommonEnvironmentHelper } from "@churchapps/helpers";
-
-interface Props {
-  aspectRatio: number,
-  onSelect: (img: string) => void,
-  onStockSelect: (img: string) => void
-}
-
-interface SearchResult { description: string, url: string, photographer: string, photographerUrl: string, large: string, thumbnail: string }
-
-export const StockPhotos: React.FC<Props> = (props: Props) => {
-  const [images, setImages] = useState<string[]>([]);
-  const [searchText, setSearchText] = useState("");
-  const [searchResults, setSearchResults] = useState<SearchResult[]>(null);
-
-  const contentRoot = CommonEnvironmentHelper.ContentRoot;
-
-  const loadData = () => { ApiHelper.getAnonymous("/gallery/stock/" + props.aspectRatio.toString(), "ContentApi").then((data: any) => setImages(data.images)); }
-
-  React.useEffect(loadData, [props.aspectRatio]); //eslint-disable-line
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setSearchText(e.currentTarget.value); }
-
-  const handleSearch = (e: React.MouseEvent) => {
-    if (e !== null) e.preventDefault();
-    let term = searchText.trim();
-    ApiHelper.post("/stock/search", { term: term }, "ContentApi").then((data: SearchResult[]) => { setSearchResults(data) });
-  }
-
-  const getImages = () => {
-    if (searchResults) return getResults();
-    else return getSuggested();
-  }
-
-  const getResults = () => {
-    let result: React.ReactElement[] = [];
-    searchResults.forEach((p: any) => {
-      result.push(<Grid size={{ xs: 12, md: 4 }}>
-        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onStockSelect(p.large) }}>
-          <img 
-            src={p.thumbnail} 
-            alt="stock" 
-            style={{ 
-              width: '100%', 
-              height: 'auto', 
-              maxWidth: '100%',
-              display: 'block'
-            }}
-          />
-        </a>
-        <div>
-          <i style={{ fontSize: 12 }}>
-            <a href={p.url} target="_blank" rel="noreferrer noopener">{Locale.label("stockPhotos.photoBy")}</a> <a href={p.photographerUrl} target="_blank" rel="noreferrer noopener">{p.photographer}</a></i>
-        </div>
-      </Grid>);
-    })
-    return result;
-  }
-
-  const getSuggested = () => {
-    let result: React.ReactElement[] = [];
-    images.forEach((img: any) => {
-      result.push(<Grid size={{ xs: 12, md: 4 }}>
-        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(contentRoot + "/" + img) }}>
-          <img 
-            src={contentRoot + "/" + img} 
-            alt="stock" 
-            style={{ 
-              width: '100%', 
-              height: 'auto', 
-              maxWidth: '100%',
-              display: 'block'
-            }}
-          />
-        </a>
-      </Grid>);
-    })
-    return result;
-  }
-
-  return (<>
-    <TextField fullWidth name="personAddText" label="Search Term" value={searchText} onChange={handleChange}
-      InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-testid="search-button" onClick={handleSearch}>Search</Button> }}
-    />
-    {searchResults && <div>{Locale.label("stockPhotos.providedBy")} <a href="https://pexels.com">Pexels</a>.</div>}
-    <Grid container spacing={3} alignItems="center">
-      {getImages()}
-    </Grid>
-
-  </>);
+"use client";
+import { Button, Grid, TextField } from "@mui/material";
+import React, { useState } from "react";
+import { ApiHelper } from "../../helpers";
+import { Locale } from "../../helpers";
+import { CommonEnvironmentHelper } from "@churchapps/helpers";
+
+interface Props {
+  aspectRatio: number,
+  onSelect: (img: string) => void,
+  onStockSelect: (img: string) => void
+}
+
+interface SearchResult { description: string, url: string, photographer: string, photographerUrl: string, large: string, thumbnail: string }
+
+export const StockPhotos: React.FC<Props> = (props: Props) => {
+  const [images, setImages] = useState<string[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const [searchResults, setSearchResults] = useState<SearchResult[]>(null);
+
+  const contentRoot = CommonEnvironmentHelper.ContentRoot;
+
+  const loadData = () => { ApiHelper.getAnonymous("/gallery/stock/" + props.aspectRatio.toString(), "ContentApi").then((data: any) => setImages(data.images)); }
+
+  React.useEffect(loadData, [props.aspectRatio]); //eslint-disable-line
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setSearchText(e.currentTarget.value); }
+
+  const handleSearch = (e: React.MouseEvent) => {
+    if (e !== null) e.preventDefault();
+    let term = searchText.trim();
+    ApiHelper.post("/stock/search", { term: term }, "ContentApi").then((data: SearchResult[]) => { setSearchResults(data) });
+  }
+
+  const getImages = () => {
+    if (searchResults) return getResults();
+    else return getSuggested();
+  }
+
+  const getResults = () => {
+    let result: React.ReactElement[] = [];
+    searchResults.forEach((p: any) => {
+      result.push(<Grid size={{ xs: 12, md: 4 }}>
+        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onStockSelect(p.large) }}>
+          <img 
+            src={p.thumbnail} 
+            alt="stock" 
+            style={{ 
+              width: '100%', 
+              height: 'auto', 
+              maxWidth: '100%',
+              display: 'block'
+            }}
+          />
+        </a>
+        <div>
+          <i style={{ fontSize: 12 }}>
+            <a href={p.url} target="_blank" rel="noreferrer noopener">{Locale.label("stockPhotos.photoBy")}</a> <a href={p.photographerUrl} target="_blank" rel="noreferrer noopener">{p.photographer}</a></i>
+        </div>
+      </Grid>);
+    })
+    return result;
+  }
+
+  const getSuggested = () => {
+    let result: React.ReactElement[] = [];
+    images.forEach((img: any) => {
+      result.push(<Grid size={{ xs: 12, md: 4 }}>
+        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(contentRoot + "/" + img) }}>
+          <img 
+            src={contentRoot + "/" + img} 
+            alt="stock" 
+            style={{ 
+              width: '100%', 
+              height: 'auto', 
+              maxWidth: '100%',
+              display: 'block'
+            }}
+          />
+        </a>
+      </Grid>);
+    })
+    return result;
+  }
+
+  return (<>
+    <TextField fullWidth name="personAddText" label="Search Term" value={searchText} onChange={handleChange}
+      InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-testid="search-button" onClick={handleSearch}>Search</Button> }}
+    />
+    {searchResults && <div>{Locale.label("stockPhotos.providedBy")} <a href="https://pexels.com">Pexels</a>.</div>}
+    <Grid container spacing={3} alignItems="center">
+      {getImages()}
+    </Grid>
+
+  </>);
 };

package/src/components/gallery/index.ts

@@ -1,2 +1,2 @@
-export * from "./GalleryModal";
+export * from "./GalleryModal";
 export * from "./StockPhotos";

package/src/components/header/Banner.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-
-interface Props {
-  children: React.ReactNode
-}
-
-export const Banner = (props:Props) => {
-  return (<div id="banner">
-    {props.children}
-  </div>);
-}
+import React from "react";
+
+interface Props {
+  children: React.ReactNode
+}
+
+export const Banner = (props:Props) => {
+  return (<div id="banner">
+    {props.children}
+  </div>);
+}

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