forstok-ui-lib 8.6.2 → 8.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "8.6.2",
+  "version": "8.7.0",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/javascripts/function.ts

@@ -1130,3 +1130,142 @@ export const evCheckAllValidationByHeaderWithVariant = (
   }
   return { error: isError, data: _newData };
 };
+
+export const getFileType = (file?: File | null): string => {
+  if (!file) return "";
+
+  const mimeType = (file.type || "").toLowerCase();
+  const fileName = file.name.toLowerCase();
+  const extension = fileName.includes(".")
+    ? fileName.split(".").pop() || ""
+    : "";
+
+  if (mimeType.includes("image/")) return "image";
+  if (mimeType.includes("video/")) return "video";
+  if (mimeType.includes("audio/")) return "audio";
+  if (mimeType.includes("application/pdf")) return "pdf";
+  if (mimeType.includes("text/csv")) return "csv";
+  if (mimeType.includes("text/plain")) return "text";
+  if (mimeType.includes("text/html")) return "html";
+  if (mimeType.includes("text/xml") || mimeType.includes("application/xml"))
+    return "xml";
+  if (mimeType.includes("application/json") || mimeType.includes("text/json"))
+    return "json";
+  if (
+    mimeType.includes("application/zip") ||
+    mimeType.includes("application/x-zip-compressed")
+  )
+    return "zip";
+  if (
+    mimeType.includes("application/x-rar") ||
+    mimeType.includes("application/vnd.rar")
+  )
+    return "rar";
+  if (mimeType.includes("application/x-7z-compressed")) return "7z";
+  if (mimeType.includes("application/x-tar")) return "tar";
+  if (
+    mimeType.includes("application/gzip") ||
+    mimeType.includes("application/x-gzip")
+  )
+    return "gzip";
+
+  if (
+    mimeType.includes("application/vnd.ms-excel") ||
+    mimeType.includes(
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ) ||
+    mimeType.includes("application/vnd.oasis.opendocument.spreadsheet")
+  ) {
+    return "sheet";
+  }
+
+  if (
+    mimeType.includes("application/msword") ||
+    mimeType.includes(
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    ) ||
+    mimeType.includes("application/vnd.oasis.opendocument.text") ||
+    mimeType.includes("application/rtf")
+  ) {
+    return "word";
+  }
+
+  if (
+    mimeType.includes("application/vnd.ms-powerpoint") ||
+    mimeType.includes(
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    ) ||
+    mimeType.includes("application/vnd.oasis.opendocument.presentation")
+  ) {
+    return "powerpoint";
+  }
+
+  if (mimeType.includes("application/epub+zip")) return "epub";
+
+  switch (extension) {
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "webp":
+    case "bmp":
+    case "svg":
+    case "heic":
+    case "heif":
+      return "image";
+    case "mp4":
+    case "mov":
+    case "avi":
+    case "mkv":
+    case "webm":
+    case "m4v":
+      return "video";
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "m4a":
+    case "aac":
+    case "flac":
+      return "audio";
+    case "pdf":
+      return "pdf";
+    case "csv":
+      return "csv";
+    case "txt":
+      return "text";
+    case "html":
+    case "htm":
+      return "html";
+    case "xml":
+      return "xml";
+    case "json":
+      return "json";
+    case "xls":
+    case "xlsx":
+    case "ods":
+      return "sheet";
+    case "doc":
+    case "docx":
+    case "odt":
+    case "rtf":
+      return "word";
+    case "ppt":
+    case "pptx":
+    case "odp":
+      return "powerpoint";
+    case "zip":
+      return "zip";
+    case "rar":
+      return "rar";
+    case "7z":
+      return "7z";
+    case "tar":
+      return "tar";
+    case "gz":
+      return "gzip";
+    case "epub":
+      return "epub";
+    default:
+      return mimeType.includes("application/") ? "document" : "";
+  }
+};

package/src/components/icon/styles.ts

@@ -8,6 +8,7 @@ import IconArrowLeftBlue from "../../assets/images/icons/arrow-left-blue.svg";
 import IconWarning from "../../assets/images/icons/warning.svg";
 import IconAlert from "../../assets/images/icons/alert.svg";
 import IconArrowUpload from "../../assets/images/icons/arrow-upload.svg";
+import IconArrowDownload from "../../assets/images/icons/arrow-download.svg";
 import IconTrash from "../../assets/images/icons/trash.svg";
 import IconArrowLeft from "../../assets/images/icons/arrow-left.svg";
 import IconArrowLeftDouble from "../../assets/images/icons/arrow-left-double.svg";
@@ -141,6 +142,7 @@ const iconStyles = {
   alert: IconAlert,
   barcode: IconBarcode,
   "arrow-upload": IconArrowUpload,
+  "arrow-download": IconArrowDownload,
   trash: IconTrash,
   "arrow-left": IconArrowLeft,
   "arrow-left-double": IconArrowLeftDouble,

package/src/components/icon/typed.ts

@@ -20,6 +20,7 @@ export type IconName =
   | "alert"
   | "barcode"
   | "arrow-upload"
+  | "arrow-download"
   | "trash"
   | "arrow-left"
   | "arrow-left-double"

package/src/components/upload/drag.drop.tsx

@@ -1,44 +1,101 @@
-import { type InputHTMLAttributes, type ReactNode, useState } from 'react';
-import { generateMessage } from '../../assets/javascripts/function';
-import { UploadDragDropContainer, UploadDragDropFileHelper, UploadDragDropFileContainer, UploadInput, UploadDragDropLabel, UploadDragDropFileName, UploadDragDropFileNamePlaceholder, UploadDragDropIcon } from './styles';
-import type { TChangeEvent, TDragEvent } from '../../typeds/base.typed';
-import type { TMessageFunction } from '../message/typed';
+import {
+  type InputHTMLAttributes,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  UploadDragDropContainer,
+  UploadDragDropFileHelper,
+  UploadDragDropFileContainer,
+  UploadDragDropFilePreviewCard,
+  UploadDragDropImagePreview,
+  UploadInput,
+  UploadDragDropLabel,
+  UploadDragDropFileName,
+  UploadDragDropFileNamePlaceholder,
+  UploadDragDropIcon,
+} from "./styles";
+import {
+  generateMessage,
+  getFileType,
+} from "../../assets/javascripts/function";
+import type { TMessageFunction } from "../message/typed";
+import type { TChangeEvent, TDragEvent, TMouseEvent } from "../../typeds";
 
 type TUpload = InputHTMLAttributes<HTMLInputElement> & {
-  children?: ReactNode
-  evChange?: (arg0: FileList) => void
-  evCreateMessage?: TMessageFunction
-  label?: string
-}
+  children?: ReactNode;
+  evChange?: (arg0: FileList) => void;
+  evCreateMessage?: TMessageFunction;
+  label?: string;
+  subLabel?: string;
+  defaultValue?: string;
+  isValidFile?: boolean;
+  type?: string;
+  evRemove?: TMouseEvent;
+};
 
-const UploadDragDropComponent = ({ children, id, name, evChange, evCreateMessage, label, ...props }: TUpload) => {
+type TFilePreview = {
+  fileSrc: string;
+  fileType: string;
+  previewKind: "image" | "file";
+  fileLabel: string;
+};
+
+const UploadDragDropComponent = ({
+  children,
+  id,
+  name,
+  evChange,
+  evCreateMessage,
+  label,
+  subLabel,
+  type,
+  defaultValue,
+  isValidFile = true,
+  evRemove,
+  ...props
+}: TUpload) => {
   const { accept } = props;
 
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [valueFile, setValueFile] = useState<FileList>();
   const [dragActive, setDragActive] = useState<boolean>(false);
+  const [filePreview, setFilePreview] = useState<TFilePreview>({
+    fileSrc: "",
+    fileType: "",
+    previewKind: "file",
+    fileLabel: "",
+  });
 
-  const handleDrag: TDragEvent = e => {
+  const handleDrag: TDragEvent = (e) => {
     e.preventDefault();
     e.stopPropagation();
     if (e.type === "dragenter" || e.type === "dragover") {
       setDragActive(true);
-    }
-    else if (e.type === "dragleave") {
+    } else if (e.type === "dragleave") {
       setDragActive(false);
     }
-  }
+  };
 
-  const handleDrop: TDragEvent = e => {
+  const handleDrop: TDragEvent = (e) => {
     e.preventDefault();
     e.stopPropagation();
     setDragActive(false);
     if (e.dataTransfer.files[0]) {
-      const acceptedFormat = accept ? accept.split(',').map(_accept => _accept.trim().replace('.', '')) : null;
-      for (let x= 0; x < e.dataTransfer.files.length; x++) {
+      const acceptedFormat = accept
+        ? accept.split(",").map((_accept) => _accept.trim().replace(".", ""))
+        : null;
+      for (let x = 0; x < e.dataTransfer.files.length; x++) {
         const curFile = e.dataTransfer.files[x];
-        const curFormat = curFile.name.split('.').pop();
+        const curFormat = curFile.name.split(".").pop();
         if (acceptedFormat?.length && curFormat) {
           if (!acceptedFormat.includes(curFormat)) {
-            const _failed_props = generateMessage('failed', 'File type is not allowed. Please check again');
+            const _failed_props = generateMessage(
+              "failed",
+              "File type is not allowed. Please check again",
+            );
             evCreateMessage && evCreateMessage(_failed_props);
             return false;
           }
@@ -46,41 +103,219 @@ const UploadDragDropComponent = ({ children, id, name, evChange, evCreateMessage
       }
       evChange && evChange(e.dataTransfer.files);
     }
-  }
+  };
 
-  const handleChange: TChangeEvent = e => {
+  const handleChange: TChangeEvent = (e) => {
     e.preventDefault();
     const target = e.target as HTMLInputElement;
     if (target.files && target.files[0]) {
       evChange && evChange(target.files);
+      setValueFile(target.files);
+    }
+  };
+
+  const handleRemove: TMouseEvent = (e) => {
+    e.preventDefault();
+    setValueFile(undefined);
+    setFilePreview({
+      fileSrc: "",
+      fileType: "",
+      previewKind: "file",
+      fileLabel: "",
+    });
+    if (inputRef.current) {
+      inputRef.current.value = "";
     }
-  }
+    evRemove?.(e);
+  };
+
+  useEffect(() => {
+    let activeObjectUrl = "";
+    let isMounted = true;
+
+    const evGenerateThumbVideo = (videoFile: File): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        const video = document.createElement("video");
+        const source = document.createElement("source");
+        const objectUrl = URL.createObjectURL(videoFile);
+
+        source.src = objectUrl;
+        source.type = videoFile.type;
+        activeObjectUrl = objectUrl;
+
+        video.appendChild(source);
+        video.muted = true;
+        video.playsInline = true;
+        video.preload = "metadata";
+
+        video.onloadedmetadata = () => {
+          const canvas = document.createElement("canvas");
+          canvas.width = video.videoWidth || 720;
+          canvas.height = video.videoHeight || 122;
+
+          video.currentTime = Math.min(0.1, video.duration || 0);
+
+          video.onseeked = () => {
+            const ctx = canvas.getContext("2d");
+            if (!ctx) {
+              reject(new Error("Canvas context is not available"));
+              return;
+            }
+
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            resolve(canvas.toDataURL("image/jpeg"));
+          };
+        };
+
+        video.onerror = () => {
+          reject(new Error("Failed to load video"));
+        };
+
+        video.load();
+      });
+    };
+
+    const evProcessFile = async () => {
+      let nextPreview: TFilePreview = {
+        fileSrc: "",
+        fileType: "",
+        previewKind: "file",
+        fileLabel: "",
+      };
+
+      if (!isValidFile) {
+        if (isMounted) {
+          setFilePreview(nextPreview);
+        }
+        return;
+      }
+
+      if (valueFile && valueFile.length) {
+        const currentFile = valueFile[0];
+        const currentFileType = getFileType(currentFile) || "document";
+
+        nextPreview = {
+          fileSrc: currentFile.name,
+          fileType: currentFileType,
+          previewKind: "file",
+          fileLabel: currentFile.name,
+        };
+
+        if (currentFileType === "image") {
+          activeObjectUrl = URL.createObjectURL(currentFile);
+          nextPreview = {
+            fileSrc: activeObjectUrl,
+            fileType: currentFileType,
+            previewKind: "image",
+            fileLabel: currentFile.name,
+          };
+        } else if (currentFileType === "video") {
+          try {
+            const thumbSrc = await evGenerateThumbVideo(currentFile);
+            nextPreview = {
+              fileSrc: thumbSrc,
+              fileType: currentFileType,
+              previewKind: "image",
+              fileLabel: currentFile.name,
+            };
+          } catch {
+            nextPreview = {
+              fileSrc: currentFile.name,
+              fileType: currentFileType,
+              previewKind: "file",
+              fileLabel: currentFile.name,
+            };
+          }
+        }
+      } else if (defaultValue) {
+        nextPreview = {
+          fileSrc: defaultValue,
+          fileType: type ?? "image",
+          previewKind: (type ?? "image") === "image" ? "image" : "file",
+          fileLabel: defaultValue.split("/").pop() || defaultValue,
+        };
+      }
+
+      if (isMounted) {
+        setFilePreview(nextPreview);
+      }
+    };
+
+    void evProcessFile();
+
+    return () => {
+      isMounted = false;
+      if (activeObjectUrl) {
+        URL.revokeObjectURL(activeObjectUrl);
+      }
+    };
+  }, [defaultValue, isValidFile, type, valueFile]);
+
+  const { fileSrc, fileType, previewKind, fileLabel } = filePreview;
 
   return (
-    <UploadDragDropContainer onDragEnter={handleDrag} className={dragActive ? "drag-active" : "" }>
-      <UploadInput id={id} name={name} onChange={handleChange} {...props} />
+    <UploadDragDropContainer
+      onDragEnter={handleDrag}
+      className={dragActive ? "drag-active" : ""}
+    >
+      <UploadInput
+        ref={inputRef}
+        id={id}
+        name={name}
+        onChange={handleChange}
+        {...props}
+      />
       <UploadDragDropLabel id="label-file-dragdrop-upload" htmlFor={id}>
         <UploadDragDropFileContainer>
-          {
-            children ? (
-              <UploadDragDropFileName>
-                <UploadDragDropIcon />
-                <span>
-                  {children}
-                </span>
-              </UploadDragDropFileName>
-            ) : 
-            (
-              <UploadDragDropFileNamePlaceholder>
-                {label ?? 'Drag & Drop file here to upload, or '}<span>browse</span>.
-              </UploadDragDropFileNamePlaceholder>
-            )
-          }
+          {fileSrc ? (
+            <UploadDragDropImagePreview>
+              <UploadDragDropFilePreviewCard
+                $backgroundSrc={previewKind === "image" ? fileSrc : undefined}
+              >
+                <span className="file-type">{fileType || "document"}</span>
+                <span className="file-name">{fileLabel}</span>
+              </UploadDragDropFilePreviewCard>
+              {evRemove !== undefined && (
+                <i
+                  className="remove"
+                  onClick={handleRemove}
+                  title="Remove File"
+                >
+                  X
+                </i>
+              )}
+            </UploadDragDropImagePreview>
+          ) : children ? (
+            <UploadDragDropFileName>
+              <UploadDragDropIcon />
+              <span>{children}</span>
+            </UploadDragDropFileName>
+          ) : (
+            <UploadDragDropFileNamePlaceholder>
+              <span>
+                {label ?? "Drag & Drop file here to upload, or "}
+                <aside>browse</aside>
+              </span>
+              {subLabel && (
+                <>
+                  <br />
+                  <span className="_refSubLabel">{subLabel}</span>
+                </>
+              )}
+            </UploadDragDropFileNamePlaceholder>
+          )}
         </UploadDragDropFileContainer>
       </UploadDragDropLabel>
-      { dragActive && <UploadDragDropFileHelper onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop} /> }
+      {dragActive && (
+        <UploadDragDropFileHelper
+          onDragEnter={handleDrag}
+          onDragLeave={handleDrag}
+          onDragOver={handleDrag}
+          onDrop={handleDrop}
+        />
+      )}
     </UploadDragDropContainer>
-  )
-}
+  );
+};
 
-export default UploadDragDropComponent
+export default UploadDragDropComponent;