@majapisoftwares/ui 4.1.7 → 4.1.8

package/components/FileInput/FileInput.d.ts

@@ -47,4 +47,5 @@ declare function FileInput<PFP extends object>({ error, className, helpText, onC
     previewFileProps?: PFP;
 }): import("react").JSX.Element;
 export type FileInputProps = ComponentPropsWithRef<typeof FileInput>;
-export default FileInput;
+declare const _default: typeof FileInput;
+export default _default;

package/components/FileInput/FileInput.jsx

@@ -1,12 +1,12 @@
 import clsx from "../../utils/clsx";
-import { useCallback, useEffect, useRef, useState, } from "react";
-import { useDeepCompareEffect, useUpdateEffect } from "react-use";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useDeepCompareEffect } from "react-use";
 import { defaultHelpTextClassName, defaultLabelClassName, } from "../Input";
 import FileSelect from "../FileSelect";
 import isomorphicObjectId from "@majapisoftwares/next/utils/isomorphicObjectId";
 import { isEqual } from "lodash-es";
 import Text from "../Text";
-import { PreviewFile } from "./PreviewFile";
+import PreviewFile from "./PreviewFile";
 import concurrentForOf from "@majapisoftwares/next/utils/concurrentForOf";
 import paginated from "@majapisoftwares/next/utils/paginated";
 import Pagination from "../Pagination";
@@ -14,7 +14,7 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
     const [uploading, setUploading] = useState(false);
     const [innerValue, setInnerValue] = useState(value || []);
     const [currentPage, setCurrentPage] = useState(1);
-    const PreviewFileComponent = previewFileComponent || PreviewFile;
+    const PreviewFileComponent = useMemo(() => memo(previewFileComponent || PreviewFile, isEqual), [previewFileComponent]);
     const paginatedValue = paginated(innerValue, currentPage - 1, filesPerPage);
     useEffect(() => {
         const totalPages = Math.ceil(innerValue.length / filesPerPage);
@@ -26,7 +26,7 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
         if (value && !isEqual(value, innerValue)) {
             setInnerValue(value);
         }
-    }, [{ value: value }]);
+    }, [{ value }]);
     const innerRef = useRef({
         get value() {
             return innerValue;
@@ -98,16 +98,17 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
             setUploading(false);
         }
     };
-    useUpdateEffect(() => {
+    useDeepCompareEffect(() => {
         if (onChange) {
             onChange({
                 target: {
                     name,
                     value: innerValue.map((file) => ({
                         ...file,
-                        url: file.file
-                            ? URL.createObjectURL(file.file)
-                            : file.url,
+                        url: file.url ||
+                            (file.file
+                                ? URL.createObjectURL(file.file)
+                                : undefined),
                     })),
                 },
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -141,4 +142,4 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
         </div>)}
     </div>);
 }
-export default FileInput;
+export default memo(FileInput, isEqual);

package/components/FileInput/PreviewFile.d.ts

@@ -13,4 +13,6 @@ export type PreviewFileProps = {
     filesPerPage: number;
     currentPage: number;
 };
-export declare function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display, additionalInfo, index, className, filesPerPage, currentPage, }: PreviewFileProps): import("react").JSX.Element;
+declare function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display, additionalInfo, index, className, filesPerPage, currentPage, }: PreviewFileProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof PreviewFile>;
+export default _default;

package/components/FileInput/PreviewFile.jsx

@@ -5,13 +5,21 @@ import Text from "../Text";
 import numeral from "numeral";
 import Button from "../Button";
 import { ArrowTopRightOnSquareIcon, TrashIcon, } from "@heroicons/react/20/solid";
+import { memo } from "react";
 import clsx from "../../utils/clsx";
 import checkIsVideo from "./isVideo";
 import checkIsImage from "./isImage";
-export function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display = "info", additionalInfo, index, className, filesPerPage, currentPage, }) {
-    const url = file.file
-        ? URL.createObjectURL(file.file)
-        : file.url;
+import { isEqual } from "lodash-es";
+function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display = "info", additionalInfo, index, className, filesPerPage, currentPage, }) {
+    const url = file.url ||
+        (file.file
+            ? URL.createObjectURL(file.file)
+            : undefined);
+    if (!url) {
+        return (<div className={clsx("p-4 text-red-500", className)}>
+        Error: No URL or file provided for preview.
+      </div>);
+    }
     const isVideo = file.type?.startsWith("video") || checkIsVideo(url);
     const isImage = file.type?.startsWith("image") || checkIsImage(url);
     if (display === "preview" && !isVideo && !isImage) {
@@ -52,3 +60,4 @@ export function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, o
         </Button>)}
     </div>);
 }
+export default memo(PreviewFile, isEqual);

package/package.json

@@ -4,6 +4,6 @@
     "type": "git",
     "url": "https://github.com/majapisoftwares/ui.git"
   },
-  "version": "4.1.7",
+  "version": "4.1.8",
   "type": "module"
 }