@bigfishtv/cockpit/src/components/asset/ReorderableAssetCell.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { DragSource, DropTarget } from 'react-dnd'

import * as DragTypes from '../../constants/DragTypes'
import { AssetCellStandard } from './AssetCell'

const dragSource = {
	beginDrag(props) {
		return {
			id: props.asset.id,
		}
	},
}

const cellTarget = {
	hover(props, monitor, component) {
		const ownId = props.asset.id
		const draggedId = monitor.getItem().id
		if (draggedId === ownId) return

		const ownIndex = props.index
		const draggedIndex = monitor.getItem().index

		const boundingRect = ReactDOM.findDOMNode(component).getBoundingClientRect()
		const clientOffset = monitor.getClientOffset()
		const ownMiddleY = (boundingRect.right - boundingRect.left) / 2
		const offsetY = clientOffset.x - boundingRect.left

		if (draggedIndex < ownIndex && offsetY < ownMiddleY) return
		if (draggedIndex > ownIndex && offsetY > ownMiddleY) return

		props.onMove(draggedId, ownId)
	},
}

@DropTarget(DragTypes.ASSET_CELL, cellTarget, connect => ({
	connectDropTarget: connect.dropTarget(),
}))
@DragSource(() => DragTypes.ASSET_CELL, dragSource, (connect, monitor) => ({
	connectDragSource: connect.dragSource(),
	isDragging: monitor.isDragging(),
}))
export default class ReorderableAssetCell extends Component {
	static defaultProps = {
		cellSize: 150,
		AssetCell: AssetCellStandard,
	}

	render() {
		const { connectDragSource, connectDropTarget, AssetCell, ...rest } = this.props
		return connectDragSource(
			connectDropTarget(
				<div className="reorderable-asset-cell" style={{ minWidth: this.props.cellSize }}>
					<AssetCell {...rest} />
				</div>
			)
		)
	}
}