-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Box.tsx
47 lines (43 loc) · 874 Bytes
/
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
import type { CSSProperties, FC, ReactNode } from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
position: 'absolute',
border: '1px dashed gray',
backgroundColor: 'white',
padding: '0.5rem 1rem',
cursor: 'move',
}
export interface BoxProps {
id: any
left: number
top: number
hideSourceOnDrag?: boolean
children?: ReactNode
}
export const Box: FC<BoxProps> = ({
id,
left,
top,
hideSourceOnDrag,
children,
}) => {
const [{ isDragging }, drag] = useDrag(
() => ({
type: ItemTypes.BOX,
item: { id, left, top },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}),
[id, left, top],
)
if (isDragging && hideSourceOnDrag) {
return <div ref={drag} />
}
return (
<div ref={drag} style={{ ...style, left, top }} role="Box">
{children}
</div>
)
}