@churchapps/apphelper 0.5.1 → 0.5.3

package/src/components/ImageEditor.tsx

@@ -1,161 +1,161 @@
-"use client";
-
-import React, { useState, useEffect, useRef, Suspense, lazy } from "react";
-import { InputBox, SmallButton, Loading } from ".";
-import { Locale } from "../helpers";
-import "../../public/css/cropper.css";
-
-// Lazy load the Cropper component
-const Cropper = lazy(() => import("react-cropper").then(module => ({ default: module.default })));
-
-interface Props {
-  title?: string;
-  photoUrl: string;
-  aspectRatio: number;
-  onUpdate: (dataUrl?: string) => void;
-  onCancel?: () => void;
-  outputWidth?: number;
-  outputHeight?: number;
-  hideDelete?: boolean;
-}
-
-export function ImageEditor(props: Props) {
-  const [photoSrc, setPhotoSrc] = useState<string>("");
-  const [croppedImageDataUrl, setCroppedImageDataUrl] = useState<string>("");
-  const cropperRef = useRef<HTMLImageElement>(null);
-  let timeout: number | null = null;
-
-  const handleSave = () => {
-    console.log('ImageEditor handleSave called, croppedImageDataUrl:', croppedImageDataUrl ? 'Data URL available' : 'No data URL');
-    props.onUpdate(croppedImageDataUrl);
-  };
-
-  const handleDelete = () => props.onUpdate("");
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    let files;
-    if (e.target) {
-      files = e.target.files;
-    }
-    if (!files || files.length === 0) return;
-    
-    const reader = new FileReader();
-    reader.onload = () => {
-      const url = reader.result.toString();
-      console.log('ImageEditor file uploaded, setting photoSrc');
-      setPhotoSrc(url);
-      setCroppedImageDataUrl("");
-    };
-    reader.readAsDataURL(files[0]);
-    
-    // Clear the input value to allow re-uploading the same file
-    e.target.value = "";
-  };
-
-  const selectDefaultCropZone = () => {
-    const imageElement: any = cropperRef?.current;
-    let cropper: any = imageElement?.cropper;
-    if (props.aspectRatio===0)
-    {
-      let containerData = cropper.getContainerData();
-      const imgWidth = cropper.getImageData().width;
-      const imgHeight = cropper.getImageData().height;
-      const effectiveWidth = (containerData.width > imgWidth) ? imgWidth : containerData.width;
-      const effectiveHeight = (containerData.height > imgHeight) ? imgHeight : containerData.height;
-      cropper.setCropBoxData({ width: effectiveWidth, height: effectiveHeight, left: (containerData.width - effectiveWidth) / 2.0 , top: (containerData.height - effectiveHeight) / 2.0 });
-    } else {
-      let desiredAspect = props.aspectRatio;
-      let containerData = cropper.getContainerData();
-      let imgAspect = cropper.getImageData().aspectRatio;
-      let scale = imgAspect / desiredAspect;
-      if (scale < 1) {
-        const imgWidth = cropper.getImageData().width;
-        let l = (containerData.width - imgWidth) / 2.0;
-        let t = (containerData.height - (containerData.height * scale)) / 2.0;
-        cropper.setCropBoxData({ width: imgWidth, height: imgWidth / desiredAspect, left: l, top: t });
-      } else {
-        const imgHeight = cropper.getImageData().height;
-        let l = (containerData.width - (imgHeight * desiredAspect)) / 2.0;
-        let t = cropper.canvasData.top;
-        cropper.setCropBoxData({ width: imgHeight * desiredAspect, height: imgHeight, left: l, top: t });
-      }
-    }
-
-  }
-
-  const handleCrop = () => {
-    if (timeout !== null) {
-      window.clearTimeout(timeout);
-      timeout = null;
-    }
-
-    timeout = window.setTimeout(() => {
-      if (cropperRef.current !== null) {
-        const imageElement: any = cropperRef?.current;
-        const cropper: any = imageElement?.cropper;
-
-        //Do not enlarge if less
-        const imageData = cropper.getImageData();
-        let width = props.outputWidth || 400;
-        let height = props.outputHeight || 300;
-        if (imageData.naturalWidth < width && imageData.naturalHeight < height) {
-          width = imageData.naturalWidth;
-          height = imageData.naturalHeight;
-        }
-
-        const url = cropper.getCroppedCanvas({ width, height }).toDataURL("image/png", 0.4);
-        console.log('ImageEditor handleCrop setting croppedImageDataUrl');
-        setCroppedImageDataUrl(url);
-      }
-    }, 200);
-  };
-
-  useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
-
-  return (
-    <InputBox
-      id="cropperBox"
-      headerIcon=""
-      headerText={props.title}
-      ariaLabelDelete="deletePhoto"
-      saveText={Locale.label("common.update")}
-      saveFunction={handleSave}
-      cancelFunction={props.onCancel}
-      deleteFunction={(!props.hideDelete) && handleDelete}
-      headerActionContent={
-        <div>
-          <input type="file" onChange={handleUpload} id="fileUpload" accept="image/*" style={{ display: "none" }} />
-          <SmallButton
-            icon="upload"
-            text="Upload"
-            onClick={() => {
-              document.getElementById("fileUpload").click();
-            }}
-          />
-        </div>
-      }
-    >
-      <Suspense fallback={<Loading />}>
-        <Cropper
-          ref={cropperRef}
-          src={photoSrc}
-          key={photoSrc}
-          style={{ height: 240, width: "100%" }}
-          aspectRatio={props.aspectRatio}
-          guides={false}
-          crop={handleCrop}
-          autoCropArea={1}
-          viewMode={0}
-          responsive={true}
-          restore={false}
-          checkOrientation={false}
-          background={false}
-          ready={() => {
-            setTimeout(selectDefaultCropZone, 100);
-          }}
-        />
-      </Suspense>
-    </InputBox>
-  );
-}
+"use client";
+
+import React, { useState, useEffect, useRef, Suspense, lazy } from "react";
+import { InputBox, SmallButton, Loading } from ".";
+import { Locale } from "../helpers";
+import "../../public/css/cropper.css";
+
+// Lazy load the Cropper component
+const Cropper = lazy(() => import("react-cropper").then(module => ({ default: module.default })));
+
+interface Props {
+  title?: string;
+  photoUrl: string;
+  aspectRatio: number;
+  onUpdate: (dataUrl?: string) => void;
+  onCancel?: () => void;
+  outputWidth?: number;
+  outputHeight?: number;
+  hideDelete?: boolean;
+}
+
+export function ImageEditor(props: Props) {
+  const [photoSrc, setPhotoSrc] = useState<string>("");
+  const [croppedImageDataUrl, setCroppedImageDataUrl] = useState<string>("");
+  const cropperRef = useRef<HTMLImageElement>(null);
+  let timeout: number | null = null;
+
+  const handleSave = () => {
+    console.log('ImageEditor handleSave called, croppedImageDataUrl:', croppedImageDataUrl ? 'Data URL available' : 'No data URL');
+    props.onUpdate(croppedImageDataUrl);
+  };
+
+  const handleDelete = () => props.onUpdate("");
+
+  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    let files;
+    if (e.target) {
+      files = e.target.files;
+    }
+    if (!files || files.length === 0) return;
+    
+    const reader = new FileReader();
+    reader.onload = () => {
+      const url = reader.result.toString();
+      console.log('ImageEditor file uploaded, setting photoSrc');
+      setPhotoSrc(url);
+      setCroppedImageDataUrl("");
+    };
+    reader.readAsDataURL(files[0]);
+    
+    // Clear the input value to allow re-uploading the same file
+    e.target.value = "";
+  };
+
+  const selectDefaultCropZone = () => {
+    const imageElement: any = cropperRef?.current;
+    let cropper: any = imageElement?.cropper;
+    if (props.aspectRatio===0)
+    {
+      let containerData = cropper.getContainerData();
+      const imgWidth = cropper.getImageData().width;
+      const imgHeight = cropper.getImageData().height;
+      const effectiveWidth = (containerData.width > imgWidth) ? imgWidth : containerData.width;
+      const effectiveHeight = (containerData.height > imgHeight) ? imgHeight : containerData.height;
+      cropper.setCropBoxData({ width: effectiveWidth, height: effectiveHeight, left: (containerData.width - effectiveWidth) / 2.0 , top: (containerData.height - effectiveHeight) / 2.0 });
+    } else {
+      let desiredAspect = props.aspectRatio;
+      let containerData = cropper.getContainerData();
+      let imgAspect = cropper.getImageData().aspectRatio;
+      let scale = imgAspect / desiredAspect;
+      if (scale < 1) {
+        const imgWidth = cropper.getImageData().width;
+        let l = (containerData.width - imgWidth) / 2.0;
+        let t = (containerData.height - (containerData.height * scale)) / 2.0;
+        cropper.setCropBoxData({ width: imgWidth, height: imgWidth / desiredAspect, left: l, top: t });
+      } else {
+        const imgHeight = cropper.getImageData().height;
+        let l = (containerData.width - (imgHeight * desiredAspect)) / 2.0;
+        let t = cropper.canvasData.top;
+        cropper.setCropBoxData({ width: imgHeight * desiredAspect, height: imgHeight, left: l, top: t });
+      }
+    }
+
+  }
+
+  const handleCrop = () => {
+    if (timeout !== null) {
+      window.clearTimeout(timeout);
+      timeout = null;
+    }
+
+    timeout = window.setTimeout(() => {
+      if (cropperRef.current !== null) {
+        const imageElement: any = cropperRef?.current;
+        const cropper: any = imageElement?.cropper;
+
+        //Do not enlarge if less
+        const imageData = cropper.getImageData();
+        let width = props.outputWidth || 400;
+        let height = props.outputHeight || 300;
+        if (imageData.naturalWidth < width && imageData.naturalHeight < height) {
+          width = imageData.naturalWidth;
+          height = imageData.naturalHeight;
+        }
+
+        const url = cropper.getCroppedCanvas({ width, height }).toDataURL("image/png", 0.4);
+        console.log('ImageEditor handleCrop setting croppedImageDataUrl');
+        setCroppedImageDataUrl(url);
+      }
+    }, 200);
+  };
+
+  useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
+
+  return (
+    <InputBox
+      id="cropperBox"
+      headerIcon=""
+      headerText={props.title}
+      ariaLabelDelete="deletePhoto"
+      saveText={Locale.label("common.update")}
+      saveFunction={handleSave}
+      cancelFunction={props.onCancel}
+      deleteFunction={(!props.hideDelete) && handleDelete}
+      headerActionContent={
+        <div>
+          <input type="file" onChange={handleUpload} id="fileUpload" accept="image/*" style={{ display: "none" }} />
+          <SmallButton
+            icon="upload"
+            text="Upload"
+            onClick={() => {
+              document.getElementById("fileUpload").click();
+            }}
+          />
+        </div>
+      }
+    >
+      <Suspense fallback={<Loading />}>
+        <Cropper
+          ref={cropperRef}
+          src={photoSrc}
+          key={photoSrc}
+          style={{ height: 240, width: "100%" }}
+          aspectRatio={props.aspectRatio}
+          guides={false}
+          crop={handleCrop}
+          autoCropArea={1}
+          viewMode={0}
+          responsive={true}
+          restore={false}
+          checkOrientation={false}
+          background={false}
+          ready={() => {
+            setTimeout(selectDefaultCropZone, 100);
+          }}
+        />
+      </Suspense>
+    </InputBox>
+  );
+}

package/src/components/InputBox.tsx

@@ -1,96 +1,96 @@
-"use client";
-
-import React from "react";
-import { Paper, Box, Typography, Stack, Button, PaperProps } from "@mui/material";
-import { Icon } from "@mui/material";
-import { HelpIcon } from "./HelpIcon";
-import { Locale } from "../helpers";
-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;
-  help?: string;
-  saveText?: string;
-  deleteText?: string;
-  cancelText?: string;
-  headerActionContent?: React.ReactNode;
-  cancelFunction?: () => void;
-  deleteFunction?: () => void;
-  saveFunction?: () => void;
-  "data-testid"?: string;
-  className?: string;
-  isSubmitting?: boolean;
-  ariaLabelDelete?: string;
-  ariaLabelSave?: string;
-  saveButtonType?: "submit" | "button";
-  mainContainerCssProps?: PaperProps;
-}
-
-const CustomContextBox = styled(Box)({
-  name: "InputBox",
-  slot: "root",
-  marginTop: 10,
-  overflowX: "hidden",
-  "& p": { color: "#666" },
-  "& label": { color: "#999" },
-  "& ul": { paddingLeft: 15 },
-  "& li": {
-    marginBottom: 10,
-    "& i": { marginRight: 5 }
-  },
-  "& td": {
-    "& i": { marginRight: 5 }
-  }
-})
-
-
-export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
-  const theme = useTheme();
-  const headerText = theme?.palette?.InputBox?.headerText ? theme?.palette?.InputBox?.headerText : "primary";
-
-  let buttons = [];
-  if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>{props.cancelText || Locale.label("common.cancel")}</Button>);
-  if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>{props.deleteText || Locale.label("common.delete")}</Button>);
-  if (props.saveFunction) buttons.push(<Button key="save" type={props.saveButtonType || "button"} variant="contained" disableElevation aria-label={props.ariaLabelSave} onClick={props.saveFunction} disabled={props.isSubmitting} sx={{ "&:focus": { outline: "none" } }}>{props.saveText || Locale.label("common.save")}</Button>);
-
-  let classNames = ["inputBox"];
-  if (props.className) {
-    classNames.push(props.className);
-  }
-
-  return (
-    <Paper id={props.id || "input-box"} sx={{ padding: 2, marginBottom: 4 }} data-testid={props["data-testid"]} {...mainContainerCssProps}>
-      {props.help && <HelpIcon article={props.help} />}
-      <Box id="input-box-header" sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }} data-testid="input-box-header">
-        <Box id="input-box-title-section" display="flex" alignItems="center">
-          {props.headerIcon && <Icon id="input-box-icon" sx={{ color: headerText }}>{props.headerIcon}</Icon>}
-          {props.headerText && (
-            <Typography id="input-box-title" component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color={headerText}>
-              {props.headerText}
-            </Typography>
-          )}
-        </Box>
-        <Box id="input-box-actions">
-          {props.headerActionContent}
-        </Box>
-      </Box>
-      <CustomContextBox id="input-box-content">{props.children}</CustomContextBox>
-      <Stack id="input-box-buttons" direction="row" sx={{ marginTop: 1 }} spacing={1} justifyContent="end">
-        {buttons}
-      </Stack>
-    </Paper>
-  );
-}
+"use client";
+
+import React from "react";
+import { Paper, Box, Typography, Stack, Button, PaperProps } from "@mui/material";
+import { Icon } from "@mui/material";
+import { HelpIcon } from "./HelpIcon";
+import { Locale } from "../helpers";
+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;
+  help?: string;
+  saveText?: string;
+  deleteText?: string;
+  cancelText?: string;
+  headerActionContent?: React.ReactNode;
+  cancelFunction?: () => void;
+  deleteFunction?: () => void;
+  saveFunction?: () => void;
+  "data-testid"?: string;
+  className?: string;
+  isSubmitting?: boolean;
+  ariaLabelDelete?: string;
+  ariaLabelSave?: string;
+  saveButtonType?: "submit" | "button";
+  mainContainerCssProps?: PaperProps;
+}
+
+const CustomContextBox = styled(Box)({
+  name: "InputBox",
+  slot: "root",
+  marginTop: 10,
+  overflowX: "hidden",
+  "& p": { color: "#666" },
+  "& label": { color: "#999" },
+  "& ul": { paddingLeft: 15 },
+  "& li": {
+    marginBottom: 10,
+    "& i": { marginRight: 5 }
+  },
+  "& td": {
+    "& i": { marginRight: 5 }
+  }
+})
+
+
+export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
+  const theme = useTheme();
+  const headerText = theme?.palette?.InputBox?.headerText ? theme?.palette?.InputBox?.headerText : "primary";
+
+  let buttons = [];
+  if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>{props.cancelText || Locale.label("common.cancel")}</Button>);
+  if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>{props.deleteText || Locale.label("common.delete")}</Button>);
+  if (props.saveFunction) buttons.push(<Button key="save" type={props.saveButtonType || "button"} variant="contained" disableElevation aria-label={props.ariaLabelSave} onClick={props.saveFunction} disabled={props.isSubmitting} sx={{ "&:focus": { outline: "none" } }}>{props.saveText || Locale.label("common.save")}</Button>);
+
+  let classNames = ["inputBox"];
+  if (props.className) {
+    classNames.push(props.className);
+  }
+
+  return (
+    <Paper id={props.id || "input-box"} sx={{ padding: 2, marginBottom: 4 }} data-testid={props["data-testid"]} {...mainContainerCssProps}>
+      {props.help && <HelpIcon article={props.help} />}
+      <Box id="input-box-header" sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }} data-testid="input-box-header">
+        <Box id="input-box-title-section" display="flex" alignItems="center">
+          {props.headerIcon && <Icon id="input-box-icon" sx={{ color: headerText }}>{props.headerIcon}</Icon>}
+          {props.headerText && (
+            <Typography id="input-box-title" component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color={headerText}>
+              {props.headerText}
+            </Typography>
+          )}
+        </Box>
+        <Box id="input-box-actions">
+          {props.headerActionContent}
+        </Box>
+      </Box>
+      <CustomContextBox id="input-box-content">{props.children}</CustomContextBox>
+      <Stack id="input-box-buttons" direction="row" sx={{ marginTop: 1 }} spacing={1} justifyContent="end">
+        {buttons}
+      </Stack>
+    </Paper>
+  );
+}

package/src/components/Loading.tsx

@@ -1,77 +1,31 @@
-"use client";
-
-import React from "react";
-import { Dots } from "react-activity";
-
-// Inline CSS for react-activity to avoid external dependencies
-const activityStyles = `
-  .activity-loader {
-    position: relative;
-    display: inline-block;
-  }
-  .activity-dots {
-    position: relative;
-    display: inline-block;
-  }
-  .activity-dots > div {
-    position: absolute;
-    border-radius: 50%;
-    animation: activity-dots 1.2s infinite ease-in-out;
-    animation-fill-mode: both;
-  }
-  .activity-dots > div:nth-child(1) { animation-delay: -1.1s; }
-  .activity-dots > div:nth-child(2) { animation-delay: -1.0s; }
-  .activity-dots > div:nth-child(3) { animation-delay: -0.9s; }
-  .activity-dots > div:nth-child(4) { animation-delay: -0.8s; }
-  .activity-dots > div:nth-child(5) { animation-delay: -0.7s; }
-  .activity-dots > div:nth-child(6) { animation-delay: -0.6s; }
-  .activity-dots > div:nth-child(7) { animation-delay: -0.5s; }
-  .activity-dots > div:nth-child(8) { animation-delay: -0.4s; }
-  .activity-dots > div:nth-child(9) { animation-delay: -0.3s; }
-  .activity-dots > div:nth-child(10) { animation-delay: -0.2s; }
-  .activity-dots > div:nth-child(11) { animation-delay: -0.1s; }
-  .activity-dots > div:nth-child(12) { animation-delay: 0s; }
-
-  @keyframes activity-dots {
-    0%, 80%, 100% {
-      transform: scale(0);
-    }
-    40% {
-      transform: scale(1);
-    }
-  }
-`;
-
-// Add styles to document head if not already present
-if (typeof document !== 'undefined' && !document.getElementById('activity-styles')) {
-  const style = document.createElement('style');
-  style.id = 'activity-styles';
-  style.textContent = activityStyles;
-  document.head.appendChild(style);
-}
-
-interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
-
-export const Loading: React.FC<Props> = (props) => {
-
-  const getContents = () => {
-    const text = (props.loadingText) ? props.loadingText : "Loading"
-    const color = (props.color) ? props.color : "#222"
-    let result = <><Dots speed={0.8} animating={true} size={32} color={color} /><p style={{ color: color }}>{text}</p></>
-    switch (props.size) {
-      case "sm":
-        result = <><Dots speed={0.8} animating={true} size={20} color={color} /><p style={{ fontSize: 12, color: color }}>{text}</p></>
-        break;
-      case "lg":
-        result = <><Dots speed={0.8} animating={true} size={48} color={color} /><p style={{ fontSize: 30, color: color }}>{text}</p></>
-        break;
-    }
-    return result;
-  }
-
-  return (
-    <div id="loading-component" style={{ textAlign: "center", fontFamily: "Roboto" }}>
-      {getContents()}
-    </div>
-  )
-}
+"use client";
+
+import React from "react";
+import { Dots } from "react-activity";
+import "react-activity/dist/Dots.css";
+
+interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
+
+export const Loading: React.FC<Props> = (props) => {
+
+  const getContents = () => {
+    const text = (props.loadingText) ? props.loadingText : "Loading"
+    const color = (props.color) ? props.color : "#222"
+    let result = <><Dots speed={0.8} animating={true} size={32} color={color} /><p style={{ color: color }}>{text}</p></>
+    switch (props.size) {
+      case "sm":
+        result = <><Dots speed={0.8} animating={true} size={20} color={color} /><p style={{ fontSize: 12, color: color }}>{text}</p></>
+        break;
+      case "lg":
+        result = <><Dots speed={0.8} animating={true} size={48} color={color} /><p style={{ fontSize: 30, color: color }}>{text}</p></>
+        break;
+    }
+    return result;
+  }
+
+  return (
+    <div id="loading-component" style={{ textAlign: "center", fontFamily: "Roboto" }}>
+      {getContents()}
+    </div>
+  )
+}