@fctc/sme-widget-ui 2.9.6 → 2.9.7

package/dist/index.js

@@ -9995,7 +9995,8 @@ var vi_default = {
   "message-text-error": " kh\xF4ng \u0111\u01B0\u1EE3c v\u01B0\u1EE3t qu\xE1 {{max}} k\xFD t\u1EF1",
   upcase: ", {{count}} ch\u1EEF in hoa",
   digit: ", {{count}} s\u1ED1",
-  special: ", {{count}} k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t"
+  special: ", {{count}} k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t",
+  upload_files_accept: "Ch\u1EC9 ch\u1EA5p nh\u1EADn c\xE1c \u0111\u1ECBnh d\u1EA1ng JPEG, PNG, PDF, MP4, XLS, XLXS, ZIP"
 };
 
 // src/locales/en.json
@@ -10054,7 +10055,8 @@ var en_default = {
   "message-text-error": " must not exceed {{max}} characters",
   upcase: ", {{count}} uppercase letter",
   digit: ", {{count}} digit",
-  special: ", {{count}} special character"
+  special: ", {{count}} special character",
+  upload_files_accept: "Only JPEG, PNG, PDF, MP4, XLS, XLXS, ZIP, JSON formats are allowed"
 };
 
 // src/utils/i18n.ts
@@ -16664,7 +16666,7 @@ var ButtonSelectFiles = ({
   isText
 }) => {
   const { t: t3 } = useI18n();
-  const ALLOWED_TYPES = [
+  const ALLOWED_TYPES2 = [
     "image/jpeg",
     "image/png",
     "application/pdf",
@@ -16681,7 +16683,7 @@ var ButtonSelectFiles = ({
   const { mutate, isPending } = isBinary ? useUploadFile() : useUploadImage();
   const dataUser = user?.userProfile?.data;
   const validateFile = (file) => {
-    if (!ALLOWED_TYPES.includes(file.type)) {
+    if (!ALLOWED_TYPES2.includes(file.type)) {
       setUploadError(t3("file_accept_single"));
       return false;
     }
@@ -16896,123 +16898,115 @@ var AvatarField = (props) => {
 // src/widgets/basic/binary-field/binary.tsx
 var import_react39 = require("react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
+var ALLOWED_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "application/pdf",
+  "video/mp4",
+  "application/zip",
+  "application/x-zip-compressed",
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/json"
+];
 var BinaryField = (props) => {
   const {
+    value,
     name,
-    methods,
-    readonly = false,
-    placeholder,
-    required = false,
-    invisible = false,
-    filename,
-    formValues,
     isEditTable,
     widget,
-    string,
-    value,
-    // from hook
+    readonly,
     placeHolderImage,
-    inputId,
-    initialFile,
-    binaryRef,
-    handleFileChange,
-    handleRemoveFile,
-    checkIsImageLink: checkIsImageLink2,
+    placeholder,
+    required,
+    invisible,
+    methods,
+    string,
+    isForm,
     onDownload,
-    setInitialFile
+    onUploadFile,
+    onDeleteFile,
+    url,
+    fileInfor
   } = props;
   const { t: t3 } = useI18n();
-  const [fileInfo, setFileInfo] = (0, import_react39.useState)(null);
+  const [loading, setLoading] = (0, import_react39.useState)(false);
+  const hasFetchedMeta = (0, import_react39.useRef)(false);
   const onlyImage = widget === "image" || widget === "image_url";
-  (0, import_react39.useEffect)(() => {
-    setInitialFile(value);
-  }, [value]);
-  (0, import_react39.useEffect)(() => {
-    const loadFromLink = async () => {
-      if (!initialFile || !initialFile.startsWith("http")) return;
-      if (typeof initialFile !== "string") {
-        setFileInfo(initialFile);
-        return;
-      }
-      try {
-        let type = "application/octet-stream";
-        let size4 = 0;
-        let name2 = formValues?.[filename ?? ""] || initialFile.split("/").pop() || "unknown_file";
-        if (checkIsImageLink2(initialFile) || onlyImage) {
-          type = "image/*";
-        } else {
-          const response = await fetch(initialFile);
-          console.log("responsessss", response);
-          const responseBlob = await response.blob();
-          if (responseBlob) {
-            type = responseBlob?.type;
-            size4 = responseBlob.size;
-          }
-        }
-        setFileInfo({
-          name: name2,
-          type,
-          url: initialFile,
-          size: size4,
-          source: "link"
-        });
-      } catch (error2) {
-        console.warn("Cannot load link info:", error2);
-      }
-    };
-    loadFromLink();
-  }, [initialFile]);
-  const handleChange = (e3, onChange2) => {
-    const file = e3.target.files?.[0];
+  const acceptType = !onlyImage ? `.pdf,.json,.mp4,.zip,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,.jpeg,.jpg,.png` : ".jpeg,.jpg,.png";
+  const validateFile = (file) => {
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      return t3("upload_files_accept");
+    }
+    return true;
+  };
+  const handleUpload = async (e3) => {
+    const file = e3.target.files[0];
     if (!file) return;
     if (onlyImage && !file.type.startsWith("image/")) {
-      methods?.setError(t3("only_image_accept"));
+      methods?.setError(name, {
+        type: "manual",
+        message: t3("only_image_accept")
+      });
       e3.target.value = "";
       return;
     }
-    const isImage = file.type.startsWith("image/");
-    const preview = isImage ? URL.createObjectURL(file) : null;
-    const normalized = {
-      name: file.name,
-      type: file.type,
-      size: file.size,
-      url: preview,
-      // chỉ có giá trị nếu là ảnh
-      source: "upload",
-      raw: file
-    };
-    setFileInfo(normalized);
-    handleFileChange(e3, onChange2);
+    const valid = validateFile(file);
+    if (valid !== true) {
+      methods?.setError(name, { type: "manual", message: valid });
+      return;
+    }
+    methods?.clearErrors(name);
+    const formData = new FormData();
+    formData.append("file", file);
+    setLoading(true);
+    try {
+      onUploadFile?.(formData);
+    } catch (error2) {
+      console.error(error2);
+    }
+    setLoading(false);
   };
-  const renderPreview = (file) => {
-    if (!file) return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(PlaceHolderIcon, {});
-    const { name: name2, type, url, size: size4 } = file;
-    if (type?.startsWith("image/") || checkIsImageLink2(url))
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-        "img",
-        {
-          src: url,
-          alt: name2,
-          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
-          style: {
-            maxWidth: isEditTable ? "40px" : "128px",
-            maxHeight: isEditTable ? "40px" : "128px"
+  const handleDelete = () => {
+    onDeleteFile && onDeleteFile();
+    hasFetchedMeta.current = false;
+  };
+  const renderPreview = () => {
+    if (!url) return null;
+    const type = fileInfor?.type;
+    const date = fileInfor?.date;
+    const size4 = fileInfor?.size;
+    if (type?.includes("image")) {
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+          "img",
+          {
+            src: url,
+            alt: name,
+            className: `image-value w-full h-full object-contain ${onlyImage ? "rounded-lg" : "rounded-[4px]"} ${isEditTable ? "max-h-10 max-w-10 h-10 w-10" : "max-w-32 max-h-32"}`,
+            style: {
+              maxWidth: isEditTable ? "40px" : "128px",
+              maxHeight: isEditTable ? "40px" : "128px",
+              height: isEditTable ? "40px" : "128px",
+              width: isEditTable ? "40px" : "128px"
+            }
           }
-        }
-      );
-    if (type?.startsWith("video/"))
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-        "video",
-        {
-          src: url,
-          className: `rounded-lg object-cover ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
-          style: {
-            maxWidth: isEditTable ? "40px" : "128px",
-            maxHeight: isEditTable ? "40px" : "128px"
-          },
-          controls: true
-        }
-      );
+        ),
+        !onlyImage && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+            "p",
+            {
+              style: {
+                maxWidth: "120px"
+              },
+              className: "text-sm font-medium text-gray-600 truncate max-w-[120px]",
+              children: url?.split("/").pop()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-xs text-[#666] font-semibold", children: size4 })
+        ] })
+      ] });
+    }
     const getFileIcon = () => {
       if (type === "application/pdf") return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(PdfIcon, {});
       if (type?.includes("excel") || type?.includes("spreadsheet"))
@@ -17021,7 +17015,6 @@ var BinaryField = (props) => {
       if (type === "application/json") return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(JSONFileIcon, {});
       return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DefaultFileIcon, {});
     };
-    const isShowSize = !isNaN(size4);
     return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-center gap-2", children: [
       getFileIcon(),
       /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { children: [
@@ -17032,10 +17025,10 @@ var BinaryField = (props) => {
               maxWidth: "120px"
             },
             className: "text-sm font-medium text-gray-600 truncate max-w-[120px]",
-            children: name2
+            children: url?.split("/").pop()
           }
         ),
-        isShowSize && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-xs text-[#666] font-semibold", children: formatFileSize(size4) })
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-xs text-[#666] font-semibold", children: size4 })
       ] })
     ] });
   };
@@ -17045,136 +17038,124 @@ var BinaryField = (props) => {
       name: name ?? "",
       control: methods?.control,
       rules: {
-        required: required && !invisible ? { value: true, message: `${string} ${t3("must_required")}` } : false
+        required: required && !invisible ? { value: true, message: `${string} ${t3("must_required")}` } : false,
+        validate: {
+          fileValidate: (value2) => {
+            if (!value2) return true;
+            return validateFile(value2);
+          }
+        }
       },
-      render: ({ field, fieldState: { error: error2 } }) => {
-        const hasFile = !!fileInfo;
+      render: ({ fieldState: { error: error2 } }) => {
+        console.log("error", error2);
         return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             "div",
             {
-              ref: binaryRef,
-              className: `widget binary-field flex w-fit items-center gap-4 ${onlyImage && initialFile ? "shadow-md rounded-lg" : ""}`,
-              children: hasFile ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+              className: `widget binary-field flex w-fit items-center gap-4 ${onlyImage ? "shadow-md rounded-[12px]" : ""} ${isEditTable ? "p-2" : ""}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "relative group", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                 "div",
                 {
-                  className: `relative group  ${onlyImage ? "shadow-md rounded-lg" : ""}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
-                    "div",
-                    {
-                      className: `flex gap-2  items-center bg-[#FAFAFA] rounded-[8px] p-[6px] ${onlyImage ? "h-32 w-32" : "max-h-fit max-w-fit"}`,
-                      children: [
-                        renderPreview(fileInfo),
-                        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
-                          "div",
-                          {
-                            style: {
-                              display: "flex",
-                              alignItems: "center",
-                              borderRadius: "8px",
-                              padding: "4px",
-                              gap: "8px",
-                              backgroundColor: onlyImage ? "rgba(0,0,0,0.03)" : "white",
-                              boxShadow: "0 2px 4px 0 rgba(27, 28, 29, 0.04)",
-                              position: onlyImage ? "absolute" : "relative",
-                              bottom: onlyImage ? "0" : "none",
-                              right: onlyImage ? "0" : "none"
-                            },
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-                                "span",
-                                {
-                                  className: "cursor-pointer",
-                                  onClick: () => onDownload && onDownload(
-                                    fileInfo?.url || fileInfo?.data,
-                                    fileInfo?.name || fileInfo?.display_name
-                                  ),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DownloadIcon, {})
-                                }
-                              ),
-                              !readonly && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-                                "span",
-                                {
-                                  className: "cursor-pointer",
-                                  onClick: () => {
-                                    setFileInfo(null);
-                                    handleRemoveFile(field.onChange);
-                                  },
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DeleteIconDanger, {})
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
-                "label",
-                {
-                  htmlFor: inputId,
-                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-[12px]  transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32 border border-gray-300 hover:border-primary bg-white" : "w-fit h-fit "}`,
+                  className: `flex items-center gap-2 bg-[#FAFAFA] relative  ${onlyImage ? `h-32 w-32 rounded-[12px] ${value ? "" : "p-2"}` : `max-h-fit max-w-fit rounded-[8px] border ${!value ? "hover:border-[var(--color-primary)]" : ""} ${isEditTable && value ? "p-2" : ""}`} ${error2 && isForm && isEditTable && "widget-error"} `,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-                      "input",
-                      {
-                        id: inputId,
-                        type: "file",
-                        readOnly: readonly,
-                        placeholder,
-                        required: !invisible && required,
-                        onChange: (e3) => handleChange(e3, field.onChange),
-                        className: "hidden",
-                        accept: ".jpeg,.jpg,.png,.pdf,.json,.mp4,.zip,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
-                      }
-                    ),
-                    onlyImage && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-                      "img",
-                      {
-                        src: placeHolderImage,
-                        alt: "",
-                        className: "z-0 relative"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                    renderPreview(),
+                    value ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                       "div",
                       {
-                        className: " size-8 bg-white rounded-lg flex justify-center items-center z-20",
+                        className: "widget",
                         style: {
+                          display: "flex",
+                          alignItems: "center",
+                          borderRadius: "8px",
+                          padding: "4px",
+                          gap: "8px",
+                          backgroundColor: onlyImage ? "rgba(0,0,0,0.03)" : "white",
+                          boxShadow: "0 2px 4px 0 rgba(27, 28, 29, 0.04)",
                           position: onlyImage ? "absolute" : "relative",
-                          bottom: onlyImage ? "-8px" : "auto",
-                          left: onlyImage ? "-8px" : "auto",
-                          boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
-                          width: "2rem",
-                          height: "2rem",
-                          border: onlyImage ? "1px solid transparent" : "1px solid var(--color-primary)",
-                          borderRadius: onlyImage ? "100%" : "8px"
+                          bottom: onlyImage ? "0" : "none",
+                          right: onlyImage ? "0" : "none"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-                          "svg",
-                          {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "14",
-                            height: "14",
-                            viewBox: "0 0 14 14",
-                            fill: "none",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-                              "path",
-                              {
-                                "fill-rule": "evenodd",
-                                "clip-rule": "evenodd",
-                                d: "M13.1868 0.813097C12.7961 0.422532 12.2663 0.203125 11.7139 0.203125C11.1615 0.203125 10.6317 0.422532 10.241 0.813097L9.35765 1.69726L12.3035 4.64393L12.0085 4.9381L11.7143 5.2331L8.76765 2.28643L1.40182 9.65226C1.34395 9.7104 1.30452 9.78432 1.28848 9.86476L0.698483 12.8114C0.685057 12.8787 0.688459 12.9483 0.708387 13.014C0.728316 13.0796 0.764154 13.1394 0.812719 13.1878C0.861283 13.2363 0.92107 13.2721 0.986769 13.2919C1.05247 13.3117 1.12204 13.315 1.18932 13.3014L4.13515 12.7123C4.21599 12.6961 4.29023 12.6564 4.34848 12.5981L13.1868 3.75976C13.3803 3.5663 13.5338 3.33661 13.6386 3.08381C13.7433 2.83102 13.7972 2.56006 13.7972 2.28643C13.7972 2.0128 13.7433 1.74184 13.6386 1.48905C13.5338 1.23625 13.3803 1.00656 13.1868 0.813097Z",
-                                fill: "black"
-                              }
-                            )
-                          }
-                        )
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                            "span",
+                            {
+                              onClick: () => onDownload && onDownload(url || "", url?.split("/").pop()),
+                              className: "cursor-pointer",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DownloadIcon, {})
+                            }
+                          ),
+                          !readonly && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { onClick: handleDelete, className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DeleteIconDanger, {}) })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+                      "label",
+                      {
+                        style: {
+                          maxWidth: "180px",
+                          maxHeight: "180px"
+                        },
+                        className: `relative  flex cursor-pointer items-center justify-center rounded-[12px]  transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "border border-gray-300 hover:border-primary bg-white" : "w-fit h-fit "}`,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                            "input",
+                            {
+                              type: "file",
+                              readOnly: readonly,
+                              placeholder,
+                              required: !invisible && required,
+                              onChange: handleUpload,
+                              className: "hidden",
+                              accept: acceptType
+                            }
+                          ),
+                          onlyImage && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                            "img",
+                            {
+                              src: placeHolderImage,
+                              alt: "",
+                              className: "z-0 relative"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                            "div",
+                            {
+                              className: " size-8 bg-white rounded-lg flex justify-center items-center z-20",
+                              style: {
+                                position: onlyImage ? "absolute" : "relative",
+                                bottom: onlyImage ? "-8px" : "auto",
+                                left: onlyImage ? "-8px" : "auto",
+                                boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
+                                width: "2rem",
+                                height: "2rem",
+                                borderRadius: onlyImage ? "100%" : "8px"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                                "svg",
+                                {
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  width: "14",
+                                  height: "14",
+                                  viewBox: "0 0 14 14",
+                                  fill: "none",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                                    "path",
+                                    {
+                                      "fill-rule": "evenodd",
+                                      "clip-rule": "evenodd",
+                                      d: "M13.1868 0.813097C12.7961 0.422532 12.2663 0.203125 11.7139 0.203125C11.1615 0.203125 10.6317 0.422532 10.241 0.813097L9.35765 1.69726L12.3035 4.64393L12.0085 4.9381L11.7143 5.2331L8.76765 2.28643L1.40182 9.65226C1.34395 9.7104 1.30452 9.78432 1.28848 9.86476L0.698483 12.8114C0.685057 12.8787 0.688459 12.9483 0.708387 13.014C0.728316 13.0796 0.764154 13.1394 0.812719 13.1878C0.861283 13.2363 0.92107 13.2721 0.986769 13.2919C1.05247 13.3117 1.12204 13.315 1.18932 13.3014L4.13515 12.7123C4.21599 12.6961 4.29023 12.6564 4.34848 12.5981L13.1868 3.75976C13.3803 3.5663 13.5338 3.33661 13.6386 3.08381C13.7433 2.83102 13.7972 2.56006 13.7972 2.28643C13.7972 2.0128 13.7433 1.74184 13.6386 1.48905C13.5338 1.23625 13.3803 1.00656 13.1868 0.813097Z",
+                                      fill: "black"
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          )
+                        ]
                       }
                     )
                   ]
                 }
-              )
+              ) })
             }
           ),
           error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })