Mo Elzubeir
62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { DragSource } from 'react-dnd'
|
|
|
|
const Types = {
|
|
LOC: 'location'
|
|
}
|
|
|
|
const locationSource = {
|
|
beginDrag (props) {
|
|
// Return the data describing the dragged item
|
|
return { oldDropTargetType: props.dropTargetType }
|
|
},
|
|
|
|
endDrag (props, monitor, component) {
|
|
// When dropped on a compatible target, do something
|
|
if (monitor.getDropResult() !== null) {
|
|
const locFrom = props.dropTargetType
|
|
const locTo = monitor.getDropResult().newDropTargetType
|
|
|
|
const locationType = props.locationType
|
|
const location = props.location
|
|
|
|
props.moveLocation(locFrom, locTo, locationType, location)
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Specifies which props to inject into your component.
|
|
*/
|
|
function collectDragSource (connect) {
|
|
return {
|
|
// Call this function inside render()
|
|
// to let React DnD handle the drag events:
|
|
connectDragSource: connect.dragSource()
|
|
}
|
|
}
|
|
|
|
export class LocationsTabList extends React.Component {
|
|
static propTypes = {
|
|
location: PropTypes.object.isRequired,
|
|
dropTargetType: PropTypes.string.isRequired,
|
|
moveLocation: PropTypes.func.isRequired,
|
|
connectDragSource: PropTypes.func.isRequired
|
|
};
|
|
|
|
render () {
|
|
const { connectDragSource } = this.props
|
|
const { location } = this.props
|
|
|
|
return connectDragSource(
|
|
<li className="list-group-item cursor-move p-2">
|
|
<span className="drag-handle" />
|
|
{location.name}
|
|
</li>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default DragSource(Types.LOC, locationSource, collectDragSource)(LocationsTabList)
|