forstok-ui-lib 8.6.3 → 8.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "8.6.3",
+  "version": "8.7.1",
   "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/assets/stylesheets/bases.styles.ts

@@ -1,24 +1,24 @@
-import { css } from 'styled-components'
+import { css } from "styled-components";
 
-import IconEditWhite from '../../assets/images/icons/edit-white.svg'
-import IconLoadingRed from '../../assets/images/icons/loading-red.svg'
+import IconEditWhite from "../../assets/images/icons/edit-white.svg";
+import IconLoadingRed from "../../assets/images/icons/loading-red.svg";
 
 export const clearList = css`
   list-style: none;
   padding: 0;
   margin: 0;
-`
-export const responseWidth = css `
+`;
+export const responseWidth = css`
   width: 100%;
-`
-export const elipsis = css `
+`;
+export const elipsis = css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
   max-width: 100%;
   width: auto;
-`
+`;
 export const multiElipsis = css`
   display: -webkit-box !important;
   -webkit-line-clamp: 2;
@@ -28,7 +28,7 @@ export const multiElipsis = css`
   overflow-wrap: anywhere;
   word-break: break-all;
   line-height: 16px;
-`
+`;
 export const thirdElipsis = css`
   display: -webkit-box !important;
   -webkit-line-clamp: 3 !important;
@@ -38,46 +38,55 @@ export const thirdElipsis = css`
   overflow-wrap: anywhere !important;
   word-break: break-word !important;
   line-height: 16px;
-`
+`;
 export const dropBase = css`
   background-color: var(--sec-clr-bg);
   border: 1px solid var(--sec-clr-ln);
   box-shadow: var(--sec-shd-bx);
   border-radius: var(--sec-rd);
-`
+`;
 export const headTable = css`
   font-size: 12px;
   font-weight: 600;
   text-transform: capitalize;
-`
+`;
 export const formLabel = css`
   color: var(--hd-clr);
   font-weight: 600;
   font-size: 13px;
   text-transform: capitalize;
-`
+`;
 export const buttonStyle = css`
   border: none;
-  border-radius: .5rem;
-  box-shadow: 0rem -.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .1) inset, 0rem .03125rem 0rem .09375rem #FFF inset;
+  border-radius: 0.5rem;
+  box-shadow:
+    0rem -0.0625rem 0rem 0rem #b5b5b5 inset,
+    0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.1) inset,
+    0rem 0.03125rem 0rem 0.09375rem #fff inset;
   color: rgba(74, 74, 74, 1);
   cursor: pointer;
   user-select: none;
   touch-action: manipulation;
-  background-color: #ffffff; 
-`
+  background-color: #ffffff;
+`;
 export const buttonHoverStyle = css`
   color: rgba(48, 48, 48, 1);
   background-color: rgba(250, 250, 250, 1);
-`
+`;
 export const buttonActiveStyle = css`
   color: rgba(48, 48, 48, 1);
   background: rgba(247, 247, 247, 1);
-  box-shadow: -.0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, .0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem .125rem .0625rem 0rem rgba(26, 26, 26, .2) inset;
-`
+  box-shadow:
+    -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,
+    0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,
+    0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset;
+`;
 export const buttonActiveShadowStyle = css`
-  box-shadow: -.0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, .0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem .125rem .0625rem 0rem rgba(26, 26, 26, .2) inset;
-`
+  box-shadow:
+    -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,
+    0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,
+    0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset;
+`;
 export const commonCSSLists = css`
   .table-image-figure {
     display: block;
@@ -89,7 +98,9 @@ export const commonCSSLists = css`
     border: 1px solid var(--pri-clr-ln);
     background-color: var(--pri-clr-bg);
     border-radius: var(--ter-rd);
-    &.edit, &.add, &.loading {
+    &.edit,
+    &.add,
+    &.loading {
       width: 70px;
       height: 70px;
       cursor: pointer;
@@ -113,10 +124,10 @@ export const commonCSSLists = css`
       }
     }
     &.edit {
-      border: 1px solid rgba(0, 0, 0, .04);
+      border: 1px solid rgba(0, 0, 0, 0.04);
       &:hover {
         position: relative;
-        span { 
+        span {
           width: 100%;
           height: 100%;
           position: absolute;
@@ -125,7 +136,7 @@ export const commonCSSLists = css`
           z-index: 1;
           background-color: var(--ov-clr-bg);
         }
-        &::after { 
+        &::after {
           content: url(${IconEditWhite});
           height: 14px;
           width: 14px;
@@ -140,9 +151,9 @@ export const commonCSSLists = css`
       }
     }
     &.loading {
-      border: 1px solid rgba(0, 0, 0, .04);
+      border: 1px solid rgba(0, 0, 0, 0.04);
       cursor: default;
-      &::after { 
+      &::after {
         content: url(${IconLoadingRed});
         height: 14px;
         width: 14px;
@@ -163,19 +174,7 @@ export const commonCSSLists = css`
     }
   }
   .remove {
-    font-style: normal;
-    position: absolute;
     top: -6px;
     right: -6px;
-    background: #000;
-    color: var(--sec-clr);
-    border-radius: 50%;
-    width: 14px;
-    height: 14px;
-    padding: 3px 5px;
-    font-weight: 600;
-    font-size: 7px;
-    z-index: 1;
-    cursor: pointer;
   }
-`
+`;

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-button 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;