Skip to content

Commit

Permalink
Merge pull request #37 from yosipy/yosipy/move-disabledDropOnDocment
Browse files Browse the repository at this point in the history
add DisableOutOfFileDropzoneZone
  • Loading branch information
yosipy authored Sep 1, 2024
2 parents 8c51455 + 23119e4 commit b3bbb7e
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 40 deletions.
17 changes: 8 additions & 9 deletions docs/introduction/hooks-and-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,14 @@ export const Introduction: FC = () => {
### PROPS & METHODS
| Prop name | Type | Default | Description |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| accept | string | "" | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) states the following: The accept attribute takes as its value a comma-separated list of one or more file types, or [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers), describing which file types to allow. ex: `"audio/*,image/webp,.jpg,.pdf"` |
| disabled | boolean | false | |
| disabledDropOnDocment | boolean | false | |
| multiple | boolean | true | |
| onDrop | (files: File[]) => void | | Callback when Drop event occurs. |
| onSelect | (props: { acceptedFiles: File[], fileRejections: RejectedClassifiedFile[], classifiedFiles: ClassifiedFile[] }) => void | | Callbacks when the Drop event occurs and when a file is selected in a dialog. |
| onError | (error: Error) => void | | |
| Prop name | Type | Default | Description |
| --------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| accept | string | "" | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) states the following: The accept attribute takes as its value a comma-separated list of one or more file types, or [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers), describing which file types to allow. ex: `"audio/*,image/webp,.jpg,.pdf"` |
| disabled | boolean | false | |
| multiple | boolean | true | |
| onDrop | (files: File[]) => void | | Callback when Drop event occurs. |
| onSelect | (props: { acceptedFiles: File[], fileRejections: RejectedClassifiedFile[], classifiedFiles: ClassifiedFile[] }) => void | | Callbacks when the Drop event occurs and when a file is selected in a dialog. |
| onError | (error: Error) => void | | |
### Supplement onSelect
Expand Down
26 changes: 26 additions & 0 deletions lib/DisableOutOfFileDropzoneZone.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { FC, useEffect } from "react"

export const DisableOutOfFileDropzoneZone: FC<{ disabled?: boolean }> = ({
disabled = true,
}) => {
useEffect(() => {
const handleDocumentDrop = (event: DragEvent) => {
event.preventDefault()
event.stopPropagation()
}

if (disabled) {
document.addEventListener("dragover", handleDocumentDrop)
document.addEventListener("drop", handleDocumentDrop)
}

return () => {
if (disabled) {
document.removeEventListener("dragover", handleDocumentDrop)
document.removeEventListener("drop", handleDocumentDrop)
}
}
}, [disabled])

return <></>
}
22 changes: 1 addition & 21 deletions lib/ReactDropzoneVV.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { FC, HTMLProps, ReactNode } from "react"
import { useCallback, useEffect } from "react"
import { useCallback } from "react"
import type { UseReactDropzoneVV } from "./useReactDropzoneVV"
import {
classifyByAcceptability,
Expand Down Expand Up @@ -31,7 +31,6 @@ export const ReactDropzoneVV: FC<ReactDropzoneVVProps> = ({
reactDropzoneVV: {
accept,
disabled,
disabledDropOnDocment,
multiple,
setIsDragging,
isDragging,
Expand Down Expand Up @@ -141,25 +140,6 @@ export const ReactDropzoneVV: FC<ReactDropzoneVVProps> = ({
[accept, multiple, onSelect, onError]
)

useEffect(() => {
const handleDocumentDrop = (event: DragEvent) => {
event.preventDefault()
event.stopPropagation()
}

if (disabledDropOnDocment) {
document.addEventListener("dragover", handleDocumentDrop)
document.addEventListener("drop", handleDocumentDrop)
}

return () => {
if (disabledDropOnDocment) {
document.removeEventListener("dragover", handleDocumentDrop)
document.removeEventListener("drop", handleDocumentDrop)
}
}
}, [disabledDropOnDocment])

return (
<div
{...props}
Expand Down
9 changes: 0 additions & 9 deletions lib/useReactDropzoneVV.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useRef, useState } from "react"
export type UseReactDropzoneVVProps = {
accept?: string
disabled?: boolean
disabledDropOnDocment?: boolean
multiple?: boolean
}

Expand All @@ -12,8 +11,6 @@ export type UseReactDropzoneVV = {
setAccept: React.Dispatch<React.SetStateAction<string>>
disabled: boolean
setDisabled: React.Dispatch<React.SetStateAction<boolean>>
disabledDropOnDocment: boolean
setDisabledDropOnDocment: React.Dispatch<React.SetStateAction<boolean>>
multiple: boolean
setMultiple: React.Dispatch<React.SetStateAction<boolean>>
isDragging: boolean
Expand All @@ -25,14 +22,10 @@ export type UseReactDropzoneVV = {
export const useReactDropzoneVV = ({
accept: tAccept = "",
disabled: tDisabled = false,
disabledDropOnDocment: tDisabledDropOnDocment = false,
multiple: tMultiple = true,
}: UseReactDropzoneVVProps = {}): UseReactDropzoneVV => {
const [accept, setAccept] = useState<string>(tAccept)
const [disabled, setDisabled] = useState<boolean>(tDisabled)
const [disabledDropOnDocment, setDisabledDropOnDocment] = useState<boolean>(
tDisabledDropOnDocment
)
const [multiple, setMultiple] = useState<boolean>(tMultiple)

const [isDragging, setIsDragging] = useState(false)
Expand All @@ -48,8 +41,6 @@ export const useReactDropzoneVV = ({
setAccept,
disabled,
setDisabled,
disabledDropOnDocment,
setDisabledDropOnDocment,
multiple,
setMultiple,
isDragging,
Expand Down
1 change: 0 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { useReactDropzoneVV, ReactDropzoneVV, OnSelectProps } from "@lib/index"
const App: FC = () => {
const reactDropzoneVV = useReactDropzoneVV({
accept: ".png,.jpg,.jpeg,.webp",
disabledDropOnDocment: true,
})

const handleSelect = ({ classifiedFiles }: OnSelectProps) => {
Expand Down

0 comments on commit b3bbb7e

Please sign in to comment.