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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { DragSource, DropTarget } from 'react-dnd'
class DraggableSeed extends Component {
static propTypes = {
// React DnD Props
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired,
isDragging: PropTypes.bool,
isOver: PropTypes.bool,
canDrop: PropTypes.bool,
// Own Props
onClick: PropTypes.func.isRequired,
setHoveringIndex: PropTypes.func.isRequired,
index: PropTypes.number,
draggingSeedIndex: PropTypes.number,
word: PropTypes.string,
className: PropTypes.string,
selected: PropTypes.bool,
droppable: PropTypes.bool,
}
static defaultProps = {
className: '',
onClick () {},
}
componentWillReceiveProps (nextProps) {
const { isOver, setHoveringIndex } = this.props
if (isOver && !nextProps.isOver) {
setHoveringIndex(-1)
}
}
render () {
const {
connectDragSource,
connectDropTarget,
isDragging,
index,
word,
selected,
className,
onClick,
isOver,
canDrop,
} = this.props
return connectDropTarget(connectDragSource(
<div
key={index}
className={classnames('btn-secondary confirm-seed-phrase__seed-word', className, {
'confirm-seed-phrase__seed-word--selected btn-primary': selected,
'confirm-seed-phrase__seed-word--dragging': isDragging,
'confirm-seed-phrase__seed-word--empty': !word,
'confirm-seed-phrase__seed-word--active-drop': !isOver && canDrop,
'confirm-seed-phrase__seed-word--drop-hover': isOver && canDrop,
})}
onClick={onClick}
>
{ word }
</div>
))
}
}
const SEEDWORD = 'SEEDWORD'
const seedSource = {
beginDrag (props) {
setTimeout(() => props.setDraggingSeedIndex(props.seedIndex), 0)
return {
seedIndex: props.seedIndex,
word: props.word,
}
},
canDrag (props) {
return props.draggable
},
endDrag (props, monitor) {
const dropTarget = monitor.getDropResult()
if (!dropTarget) {
setTimeout(() => props.setDraggingSeedIndex(-1), 0)
return
}
props.onDrop(dropTarget.targetIndex)
},
}
const seedTarget = {
drop (props) {
return {
targetIndex: props.index,
}
},
canDrop (props) {
return props.droppable
},
hover (props) {
props.setHoveringIndex(props.index)
},
}
const collectDrag = (connect, monitor) => {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
}
}
const collectDrop = (connect, monitor) => {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}
}
export default DropTarget(SEEDWORD, seedTarget, collectDrop)(DragSource(SEEDWORD, seedSource, collectDrag)(DraggableSeed))
|
