Merge pull request #36 from yosipy/yosipy/move-params-to-hooks

moved to callback parameters
yosipy · Sep 1, 2024 · 8c51455 · 8c51455
2 parents acdb091 + 8e5bf79
commit 8c51455
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 96 deletions.
diff --git a/docs/examples/accepting-specific-file-types/Accept.tsx b/docs/examples/accepting-specific-file-types/Accept.tsx
@@ -3,6 +3,7 @@ import {
   useReactDropzoneVV,
   ReactDropzoneVV,
   RejectedClassifiedFile,
+  OnSelectProps,
 } from "@lib/index"
 
 export const Accept: FC = () => {
@@ -13,12 +14,13 @@ export const Accept: FC = () => {
 
   const reactDropzoneVV = useReactDropzoneVV({
     accept: "image/png,.webp",
-    onSelect: async (props) => {
-      setAcceptedFiles(props.acceptedFiles)
-      setFileRejections(props.fileRejections)
-    },
   })
 
+  const handleSelect = (props: OnSelectProps) => {
+    setAcceptedFiles(props.acceptedFiles)
+    setFileRejections(props.fileRejections)
+  }
+
   return (
     <section style={{ border: "solid", padding: "1rem" }}>
       <ReactDropzoneVV
@@ -28,6 +30,7 @@ export const Accept: FC = () => {
           border: "dashed",
           backgroundColor: reactDropzoneVV.isDragging ? "#737373" : "#404040",
         }}
+        onSelect={handleSelect}
       >
         <p>Drag & drop some files here, or click to select files</p>
         <p>

diff --git a/docs/examples/basic-example/Basic.tsx b/docs/examples/basic-example/Basic.tsx
@@ -3,6 +3,7 @@ import {
   useReactDropzoneVV,
   ReactDropzoneVV,
   RejectedClassifiedFile,
+  OnSelectProps,
 } from "@lib/index"
 
 export const Basic: FC = () => {
@@ -11,15 +12,16 @@ export const Basic: FC = () => {
     RejectedClassifiedFile[]
   >([])
 
-  const reactDropzoneVV = useReactDropzoneVV({
-    onSelect: async (props) => {
-      setAcceptedFiles(props.acceptedFiles)
-      setFileRejections(props.fileRejections)
-    },
-    onError: (e) => {
-      console.log(e)
-    },
-  })
+  const reactDropzoneVV = useReactDropzoneVV({})
+
+  const handleSelect = (props: OnSelectProps) => {
+    setAcceptedFiles(props.acceptedFiles)
+    setFileRejections(props.fileRejections)
+  }
+
+  const hendleError = (e: Error) => {
+    console.log(e)
+  }
 
   return (
     <section style={{ border: "solid", padding: "1rem" }}>
@@ -30,6 +32,8 @@ export const Basic: FC = () => {
           border: "dashed",
           backgroundColor: reactDropzoneVV.isDragging ? "#737373" : "#404040",
         }}
+        onSelect={handleSelect}
+        onError={hendleError}
       >
         <p>Drag & drop some files here, or click to select files</p>
       </ReactDropzoneVV>

diff --git a/docs/examples/custom-validation/CustomValidation.tsx b/docs/examples/custom-validation/CustomValidation.tsx
@@ -4,6 +4,7 @@ import {
   ReactDropzoneVV,
   RejectedClassifiedFile,
   ClassifiedFile,
+  OnSelectProps,
 } from "@lib/index"
 
 export const CustomValidation: FC = () => {
@@ -12,38 +13,39 @@ export const CustomValidation: FC = () => {
     RejectedClassifiedFile[]
   >([])
 
-  const reactDropzoneVV = useReactDropzoneVV({
-    onSelect: async ({ classifiedFiles }) => {
-      const maxLength = 20
-      const customClassifiedFiles = classifiedFiles.map((classifiedFile) => {
-        if (classifiedFile.status == "accepted") {
-          const file = classifiedFile.file
-          if (file.name.length > maxLength) {
-            const fileRejection: ClassifiedFile = {
-              status: "rejected",
-              file,
-              rejectedCode: "name-too-longer",
-            }
-            return fileRejection
+  const reactDropzoneVV = useReactDropzoneVV({})
+
+  const handleSelect = ({ classifiedFiles }: OnSelectProps) => {
+    const maxLength = 20
+    const customClassifiedFiles = classifiedFiles.map((classifiedFile) => {
+      if (classifiedFile.status == "accepted") {
+        const file = classifiedFile.file
+        if (file.name.length > maxLength) {
+          const fileRejection: ClassifiedFile = {
+            status: "rejected",
+            file,
+            rejectedCode: "name-too-longer",
           }
+          return fileRejection
         }
-        return classifiedFile
-      })
+      }
+      return classifiedFile
+    })
+
+    const tAcceptedFiles = customClassifiedFiles
+      .filter((classifiedFile) => classifiedFile.status == "accepted")
+      .map((classifiedFile) => classifiedFile.file)
+    const tFileRejections = customClassifiedFiles.filter(
+      (classifiedFile) => classifiedFile.status == "rejected"
+    )
 
-      const tAcceptedFiles = customClassifiedFiles
-        .filter((classifiedFile) => classifiedFile.status == "accepted")
-        .map((classifiedFile) => classifiedFile.file)
-      const tFileRejections = customClassifiedFiles.filter(
-        (classifiedFile) => classifiedFile.status == "rejected"
-      )
+    setAcceptedFiles(tAcceptedFiles)
+    setFileRejections(tFileRejections)
+  }
 
-      setAcceptedFiles(tAcceptedFiles)
-      setFileRejections(tFileRejections)
-    },
-    onError: (e) => {
-      console.log(e)
-    },
-  })
+  const handleError = (e: Error) => {
+    console.log(e)
+  }
 
   return (
     <section style={{ border: "solid", padding: "1rem" }}>
@@ -54,6 +56,8 @@ export const CustomValidation: FC = () => {
           border: "dashed",
           backgroundColor: reactDropzoneVV.isDragging ? "#737373" : "#404040",
         }}
+        onSelect={handleSelect}
+        onError={handleError}
       >
         <p>Drag & drop some files here, or click to select files</p>
         <p>{"(Allowed if the file name' length is 20 or less)"}</p>

diff --git a/docs/examples/opening-file-dialog-programmatically/OpenProgrammatically.tsx b/docs/examples/opening-file-dialog-programmatically/OpenProgrammatically.tsx
@@ -1,14 +1,14 @@
 import { FC, useState } from "react"
-import { useReactDropzoneVV, ReactDropzoneVV } from "@lib/index"
+import { useReactDropzoneVV, ReactDropzoneVV, OnSelectProps } from "@lib/index"
 
 export const OpenProgrammatically: FC = () => {
   const [selectedFiles, setSelectedFiles] = useState<File[]>([])
 
-  const reactDropzoneVV = useReactDropzoneVV({
-    onSelect: async ({ acceptedFiles }) => {
-      setSelectedFiles(acceptedFiles)
-    },
-  })
+  const reactDropzoneVV = useReactDropzoneVV({})
+
+  const handleSelect = ({ acceptedFiles }: OnSelectProps) => {
+    setSelectedFiles(acceptedFiles)
+  }
 
   return (
     <section style={{ border: "solid", padding: "1rem" }}>
@@ -19,13 +19,14 @@ export const OpenProgrammatically: FC = () => {
           border: "dashed",
           backgroundColor: reactDropzoneVV.isDragging ? "#737373" : "#404040",
         }}
+        onSelect={handleSelect}
       >
         <p>Drag & drop some files here, or click to select files</p>
       </ReactDropzoneVV>
 
       <button
         style={{ border: "solid", margin: "1rem" }}
-        onClick={() => reactDropzoneVV.open()}
+        onClick={() => reactDropzoneVV.openSelector()}
       >
         Open file dialog
       </button>

diff --git a/lib/ReactDropzoneVV.tsx b/lib/ReactDropzoneVV.tsx
@@ -6,11 +6,25 @@ import {
   ensureError,
   splitClassifiedFiles,
 } from "./utils"
+import { ClassifiedFile, RejectedClassifiedFile } from "./types"
 
-export type ReactDropzoneVVProps = HTMLProps<HTMLDivElement> & {
+export type OnSelectProps = {
+  acceptedFiles: File[]
+  fileRejections: RejectedClassifiedFile[]
+  classifiedFiles: ClassifiedFile[]
+}
+
+export type ReactDropzoneVVProps = Omit<
+  HTMLProps<HTMLDivElement>,
+  "onSelect" | "onError" | "onDrop"
+> & {
   reactDropzoneVV: UseReactDropzoneVV
   inputProps?: HTMLProps<HTMLInputElement>
   children: ReactNode
+} & {
+  onDrop?: (files: File[]) => void
+  onSelect?: (props: OnSelectProps) => void
+  onError?: (error: Error) => void
 }
 
 export const ReactDropzoneVV: FC<ReactDropzoneVVProps> = ({
@@ -22,13 +36,13 @@ export const ReactDropzoneVV: FC<ReactDropzoneVVProps> = ({
     setIsDragging,
     isDragging,
     inputRef,
-    onDrop,
-    onSelect,
-    onError,
-    ...reactDropzoneVV
+    openSelector,
   },
-  inputProps,
   children,
+  inputProps,
+  onDrop,
+  onSelect,
+  onError,
   ...props
 }) => {
   const handleDragEnterDiv = useCallback(
@@ -96,7 +110,7 @@ export const ReactDropzoneVV: FC<ReactDropzoneVVProps> = ({
   )
 
   const handleClickDiv = () => {
-    reactDropzoneVV.open()
+    openSelector()
   }
 
   const handleChangeInput = useCallback(

diff --git a/lib/useReactDropzoneVV.ts b/lib/useReactDropzoneVV.ts
@@ -1,18 +1,10 @@
 import { useRef, useState } from "react"
-import type { ClassifiedFile, RejectedClassifiedFile } from "./types"
 
 export type UseReactDropzoneVVProps = {
   accept?: string
   disabled?: boolean
   disabledDropOnDocment?: boolean
   multiple?: boolean
-  onDrop?: (files: File[]) => void
-  onSelect?: (props: {
-    acceptedFiles: File[]
-    fileRejections: RejectedClassifiedFile[]
-    classifiedFiles: ClassifiedFile[]
-  }) => void
-  onError?: (error: Error) => void
 }
 
 export type UseReactDropzoneVV = {
@@ -27,24 +19,14 @@ export type UseReactDropzoneVV = {
   isDragging: boolean
   setIsDragging: React.Dispatch<React.SetStateAction<boolean>>
   inputRef: React.RefObject<HTMLInputElement>
-  open: () => void
-  onDrop?: (files: File[]) => void
-  onSelect?: (props: {
-    acceptedFiles: File[]
-    fileRejections: RejectedClassifiedFile[]
-    classifiedFiles: ClassifiedFile[]
-  }) => void
-  onError?: (error: Error) => void
+  openSelector: () => void
 }
 
 export const useReactDropzoneVV = ({
   accept: tAccept = "",
   disabled: tDisabled = false,
   disabledDropOnDocment: tDisabledDropOnDocment = false,
   multiple: tMultiple = true,
-  onDrop,
-  onSelect,
-  onError,
 }: UseReactDropzoneVVProps = {}): UseReactDropzoneVV => {
   const [accept, setAccept] = useState<string>(tAccept)
   const [disabled, setDisabled] = useState<boolean>(tDisabled)
@@ -57,7 +39,7 @@ export const useReactDropzoneVV = ({
 
   const inputRef = useRef<HTMLInputElement>(null)
 
-  const open = () => {
+  const openSelector = () => {
     inputRef.current?.click()
   }
 
@@ -73,9 +55,6 @@ export const useReactDropzoneVV = ({
     isDragging,
     setIsDragging,
     inputRef,
-    open,
-    onDrop,
-    onSelect,
-    onError,
+    openSelector,
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,28 +1,30 @@
 import { FC } from "react"
-import { useReactDropzoneVV, ReactDropzoneVV } from "@lib/index"
+import { useReactDropzoneVV, ReactDropzoneVV, OnSelectProps } from "@lib/index"
 
 const App: FC = () => {
   const reactDropzoneVV = useReactDropzoneVV({
     accept: ".png,.jpg,.jpeg,.webp",
     disabledDropOnDocment: true,
-    onSelect: async ({ classifiedFiles }) => {
-      const acceptedFiles = classifiedFiles
-        .filter((classifiedFile) => classifiedFile.status == "accepted")
-        .map((classifiedFile) => classifiedFile.file)
-      const fileRejections = classifiedFiles.filter(
-        (classifiedFile) => classifiedFile.status == "rejected"
-      )
-      console.log("acceptedFiles:")
-      console.log(acceptedFiles)
-      console.log("fileRejections:")
-      console.log(fileRejections)
-    },
-    onError: (e) => {
-      console.log("error!")
-      console.log(e)
-    },
   })
 
+  const handleSelect = ({ classifiedFiles }: OnSelectProps) => {
+    const acceptedFiles = classifiedFiles
+      .filter((classifiedFile) => classifiedFile.status == "accepted")
+      .map((classifiedFile) => classifiedFile.file)
+    const fileRejections = classifiedFiles.filter(
+      (classifiedFile) => classifiedFile.status == "rejected"
+    )
+    console.log("acceptedFiles:")
+    console.log(acceptedFiles)
+    console.log("fileRejections:")
+    console.log(fileRejections)
+  }
+
+  const handleErrror = (e: Error) => {
+    console.log("error!")
+    console.log(e)
+  }
+
   return (
     <>
       <ReactDropzoneVV
@@ -32,6 +34,8 @@ const App: FC = () => {
           borderStyle: "dashed",
           backgroundColor: reactDropzoneVV.isDragging ? "grey" : "",
         }}
+        onSelect={handleSelect}
+        onError={handleErrror}
       >
         <>
           <em>(png, jpeg, webp)</em>