aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js
blob: cdb8819217ac958b4b8b7e62817c72a67b879659 (plain) (blame)
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))