# All files / components/DragGroups DragLayer.js

0% Statements 0/60
0% Branches 0/37
0% Functions 0/13
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

     import React from 'react';
    import PropTypes from 'prop-types';
    import { DragLayer as LibDragLayer } from 'react-dnd';
    import DragItemPreviewContainer from './styles/DragItemPreviewContainer';
    import DragLayerOverlay from './styles/DragLayerOverlay';

    class DragLayer extends React.Component {
      static propTypes = {
        item: PropTypes.object,
        clientOffset: PropTypes.object,
        Overlay: PropTypes.func,
        PreviewContainer: PropTypes.func,
      };

      static defaultProps = {
        item: null,
        clientOffset: null,
        Overlay: DragLayerOverlay,
        PreviewContainer: DragItemPreviewContainer,
      };

      renderPreviewContent = () => {
        const { item } = this.props;
        return React.cloneElement(item.children, {
          // providing a no-op handle wrapper so the handle is still rendered
          wrapDragHandle: handle => handle,
        });
      };

      render() {
        const { item, clientOffset, Overlay, PreviewContainer } = this.props;

        if (!item || !clientOffset) {
          return <Overlay />;
        }

        const previewPositionStyles = {
          transform: `translate(${clientOffset.x}px, ${clientOffset.y}px)`,
          width: item.dimensions.width + 'px',
          height: item.dimensions.height + 'px',
        };

        return (
          <Overlay>
            <div style={previewPositionStyles}>
              <PreviewContainer>{this.renderPreviewContent()}</PreviewContainer>
            </div>
          </Overlay>
        );
      }
    }

    const collect = monitor => ({
      item: monitor.getItem(),
      clientOffset: monitor.getClientOffset(),
    });

    export default LibDragLayer(collect)(DragLayer);