@majapisoftwares/ui 4.1.2 → 4.1.3

package/components/FileInput/FileInput.d.ts

@@ -1,6 +1,7 @@
-import { ComponentPropsWithRef, ReactNode } from "react";
+import { ComponentPropsWithRef, ComponentType, ReactNode } from "react";
 import { InputProps } from "../Input";
 import { FileSelectProps } from "../FileSelect";
+import { PreviewFileProps } from "./PreviewFile";
 export type FileFile = {
     _id: string;
     file: File;
@@ -18,7 +19,7 @@ export type FileUrl = {
     size: number;
 };
 export type FileInputFile = FileFile | FileUrl;
-declare function FileInput({ error, className, helpText, onChange, name, limit, label, id, required, onMouseOver, onMouseOut, readOnly, value, emptyText, downloadText, openText, fileDisplay, asyncUpload, onRejectFiles, loading, maxConcurrentUploads, fileAdditionalInfo, ref, fileSelectClassName, previewFileClassName, filesPerPage, ...props }: Pick<InputProps<false>, "error" | "className" | "helpText" | "name" | "label" | "id" | "required" | "onMouseOver" | "onMouseOut"> & Omit<FileSelectProps, "onAcceptFiles" | "onRejectFiles"> & {
+declare function FileInput({ error, className, helpText, onChange, name, limit, label, id, required, onMouseOver, onMouseOut, readOnly, value, emptyText, downloadText, openText, fileDisplay, asyncUpload, onRejectFiles, loading, maxConcurrentUploads, fileAdditionalInfo, ref, fileSelectClassName, previewFileClassName, filesPerPage, previewFileComponent, ...props }: Pick<InputProps<false>, "error" | "className" | "helpText" | "name" | "label" | "id" | "required" | "onMouseOver" | "onMouseOut"> & Omit<FileSelectProps, "onAcceptFiles" | "onRejectFiles"> & {
     readOnly?: boolean;
     value?: FileInputFile[];
     onChange?: (event: {
@@ -42,6 +43,7 @@ declare function FileInput({ error, className, helpText, onChange, name, limit,
     fileSelectClassName?: string;
     previewFileClassName?: string;
     filesPerPage?: number;
+    previewFileComponent?: ComponentType<PreviewFileProps>;
 }): import("react").JSX.Element;
 export type FileInputProps = ComponentPropsWithRef<typeof FileInput>;
 export default FileInput;

package/components/FileInput/FileInput.jsx

@@ -10,10 +10,11 @@ import { PreviewFile } from "./PreviewFile";
 import concurrentForOf from "@majapisoftwares/next/utils/concurrentForOf";
 import paginated from "@majapisoftwares/next/utils/paginated";
 import Pagination from "../Pagination";
-function FileInput({ error, className, helpText, onChange, name, limit, label, id, required, onMouseOver, onMouseOut, readOnly, value, emptyText = "No files", downloadText = "Download", openText = "Open", fileDisplay, asyncUpload, onRejectFiles, loading, maxConcurrentUploads = 1, fileAdditionalInfo, ref, fileSelectClassName, previewFileClassName, filesPerPage = 10, ...props }) {
+function FileInput({ error, className, helpText, onChange, name, limit, label, id, required, onMouseOver, onMouseOut, readOnly, value, emptyText = "No files", downloadText = "Download", openText = "Open", fileDisplay, asyncUpload, onRejectFiles, loading, maxConcurrentUploads = 1, fileAdditionalInfo, ref, fileSelectClassName, previewFileClassName, filesPerPage = 10, previewFileComponent, ...props }) {
     const [uploading, setUploading] = useState(false);
     const [innerValue, setInnerValue] = useState(value || []);
     const [currentPage, setCurrentPage] = useState(1);
+    const PreviewFileComponent = previewFileComponent || PreviewFile;
     const paginatedValue = paginated(innerValue, currentPage - 1, filesPerPage);
     useEffect(() => {
         const totalPages = Math.ceil(innerValue.length / filesPerPage);
@@ -130,7 +131,7 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
             "md:grid-cols-2": !!innerValue.length,
             "min-h-[140px]": !!innerValue.length || !readOnly,
         })}>
-        {paginatedValue.map((file, index) => (<PreviewFile key={index} file={file} readOnly={readOnly} handleDeleteClick={handleDeleteClick(file)} downloadText={downloadText} display={fileDisplay} openText={openText} additionalInfo={fileAdditionalInfo} index={index} className={previewFileClassName} filesPerPage={filesPerPage} currentPage={currentPage}/>))}
+        {paginatedValue.map((file, index) => (<PreviewFileComponent key={index} file={file} readOnly={readOnly} handleDeleteClick={handleDeleteClick(file)} downloadText={downloadText} display={fileDisplay} openText={openText} additionalInfo={fileAdditionalInfo} index={index} className={previewFileClassName} filesPerPage={filesPerPage} currentPage={currentPage}/>))}
         {innerValue.length > filesPerPage && (<Pagination className="col-span-2 mx-auto" currentPage={currentPage} totalItems={innerValue.length} onChangePage={setCurrentPage} itemsPerPage={filesPerPage}/>)}
         {readOnly && !innerValue.length && (<Text variant="secondary">{emptyText}</Text>)}
         {!readOnly && (!limit || innerValue.length < limit) && (<FileSelect {...props} className={fileSelectClassName} id={id} onAcceptFiles={handleAcceptFiles} limit={limit ? limit - innerValue.length : undefined} uploading={uploading} onRejectFiles={onRejectFiles} error={error}/>)}

package/components/FileInput/PreviewFile.d.ts

@@ -1,6 +1,6 @@
 import { FileInputFile } from "./FileInput";
 import { ReactNode } from "react";
-export declare function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display, additionalInfo, index, className, filesPerPage, currentPage, }: {
+export type PreviewFileProps = {
     file: FileInputFile;
     readOnly?: boolean;
     handleDeleteClick: () => void;
@@ -12,4 +12,5 @@ export declare function PreviewFile({ file, readOnly, handleDeleteClick, downloa
     className?: string;
     filesPerPage: number;
     currentPage: number;
-}): import("react").JSX.Element;
+};
+export declare function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display, additionalInfo, index, className, filesPerPage, currentPage, }: PreviewFileProps): import("react").JSX.Element;

package/components/FileInput/PreviewFile.jsx

@@ -6,16 +6,14 @@ import numeral from "numeral";
 import Button from "../Button";
 import { ArrowTopRightOnSquareIcon, TrashIcon, } from "@heroicons/react/20/solid";
 import clsx from "../../utils/clsx";
-const videoExtensions = [".mp4"];
-const imageExtensions = [".png", ".jpg", ".jpeg", ".webp"];
+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") ||
-        videoExtensions.some((e) => url.endsWith(e));
-    const isImage = file.type?.startsWith("image") ||
-        imageExtensions.some((e) => url.endsWith(e));
+    const isVideo = file.type?.startsWith("video") || checkIsVideo(url);
+    const isImage = file.type?.startsWith("image") || checkIsImage(url);
     if (display === "preview" && !isVideo && !isImage) {
         display = "info";
     }
@@ -47,7 +45,6 @@ export function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, o
             </Stack>
             {additionalInfo &&
                 additionalInfo(file, index + (currentPage - 1) * filesPerPage)}
-            {/*{additionalInfo && additionalInfo(file, index)}*/}
           </Stack>
         </Group>)}
       {!readOnly && (<Button icon variant="filled" color="default" className="absolute top-2 right-2 group-hover:opacity-100 sm:opacity-0" onClick={handleDeleteClick}>

package/components/FileInput/isImage.d.ts

@@ -0,0 +1 @@
+export default function isImage(file: File | string): boolean;

package/components/FileInput/isImage.js

@@ -0,0 +1,10 @@
+const imageExtensions = [".png", ".jpg", ".jpeg", ".webp"];
+export default function isImage(file) {
+    if (typeof file === "string") {
+        return imageExtensions.some((ext) => file.endsWith(ext));
+    }
+    if (file instanceof File) {
+        return imageExtensions.some((ext) => file.name.endsWith(ext));
+    }
+    return false;
+}

package/components/FileInput/isVideo.d.ts

@@ -0,0 +1 @@
+export default function isVideo(file: File | string): boolean;

package/components/FileInput/isVideo.js

@@ -0,0 +1,10 @@
+const videoExtensions = [".mp4"];
+export default function isVideo(file) {
+    if (typeof file === "string") {
+        return videoExtensions.some((ext) => file.endsWith(ext));
+    }
+    if (file instanceof File) {
+        return videoExtensions.some((ext) => file.name.endsWith(ext));
+    }
+    return false;
+}

package/package.json

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