@multiplatform.one/frappe-ui 7.90.6 → 8.1.0

package/dist/cjs/fields/FileUpload.cjs

@@ -1,404 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var FileUpload_exports = {};
-__export(FileUpload_exports, {
-  FileUpload: () => FileUpload
-});
-module.exports = __toCommonJS(FileUpload_exports);
-var import_frappe = require("@multiplatform.one/frappe");
-var import_forms = require("@multiplatform.one/forms");
-var import_react = require("@phosphor-icons/react");
-var import_theme = require("@multiplatform.one/theme");
-var import_react2 = require("react");
-var import_react_i18next = require("react-i18next");
-var import_tamagui = require("tamagui");
-var import_FrappeProvider = require("../FrappeProvider.cjs");
-var import_components = require("@multiplatform.one/components");
-var import_jsx_runtime = require("react/jsx-runtime");
-function formatFileSize(bytes) {
-  if (bytes === 0) return "0 Bytes";
-  const k = 1024;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
-}
-function readFileAsDataUrl(file, {
-  onProgress,
-  signal
-}) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    const onAbort = () => {
-      reader.abort();
-      reject(new DOMException("Aborted", "AbortError"));
-    };
-    if (signal.aborted) {
-      onAbort();
-      return;
-    }
-    signal.addEventListener("abort", onAbort);
-    reader.onprogress = event => {
-      if (event.lengthComputable && event.total > 0) {
-        onProgress(Math.round(event.loaded / event.total * 100));
-      }
-    };
-    reader.onload = () => {
-      signal.removeEventListener("abort", onAbort);
-      onProgress(100);
-      resolve(reader.result);
-    };
-    reader.onerror = () => {
-      signal.removeEventListener("abort", onAbort);
-      reject(new Error("Failed to read file"));
-    };
-    reader.onabort = () => {
-      signal.removeEventListener("abort", onAbort);
-      reject(new DOMException("Aborted", "AbortError"));
-    };
-    reader.readAsDataURL(file);
-  });
-}
-function FileUpload({
-  label,
-  value,
-  onChange,
-  accept,
-  isImage = false,
-  disabled = false,
-  required = false,
-  maxSize = 5 * 1024 * 1024,
-  baseURL,
-  auth,
-  helperText,
-  readOnly = false,
-  skeleton = false,
-  onUpload
-}) {
-  const {
-    t
-  } = (0, import_react_i18next.useTranslation)();
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const small = (0, import_theme.sizeTokenStep)(knobProps.sizeToken) < 0;
-  const config = (0, import_FrappeProvider.useFrappeConfig)();
-  const fileInputRef = (0, import_react2.useRef)(null);
-  const [transfer, setTransfer] = (0, import_react2.useState)(null);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const transferRef = (0, import_react2.useRef)(null);
-  const onUploadRef = (0, import_react2.useRef)(onUpload);
-  onUploadRef.current = onUpload;
-  const isLocked = disabled || readOnly;
-  const minHeight = small ? 40 : 56;
-  const previewSize = small ? 120 : 200;
-  const uploading = transfer?.status === "uploading";
-  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
-  const finalConfig = finalBaseURL ? {
-    baseURL: finalBaseURL,
-    socketPort: config?.socketPort,
-    siteName: config?.siteName,
-    socketBaseURL: config?.socketBaseURL,
-    auth: auth ?? config?.auth,
-    syncOptions: config?.syncOptions,
-    realtime: config?.realtime,
-    fixtures: config?.fixtures
-  } : void 0;
-  const fileCollection = (0, import_frappe.useFrappeCollection)(finalConfig, "File", {
-    fields: ["name", "file_name", "file_url", "is_private"]
-  });
-  (0, import_react2.useEffect)(() => {
-    return () => {
-      transferRef.current?.controller.abort();
-    };
-  }, []);
-  const defaultUpload = (0, import_react2.useCallback)(async (file, ctx) => {
-    const base64 = await readFileAsDataUrl(file, ctx);
-    if (fileCollection) {
-      const tx = fileCollection.insert({
-        doctype: "File",
-        name: `new-${Date.now()}`,
-        file_name: file.name,
-        file_url: base64,
-        is_private: 0
-      });
-      await tx.isPersisted.promise;
-    }
-    return base64;
-  }, [fileCollection]);
-  const runTransfer = (0, import_react2.useCallback)(async (file, controller) => {
-    const upload = onUploadRef.current ?? defaultUpload;
-    try {
-      const url = await upload(file, {
-        onProgress: percent => {
-          const n = Math.min(100, Math.max(0, Math.round(Number(percent) || 0)));
-          setTransfer(prev => prev ? {
-            ...prev,
-            progress: n
-          } : prev);
-        },
-        signal: controller.signal
-      });
-      if (controller.signal.aborted) return;
-      setTransfer(null);
-      transferRef.current = null;
-      setError(null);
-      onChange(url);
-    } catch (err) {
-      if (controller.signal.aborted || err instanceof Error && err.name === "AbortError" || typeof DOMException !== "undefined" && err instanceof DOMException && err.name === "AbortError") {
-        return;
-      }
-      const problem = err instanceof Error && err.message ? err.message : t("Upload failed");
-      setTransfer(prev => prev ? {
-        ...prev,
-        status: "failed",
-        problem,
-        action: t("Try again or remove the file")
-      } : prev);
-      setError(null);
-    }
-  }, [defaultUpload, onChange, t]);
-  const startTransfer = (0, import_react2.useCallback)(file => {
-    transferRef.current?.controller.abort();
-    const controller = new AbortController();
-    const next = {
-      file,
-      status: "uploading",
-      progress: 0,
-      controller
-    };
-    transferRef.current = next;
-    setTransfer(next);
-    setError(null);
-    void runTransfer(file, controller);
-  }, [runTransfer]);
-  const handleFileSelect = event => {
-    if (isLocked) return;
-    const file = event.target.files?.[0];
-    if (!file) return;
-    if (maxSize && file.size > maxSize) {
-      setError(`File size exceeds ${Math.round(maxSize / 1024 / 1024)}MB limit`);
-      return;
-    }
-    startTransfer(file);
-  };
-  const handleCancel = () => {
-    transferRef.current?.controller.abort();
-    transferRef.current = null;
-    setTransfer(null);
-    if (fileInputRef.current) fileInputRef.current.value = "";
-  };
-  const handleRetry = () => {
-    if (!transfer) return;
-    startTransfer(transfer.file);
-  };
-  const handleRemove = () => {
-    if (isLocked) return;
-    handleCancel();
-    onChange("");
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-  const handleRemoveFailed = () => {
-    handleCancel();
-  };
-  const handleClick = () => {
-    if (isLocked || uploading) return;
-    fileInputRef.current?.click();
-  };
-  if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      ...knobProps.gap,
-      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Skeleton, {
-        variant: "text",
-        width: "30%",
-        height: (0, import_theme.sizeRecipeForToken)(knobProps.sizeToken).fontSize
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: minHeight
-      })]
-    });
-  }
-  const fileActions = !readOnly && !transfer ? overMedia => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ActionButton, {
-      kind: "replace",
-      overMedia,
-      disabled: isLocked,
-      onPress: handleClick
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ActionButton, {
-      kind: "remove",
-      overMedia,
-      disabled: isLocked,
-      onPress: handleRemove
-    })]
-  }) : void 0;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.gap,
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
-      ...knobProps.label,
-      children: [label, required && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: "$red10",
-        children: " *"
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
-      ref: fileInputRef,
-      type: "file",
-      accept: accept || (isImage ? "image/*" : void 0),
-      style: {
-        display: "none"
-      },
-      onChange: handleFileSelect,
-      disabled: isLocked || uploading
-    }), transfer ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      "data-file-upload": "transfer",
-      "data-transfer-status": transfer.status,
-      ...knobProps.gap,
-      ...knobProps.panelPadding,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        gap: "$2",
-        alignItems: "center",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
-          size: 20
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          flex: 1,
-          gap: "$1",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            numberOfLines: 1,
-            children: transfer.file.name
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            numberOfLines: 1,
-            fontWeight: "700",
-            fontSize: "$2",
-            children: formatFileSize(transfer.file.size)
-          })]
-        }), transfer.status === "uploading" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ActionButton, {
-          kind: "cancel",
-          label: t("Cancel {{name}}", {
-            name: transfer.file.name
-          }),
-          disabled: isLocked,
-          onPress: handleCancel
-        }) : null]
-      }), transfer.status === "uploading" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        "data-file-upload": "progress",
-        role: "progressbar",
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        "aria-valuenow": transfer.progress,
-        "aria-label": t("Uploading {{name}}", {
-          name: transfer.file.name
-        }),
-        height: 11,
-        width: "100%",
-        borderRadius: 1e3,
-        backgroundColor: "$color4",
-        overflow: "hidden",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          height: "100%",
-          width: `${transfer.progress}%`,
-          backgroundColor: import_components.componentColors.indicator.mark
-        })
-      }) : null, transfer.status === "failed" ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        ...knobProps.gap,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-          color: "$red11",
-          fontSize: "$2",
-          children: transfer.problem
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-          color: "$color11",
-          fontSize: "$2",
-          children: transfer.action
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          ...knobProps.gap,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ActionButton, {
-            kind: "retry",
-            label: t("Retry {{name}}", {
-              name: transfer.file.name
-            }),
-            disabled: isLocked,
-            onPress: handleRetry
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ActionButton, {
-            kind: "remove",
-            label: t("Remove {{name}}", {
-              name: transfer.file.name
-            }),
-            disabled: isLocked,
-            onPress: handleRemoveFailed
-          })]
-        })]
-      }) : null]
-    }) : null, !value && !transfer ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-      size: "$3",
-      icon: import_react.UploadIcon,
-      disabled: isLocked,
-      onPress: handleClick,
-      ...knobProps.borderRadius,
-      children: t("Choose File")
-    }) : null, value ? isImage ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      position: "relative",
-      alignSelf: "flex-start",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
-        src: value,
-        alt: t("Uploaded file preview"),
-        width: previewSize,
-        height: previewSize,
-        ...knobProps.borderRadius,
-        objectFit: "cover"
-      }), fileActions ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        "data-file-upload": "preview-actions",
-        position: "absolute",
-        top: "$2",
-        right: "$2",
-        zIndex: 1,
-        ...knobProps.gap,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.IconButtonGroup, {
-          plate: "media",
-          children: fileActions(true)
-        })
-      }) : null]
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      gap: "$2",
-      alignItems: "center",
-      ...knobProps.panelPadding,
-      ...{
-        backgroundColor: "$color2"
-      },
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
-        size: 20
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-        flex: 1,
-        numberOfLines: 1,
-        children: value.split("/").pop() || value
-      }), fileActions?.(false)]
-    }) : null, helperText && !error && !transfer ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-      color: "$color11",
-      fontSize: "$2",
-      children: helperText
-    }) : null, error ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-      color: "$red11",
-      fontSize: "$2",
-      children: error
-    }) : null]
-  });
-}