React-DND not firing drop and hover on target

I am having some troubles w/ React-DND trying to get the DropTarget-side to work. When I drag the DragSource, the target's canDrop flips to true, but the isOver stays false, even if I drag the source over.

For the DropSource I have the following:

import DropTypes from "../../common/DropTypes";

class ToolbarItem extends React.Component {
  render() {
    const { children } = this.props;

    // These two props are injected by React DnD,
    // as defined by your `collect` function above:
    const { isDragging, connectDragSource } = this.props;
    return connectDragSource(<div>{children}</div>);
  }
}

/**
 * Specifies the drag source contract.
 * Only `beginDrag` function is required.
 */
const dragSource = {
  beginDrag(props, monitor, component) {
    return {
      description: props.description
    };
  }
};

/**
 * Specifies which props to inject into your component.
 */
function dragCollect(connect, monitor) {
  return {
    // Call this function inside render()
    // to let React DnD handle the drag events:
    connectDragSource: connect.dragSource(),
    // You can ask the monitor about the current drag state:
    isDragging: monitor.isDragging()
  };
}

console.log("Source DropType: ", DropTypes.TOOLBAR_ITEM);
const DragableToolbarItem = DragSource(
  DropTypes.TOOLBAR_ITEM,
  dragSource,
  dragCollect
)(ToolbarItem);

And for DropTarget I have:

import DropTypes from "../../common/DropTypes";

class TemplateEditor extends React.Component {
  componentDidMount() {}

  render() {
    console.log("props: ", this.props);
    const { isOver, canDrop } = this.props;
    return (
      <div className="h-100">
        Editor{isOver ? " - OVER!" : ""}
        {canDrop ? " - CAN DROP!" : ""}
      </div>
    );
  }
}

/**
 * Specifies the drag source contract.
 * Only `beginDrag` function is required.
 */
const dropSource = {
  drop(props, monitor, component) {
    console.log("props: ", props);
    console.log("monitor: ", monitor);
    console.log("component: ", component);
  },
  hover(props, monitor, component) {
    console.log("props: ", props);
    console.log("monitor: ", monitor);
    console.log("component: ", component);
  }
};

const dropCollector = (connect, monitor) => ({
  isOver: monitor.isOver(),
  item: monitor.getItem(),
  canDrop: monitor.canDrop()
});

// export default TemplateEditor;
console.log("Target DropType: ", DropTypes.TOOLBAR_ITEM);
export default DropTarget(DropTypes.TOOLBAR_ITEM, dropSource, dropCollector)(
  TemplateEditor
);

DropTypes is just a const where I setup the types so I can ensure they are set on the source and target correctly:

export default {
  TOOLBAR_ITEM: 'TOOLBAR_ITEM',
};

I've ensured that my target's <div> is actually sized so that I can hover over, so I know that's not the issue.

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.