# All files / components/DragGroup DragGroupDropArea.js

0% Statements 0/40
0% Branches 0/6
0% Functions 0/7
0% Lines 0/13

    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

     import React from 'react';
    import PropTypes from 'prop-types';
    import { DropTarget } from 'react-dnd';
    import DragGroupDropAreaContent from './styles/DragGroupDropAreaContent';

    /**
     * The droppable area of a DragGroup. Connected to react-dnd.
     * Renders its children when idle, but if a dragging operation is
     * ongoing, its default Content presenter will render a
     * drop zone box.
     *
     * You may reference this component if you choose to override it
     * in DragGroup, otherwise it is not needed. See DragGroup docs.
     */
    class DragGroupDropArea extends React.Component {
      static propTypes = {
        itemType: PropTypes.string.isRequired,
        groupId: PropTypes.number.isRequired,
        Content: PropTypes.func,
      };

      static defaultProps = {
        Content: DragGroupDropAreaContent,
      };

      render() {
        const {
          connectDropTarget,
          Content,
          canDrop,
          isOver,
          children,
        } = this.props;
        return connectDropTarget(
          <div>
            <Content canDrop={canDrop} isOver={isOver}>
              {children}
            </Content>
          </div>,
        );
      }
    }

    const dropSource = {
      drop(props) {
        return {
          type: 'group',
          groupId: props.groupId,
        };
      },
    };

    const collect = (connect, monitor) => ({
      connectDropTarget: connect.dropTarget(),
      canDrop: monitor.canDrop(),
      isOver: monitor.isOver(),
    });

    export default DropTarget(props => props.itemType, dropSource, collect)(
      DragGroupDropArea,
    );