# All files / components/DragGroups DragItem.js

12.5% Statements 2/16
0% Branches 0/4
0% Functions 0/5
13.33% Lines 2/15

    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
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78

    1x

    1x

     import React from 'react';
    import ReactDOM from 'react-dom';
    import { DragSource } from 'react-dnd';
    import { getEmptyImage } from 'react-dnd-html5-backend';
    import DragItemContainer from './styles/DragItemContainer';

    class DragItem extends React.Component {
      componentDidMount() {
        // Use empty image as a drag preview so browsers don't draw it
        // and we can draw whatever we want on the custom drag layer instead.
        this.props.connectDragPreview(getEmptyImage(), {
          // IE fallback: specify that we'd rather screenshot the node
          // when it already knows it's being dragged so we can hide it with CSS.
          captureDraggingState: true,
        });
      }

      wrapDragHandle = dragHandleNode =>
        this.props.connectDragSource(
          <div
            style={{
              cursor: '-webkit-grab',
              display: this.props.canDrag ? 'block' : 'none',
            }}
          >
            {dragHandleNode}
          </div>,
        );

      render() {
        const {
          connectDragSource,
          connectDragPreview,
          isDragging,
          children,
        } = this.props;

        return (
          <DragItemContainer isDragging={isDragging}>
            {React.cloneElement(React.Children.only(children), {
              wrapDragHandle: this.wrapDragHandle,
            })}
          </DragItemContainer>
        );
      }
    }

    const itemSource = {
      beginDrag(props, monitor, component) {
        const domNode = ReactDOM.findDOMNode(component);
        const clientRect = domNode.getBoundingClientRect();
        return {
          children: props.children,
          dimensions: clientRect,
        };
      },

      endDrag(props, monitor, component) {
        if (!monitor.didDrop()) {
          return;
        }

        const item = monitor.getItem();
        const dropResult = monitor.getDropResult();
        props.onDrop(dropResult.type, dropResult.groupIndex);
      },
    };

    const collect = (connect, monitor) => ({
      connectDragSource: connect.dragSource(),
      connectDragPreview: connect.dragPreview(),
      isDragging: monitor.isDragging(),
    });

    export default DragSource(props => props.itemType, itemSource, collect)(
      DragItem,
    );