@churchapps/apphelper 0.0.7 → 0.0.9

package/src/components/material/iconPicker/IconPicker.tsx

@@ -1,153 +1,153 @@
-import * as React from "react";
-import { styled, Icon, InputBase, Typography, debounce, Grid, IconButton, Pagination, Stack } from "@mui/material";
-import MuiPaper from "@mui/material/Paper";
-import IconNamesList from "./IconNamesList"
-
-const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
-
-const FlexSearch = require("flexsearch");
-const StyledIconSpan = styled("span")(({ theme }) => ({
-  display: "inline-flex",
-  flexDirection: "column",
-  color: theme.palette.text.secondary,
-  margin: "0 4px",
-  "& > div": {
-    display: "flex"
-  },
-  "& > div > *": {
-    flexGrow: 1,
-    fontSize: ".6rem",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    textAlign: "center",
-    width: 0
-  }
-}));
-
-const StyledIcon: any = styled(Icon)(({ theme }) => ({
-  boxSizing: "content-box",
-  cursor: "pointer",
-  color: theme.palette.text.primary,
-  borderRadius: theme.shape.borderRadius,
-  transition: theme.transitions.create(["background-color", "box-shadow"], {
-    duration: theme.transitions.duration.shortest
-  }),
-  padding: theme.spacing(1),
-  margin: theme.spacing(0.5, 0),
-  "&:hover": {
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[1]
-  }
-}));
-
-const Icons = React.memo(function Icons(props: { icons: string[]; handleOpenClick: (name: string) => void; }) {
-  const { icons, handleOpenClick } = props;
-
-  const handleIconClick = (name: string) => {
-    const camel = name.substring(0, 1).toLocaleLowerCase() + name.substring(1, name.length);
-    const underscored = camel.replace(/[A-Z]/g, m => "_" + m.toLowerCase());
-    handleOpenClick(underscored)
-  }
-
-  return (
-    <div>
-      {icons.map((icon) => (
-        <StyledIconSpan key={icon}>
-          <StyledIcon tabIndex={-1} sx={{ fontSize: "34px !important" }} onClick={() => { handleIconClick(icon) }}>
-            {icon}
-          </StyledIcon>
-        </StyledIconSpan>
-      ))}
-    </div>
-  );
-});
-
-const Paper = styled(MuiPaper)(({ theme }) => ({ padding: "2px 4px", display: "flex", alignItems: "center", marginBottom: theme.spacing(2), width: "100%" }));
-
-const Input = styled(InputBase)({ marginLeft: 8, flex: 1 });
-
-const searchIndex = new FlexSearch.Index({ tokenize: "full" });
-
-function createSearchIndex() {
-  // create component names from icons list
-  const iconsAndComponentNames = IconNamesList.map(icon => {
-    const split = icon.split("_");
-    const capitalizedSplit = split.map(s => {
-      if (isAlphabet(s[0])) {
-        s = s[0].toUpperCase() + s.slice(1)
-      }
-      return s
-    })
-    return {
-      iconName: icon,
-      componentName: capitalizedSplit.join("")
-    };
-  })
-
-  // create search index
-  iconsAndComponentNames.forEach(icon => {
-    let searchTerm = icon.iconName + " " + icon.componentName;
-
-    searchIndex.addAsync(icon.iconName, searchTerm)
-  })
-
-}
-
-function isAlphabet(character: string) {
-  return /[a-zA-Z]/.test(character);
-}
-
-createSearchIndex();
-
-type Props = {
-  onSelect: (iconName: string) => void;
-};
-
-const defaultIcons = ["person", "group", "groups", "contact_mail", "mail", "church", "favorite", "volunteer_activism", "link", "home", "apps", "web", "public", "rss_feed", "videocam", "live_tv", "music_note", "menu_book", "star", "accessible", "woman", "man", "child_care", "handshake", "location_on", "restaurant", "local_cafe" ];
-
-export function IconPicker(props: Props) {
-  const pageSize = 27;
-  const [keys, setKeys] = React.useState<any[] | null>(null);
-  const [query, setQuery] = React.useState("");
-  const [page, setPage] = React.useState(1);
-
-  const updateSearchResults = React.useMemo(
-    () =>
-      debounce((value) => {
-        if (value === "") setKeys(defaultIcons);
-        else searchIndex.searchAsync(value, { limit: 3000 }).then((results: any) => { setKeys(results); setPage(1); });
-      }, UPDATE_SEARCH_INDEX_WAIT_MS),
-    []
-  );
-
-  React.useEffect(() => { updateSearchResults(query); return () => { updateSearchResults.clear(); }; }, [query, updateSearchResults]);
-
-  function paged<T>(array: Array<T>, p: number) {
-    return array.slice((p - 1) * pageSize, p * pageSize);
-  }
-
-  const icons = keys || IconNamesList;
-
-  const pagesCount = Math.ceil(icons.length / pageSize);
-
-  return (
-    <Grid container sx={{ minHeight: 360, padding: "16px" }}>
-      <Grid item>
-        <Paper>
-          <IconButton sx={{ padding: "10px" }} aria-label="search">
-            <Icon>search</Icon>
-          </IconButton>
-          <Input autoFocus value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search icons…" inputProps={{ "aria-label": "search icons" }} />
-        </Paper>
-        {(query === "") && <Typography sx={{ mb: 1 }}>{`${IconNamesList.length} icons available`}</Typography>}
-        {(query !== "") && <Typography sx={{ mb: 1 }}>{`${icons.length} matching results`}</Typography>}
-
-        <Icons icons={paged(icons, page)} handleOpenClick={props.onSelect} />
-      </Grid>
-
-      <Stack spacing={2} sx={{ margin: "0 auto" }}>
-        <Pagination count={pagesCount} page={page} onChange={(_, p) => setPage(p)} size="small" />
-      </Stack>
-    </Grid>
-  );
-}
+import * as React from "react";
+import { styled, Icon, InputBase, Typography, debounce, Grid, IconButton, Pagination, Stack } from "@mui/material";
+import MuiPaper from "@mui/material/Paper";
+import IconNamesList from "./IconNamesList"
+
+const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
+
+const FlexSearch = require("flexsearch");
+const StyledIconSpan = styled("span")(({ theme }) => ({
+  display: "inline-flex",
+  flexDirection: "column",
+  color: theme.palette.text.secondary,
+  margin: "0 4px",
+  "& > div": {
+    display: "flex"
+  },
+  "& > div > *": {
+    flexGrow: 1,
+    fontSize: ".6rem",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    textAlign: "center",
+    width: 0
+  }
+}));
+
+const StyledIcon: any = styled(Icon)(({ theme }) => ({
+  boxSizing: "content-box",
+  cursor: "pointer",
+  color: theme.palette.text.primary,
+  borderRadius: theme.shape.borderRadius,
+  transition: theme.transitions.create(["background-color", "box-shadow"], {
+    duration: theme.transitions.duration.shortest
+  }),
+  padding: theme.spacing(1),
+  margin: theme.spacing(0.5, 0),
+  "&:hover": {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[1]
+  }
+}));
+
+const Icons = React.memo(function Icons(props: { icons: string[]; handleOpenClick: (name: string) => void; }) {
+  const { icons, handleOpenClick } = props;
+
+  const handleIconClick = (name: string) => {
+    const camel = name.substring(0, 1).toLocaleLowerCase() + name.substring(1, name.length);
+    const underscored = camel.replace(/[A-Z]/g, m => "_" + m.toLowerCase());
+    handleOpenClick(underscored)
+  }
+
+  return (
+    <div>
+      {icons.map((icon) => (
+        <StyledIconSpan key={icon}>
+          <StyledIcon tabIndex={-1} sx={{ fontSize: "34px !important" }} onClick={() => { handleIconClick(icon) }}>
+            {icon}
+          </StyledIcon>
+        </StyledIconSpan>
+      ))}
+    </div>
+  );
+});
+
+const Paper = styled(MuiPaper)(({ theme }) => ({ padding: "2px 4px", display: "flex", alignItems: "center", marginBottom: theme.spacing(2), width: "100%" }));
+
+const Input = styled(InputBase)({ marginLeft: 8, flex: 1 });
+
+const searchIndex = new FlexSearch.Index({ tokenize: "full" });
+
+function createSearchIndex() {
+  // create component names from icons list
+  const iconsAndComponentNames = IconNamesList.map(icon => {
+    const split = icon.split("_");
+    const capitalizedSplit = split.map(s => {
+      if (isAlphabet(s[0])) {
+        s = s[0].toUpperCase() + s.slice(1)
+      }
+      return s
+    })
+    return {
+      iconName: icon,
+      componentName: capitalizedSplit.join("")
+    };
+  })
+
+  // create search index
+  iconsAndComponentNames.forEach(icon => {
+    let searchTerm = icon.iconName + " " + icon.componentName;
+
+    searchIndex.addAsync(icon.iconName, searchTerm)
+  })
+
+}
+
+function isAlphabet(character: string) {
+  return /[a-zA-Z]/.test(character);
+}
+
+createSearchIndex();
+
+type Props = {
+  onSelect: (iconName: string) => void;
+};
+
+const defaultIcons = ["person", "group", "groups", "contact_mail", "mail", "church", "favorite", "volunteer_activism", "link", "home", "apps", "web", "public", "rss_feed", "videocam", "live_tv", "music_note", "menu_book", "star", "accessible", "woman", "man", "child_care", "handshake", "location_on", "restaurant", "local_cafe" ];
+
+export function IconPicker(props: Props) {
+  const pageSize = 27;
+  const [keys, setKeys] = React.useState<any[] | null>(null);
+  const [query, setQuery] = React.useState("");
+  const [page, setPage] = React.useState(1);
+
+  const updateSearchResults = React.useMemo(
+    () =>
+      debounce((value) => {
+        if (value === "") setKeys(defaultIcons);
+        else searchIndex.searchAsync(value, { limit: 3000 }).then((results: any) => { setKeys(results); setPage(1); });
+      }, UPDATE_SEARCH_INDEX_WAIT_MS),
+    []
+  );
+
+  React.useEffect(() => { updateSearchResults(query); return () => { updateSearchResults.clear(); }; }, [query, updateSearchResults]);
+
+  function paged<T>(array: Array<T>, p: number) {
+    return array.slice((p - 1) * pageSize, p * pageSize);
+  }
+
+  const icons = keys || IconNamesList;
+
+  const pagesCount = Math.ceil(icons.length / pageSize);
+
+  return (
+    <Grid container sx={{ minHeight: 360, padding: "16px" }}>
+      <Grid item>
+        <Paper>
+          <IconButton sx={{ padding: "10px" }} aria-label="search">
+            <Icon>search</Icon>
+          </IconButton>
+          <Input autoFocus value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search icons…" inputProps={{ "aria-label": "search icons" }} />
+        </Paper>
+        {(query === "") && <Typography sx={{ mb: 1 }}>{`${IconNamesList.length} icons available`}</Typography>}
+        {(query !== "") && <Typography sx={{ mb: 1 }}>{`${icons.length} matching results`}</Typography>}
+
+        <Icons icons={paged(icons, page)} handleOpenClick={props.onSelect} />
+      </Grid>
+
+      <Stack spacing={2} sx={{ margin: "0 auto" }}>
+        <Pagination count={pagesCount} page={page} onChange={(_, p) => setPage(p)} size="small" />
+      </Stack>
+    </Grid>
+  );
+}

package/src/components/material/index.tsx

@@ -1,6 +1,6 @@
-export { NavItem } from "./NavItem";
-export { AppList } from "./AppList";
-export { SiteWrapper } from "./SiteWrapper";
-export { ChurchList } from "./ChurchList";
-export { UserMenu } from "./UserMenu";
-export { IconPicker } from "./iconPicker/IconPicker";
+export { NavItem } from "./NavItem";
+export { AppList } from "./AppList";
+export { SiteWrapper } from "./SiteWrapper";
+export { ChurchList } from "./ChurchList";
+export { UserMenu } from "./UserMenu";
+export { IconPicker } from "./iconPicker/IconPicker";

package/src/components/notes/AddNote.tsx

@@ -1,90 +1,90 @@
-import React, { useState, useEffect } from "react"
-import { ApiHelper, PersonHelper } from "../../helpers"
-import { MessageInterface, UserContextInterface } from "../../interfaces"
-import { Icon, Stack, TextField } from "@mui/material"
-import { ErrorMessages } from "../ErrorMessages"
-import { SmallButton } from "../SmallButton"
-
-type Props = {
-  messageId?: string;
-  onUpdate: () => void;
-  createConversation: () => Promise<string>;
-  conversationId?: string;
-  context: UserContextInterface
-};
-
-export function AddNote({ context, ...props }: Props) {
-  const [message, setMessage] = useState<MessageInterface>()
-  const [errors, setErrors] = React.useState<string[]>([]);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const headerText = props.messageId ? "Edit note" : "Add a note"
-
-  useEffect(() => {
-    if (props.messageId) ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then(n => setMessage(n));
-    else setMessage({ conversationId: props.conversationId, content: "" });
-    return () => {
-      setMessage(null);
-    };
-  }, [props.messageId, props.conversationId])
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
-    setErrors([]);
-    const m = { ...message } as MessageInterface;
-    m.content = e.target.value;
-    setMessage(m);
-  }
-
-  const validate = () => {
-    const result = [];
-    if (!message.content.trim()) result.push("Please enter a note.");
-    setErrors(result);
-    return result.length === 0;
-  }
-
-  async function handleSave() {
-    if (validate()) {
-      setIsSubmitting(true);
-      let cId = props.conversationId;
-      if (!cId) cId = await props.createConversation();
-
-      const m = { ...message };
-      m.conversationId = cId;
-      ApiHelper.post("/messages", [m], "MessagingApi")
-        .then(() => {
-          props.onUpdate();
-          const m = { ...message } as MessageInterface;
-          m.content = "";
-          setMessage(m);
-        })
-        .finally(() => { setIsSubmitting(false); });
-    }
-  };
-
-  async function deleteNote() {
-    await ApiHelper.delete(`/messages/${props.messageId}`, "MessagingApi")
-    props.onUpdate()
-  }
-
-  const deleteFunction = props.messageId ? deleteNote : null;
-
-  const image = PersonHelper.getPhotoUrl(context?.person)
-
-  return (
-    <>
-      <ErrorMessages errors={errors} />
-
-      <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
-
-        {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
-        <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
-          <div><b>{context?.person?.name?.display}</b></div>
-          <TextField fullWidth name="noteText" aria-label={headerText} placeholder="Add a note" multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message?.content} />
-        </Stack>
-        <Stack direction="column" spacing={1} justifyContent="end">
-          <SmallButton icon="send" onClick={handleSave} />
-          {deleteFunction && <SmallButton icon="delete" onClick={deleteFunction} disabled={isSubmitting} />}
-        </Stack>
-      </Stack>
-    </>
-  );
-}
+import React, { useState, useEffect } from "react"
+import { ApiHelper, PersonHelper } from "../../helpers"
+import { MessageInterface, UserContextInterface } from "../../interfaces"
+import { Icon, Stack, TextField } from "@mui/material"
+import { ErrorMessages } from "../ErrorMessages"
+import { SmallButton } from "../SmallButton"
+
+type Props = {
+  messageId?: string;
+  onUpdate: () => void;
+  createConversation: () => Promise<string>;
+  conversationId?: string;
+  context: UserContextInterface
+};
+
+export function AddNote({ context, ...props }: Props) {
+  const [message, setMessage] = useState<MessageInterface>()
+  const [errors, setErrors] = React.useState<string[]>([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const headerText = props.messageId ? "Edit note" : "Add a note"
+
+  useEffect(() => {
+    if (props.messageId) ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then(n => setMessage(n));
+    else setMessage({ conversationId: props.conversationId, content: "" });
+    return () => {
+      setMessage(null);
+    };
+  }, [props.messageId, props.conversationId])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setErrors([]);
+    const m = { ...message } as MessageInterface;
+    m.content = e.target.value;
+    setMessage(m);
+  }
+
+  const validate = () => {
+    const result = [];
+    if (!message.content.trim()) result.push("Please enter a note.");
+    setErrors(result);
+    return result.length === 0;
+  }
+
+  async function handleSave() {
+    if (validate()) {
+      setIsSubmitting(true);
+      let cId = props.conversationId;
+      if (!cId) cId = await props.createConversation();
+
+      const m = { ...message };
+      m.conversationId = cId;
+      ApiHelper.post("/messages", [m], "MessagingApi")
+        .then(() => {
+          props.onUpdate();
+          const m = { ...message } as MessageInterface;
+          m.content = "";
+          setMessage(m);
+        })
+        .finally(() => { setIsSubmitting(false); });
+    }
+  };
+
+  async function deleteNote() {
+    await ApiHelper.delete(`/messages/${props.messageId}`, "MessagingApi")
+    props.onUpdate()
+  }
+
+  const deleteFunction = props.messageId ? deleteNote : null;
+
+  const image = PersonHelper.getPhotoUrl(context?.person)
+
+  return (
+    <>
+      <ErrorMessages errors={errors} />
+
+      <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
+
+        {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
+        <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
+          <div><b>{context?.person?.name?.display}</b></div>
+          <TextField fullWidth name="noteText" aria-label={headerText} placeholder="Add a note" multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message?.content} />
+        </Stack>
+        <Stack direction="column" spacing={1} justifyContent="end">
+          <SmallButton icon="send" onClick={handleSave} />
+          {deleteFunction && <SmallButton icon="delete" onClick={deleteFunction} disabled={isSubmitting} />}
+        </Stack>
+      </Stack>
+    </>
+  );
+}