# All files / components/DragGroups DragGroups.js

0% Statements 0/72
0% Branches 0/35
0% Functions 0/15
0% Lines 0/20

    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
    79
    80
    81
    82

     import React from 'react';
    import PropTypes from 'prop-types';
    import withDragDropContext from './withDragDropContext';
    import Group from './DragGroup';
    import Item from './DragItem';
    import DragGroupsContainer from './styles/DragGroupsContainer';
    import DragLayer from './DragLayer';

    class DragGroups extends React.Component {
      static Group = Group;
      static Item = Item;

      static propTypes = {
        children: PropTypes.node.isRequired,
        onItemMoved: PropTypes.func.isRequired,
        onGroupInserted: PropTypes.func.isRequired,
        Container: PropTypes.func,
        groupBaseName: PropTypes.string,
        itemType: PropTypes.string,
        onGroupRemoved: PropTypes.func.isRequired,
      };

      static defaultProps = {
        Container: DragGroupsContainer,
        groupBaseName: 'Group',
        itemType: 'universal',
      };

      renderGroups = () => {
        const {
          children,
          itemType,
          onGroupInserted,
          groupBaseName,
          onGroupRemoved,
        } = this.props;
        const childArray = React.Children.toArray(children);
        return childArray.map((child, idx) =>
          React.cloneElement(child, {
            itemType,
            groupIndex: idx,
            title: `${groupBaseName} ${idx + 1}`,
            onItemDropped: this.handleItemDropped,
            groupCount: childArray.length,
            onGroupInserted: itemIdx => onGroupInserted(idx, itemIdx),
            onGroupRemoved: () => onGroupRemoved(idx),
          }),
        );
      };

      handleItemDropped = ({
        sourceGroupIndex,
        sourceIndex,
        targetGroupIndex = null,
      }) => {
        const { onItemMoved } = this.props;

        onItemMoved({
          from: {
            groupIndex: sourceGroupIndex,
            itemIndex: sourceIndex,
          },
          to: {
            groupIndex: targetGroupIndex,
          },
        });
      };

      render() {
        const { Container } = this.props;

        return (
          <Container>
            {this.renderGroups()}
            <DragLayer />
          </Container>
        );
      }
    }

    export default withDragDropContext(DragGroups);