@majapisoftwares/ui 4.1.7 → 4.1.9

package/components/FileInput/FileInput.d.ts

@@ -9,6 +9,7 @@ export type FileFile = {
     name: string;
     type: string;
     size: number;
+    url: string;
 };
 export type FileUrl = {
     _id: string;
@@ -47,4 +48,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;
@@ -63,6 +63,7 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
                     file,
                     type: file.type,
                     size: file.size,
+                    url: URL.createObjectURL(file),
                 })),
             ]);
         }
@@ -84,6 +85,7 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
                         file,
                         type: file.type,
                         size: file.size,
+                        url: URL.createObjectURL(file),
                     });
                     setInnerValue((value) => [...value, uploadedFile]);
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -98,17 +100,12 @@ 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,
-                    })),
+                    value: innerValue,
                 },
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             });
@@ -141,4 +138,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,23 +5,22 @@ 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;
-    const isVideo = file.type?.startsWith("video") || checkIsVideo(url);
-    const isImage = file.type?.startsWith("image") || checkIsImage(url);
+import { isEqual } from "lodash-es";
+function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display = "info", additionalInfo, index, className, filesPerPage, currentPage, }) {
+    const isVideo = file.type?.startsWith("video") || checkIsVideo(file.url);
+    const isImage = file.type?.startsWith("image") || checkIsImage(file.url);
     if (display === "preview" && !isVideo && !isImage) {
         display = "info";
     }
     return (<div className={clsx("group relative flex flex-wrap items-center justify-center rounded-md bg-zinc-200 dark:bg-zinc-800", className)}>
       {["preview", "both"].includes(display) &&
-            (isVideo ? (<video className="max-h-96 rounded-md" src={url} controls/>) : (
+            (isVideo ? (<video className="max-h-96 rounded-md" src={file.url} controls/>) : (
             // eslint-disable-next-line @next/next/no-img-element
-            <img src={url} alt={file.description} className="max-h-96 rounded-md"/>))}
+            <img src={file.url} alt={file.description} className="max-h-96 rounded-md"/>))}
       {["info", "both"].includes(display) && (<Group className="w-full items-center gap-0">
           {display === "info" && (<div className="m-2 mr-0 rounded-lg bg-zinc-300 p-2 dark:bg-zinc-800">
               <DocumentIcon className="h-5 w-5"/>
@@ -34,11 +33,11 @@ export function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, o
               {file.description && <div>{file.description}</div>}
               <Text size="sm">{file.type}</Text>
               {!!file.size && (<Text size="sm">{numeral(file.size).format("0b")}</Text>)}
-              {!url.startsWith("blob") && (<Group className="mr-auto">
-                  <Button leading={<ArrowTopRightOnSquareIcon />} href={url} target="_blank">
+              {!file.url.startsWith("blob") && (<Group className="mr-auto">
+                  <Button leading={<ArrowTopRightOnSquareIcon />} href={file.url} target="_blank">
                     {openText}
                   </Button>
-                  <Button leading={<ArrowDownTrayIcon />} href={url} download={file.name}>
+                  <Button leading={<ArrowDownTrayIcon />} href={file.url} download={file.name}>
                     {downloadText}
                   </Button>
                 </Group>)}
@@ -52,3 +51,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.9",
   "type": "module"
 }