@churchapps/apphelper 0.4.50 → 0.5.0

package/src/components/DisplayBox.tsx

@@ -1,83 +1,83 @@
-"use client";
-
-import React from "react";
-import { Paper, Box, Typography, Icon } from "@mui/material";
-import { HelpIcon } from "./HelpIcon";
-import { SmallButton } from "./SmallButton";
-import { styled, useTheme } from '@mui/material/styles';
-
-declare module '@mui/material/styles' {
-  interface Palette {
-    InputBox: { headerText: string; };
-  }
-  interface PaletteOptions {
-    InputBox?: { headerText?: string; };
-  }
-}
-
-
-interface Props {
-  id?: string,
-  children: React.ReactNode,
-  headerIcon?: string,
-  headerText: string,
-  editFunction?: () => void,
-  editContent?: React.ReactNode,
-  "data-testid"?: string,
-  ariaLabel?: string,
-  footerContent?: React.ReactNode,
-  help?: string
-}
-
-/* "& p": { color: "#666" }, */
-const CustomContextBox = styled(Box)({
-  marginTop: 10,
-  overflowX: "hidden",
-  "& label": { color: "#999" },
-  "& ul": { paddingLeft: 0 },
-  "& li": {
-    listStyleType: "none",
-    marginBottom: 10,
-    "& i": { marginRight: 5 }
-  },
-  "& td": {
-    "& i": { marginRight: 5 }
-  },
-  "& td:first-of-type": { paddingLeft: 0 },
-  "& td:last-of-type": { paddingRight: 0 },
-  "& th:first-of-type": { paddingLeft: 0 },
-  "& th:last-of-type": { paddingRight: 0 }
-});
-
-export const DisplayBox = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const theme = useTheme();
-  const headerText = theme?.palette?.InputBox?.headerText ? theme?.palette?.InputBox?.headerText : "primary";
-
-  let editContent: React.ReactNode;
-  if (props.editFunction !== undefined) {
-    editContent = <SmallButton icon="edit" aria-label={props.ariaLabel || "editButton"} onClick={props.editFunction} />
-  }
-  else if (props.editContent !== undefined) editContent = props.editContent;
-
-  return (
-    <Paper sx={{ padding: 2, marginBottom: 4 }} id={props.id || "display-box"} data-testid={props["data-testid"] || ""}>
-      {props.help && <HelpIcon article={props.help} />}
-      <Box id="display-box-header" sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <Box id="display-box-title-section" sx={{ display: "flex", alignItems: "center" }}>
-          {props.headerIcon && <Icon id="display-box-icon" sx={{ color: headerText }}>{props.headerIcon}</Icon>}
-          <Typography id="display-box-title" component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color={headerText}>
-            {props.headerText}
-          </Typography>
-
-        </Box>
-        <Box id="display-box-actions">
-          {editContent}
-        </Box>
-      </Box>
-      <CustomContextBox id="display-box-content" ref={ref} data-testid="display-box-content">{props.children}</CustomContextBox>
-      {props.footerContent && (<div id="display-box-footer" style={{ marginLeft: -16, marginRight: -16, marginBottom: -15, marginTop: 15 }}>{props.footerContent}</div>)}
-    </Paper>
-  );
-})
-
-DisplayBox.displayName = "DisplayBox";
+"use client";
+
+import React from "react";
+import { Paper, Box, Typography, Icon } from "@mui/material";
+import { HelpIcon } from "./HelpIcon";
+import { SmallButton } from "./SmallButton";
+import { styled, useTheme } from '@mui/material/styles';
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    InputBox: { headerText: string; };
+  }
+  interface PaletteOptions {
+    InputBox?: { headerText?: string; };
+  }
+}
+
+
+interface Props {
+  id?: string,
+  children: React.ReactNode,
+  headerIcon?: string,
+  headerText: string,
+  editFunction?: () => void,
+  editContent?: React.ReactNode,
+  "data-testid"?: string,
+  ariaLabel?: string,
+  footerContent?: React.ReactNode,
+  help?: string
+}
+
+/* "& p": { color: "#666" }, */
+const CustomContextBox = styled(Box)({
+  marginTop: 10,
+  overflowX: "hidden",
+  "& label": { color: "#999" },
+  "& ul": { paddingLeft: 0 },
+  "& li": {
+    listStyleType: "none",
+    marginBottom: 10,
+    "& i": { marginRight: 5 }
+  },
+  "& td": {
+    "& i": { marginRight: 5 }
+  },
+  "& td:first-of-type": { paddingLeft: 0 },
+  "& td:last-of-type": { paddingRight: 0 },
+  "& th:first-of-type": { paddingLeft: 0 },
+  "& th:last-of-type": { paddingRight: 0 }
+});
+
+export const DisplayBox = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const theme = useTheme();
+  const headerText = theme?.palette?.InputBox?.headerText ? theme?.palette?.InputBox?.headerText : "primary";
+
+  let editContent: React.ReactNode;
+  if (props.editFunction !== undefined) {
+    editContent = <SmallButton icon="edit" aria-label={props.ariaLabel || "editButton"} onClick={props.editFunction} />
+  }
+  else if (props.editContent !== undefined) editContent = props.editContent;
+
+  return (
+    <Paper sx={{ padding: 2, marginBottom: 4 }} id={props.id || "display-box"} data-testid={props["data-testid"] || ""}>
+      {props.help && <HelpIcon article={props.help} />}
+      <Box id="display-box-header" sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <Box id="display-box-title-section" sx={{ display: "flex", alignItems: "center" }}>
+          {props.headerIcon && <Icon id="display-box-icon" sx={{ color: headerText }}>{props.headerIcon}</Icon>}
+          <Typography id="display-box-title" component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color={headerText}>
+            {props.headerText}
+          </Typography>
+
+        </Box>
+        <Box id="display-box-actions">
+          {editContent}
+        </Box>
+      </Box>
+      <CustomContextBox id="display-box-content" ref={ref} data-testid="display-box-content">{props.children}</CustomContextBox>
+      {props.footerContent && (<div id="display-box-footer" style={{ marginLeft: -16, marginRight: -16, marginBottom: -15, marginTop: 15 }}>{props.footerContent}</div>)}
+    </Paper>
+  );
+})
+
+DisplayBox.displayName = "DisplayBox";

package/src/components/ErrorMessages.tsx

@@ -1,28 +1,28 @@
-"use client";
-
-import { Alert, Snackbar } from "@mui/material";
-import React, { useEffect } from "react";
-
-interface Props { errors: string[] }
-
-export const ErrorMessages: React.FC<Props> = props => {
-  const [open, setOpen] = React.useState(false);
-  const [items, setItems] = React.useState<React.ReactNode[]>([]);
-
-  useEffect(() => {
-    if (props.errors.length > 0) {
-      const _items: React.ReactNode[] = [];
-      for (let i = 0; i < props.errors.length; i++) {
-        _items.push(<div key={i}>{props.errors[i]}</div>);
-      }
-      setItems(_items);
-      setOpen(true);
-    }
-  }, [props.errors]);
-
-  let result = (<Snackbar open={open} anchorOrigin={{ horizontal: "center", vertical: "bottom" }} autoHideDuration={6000} onClose={() => setOpen(false)}>
-    <Alert variant="filled" severity="error">{items}</Alert>
-  </Snackbar>);
-
-  return result;
-}
+"use client";
+
+import { Alert, Snackbar } from "@mui/material";
+import React, { useEffect } from "react";
+
+interface Props { errors: string[] }
+
+export const ErrorMessages: React.FC<Props> = props => {
+  const [open, setOpen] = React.useState(false);
+  const [items, setItems] = React.useState<React.ReactNode[]>([]);
+
+  useEffect(() => {
+    if (props.errors.length > 0) {
+      const _items: React.ReactNode[] = [];
+      for (let i = 0; i < props.errors.length; i++) {
+        _items.push(<div key={i}>{props.errors[i]}</div>);
+      }
+      setItems(_items);
+      setOpen(true);
+    }
+  }, [props.errors]);
+
+  let result = (<Snackbar open={open} anchorOrigin={{ horizontal: "center", vertical: "bottom" }} autoHideDuration={6000} onClose={() => setOpen(false)}>
+    <Alert variant="filled" severity="error">{items}</Alert>
+  </Snackbar>);
+
+  return result;
+}

package/src/components/ExportLink.tsx

@@ -1,81 +1,81 @@
-"use client";
-
-import { Button, Icon } from "@mui/material";
-import React, { Suspense, lazy } from "react";
-import { Loading } from "./Loading";
-
-// Lazy load the CSVLink component
-const CSVLink = lazy(() => import("react-csv").then(module => ({ default: module.CSVLink })));
-
-interface Props {
-  data: any[],
-  spaceAfter?: boolean,
-  spaceBefore?: boolean,
-  filename?: string,
-  icon?: string,
-  text?: string,
-  customHeaders?: {label: string, key: string}[]
-}
-
-export const ExportLink: React.FC<Props> = (props) => {
-
-  const people = props.data ? [...props.data] : [];
-
-  const getHeaders = () => {
-    let result = [];
-    if (people?.length > 0) {
-      let names = getAllPropertyNames();
-      for (let i = 0; i < names.length; i++) { result.push({ label: names[i], key: names[i] }); }
-    }
-    return result;
-  }
-
-  const getAllPropertyNames = () => {
-    let result = [];
-    for (let i = 0; i < people.length; i++) {
-      let p = {...people[i]}
-      p.birthDate = p.birthDate ? new Date(p.birthDate).toISOString() : null;
-      p.anniversary = p.anniversary ? new Date(p.anniversary).toISOString() : null;
-      people[i] = p;
-      let propertyNames = getPropertyNames("", people[i]);
-      for (let j = 0; j < propertyNames.length; j++) if (result.indexOf(propertyNames[j]) === -1) result.push(propertyNames[j]);
-    }
-    return result.sort();
-  }
-
-  const getPropertyNames = (prefix: string, obj: any) => {
-    let result = [];
-    let names = Object.getOwnPropertyNames(obj)
-    for (let i = 0; i < names.length; i++) {
-      let t = typeof obj[names[i]];
-      switch (t) {
-        case "number":
-        case "string":
-        case "boolean":
-          result.push(prefix + names[i]);
-          break;
-        case "object":
-          if ((obj[names[i]] !== null)) {
-            let children: string[] = getPropertyNames(prefix + names[i] + ".", obj[names[i]]);
-            for (let j = 0; j < children.length; j++) result.push(children[j]);
-          }
-      }
-    }
-    return result;
-  }
-
-  if (!people || people?.length === 0) return null;
-  else {
-    let items = [];
-    if (props.spaceBefore) items.push(" ");
-    items.push(
-      <Suspense key={props.filename} fallback={<Button><Icon sx={{ marginRight: props.text ? 1 : 0 }}>{props.icon || "file_download"}</Icon>{props.text || ""}</Button>}>
-        <CSVLink data={people} headers={props.customHeaders || getHeaders()} filename={props.filename || "export.csv"}>
-          <Button><Icon sx={{ marginRight: props.text ? 1 : 0 }}>{props.icon || "file_download"}</Icon>{props.text || ""}</Button>
-        </CSVLink>
-      </Suspense>
-    );
-    if (props.spaceAfter) items.push(" ");
-    return (<>{items}</>);
-  }
-}
+"use client";
+
+import { Button, Icon } from "@mui/material";
+import React, { Suspense, lazy } from "react";
+import { Loading } from "./Loading";
+
+// Lazy load the CSVLink component
+const CSVLink = lazy(() => import("react-csv").then(module => ({ default: module.CSVLink })));
+
+interface Props {
+  data: any[],
+  spaceAfter?: boolean,
+  spaceBefore?: boolean,
+  filename?: string,
+  icon?: string,
+  text?: string,
+  customHeaders?: {label: string, key: string}[]
+}
+
+export const ExportLink: React.FC<Props> = (props) => {
+
+  const people = props.data ? [...props.data] : [];
+
+  const getHeaders = () => {
+    let result = [];
+    if (people?.length > 0) {
+      let names = getAllPropertyNames();
+      for (let i = 0; i < names.length; i++) { result.push({ label: names[i], key: names[i] }); }
+    }
+    return result;
+  }
+
+  const getAllPropertyNames = () => {
+    let result = [];
+    for (let i = 0; i < people.length; i++) {
+      let p = {...people[i]}
+      p.birthDate = p.birthDate ? new Date(p.birthDate).toISOString() : null;
+      p.anniversary = p.anniversary ? new Date(p.anniversary).toISOString() : null;
+      people[i] = p;
+      let propertyNames = getPropertyNames("", people[i]);
+      for (let j = 0; j < propertyNames.length; j++) if (result.indexOf(propertyNames[j]) === -1) result.push(propertyNames[j]);
+    }
+    return result.sort();
+  }
+
+  const getPropertyNames = (prefix: string, obj: any) => {
+    let result = [];
+    let names = Object.getOwnPropertyNames(obj)
+    for (let i = 0; i < names.length; i++) {
+      let t = typeof obj[names[i]];
+      switch (t) {
+        case "number":
+        case "string":
+        case "boolean":
+          result.push(prefix + names[i]);
+          break;
+        case "object":
+          if ((obj[names[i]] !== null)) {
+            let children: string[] = getPropertyNames(prefix + names[i] + ".", obj[names[i]]);
+            for (let j = 0; j < children.length; j++) result.push(children[j]);
+          }
+      }
+    }
+    return result;
+  }
+
+  if (!people || people?.length === 0) return null;
+  else {
+    let items = [];
+    if (props.spaceBefore) items.push(" ");
+    items.push(
+      <Suspense key={props.filename} fallback={<Button><Icon sx={{ marginRight: props.text ? 1 : 0 }}>{props.icon || "file_download"}</Icon>{props.text || ""}</Button>}>
+        <CSVLink data={people} headers={props.customHeaders || getHeaders()} filename={props.filename || "export.csv"}>
+          <Button><Icon sx={{ marginRight: props.text ? 1 : 0 }}>{props.icon || "file_download"}</Icon>{props.text || ""}</Button>
+        </CSVLink>
+      </Suspense>
+    );
+    if (props.spaceAfter) items.push(" ");
+    return (<>{items}</>);
+  }
+}

package/src/components/FloatingSupport.tsx

@@ -1,18 +1,18 @@
-"use client";
-
-import { Fab, Icon } from "@mui/material";
-import React from "react";
-import { SupportModal } from "./SupportModal";
-
-interface Props { appName?: string }
-
-export const FloatingSupport: React.FC<Props> = (props) => {
-  const [showSupport, setShowSupport] = React.useState(false);
-
-  return (<>
-    <Fab color="primary" style={{ position: "fixed", cursor: "pointer", bottom: "20px", right: (showSupport) ? 47 : 30 }} onClick={() => { setShowSupport(!showSupport) }} aria-label="Support">
-      <Icon style={{ fontSize: 40 }}>contact_support</Icon>
-    </Fab>
-    {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
-  </>);
-};
+"use client";
+
+import { Fab, Icon } from "@mui/material";
+import React from "react";
+import { SupportModal } from "./SupportModal";
+
+interface Props { appName?: string }
+
+export const FloatingSupport: React.FC<Props> = (props) => {
+  const [showSupport, setShowSupport] = React.useState(false);
+
+  return (<>
+    <Fab color="primary" style={{ position: "fixed", cursor: "pointer", bottom: "20px", right: (showSupport) ? 47 : 30 }} onClick={() => { setShowSupport(!showSupport) }} aria-label="Support">
+      <Icon style={{ fontSize: 40 }}>contact_support</Icon>
+    </Fab>
+    {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
+  </>);
+};