Polish examples

Author: zyzo

example/src/index.html renamed to example/index.html

@@ -0,0 +1,8 @@
+import React from 'react'
+import { render } from 'react-dom'
+
+import App from './src/App'
+render(
+  <App />,
+  document.getElementById('root')
+)

example/index.js

@@ -0,0 +1,23 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'lint' ]
+2 info using npm@2.15.1
+3 info using node@v4.4.3
+4 verbose stack Error: missing script: lint
+4 verbose stack     at run (/usr/lib/node_modules/npm/lib/run-script.js:142:19)
+4 verbose stack     at /usr/lib/node_modules/npm/lib/run-script.js:58:5
+4 verbose stack     at /usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:345:5
+4 verbose stack     at checkBinReferences_ (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:309:45)
+4 verbose stack     at final (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:343:3)
+4 verbose stack     at then (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:113:5)
+4 verbose stack     at ReadFileContext.<anonymous> (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:284:20)
+4 verbose stack     at ReadFileContext.callback (/usr/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16)
+4 verbose stack     at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:303:13)
+5 verbose cwd /home/zyzo/Projects/react-dnd-mouse-backend/example
+6 error Linux 4.2.0-35-generic
+7 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "lint"
+8 error node v4.4.3
+9 error npm  v2.15.1
+10 error missing script: lint
+11 error If you need help, you may report this error at:
+11 error     <https://github.com/npm/npm/issues>
+12 verbose exit [ 1, true ]

example/npm-debug.log

@@ -0,0 +1,20 @@
+import React from 'react'
+import { DragDropContext } from 'react-dnd'
+import MouseBackend from 'react-dnd-mouse-backend'
+import CSV from './CSV'
+import NormalDiv from './NormalDiv'
+
+const App = React.createClass({
+  render() {
+    return (
+      <div>
+        <h3>CSV Elements</h3>
+        <CSV/>
+        <h3>Normal Div</h3>
+        <NormalDiv/>
+      </div>
+    )
+  }
+})
+
+export default DragDropContext(MouseBackend)(App)

example/src/App.js

@@ -1,14 +1,10 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import ItemTypes from '../ItemTypes'
 import { DragSource } from 'react-dnd'
-import { connect} from 'react-redux'
-const style = {
-  position: 'absolute',
-  border: '1px dashed gray',
-  backgroundColor: 'white',
-  padding: '0.5rem 1rem',
-  cursor: 'move',
-}
+
+const rand0To255 = () => Math.floor(Math.random() * 256)
+const randomColor = () =>
+  `rgb(${rand0To255()}, ${rand0To255()}, ${rand0To255()})`
 
 const boxSource = {
   beginDrag(props) {
@@ -17,33 +13,37 @@ const boxSource = {
   }
 }
 
-class Source extends Component {
+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
+      hideSourceOnDrag, left, top, connectDragSource, isDragging
     } = this.props
     if (isDragging && hideSourceOnDrag) {
       return null
     }
 
     return connectDragSource(
-        <circle cx={left} cy={top} r={12} fill="black"/>
+        <circle cx={left} cy={top} r={12} fill={randomColor()} stroke="black"
+          strokeWidth={2}/>
     )
   }
-}
+})
 
-Source.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
-}
+const connect = (connect, monitor) => (
+  {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  }
+)
 
-export default DragSource(ItemTypes.CSV, boxSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
-}))(connect()(Source))
+export default DragSource(ItemTypes.CSV, boxSource, connect)(Source)

example/src/CSV/Source.js

@@ -1,11 +1,9 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import update from 'react/lib/update'
 import ItemTypes from '../ItemTypes'
 import Source from './Source'
-import { DropTarget, DragDropContext } from 'react-dnd'
-import MouseBackend from 'react-dnd-mouse-backend'
-import Touch from 'react-dnd-touch-backend'
-import { connect} from 'react-redux'
+import { DropTarget } from 'react-dnd'
+
 const styles = {
   width: 300,
   height: 300,
@@ -24,17 +22,16 @@ const boxTarget = {
   }
 }
 
-class Container extends Component {
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      boxes: {
-        'a': { top: 20, left: 80, title: 'Drag me around' },
-        'b': { top: 180, left: 20, title: 'Drag me too' }
+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, {
@@ -47,44 +44,36 @@ class Container extends Component {
         }
       }
     }))
-  }
+  },
 
   render() {
     const { hideSourceOnDrag, connectDropTarget } = this.props
-    const { boxes} = this.state
+    const { circles } = this.state
 
     return connectDropTarget(
       <div style={styles}>
-        <div style={{height: '50%'}}>
-        <svg><Source left={12} top={13}>adz</Source></svg>
-        </div>
-        <div style={{height: '50%'}}>
         <svg style={{width:'100%', height:'100%'}}>
-        {Object.keys(boxes).map(key => {
-          const { left, top, title } = boxes[key]
+        {Object.keys(circles).map(key => {
+          const { left, top } = circles[key]
           return (
             <Source key={key}
                  id={key}
                  left={left}
                  top={top}
-                 hideSourceOnDrag={hideSourceOnDrag}>
-              {title}
-            </Source>
+                 hideSourceOnDrag={hideSourceOnDrag} />
           )
         })}
         </svg>
-        </div>
       </div>
     )
   }
-}
+})
 
-Container.propTypes = {
+Target.propTypes = {
   hideSourceOnDrag: PropTypes.bool.isRequired,
   connectDropTarget: PropTypes.func.isRequired
 }
 
-export default connect()(DragDropContext(MouseBackend)(
-DropTarget(ItemTypes.CSV, boxTarget, connect => ({
+export default DropTarget(ItemTypes.CSV, boxTarget, connect => ({
   connectDropTarget: connect.dropTarget()
-}))(Container)))
+}))(Target)

example/src/CSV/Target.js

@@ -1,39 +1,38 @@
 /* eslint-disable max-len */
-import React, { Component } from 'react'
+import React from 'react'
 
-import Container from './Target'
-import Source from './Source'
+import Target from './Target'
 
-export default class DragAroundCSV extends Component {
-  constructor(props) {
-    super(props)
-    this.handleHideSourceClick = this.handleHideSourceClick.bind(this)
-    this.state = {
+const DragAroundCSV = React.createClass({
+  getInitialState() {
+    return {
       hideSourceOnDrag: true
     }
-  }
+  },
 
   handleHideSourceClick() {
     this.setState({
       hideSourceOnDrag: !this.state.hideSourceOnDrag
     })
-  }
+  },
 
   render() {
     const { hideSourceOnDrag } = this.state
 
     return (
       <div>
-        <Container hideSourceOnDrag={hideSourceOnDrag} />
+        <Target hideSourceOnDrag={hideSourceOnDrag} />
         <p>
           <label>
             <input type="checkbox"
                    checked={hideSourceOnDrag}
                    onChange={this.handleHideSourceClick} />
-            <small>Hide the source item while dragging</small>
+            <small>Hide source while dragging</small>
           </label>
         </p>
       </div>
     )
   }
-}
+})
+
+export default DragAroundCSV

example/src/CSV/index.js

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import ItemTypes from '../ItemTypes'
 import { DragSource } from 'react-dnd'
 
@@ -17,8 +17,16 @@ const boxSource = {
   }
 }
 
-class Box extends Component {
-
+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
@@ -33,19 +41,9 @@ class Box extends Component {
       </div>
     )
   }
-}
-
-Box.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
-}
+})
 
 export default DragSource(ItemTypes.BOX, boxSource, (connect, monitor) => ({
   connectDragSource: connect.dragSource(),
   isDragging: monitor.isDragging()
-}))(Box)
+}))(Source)