@6thquake/react-material/es/Upload/TargetBox.js

React components that implement Google's Material Design.

/**
 * @ignore - do not document.
 */
import React, { Component } from 'react';
import { DropTarget } from 'react-dnd';
const activeStyle = {
  height: '30px',
  minWidth: '80px',
  position: 'absolute',
  top: '15px',
  left: '50%',
  transform: 'translate(-50%, 0%)'
};
const boxTarget = {
  drop(props, monitor) {
    if (props.onDrop) {
      props.onDrop(props, monitor);
    }
  }

};

function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
  };
}

class TargetBox extends Component {
  render() {
    const {
      canDrop,
      isOver,
      connectDropTarget,
      beforeDragMention,
      onDragMention
    } = this.props;
    const isActive = canDrop && isOver;
    return connectDropTarget(React.createElement("div", null, React.createElement("div", {
      style: activeStyle
    }, " ", isActive ? onDragMention : beforeDragMention, " "), this.props.children));
  }

}

export default DropTarget(props => props.accepts, boxTarget, collect)(TargetBox);