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 45 | 1x 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> ); } } |