@bigfishtv/cockpit/src/components/tree/TreeDragLayer.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { DragLayer } from 'react-dnd'

import { getChildByIdImmutable } from '../../utils/treeUtils'

/**
 * Wrapper for TreeItem being dragged
 */
@DragLayer(monitor => ({
	item: monitor.getItem(),
	itemType: monitor.getItemType(),
	initialOffset: monitor.getInitialSourceClientOffset(),
	currentOffset: monitor.getSourceClientOffset(),
}))
export default class TreeDragLayer extends Component {
	static propTypes = {
		/** disregard - provided by react-dnd  */
		initialOffset: PropTypes.shape({
			x: PropTypes.number.isRequired,
			y: PropTypes.number.isRequired,
		}),
		/** disregard - provided by react-dnd  */
		currentOffset: PropTypes.shape({
			x: PropTypes.number.isRequired,
			y: PropTypes.number.isRequired,
		}),
		/** if item is being dragged */
		dragging: PropTypes.bool,
		/** list of ids for selected items */
		selectedIds: PropTypes.array,
		/** immutable tree, list of maps of list of maps etc. */
		InflatedTree: ImmutablePropTypes.listOf(ImmutablePropTypes.map),
	}

	constructor() {
		super()
		this.state = {
			title: '',
			count: 0,
		}
	}

	componentWillUpdate(nextProps, nextState) {
		if (!this.props.dragging && nextProps.dragging) {
			const { selectedIds, InflatedTree } = nextProps
			let title = ''
			let count = 0
			if (selectedIds.length == 1) {
				const item = getChildByIdImmutable(selectedIds[0], InflatedTree).toObject()
				title = item.title || item.name
			} else if (selectedIds.length > 1) {
				const titles = selectedIds.map(id => {
					const item = getChildByIdImmutable(id, InflatedTree).toObject()
					return item.title || item.name
				})
				count = selectedIds.length
				title = titles.join(', ')
			}
			this.setState({ title, count })
		}
	}

	render() {
		const { initialOffset, currentOffset, dragging } = this.props
		if (!dragging || !initialOffset || !currentOffset) return null
		const { title } = this.state
		const { count } = this.state

		const transform = 'translate(' + currentOffset.x + 'px, ' + currentOffset.y + 'px)'
		const styles = { transform: transform, WebkitTransform: transform }

		return (
			<div className="tree-overlay">
				<div className="tree-node" style={styles}>
					<div className="tree-cell">
						{count > 1 && <div className="tree-cell-count">{count}</div>}
						<div className="tree-cell-title">{title}</div>
					</div>
				</div>
			</div>
		)
	}
}