-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Dustbin.tsx
58 lines (53 loc) · 1.26 KB
/
Dustbin.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
56
57
58
import type { CSSProperties, FC } from 'react'
import { useDrop } from 'react-dnd'
import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
height: '12rem',
width: '12rem',
marginRight: '1.5rem',
marginBottom: '1.5rem',
color: 'white',
padding: '1rem',
textAlign: 'center',
fontSize: '1rem',
lineHeight: 'normal',
float: 'left',
}
export interface DustbinProps {
allowedDropEffect: string
}
function selectBackgroundColor(isActive: boolean, canDrop: boolean) {
if (isActive) {
return 'darkgreen'
} else if (canDrop) {
return 'darkkhaki'
} else {
return '#222'
}
}
export const Dustbin: FC<DustbinProps> = ({ allowedDropEffect }) => {
const [{ canDrop, isOver }, drop] = useDrop(
() => ({
accept: ItemTypes.BOX,
drop: () => ({
name: `${allowedDropEffect} Dustbin`,
allowedDropEffect,
}),
collect: (monitor: any) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
}),
[allowedDropEffect],
)
const isActive = canDrop && isOver
const backgroundColor = selectBackgroundColor(isActive, canDrop)
return (
<div ref={drop} style={{ ...style, backgroundColor }}>
{`Works with ${allowedDropEffect} drop effect`}
<br />
<br />
{isActive ? 'Release to drop' : 'Drag a box here'}
</div>
)
}