forked from react-dnd/react-dnd
-
Notifications
You must be signed in to change notification settings - Fork 0
/
TargetBox.tsx
55 lines (50 loc) · 1.2 KB
/
TargetBox.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import { CSSProperties, FC } from 'react'
import { NativeTypes } from 'react-dnd-html5-backend'
import { useDrop, DropTargetMonitor } from 'react-dnd'
const style: CSSProperties = {
border: '1px solid gray',
height: '15rem',
width: '15rem',
padding: '2rem',
textAlign: 'center',
}
export interface TargetBoxProps {
onDrop: (item: { files: any[] }) => void
}
export const TargetBox: FC<TargetBoxProps> = (props) => {
const { onDrop } = props
const [{ canDrop, isOver }, drop] = useDrop(
() => ({
accept: [NativeTypes.FILE],
drop(item: { files: any[] }) {
if (onDrop) {
onDrop(item)
}
},
canDrop(item: any) {
console.log('canDrop', item.files[0], item.items[0])
return true
},
hover(item: any) {
console.log('hover', item.files[0], item.items[0])
},
collect: (monitor: DropTargetMonitor) => {
const item = monitor.getItem() as any
if (item) {
console.log('collect', item.files[0], item.items[0])
}
return {
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}
},
}),
[props],
)
const isActive = canDrop && isOver
return (
<div ref={drop} style={style}>
{isActive ? 'Release to drop' : 'Drag file here'}
</div>
)
}