-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Dustbin.tsx
41 lines (37 loc) · 933 Bytes
/
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
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 const Dustbin: FC = () => {
const [{ canDrop, isOver }, drop] = useDrop(() => ({
accept: ItemTypes.BOX,
drop: () => ({ name: 'Dustbin' }),
collect: (monitor) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
}))
const isActive = canDrop && isOver
let backgroundColor = '#222'
if (isActive) {
backgroundColor = 'darkgreen'
} else if (canDrop) {
backgroundColor = 'darkkhaki'
}
return (
<div ref={drop} role={'Dustbin'} style={{ ...style, backgroundColor }}>
{isActive ? 'Release to drop' : 'Drag a box here'}
</div>
)
}