refactor(desktop): enhance drop-zone component flexibility (#4324)

* refactor(desktop): enhance drop-zone component flexibility

* Update

apps/desktop/layer/renderer/src/components/ui/crop/AvatarUploadModal.tsx

@@ -377,7 +377,12 @@ export const AvatarUploadModal = ({
     <div className="flex flex-col gap-4">
       {!selectedImage ? (
         <div className="aspect-square h-[400px] space-y-4">
-          <DropZone onDrop={handleFileSelect} className="size-full">
+          <DropZone
+            id="upload-avatar"
+            onDrop={handleFileSelect}
+            accept="image/*"
+            className="size-full"
+          >
             <div className="flex flex-col items-center gap-2 p-8">
               <i className="i-mgc-file-upload-cute-re text-text-secondary text-4xl" />
               <div className="text-center">

apps/desktop/layer/renderer/src/modules/discover/DiscoverImport.tsx

@@ -6,14 +6,7 @@ import {
 } from "@follow/components/ui/accordion/index.js"
 import { Button } from "@follow/components/ui/button/index.js"
 import { DropZone } from "@follow/components/ui/drop-zone/index.js"
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from "@follow/components/ui/form/index.jsx"
-import { Input } from "@follow/components/ui/input/index.js"
+import { Form, FormControl, FormField, FormItem } from "@follow/components/ui/form/index.jsx"
 import type { BizRespose } from "@follow/models"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
@@ -169,10 +162,14 @@ export function DiscoverImport() {
           <FormField
             control={form.control}
             name="file"
-            render={({ field: { value, onChange, ...fieldProps } }) => (
+            render={({ field: { value, onChange } }) => (
               <FormItem>
                 <FormControl>
-                  <DropZone onDrop={(fileList) => onChange(fileList[0])}>
+                  <DropZone
+                    id="upload-file"
+                    accept=".opml,.xml"
+                    onDrop={(fileList) => onChange(fileList[0])}
+                  >
                     {form.formState.dirtyFields.file ? (
                       <Fragment>
                         <i className="i-mgc-file-upload-cute-re size-5" />
@@ -188,15 +185,6 @@ export function DiscoverImport() {
                     )}
                   </DropZone>
                 </FormControl>
-                <Input
-                  {...fieldProps}
-                  id="upload-file"
-                  type="file"
-                  accept=".opml,.xml"
-                  className="hidden"
-                  onChange={(event) => onChange(event.target.files && event.target.files[0])}
-                />
-                <FormMessage />
               </FormItem>
             )}
           />

packages/internal/components/src/ui/drop-zone/index.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@follow/utils/utils"
 import type { DragEvent, ReactNode } from "react"
-import { useCallback, useId, useRef, useState } from "react"
+import { useCallback, useRef, useState } from "react"
 
 // Ported from https://github.com/react-dropzone/react-dropzone/issues/753#issuecomment-774782919
 const useDragAndDrop = ({ callback }: { callback: (file: FileList) => void | Promise<void> }) => {
@@ -49,18 +49,17 @@ const useDragAndDrop = ({ callback }: { callback: (file: FileList) => void | Pro
   }
 }
 
-export const DropZone = ({
-  onDrop,
-  children,
-  className,
-}: {
-  onDrop: (file: FileList) => void | Promise<void>
-  className?: string
+export interface DropZoneProps {
+  id?: string
+  accept?: string
   children?: ReactNode
-}) => {
+  className?: string
+  onDrop: (files: FileList) => void | Promise<void>
+}
+
+export const DropZone = ({ id, accept, children, className, onDrop }: DropZoneProps) => {
   const { isDragging, dragHandlers } = useDragAndDrop({ callback: onDrop })
 
-  const id = useId()
   return (
     <label
       className={cn(
@@ -76,7 +75,7 @@ export const DropZone = ({
       <input
         id={id}
         type="file"
-        accept="image/*"
+        accept={accept}
         onChange={(e) => e.target.files && onDrop(e.target.files)}
         className="hidden"
       />