74 lines
1.7 KiB
JavaScript
74 lines
1.7 KiB
JavaScript
|
import PropTypes from 'prop-types';
|
||
|
|
import React, { Component } from 'react';
|
||
|
|
import { DropTarget } from 'react-dnd';
|
||
|
|
import './LayoutPanelDropTarget.css';
|
||
|
|
|
||
|
|
// Drag sources and drop targets only interact
|
||
|
|
// if they have the same string type.
|
||
|
|
const Types = {
|
||
|
|
THUMBNAIL: 'thumbnail',
|
||
|
|
};
|
||
|
|
|
||
|
|
const divTarget = {
|
||
|
|
drop(props, monitor, component) {
|
||
|
|
const item = monitor.getItem();
|
||
|
|
|
||
|
|
if (props.onDrop) {
|
||
|
|
props.onDrop({
|
||
|
|
viewportIndex: props.viewportIndex,
|
||
|
|
item,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
id: `LayoutPanelDropTarget-${props.viewportIndex}`,
|
||
|
|
viewportIndex: props.viewportIndex,
|
||
|
|
item,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// TODO: Find out why we can't move this into the Example app instead.
|
||
|
|
// It looks like the context isn't properly shared.
|
||
|
|
class LayoutPanelDropTarget extends Component {
|
||
|
|
static className = 'LayoutPanelDropTarget';
|
||
|
|
|
||
|
|
static defaultProps = {
|
||
|
|
isOver: false,
|
||
|
|
canDrop: false,
|
||
|
|
};
|
||
|
|
|
||
|
|
static propTypes = {
|
||
|
|
connectDropTarget: PropTypes.func.isRequired,
|
||
|
|
canDrop: PropTypes.bool.isRequired,
|
||
|
|
isOver: PropTypes.bool.isRequired,
|
||
|
|
viewportComponent: PropTypes.object,
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { canDrop, isOver, connectDropTarget } = this.props;
|
||
|
|
const isActive = canDrop && isOver;
|
||
|
|
|
||
|
|
let className = LayoutPanelDropTarget.className;
|
||
|
|
|
||
|
|
if (isActive) {
|
||
|
|
className += ' hovered';
|
||
|
|
} else if (canDrop) {
|
||
|
|
className += ' can-drop';
|
||
|
|
}
|
||
|
|
|
||
|
|
return connectDropTarget(
|
||
|
|
<div className={className}>{this.props.children}</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const collect = (connect, monitor) => ({
|
||
|
|
connectDropTarget: connect.dropTarget(),
|
||
|
|
canDrop: monitor.canDrop(),
|
||
|
|
isOver: monitor.isOver(),
|
||
|
|
});
|
||
|
|
|
||
|
|
export default DropTarget(Types.THUMBNAIL, divTarget, collect)(
|
||
|
|
LayoutPanelDropTarget
|
||
|
|
);
|