artworkFile.js

import React from 'react';
import { findDOMNode } from 'react-dom';
import { Link } from 'react-router';
import { DragSource, DropTarget } from 'react-dnd';
import Utils from '../../common/utils';
import ImageL from '../../components/imageL';
import CAWS from '../../../../../../shared/aws';
import _ from 'lodash';


const artworkFileSource = {
    beginDrag(props) {
        console.log('props:', props);
        return {
            id: props.artworkFile.id,
            index: props.index
        };
    }
};


const artworkFileTarget = {
    hover(props, monitor, component) {
        const dragIndex = monitor.getItem().index;
        const hoverIndex = props.index;

        if (dragIndex === hoverIndex) {
            return;
        }

        const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
        const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
        const clientOffset = monitor.getClientOffset();
        const hoverClientY = clientOffset.y - hoverBoundingRect.top;

        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
            return;
        }

        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
            return;
        }

        props.moveArtworkFile(dragIndex, hoverIndex);

        monitor.getItem().index = hoverIndex;
    },

    drop(props, monitor, conponent) {
        props.saveMoveArtworkFile();
    }
};


const ArtworkFile = React.createClass({
    render: function() {
        const artworkFile = this.props.artworkFile;
        var srcUrl = CAWS.getS3BuildArtworkFilePath(this.props.buildId, artworkFile.name);
        const { isDragging, connectDragSource, connectDropTarget } = this.props;

        return connectDragSource(connectDropTarget(<div style={{position: 'relative'}} className='fl'>
            <h3 style={{position: 'absolute', top: '3px', right: '3px'}}><a onClick={this.props.removeArtworkFile}>&times;</a></h3>
            <img style={{height: '100px', paddingRight: '5px'}} src={srcUrl}/>
        </div>));
    }
});


module.exports = _.flow(
    DragSource('ArtworkFile', artworkFileSource, (connect, monitor) => ({
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    })),
    DropTarget('ArtworkFile', artworkFileTarget, connect => ({
        connectDropTarget: connect.dropTarget()
    }))
)(ArtworkFile);

build.js

var build = this.props.data.build;
var artworkFiles = this.state.artworkFiles;

var artworkFilesContent = artworkFiles.map((f, i) => {
    return <ArtworkFile
        key={i}
        artworkFile={f}
        buildId={build.id}
        id={f.name}
        index={i}
        deleteArtworkFile={this.removeArtworkFile.bind(this, f)}
        moveArtworkFile={this.moveArtworkFile}
        saveMoveArtworkFile={this.saveMoveArtworkFile}
    />;
});