All files / src/ui TrashCan.js

66.67% Statements 8/12
50% Branches 1/2
33.33% Functions 2/6
66.67% Lines 8/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 451x 1x 1x 1x 1x       590x                                           236x 236x                          
import React, {Component} from 'react';
import PropTypes from 'prop-types/prop-types';
import {DropNodeTarget} from '../dnd';
import {dropOntoTrashCan} from '../actions';
require('./TrashCan.less');
 
export default @DropNodeTarget(function(monitor) {
  return dropOntoTrashCan(monitor.getItem());
}) class TrashCan extends Component {
  static propTypes = {
    connectDropTarget: PropTypes.func.isRequired, // from dnd.js
  }
 
  state = {
    isOverTrashCan: false,
  }
 
  handleDragEnter = () => {
    this.setState({isOverTrashCan: true});
  }
 
  handleDragLeave = () => {
    this.setState({isOverTrashCan: false});
  }
 
  handleDragOver = (event) => {
    event.preventDefault();
  }
 
  render() {
    let classNames = "TrashCan" + (this.state.isOverTrashCan ? " over" : "");
    return this.props.connectDropTarget(
      <div className={classNames}
           aria-hidden={true}
           onClick={this.handleToggle}
           onDragEnter={this.handleDragEnter}
           onDragLeave={this.handleDragLeave}
           onDrop={this.handleDragLeave}
           onDragOver={this.handleDragOver}>
           🗑️
      </div>
    );
  }
}