# All files / components/DragLayer DragLayer.js

0% Statements 0/49
0% Branches 0/18
0% Functions 0/7
0% Lines 0/19

    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
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104

     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';
    import { DragContext } from 'components/DragContainer';
    import { identity } from 'lodash';

    /**
     * Renders a generic layer for drawing dragged items from draggable
     * components.
     */
    class DragLayer extends React.Component {
      static propTypes = {
        /**
         * Provided by DragGroupItem via drag context.
         * Contains details needed to render an item preview
         */
        item: PropTypes.shape({
          children: PropTypes.node,
          dimensions: PropTypes.shape({
            width: PropTypes.number,
            height: PropTypes.number,
          }),
        }),
        /**
         * Provided by
         * Offset values for the position of the dragged preview
         * item
         */
        clientOffset: PropTypes.object,

        /**
         * Override the presentational component which renders the full-screen
         * overlay
         */
        Overlay: PropTypes.func,
        /**
         * Override the presentational component which positions and sizes
         * the preview element
         */
        PreviewContainer: PropTypes.func,
      };

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

      renderPreviewContent = () => {
        const { item } = this.props;

        return (
          item.children &&
          React.Children.map(
            item.children,
            child =>
              child
                ? React.cloneElement(child, { wrapDragHandle: identity })
                : null,
          )
        );
      };

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

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

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

        return (
          <DragContext.Provider value={{ wrapDragHandle: identity }}>
            <Overlay>
              <div style={previewPositionStyles}>
                <PreviewContainer>{this.renderPreviewContent()}</PreviewContainer>
              </div>
            </Overlay>
          </DragContext.Provider>
        );
      }
    }

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

    export default LibDragLayer(collect)(DragLayer);