Add image drag preview example

react-dnd · Apr 8, 2015 · 0ef96a1 · 0ef96a1
1 parent 30ec27a
commit 0ef96a1
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 5 deletions.
diff --git a/examples/_customize-handles/Box.js → examples/_customize-handles/BoxWithHandle.js b/examples/_customize-handles/Box.js → examples/_customize-handles/BoxWithHandle.js
@@ -26,7 +26,7 @@ const propTypes = {
   dragSourceRef: PropTypes.func.isRequired
 };
 
-class Box extends Component {
+class BoxWithHandle extends Component {
   render() {
     const { isDragging, dragSourceRef, dragPreviewRef } = this.props;
     const opacity = isDragging ? 0.4 : 1;
@@ -43,15 +43,15 @@ class Box extends Component {
     );
   }
 }
-Box.propTypes = propTypes;
+BoxWithHandle.propTypes = propTypes;
 
 const boxSource = {
   beginDrag() {
     return {};
   }
 };
 
-export default configureDragDrop(Box, {
+export default configureDragDrop(BoxWithHandle, {
   configure: (register) =>
     register.dragSource(ItemTypes.BOX, boxSource),
 

diff --git a/examples/_customize-handles/BoxWithImage.js b/examples/_customize-handles/BoxWithImage.js
diff --git a/examples/_customize-handles/Container.js b/examples/_customize-handles/Container.js
@@ -2,15 +2,17 @@
 
 import React, { PropTypes, Component } from 'react';
 import { configureDragDropContext, DragDropContext, HTML5Backend } from 'react-dnd';
-import Box from './Box';
+import BoxWithImage from './BoxWithImage';
+import BoxWithHandle from './BoxWithHandle';
 import shuffle from 'lodash/collection/shuffle';
 
 class Container extends Component {
   render() {
     return (
       <div>
         <div style={{ marginTop: '2rem' }}>
-          <Box />
+          <BoxWithHandle />
+          <BoxWithImage />
         </div>
       </div>
     );