text: import React, { PureComponent, memo } from 'react';
  import { DragLayer } from 'react-dnd';
  import PropTypes from 'prop-types';
  import { ThumbnailEntry } from './ThumbnailEntry';
  import './DragPreview.styl';
  
  let subscribedToOffsetChange = false;
  let dragPreviewRef = null;
  
  const collector = monitor => {
    if (!subscribedToOffsetChange) {
      monitor.subscribeToOffsetChange(onOffsetChange(monitor));
      subscribedToOffsetChange = true;
    }
  
    if (dragPreviewRef) {
      const offset =
        monitor.getSourceClientOffset() || monitor.getInitialSourceClientOffset();
  
      if (offset) {
        const transform = `translate(${offset.x}px, ${offset.y}px)`;
        dragPreviewRef.style['transform'] = transform;
        dragPreviewRef.style['-webkit-transform'] = transform;
      }
    }
  
    const item = monitor.getItem();
    let newItem = {};
    if (item) {
      newItem = {
        active: item.active,
        altImageText: item.altImageText,
        id: item.id,
        imageSrc: item.imageSrc,
        imageId: item.imageId,
        instanceNumber: item.instanceNumber,
        error: item.error,
        numImageFrames: item.numImageFrames,
        seriesDescription: item.seriesDescription,
        seriesNumber: item.seriesNumber,
        stackPercentComplete: item.stackPercentComplete,
      };
    }
  
    return {
      ...newItem,
      isDragging: monitor.isDragging(),
    };
  };
  
  const onOffsetChange = monitor => () => {
    if (!dragPreviewRef) return;
  
    const offset =
      monitor.getSourceClientOffset() || monitor.getInitialSourceClientOffset();
    if (!offset) return;
  
    const transform = `translate(${offset.x}px, ${offset.y}px)`;
    dragPreviewRef.style['transform'] = transform;
    dragPreviewRef.style['-webkit-transform'] = transform;
  };
  
  const updateRef = ref => {
    dragPreviewRef = ref;
  };
  
  class DragPreview extends PureComponent {
    render() {
      const { isDragging } = this.props;
      if (!isDragging) return null;
      return (
        <div className="DragPreview">
          <div className="source-preview" ref={updateRef}>
            <ThumbnailEntry {...this.props} />
          </div>
        </div>
      );
    }
  }
  
  DragPreview.propTypes = {
    isDragging: PropTypes.bool,
  };
  
  export default DragLayer(collector)(memo(DragPreview));
  