@churchapps/apphelper 0.6.0 → 0.6.1

package/dist/components/wrapper/PrivateMessageDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrivateMessageDetails.d.ts","sourceRoot":"","sources":["../../../src/components/wrapper/PrivateMessageDetails.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAKpF,UAAU,KAAK;IACb,OAAO,EAAE,oBAAoB,CAAC;IAC9B,cAAc,EAAE,uBAAuB,CAAC;IACxC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiFjD,CAAC"}
+{"version":3,"file":"PrivateMessageDetails.d.ts","sourceRoot":"","sources":["../../../src/components/wrapper/PrivateMessageDetails.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAKpF,UAAU,KAAK;IACb,OAAO,EAAE,oBAAoB,CAAC;IAC9B,cAAc,EAAE,uBAAuB,CAAC;IACxC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgFjD,CAAC"}

package/dist/components/wrapper/PrivateMessageDetails.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Paper, Box, Typography, Stack, IconButton, useTheme } from "@mui/material";
+import { Paper, Box, Typography, Stack, IconButton } from "@mui/material";
 import { ArrowBack as ArrowBackIcon } from "@mui/icons-material";
 import { Notes } from "../notes/Notes";
 import { ApiHelper, Locale, NotificationService } from "../../helpers";
 import { PersonAvatar } from "../PersonAvatar";
 export const PrivateMessageDetails = (props) => {
-    const theme = useTheme();
     // Clear notification when conversation is opened
     React.useEffect(() => {
         const clearNotification = async () => {

package/dist/components/wrapper/PrivateMessageDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrivateMessageDetails.js","sourceRoot":"","sources":["../../../src/components/wrapper/PrivateMessageDetails.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PrivateMessageDetails.js","sourceRoot":"","sources":["../../../src/components/wrapper/PrivateMessageDetails.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@churchapps/apphelper",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Library of helper functions for React and NextJS ChurchApps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ImageEditor.tsx

@@ -1,167 +1,167 @@
-"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);
-  const timeoutRef = useRef<number | null>(null);
-
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current !== null) {
-        window.clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleSave = () => {
-    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();
-      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 (timeoutRef.current !== null) {
-      window.clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-
-    timeoutRef.current = 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);
-        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);
+  const timeoutRef = useRef<number | null>(null);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleSave = () => {
+    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();
+      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 (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    timeoutRef.current = 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);
+        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>
+  );
+}