feat: add NestedTargets example

Author: Dang Hai An

example/src/App.js

@@ -5,15 +5,16 @@ import CSV from './CSV'
 import NormalDiv from './NormalDiv'
 import MultipleTargets from './MultipleTargets'
 import WithDragPreview from './WithDragPreview'
+import NestedTargets from './NestedTargets'
 
 const App = React.createClass({
   render() {
     return (
-      <div style={{ display: 'flex', height: '50vh', justifyContent: 'space-between' }}>
-        <CSV/>
-        <NormalDiv/>
-        <MultipleTargets />
-        <WithDragPreview />
+      <div style={{
+        display: 'flex', height: '50vh', justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }}>
+        <NestedTargets />
       </div>
     )
   }

example/src/CSV/index.js

@@ -20,7 +20,7 @@ const DragAroundCSV = React.createClass({
     const { hideSourceOnDrag } = this.state
 
     return (
-      <div><div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+      <div style={{ flex: 1 }}><div style={{ display: 'flex', flexDirection: 'column', }}>
         <h3>CSV Elements</h3>
         <Target hideSourceOnDrag={hideSourceOnDrag} />
         <p>

example/src/MultipleTargets/Target.js

@@ -24,7 +24,9 @@ const boxTarget = {
 const Target = React.createClass({
   moveBox(id, left, top) {
     if (this.props.isOccupied()) {
-      alert('This box is occupied !')
+      setTimeout(() => {
+        alert('This box is occupied !')
+      }, 0)
       return
     }
     this.props.moveBox(id, left, top, this.props.id)
@@ -44,6 +46,6 @@ Target.propTypes = {
   connectDropTarget: PropTypes.func.isRequired
 }
 
-export default DropTarget(ItemTypes.BOX, boxTarget, connect => ({
+export default DropTarget(ItemTypes.BOX, boxTarget, (connect) => ({
   connectDropTarget: connect.dropTarget()
 }))(Target)

example/src/MultipleTargets/index.js

@@ -40,8 +40,8 @@ const DragAroundNaive = React.createClass({
     const { boxes } = this.state
 
     return (
-      <div><div style={{
-        display: 'flex', flexDirection: 'column', flex: 1,
+      <div style={{ flex: 1 }}><div style={{
+        display: 'flex', flexDirection: 'column',
       }}>
         <h3>Multiple Drop Targets</h3>
         <div style={{ position: 'relative', width: '300px',

example/src/NestedTargets/Source.js

@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react'
+import ItemTypes from '../ItemTypes'
+import { DragSource } from 'react-dnd'
+
+const style = {
+  position: 'absolute',
+  border: '1px dashed gray',
+  backgroundColor: 'white',
+  padding: '4px',
+  cursor: 'move',
+  zIndex: 1,
+  cursor: 'pointer',
+  userSelect: 'none'
+}
+
+const boxSource = {
+  beginDrag(props) {
+    const { id, left, top } = props
+    return { id, left, top }
+  }
+}
+
+const Source = React.createClass({
+  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, children
+    } = this.props
+    if (isDragging && hideSourceOnDrag) {
+      return null
+    }
+
+    return connectDragSource(
+      <div style={{ ...style, left, top }}>
+        {children}
+      </div>
+    )
+  }
+})
+
+export default DragSource(ItemTypes.BOX, boxSource, (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+}))(Source)

example/src/NestedTargets/Sources.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import Source from './Source'
+
+const Sources = React.createClass({
+
+  render() {
+    const { hideSourceOnDrag, boxes } = this.props
+
+    return (
+      <div>
+        {Object.keys(boxes).map(key => {
+          const { left, top, title } = boxes[key]
+          return (
+            <Source key={key}
+                 id={key}
+                 left={left}
+                 top={top}
+                 hideSourceOnDrag={hideSourceOnDrag}>
+              {title}
+            </Source>
+          )
+        })}
+      </div>
+    )
+  }
+})
+
+export default Sources

example/src/NestedTargets/Target.js

@@ -0,0 +1,48 @@
+import React, { PropTypes } from 'react'
+import ItemTypes from '../ItemTypes'
+import { DropTarget } from 'react-dnd'
+
+const styles = {
+  position: 'absolute',
+  border: '1px solid #ccc',
+  flex: 1
+}
+
+const boxTarget = {
+  drop(props, monitor, component) {
+    console.log(monitor.didDrop())
+    if (monitor.didDrop()) return
+    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({
+  moveBox(id, left, top) {
+    if (this.props.isOccupied()) {
+      alert('This box is occupied !')
+      return
+    }
+    this.props.moveBox(id, left, top, this.props.id)
+  },
+  render() {
+    const { connectDropTarget, left, top, id, size } = this.props
+
+    return connectDropTarget(
+      <div style={{ ...styles, left, top, width: size, height: size }}>
+        {id}
+      </div>
+    )
+  }
+})
+
+Target.propTypes = {
+  connectDropTarget: PropTypes.func.isRequired
+}
+
+export default DropTarget(ItemTypes.BOX, boxTarget, (connect) => ({
+  connectDropTarget: connect.dropTarget()
+}))(Target)

example/src/NestedTargets/Targets.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import Target from './Target'
+
+const Targets = React.createClass({
+
+  render() {
+    const { moveBox, isOccupied, } = this.props
+    const targets = [{
+      left: 60, top: 60, size: 180, id: '2'
+    }, {
+      left: 30, top: 30, size: 240, id: '1'
+    }, {
+      left: 90, top: 90, size: 120, id: '3'
+    },  {
+      left: 120, top: 120, size: 60, id: '4'
+    }, {
+      left: 170, top: 40, size: 80, id: '5'
+    },]
+
+    return (
+      <div>
+        {targets.map(target => {
+          return (
+            <Target
+              moveBox={moveBox} key={target.id}
+              {...target}
+              isOccupied={() => isOccupied(target.id)}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+})
+
+export default Targets

example/src/NestedTargets/index.js

@@ -0,0 +1,61 @@
+/* eslint-disable max-len */
+import React from 'react'
+import update from 'react/lib/update'
+
+import Sources from './Sources'
+import Targets from './Targets'
+
+const DragAroundNaive = React.createClass({
+  getInitialState() {
+    return {
+      boxes: {
+        'a': { top: 50, left: 10, title: '0' },
+        'b': { top: 180, left: 10, title: '0' },
+        'c': { top: 90, left: 10, title: '0' },
+        'd': { top: 230, left: 10, title: '0' },
+        'e': { top: 140, left: 10, title: '0' }
+      }
+    }
+  },
+
+  moveBox(id, left, top, title) {
+    this.setState(update(this.state, {
+      boxes: {
+        [id]: {
+          $merge: {
+            left: left,
+            top: top,
+            title: title
+          }
+        }
+      }
+    }))
+  },
+
+  isOccupied(id) {
+    return Object.values(this.state.boxes).filter(box => box.title === id).length >= 1
+  },
+
+  render() {
+    const { boxes } = this.state
+
+    return (
+      <div style={{ flex: 1 }}><div style={{
+        display: 'flex', flexDirection: 'column',
+      }}>
+        <h3>Nested Drop Targets</h3>
+        <div style={{ position: 'relative', width: '400px', height: '300px', display: 'flex' }}>
+          <div style={{ width: '100px' }}>
+            <Sources hideSourceOnDrag={true} boxes={boxes} />
+          </div>
+          <div style={{ position: 'relative', width: '300px',
+            height: '300px', border: '1px solid black' }}>
+            <Targets moveBox={this.moveBox} isOccupied={this.isOccupied} />
+          </div>
+        </div>
+      </div></div>
+    )
+  }
+})
+
+export default DragAroundNaive

example/src/NormalDiv/Target.js

@@ -75,6 +75,6 @@ Target.propTypes = {
   connectDropTarget: PropTypes.func.isRequired
 }
 
-export default DropTarget(ItemTypes.BOX, boxTarget, connect => ({
+export default DropTarget(ItemTypes.BOX, boxTarget, (connect) => ({
   connectDropTarget: connect.dropTarget()
 }))(Target)