Class TargetBox

examples/03 Nesting/Drag Sources/TargetBox.js:20–63

};

@DropTarget([Colors.YELLOW, Colors.BLUE], ColorTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
  draggingColor: monitor.getItemType(),
}))
class TargetBox extends Component {
  static propTypes = {
    isOver: PropTypes.bool.isRequired,
    canDrop: PropTypes.bool.isRequired,
    draggingColor: PropTypes.string,
    lastDroppedColor: PropTypes.string,
    connectDropTarget: PropTypes.func.isRequired,
    onDrop: PropTypes.func.isRequired,
  };

  render() {
    const { canDrop, isOver, draggingColor, lastDroppedColor, connectDropTarget } = this.props;
    const opacity = isOver ? 1 : 0.7;

    let backgroundColor = '#fff';
    switch (draggingColor) {
      case Colors.BLUE:
        backgroundColor = 'lightblue';
        break;
      case Colors.YELLOW:
        backgroundColor = 'lightgoldenrodyellow';
        break;
      default:
        break;
    }

    return connectDropTarget(
      <div style={{ ...style, backgroundColor, opacity }}>

        <p>Drop here.</p>

        {!canDrop && lastDroppedColor &&
          <p>Last dropped: {lastDroppedColor}</p>
        }
      </div>,
    );
  }
}

export default class StatefulTargetBox extends Component {
  constructor(props) {