@ttoss/components 2.3.0 → 2.4.0

package/dist/esm/FileUploader/index.js

@@ -0,0 +1,352 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/components/FileUploader/FileUploader.tsx
+import { FormattedMessage } from "@ttoss/react-i18n";
+import { Box, Button, Flex, Stack, Text } from "@ttoss/ui";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileUploader = ({
+  uploadFn,
+  onUploadStart,
+  onUploadProgress,
+  onUploadComplete,
+  onUploadError,
+  onFilesChange,
+  onRemoveFile,
+  accept,
+  multiple = true,
+  maxSize = 10 * 1024 * 1024,
+  // 10MB
+  maxFiles = 5,
+  disabled = false,
+  autoUpload = true,
+  retryAttempts = 2,
+  placeholder,
+  error,
+  children,
+  showFileList = true,
+  FileListComponent
+}) => {
+  const [files, setFiles] = React.useState([]);
+  const [isDragOver, setIsDragOver] = React.useState(false);
+  const fileInputRef = React.useRef(null);
+  const 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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+  const validateFiles = newFiles => {
+    const fileArray = Array.from(newFiles);
+    const validFiles = [];
+    const currentFileCount = files.length;
+    for (const file of fileArray) {
+      if (maxSize && file.size > maxSize) {
+        continue;
+      }
+      if (validFiles.length + currentFileCount >= maxFiles) {
+        break;
+      }
+      validFiles.push(file);
+    }
+    return validFiles;
+  };
+  const updateFileState = React.useCallback((file, updates) => {
+    setFiles(prevFiles => {
+      const newFiles = prevFiles.map(f => {
+        return f.file === file ? {
+          ...f,
+          ...updates
+        } : f;
+      });
+      onFilesChange?.(newFiles);
+      return newFiles;
+    });
+  }, [onFilesChange]);
+  const uploadFile = React.useCallback(async (fileState, attempts = 0) => {
+    try {
+      onUploadStart?.(fileState.file);
+      updateFileState(fileState.file, {
+        status: "uploading",
+        progress: 0
+      });
+      const result = await uploadFn(fileState.file, progress => {
+        updateFileState(fileState.file, {
+          progress
+        });
+        onUploadProgress?.(fileState.file, progress);
+      });
+      updateFileState(fileState.file, {
+        status: "completed",
+        progress: 100,
+        result
+      });
+      onUploadComplete?.(fileState.file, result);
+    } catch (error_) {
+      const error2 = error_;
+      if (attempts < retryAttempts) {
+        setTimeout(() => {
+          return uploadFile(fileState, attempts + 1);
+        }, 1e3 * (attempts + 1));
+      } else {
+        updateFileState(fileState.file, {
+          status: "error",
+          error: error2
+        });
+        onUploadError?.(fileState.file, error2);
+      }
+    }
+  }, [uploadFn, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, retryAttempts, updateFileState]);
+  const addFiles = newFiles => {
+    const newFileStates = newFiles.map(file => {
+      return {
+        file,
+        status: "pending"
+      };
+    });
+    setFiles(prevFiles => {
+      const updatedFiles = [...prevFiles, ...newFileStates];
+      onFilesChange?.(updatedFiles);
+      return updatedFiles;
+    });
+    if (autoUpload) {
+      for (const fileState of newFileStates) {
+        uploadFile(fileState);
+      }
+    }
+  };
+  const handleFileChange = event => {
+    if (event.target.files) {
+      const validFiles = validateFiles(event.target.files);
+      addFiles(validFiles);
+    }
+  };
+  const handleDrop = event => {
+    event.preventDefault();
+    setIsDragOver(false);
+    if (disabled) return;
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles) {
+      const validFiles = validateFiles(droppedFiles);
+      addFiles(validFiles);
+    }
+  };
+  const handleDragOver = event => {
+    event.preventDefault();
+    if (!disabled) {
+      setIsDragOver(true);
+    }
+  };
+  const handleDragLeave = event => {
+    event.preventDefault();
+    setIsDragOver(false);
+  };
+  const handleClick = () => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+  const handleRemoveFile = React.useCallback(index => {
+    const fileToRemove = files[index];
+    setFiles(prevFiles => {
+      const newFiles = prevFiles.filter((_, i) => {
+        return i !== index;
+      });
+      onFilesChange?.(newFiles);
+      return newFiles;
+    });
+    onRemoveFile?.(fileToRemove, index);
+  }, [files, onFilesChange, onRemoveFile]);
+  const retryUpload = React.useCallback(index => {
+    const fileState = files[index];
+    if (fileState.status === "error") {
+      uploadFile(fileState);
+    }
+  }, [files, uploadFile]);
+  const isUploading = files.some(f => {
+    return f.status === "uploading";
+  });
+  const fileListNode = React.useMemo(() => {
+    if (!showFileList || files.length === 0) {
+      return null;
+    }
+    if (FileListComponent) {
+      return /* @__PURE__ */jsx(FileListComponent, {
+        files,
+        onRemoveFile: handleRemoveFile
+      });
+    }
+    return /* @__PURE__ */jsx(Stack, {
+      sx: {
+        gap: 1
+      },
+      children: files.map((fileState, index) => {
+        return /* @__PURE__ */jsxs(Flex, {
+          sx: {
+            alignItems: "center",
+            justifyContent: "space-between",
+            p: 2,
+            backgroundColor: "display.background.secondary.default",
+            borderRadius: "md",
+            gap: 2
+          },
+          children: [/* @__PURE__ */jsxs(Flex, {
+            sx: {
+              alignItems: "center",
+              gap: 2,
+              flex: 1
+            },
+            children: [/* @__PURE__ */jsx(Text, {
+              sx: {
+                fontSize: "lg"
+              },
+              children: fileState.status === "completed" ? "\u2713" : fileState.status === "error" ? "\u2717" : fileState.status === "uploading" ? "\u21BB" : "\u{1F4C4}"
+            }), /* @__PURE__ */jsxs(Box, {
+              sx: {
+                flex: 1
+              },
+              children: [/* @__PURE__ */jsx(Text, {
+                variant: "body",
+                sx: {
+                  fontWeight: "medium"
+                },
+                children: fileState.file.name
+              }), fileState.status === "uploading" && fileState.progress && /* @__PURE__ */jsxs(Text, {
+                variant: "caption",
+                sx: {
+                  color: "primary.default"
+                },
+                children: [fileState.progress.toFixed(0), "%"]
+              }), fileState.status === "error" && /* @__PURE__ */jsx(Text, {
+                variant: "caption",
+                sx: {
+                  color: "error.default"
+                },
+                children: "Failed"
+              })]
+            }), /* @__PURE__ */jsx(Text, {
+              variant: "caption",
+              sx: {
+                color: "text.muted"
+              },
+              children: formatFileSize(fileState.file.size)
+            })]
+          }), /* @__PURE__ */jsxs(Flex, {
+            sx: {
+              gap: 1
+            },
+            children: [fileState.status === "error" && /* @__PURE__ */jsx(Button, {
+              variant: "destructive",
+              onClick: () => {
+                return retryUpload(index);
+              },
+              sx: {
+                fontSize: "xs"
+              },
+              children: "Retry"
+            }), /* @__PURE__ */jsx(Button, {
+              variant: "destructive",
+              onClick: () => {
+                return handleRemoveFile(index);
+              },
+              sx: {
+                fontSize: "sm",
+                color: "text.muted",
+                "&:hover": {
+                  color: "error.default"
+                }
+              },
+              children: "Remove"
+            })]
+          })]
+        }, index);
+      })
+    });
+  }, [FileListComponent, files, handleRemoveFile, retryUpload, showFileList]);
+  return /* @__PURE__ */jsxs(Stack, {
+    sx: {
+      gap: 3
+    },
+    children: [/* @__PURE__ */jsxs(Box, {
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onClick: handleClick,
+      sx: {
+        border: "2px dashed",
+        borderColor: error ? "error.default" : isDragOver ? "primary.default" : "display.border.muted.default",
+        borderRadius: "xl",
+        padding: 6,
+        textAlign: "center",
+        cursor: disabled || isUploading ? "not-allowed" : "pointer",
+        backgroundColor: isDragOver ? "primary.muted" : "display.background.secondary.default",
+        transition: "all 0.2s ease",
+        opacity: disabled ? 0.6 : 1,
+        "&:hover": {
+          borderColor: !disabled && !isUploading && !error ? "primary.default" : void 0,
+          backgroundColor: !disabled && !isUploading ? "primary.muted" : void 0
+        }
+      },
+      children: [/* @__PURE__ */jsx("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        multiple,
+        onChange: handleFileChange,
+        disabled: disabled || isUploading,
+        style: {
+          display: "none"
+        }
+      }), children || /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 3,
+          justifyContent: "center"
+        },
+        children: [/* @__PURE__ */jsx(Text, {
+          sx: {
+            fontSize: "3xl"
+          },
+          children: "\u{1F4C1}"
+        }), /* @__PURE__ */jsxs(Box, {
+          sx: {
+            textAlign: "center"
+          },
+          children: [/* @__PURE__ */jsx(Text, {
+            variant: "body",
+            sx: {
+              color: "text.default",
+              mb: 1
+            },
+            children: isUploading ? /* @__PURE__ */jsx(FormattedMessage, {
+              defaultMessage: "Uploading..."
+            }) : placeholder || /* @__PURE__ */jsx(FormattedMessage, {
+              defaultMessage: "Click or drag files here"
+            })
+          }), /* @__PURE__ */jsx(Text, {
+            variant: "caption",
+            sx: {
+              color: "text.muted"
+            },
+            children: [accept && accept, maxSize && `Max ${formatFileSize(maxSize)}`, multiple && maxFiles && `Up to ${maxFiles} files`].filter(Boolean).join(" \u2022 ")
+          })]
+        }), !isUploading && /* @__PURE__ */jsx(Button, {
+          variant: "secondary",
+          disabled,
+          children: /* @__PURE__ */jsx(FormattedMessage, {
+            defaultMessage: "Select Files"
+          })
+        })]
+      })]
+    }), error && /* @__PURE__ */jsx(Text, {
+      variant: "caption",
+      sx: {
+        color: "error.default"
+      },
+      children: error
+    }), fileListNode]
+  });
+};
+export { FileUploader };