# All files / components/DragContainer DragContainer.js

0% Statements 0/58
0% Branches 0/9
0% Functions 0/5
0% Lines 0/18

    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
    83

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import Icon from 'components/Icon';
    import DefaultContainer from './styles/Container';
    import DefaultChildContainer from './styles/ChildContainer';
    import DefaultIconGroup from './styles/IconGroup';
    import DragContext from './DragContext';

    const DragHandle = styled(Icon)`
      &:hover:not(:active) {
        cursor: pointer;
      }
    `;

    const DefaultControls = (
      <React.Fragment>
        <Icon name="settings" />
        <Icon name="delete3" />
      </React.Fragment>
    );

    /**
     * This is a prebuilt example container that can be used with [DragList](/#!/DragList)
     * or [DragGroup](/#!/DragGroup). It features a drag handle and a section that can have
     * controls for the item - just set `controls` to a react node and attach handlers for
     * the click events as needed.
     */
    class DragContainer extends React.PureComponent {
      static Context = DragContext;

      static propTypes = {
        /**
         * Should dragging be enabled or not?
         */
        canDrag: PropTypes.bool,
        /**
         * Pass in custom controls for the list item.
         */
        controls: PropTypes.node,
        children: PropTypes.node.isRequired,
      };

      static defaultProps = {
        canDrag: true,
        controls: DefaultControls,
        Container: DefaultContainer,
        ChildContainer: DefaultChildContainer,
        IconGroup: DefaultIconGroup,
      };

      renderContents = ({ isDragging, wrapDragHandle }) => {
        const {
          canDrag,
          controls,
          children,
          Container,
          ChildContainer,
          IconGroup,
          ...rest
        } = this.props;

        return (
          <Container isDragging={isDragging} {...rest}>
            <ChildContainer isDragging={isDragging}>{children}</ChildContainer>
            <IconGroup isDragging={isDragging}>
              {controls}
              {/* Using wrapDragHandle to indicate which element is the handle */}
              {canDrag &&
                wrapDragHandle &&
                wrapDragHandle(<DragHandle name="moveGrabber" />)}
            </IconGroup>
          </Container>
        );
      };

      render() {
        return <DragContext.Consumer>{this.renderContents}</DragContext.Consumer>;
      }
    }

    export default DragContainer;