doc: add with drag preview example

Author: Dang Hai An

example/src/App.js

@@ -4,6 +4,7 @@ import MouseBackend from 'react-dnd-mouse-backend'
 import CSV from './CSV'
 import NormalDiv from './NormalDiv'
 import MultipleTargets from './MultipleTargets'
+import WithDragPreview from './WithDragPreview'
 
 const App = React.createClass({
   render() {
@@ -12,6 +13,7 @@ const App = React.createClass({
         <CSV/>
         <NormalDiv/>
         <MultipleTargets />
+        <WithDragPreview />
       </div>
     )
   }

example/src/MultipleTargets/index.js

@@ -14,8 +14,7 @@ const DragAroundNaive = React.createClass({
         'c': { top: 90, left: 40, title: '0' },
         'd': { top: 230, left: 160, title: '0' },
         'e': { top: 140, left: 150, title: '0' }
-      },
-      hideSourceOnDrag: true
+      }
     }
   },
 
@@ -37,14 +36,8 @@ const DragAroundNaive = React.createClass({
     return Object.values(this.state.boxes).filter(box => box.title === id).length >= 1
   },
 
-  handleHideSourceClick() {
-    this.setState({
-      hideSourceOnDrag: !this.state.hideSourceOnDrag
-    })
-  },
-
   render() {
-    const { hideSourceOnDrag, boxes } = this.state
+    const { boxes } = this.state
 
     return (
       <div><div style={{
@@ -53,17 +46,9 @@ const DragAroundNaive = React.createClass({
         <h3>Multiple Drop Targets</h3>
         <div style={{ position: 'relative', width: '300px',
           height: '300px', border: '1px solid black' }}>
-          <Sources hideSourceOnDrag={hideSourceOnDrag} boxes={boxes} />
+          <Sources hideSourceOnDrag={true} boxes={boxes} />
           <Targets moveBox={this.moveBox} isOccupied={this.isOccupied} />
         </div>
-        <p>
-          <label>
-            <input type="checkbox"
-                   checked={hideSourceOnDrag}
-                   onChange={this.handleHideSourceClick} />
-            <small>Hide source while dragging</small>
-          </label>
-        </p>
       </div></div>
     )
   }

example/src/NormalDiv/index.js

@@ -3,33 +3,12 @@ import React from 'react'
 import Target from './Target'
 
 const DragAroundNaive = React.createClass({
-  getInitialState() {
-    return {
-      hideSourceOnDrag: true
-    }
-  },
-
-  handleHideSourceClick() {
-    this.setState({
-      hideSourceOnDrag: !this.state.hideSourceOnDrag
-    })
-  },
-
   render() {
-    const { hideSourceOnDrag } = this.state
 
     return (
       <div><div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
         <h3>Normal Div</h3>
-        <Target hideSourceOnDrag={hideSourceOnDrag} />
-        <p>
-          <label>
-            <input type="checkbox"
-                   checked={hideSourceOnDrag}
-                   onChange={this.handleHideSourceClick} />
-            <small>Hide source while dragging</small>
-          </label>
-        </p>
+        <Target hideSourceOnDrag={true} />
       </div></div>
     )
   }

example/src/WithDragPreview/DragPreview.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { DragLayer } from 'react-dnd'
+
+const defaultStyle = (item, currentOffset) => (
+  {
+    left: currentOffset.x,
+    top: currentOffset.y,
+    position: 'fixed'
+  }
+)
+
+const DragPreview = React.createClass({
+  render() {
+    const {
+      isDragging,
+      currentOffset,
+      item
+    } = this.props
+    return !isDragging || !currentOffset || !item.withDragPreview ?
+      null
+    :
+      <svg style={defaultStyle(item, currentOffset)}>
+        <circle cx={14} cy={14} r={12} fill={item.color} stroke="black"
+          strokeWidth={2}/>
+      </svg>
+
+  }
+})
+
+export default DragLayer(monitor => ({
+  item: monitor.getItem(),
+  itemType: monitor.getItemType(),
+  currentOffset: monitor.getSourceClientOffset(),
+  isDragging: monitor.isDragging()
+}))(DragPreview)

example/src/WithDragPreview/Source.js

@@ -0,0 +1,54 @@
+import React, { PropTypes } from 'react'
+import ItemTypes from '../ItemTypes'
+import { DragSource } from 'react-dnd'
+
+const rand0To255 = () => Math.floor(Math.random() * 256)
+const randomColor = () =>
+  `rgb(${rand0To255()}, ${rand0To255()}, ${rand0To255()})`
+
+const boxSource = {
+  beginDrag(props, monitor, component) {
+    const { id, left, top } = props
+    return { id, left, top, color: component.state.color, withDragPreview: true }
+  }
+}
+
+const Source = React.createClass({
+  getInitialState() {
+    return {
+      color: randomColor()
+    }
+  },
+  propTypes: {
+    connectDragSource: PropTypes.func.isRequired,
+    isDragging: PropTypes.bool.isRequired,
+    id: PropTypes.any.isRequired,
+    left: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired,
+    hideSourceOnDrag: PropTypes.bool.isRequired,
+    children: PropTypes.node
+  },
+
+  render() {
+    const {
+      hideSourceOnDrag, left, top, connectDragSource, isDragging
+    } = this.props
+    if (isDragging && hideSourceOnDrag) {
+      return null
+    }
+
+    return connectDragSource(
+        <circle cx={left} cy={top} r={12} fill={this.state.color} stroke="black"
+          strokeWidth={2}/>
+    )
+  }
+})
+
+const connect = (connect, monitor) => (
+  {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  }
+)
+
+export default DragSource(ItemTypes.CSV, boxSource, connect)(Source)

example/src/WithDragPreview/Target.js

@@ -0,0 +1,81 @@
+import React, { PropTypes } from 'react'
+import update from 'react/lib/update'
+import ItemTypes from '../ItemTypes'
+import Source from './Source'
+import { DropTarget } from 'react-dnd'
+
+const styles = {
+  width: 300,
+  height: 300,
+  border: '1px solid black',
+  position: 'relative',
+  flex: 1
+}
+
+const boxTarget = {
+  drop(props, monitor, component) {
+    const item = monitor.getItem()
+    const delta = monitor.getDifferenceFromInitialOffset()
+    const left = Math.round(item.left + delta.x)
+    const top = Math.round(item.top + delta.y)
+
+    component.moveBox(item.id, left, top)
+  }
+}
+
+const Target = React.createClass({
+  getInitialState() {
+    return {
+      circles: {
+        'a': { top: 20, left: 80 },
+        'b': { top: 180, left: 20 },
+        'c': { top: 130, left: 250 }
+      }
+    }
+  },
+
+  moveBox(id, left, top) {
+    this.setState(update(this.state, {
+      circles: {
+        [id]: {
+          $merge: {
+            left: left,
+            top: top
+          }
+        }
+      }
+    }))
+  },
+
+  render() {
+    const { hideSourceOnDrag, connectDropTarget } = this.props
+    const { circles } = this.state
+
+    return connectDropTarget(
+      <div style={styles}>
+        <svg style={{width:'100%', height:'100%'}}>
+        {Object.keys(circles).map(key => {
+          const { left, top } = circles[key]
+          return (
+            <Source key={key}
+                 id={key}
+                 left={left}
+                 top={top}
+                 hideSourceOnDrag={hideSourceOnDrag} />
+          )
+        })}
+        </svg>
+      </div>
+    )
+  }
+})
+
+Target.propTypes = {
+  hideSourceOnDrag: PropTypes.bool.isRequired,
+  connectDropTarget: PropTypes.func.isRequired
+}
+
+export default DropTarget(ItemTypes.CSV, boxTarget, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+}))(Target)

example/src/WithDragPreview/index.js

@@ -0,0 +1,21 @@
+/* eslint-disable max-len */
+import React from 'react'
+
+import DragPreview from './DragPreview'
+import Target from './Target'
+
+const DragAroundCSV = React.createClass({
+
+  render() {
+
+    return (
+      <div><div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+        <h3>With Drag Preview</h3>
+        <Target hideSourceOnDrag={true} />
+        <DragPreview />
+      </div></div>
+    )
+  }
+})
+
+export default DragAroundCSV