-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Box.tsx
83 lines (74 loc) · 1.95 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React from 'react'
import PropTypes from 'prop-types'
import {
DragSource,
ConnectDragSource,
DragSourceConnector,
DragSourceMonitor,
} from 'react-dnd'
import ItemTypes from '../Single Target/ItemTypes'
import { DragDropManager } from 'dnd-core'
const style: React.CSSProperties = {
border: '1px dashed gray',
backgroundColor: 'white',
padding: '0.5rem 1rem',
marginRight: '1.5rem',
marginBottom: '1.5rem',
float: 'left',
}
const boxSource = {
beginDrag(props: BoxProps) {
return {
name: props.name,
}
},
endDrag(props: BoxProps, monitor: DragSourceMonitor) {
const item = monitor.getItem()
const dropResult = monitor.getDropResult()
if (dropResult) {
let alertMessage = ''
const isDropAllowed =
dropResult.allowedDropEffect === 'any' ||
dropResult.allowedDropEffect === dropResult.dropEffect
if (isDropAllowed) {
const isCopyAction = dropResult.dropEffect === 'copy'
const actionName = isCopyAction ? 'copied' : 'moved'
alertMessage = `You ${actionName} ${item.name} into ${dropResult.name}!`
} else {
alertMessage = `You cannot ${dropResult.dropEffect} an item into the ${
dropResult.name
}`
}
alert(alertMessage)
}
},
}
export interface BoxProps {
name: string
isDragging?: boolean
connectDragSource?: ConnectDragSource
}
@DragSource(
ItemTypes.BOX,
boxSource,
(connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
}),
)
export default class Box extends React.Component<BoxProps> {
public static propTypes = {
connectDragSource: PropTypes.func.isRequired,
isDragging: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired,
}
public render() {
const { isDragging, connectDragSource } = this.props
const { name } = this.props
const opacity = isDragging ? 0.4 : 1
return (
connectDragSource &&
connectDragSource(<div style={{ ...style, opacity }}>{name}</div>)
)
}
}