-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Box.tsx
50 lines (45 loc) · 1.01 KB
/
Box.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
import type { CSSProperties, FC } from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px dashed gray',
backgroundColor: 'white',
padding: '0.5rem 1rem',
marginRight: '1.5rem',
marginBottom: '1.5rem',
cursor: 'move',
float: 'left',
}
export interface BoxProps {
name: string
}
interface DropResult {
name: string
}
export const Box: FC<BoxProps> = function Box({ name }) {
const [{ isDragging }, drag] = useDrag(() => ({
type: ItemTypes.BOX,
item: { name },
end: (item, monitor) => {
const dropResult = monitor.getDropResult<DropResult>()
if (item && dropResult) {
alert(`You dropped ${item.name} into ${dropResult.name}!`)
}
},
collect: (monitor) => ({
isDragging: monitor.isDragging(),
handlerId: monitor.getHandlerId(),
}),
}))
const opacity = isDragging ? 0.4 : 1
return (
<div
ref={drag}
role="Box"
style={{ ...style, opacity }}
data-testid={`box-${name}`}
>
{name}
</div>
)
}