HOC might be a better fit after all

react-dnd · Mar 25, 2015 · f8a5610 · f8a5610
1 parent 09f1a39
commit f8a5610
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 149 deletions.
diff --git a/TODO b/TODO
@@ -1,13 +1,9 @@
 * make a list of hacks to port over
-* custom state extractors
-* rethink TYPES
 * check symbols
 * helpers for test context
 * drag offsets and alignments
 * are we okay with this API for refs? ask people & see how that works with actual refs
 * conflicting backends: must be a nicer solution.
-* using initial state in observe(): bummer
-* it should work with plain classes, no extend.
 
 dnd-core
 * smarter canDrop()

diff --git a/examples/_dustbin-simple/Box.js b/examples/_dustbin-simple/Box.js
@@ -2,24 +2,7 @@
 
 import React, { createClass, PropTypes } from 'react';
 import ItemTypes from './ItemTypes';
-import { DragSource, ObservePolyfill } from 'react-dnd';
-
-class BoxDragSource extends DragSource {
-  beginDrag() {
-    return {
-      name: this.component.props.name
-    };
-  }
-
-  endDrag(monitor) {
-    const item = monitor.getItem();
-    const dropResult = monitor.getDropResult();
-
-    if (dropResult) {
-      window.alert(`You dropped ${item.name} into ${dropResult.name}!`);
-    }
-  }
-}
+import { configureDragDrop } from 'react-dnd';
 
 const style = {
   border: '1px dashed gray',
@@ -31,25 +14,11 @@ const style = {
 
 const Box = createClass({
   propTypes: {
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
+    isDragging: PropTypes.bool.isRequired,
+    attachDragSource: PropTypes.bool.isRequired
   },
 
-  contextTypes: {
-    dragDrop: PropTypes.object.isRequired
-  },
-
-  mixins: [ObservePolyfill({
-    constructor() {
-      this.dragSource = new BoxDragSource(this);
-    },
-
-    observe() {
-      return {
-        dragSource: this.dragSource.connectTo(this.context.dragDrop, ItemTypes.BOX)
-      };
-    }
-  })],
-
   render() {
     const { isDragging, ref } = this.state.data.dragSource;
     const { name } = this.props;
@@ -64,4 +33,29 @@ const Box = createClass({
   }
 });
 
-export default Box;
+const registerHandlers = (register, props) => ({
+  boxSource: register.dragSource(ItemTypes.BOX, {
+    beginDrag() {
+      return {
+        name: props.name
+      };
+    },
+
+    endDrag(monitor) {
+      const item = monitor.getItem();
+      const dropResult = monitor.getDropResult();
+
+      if (dropResult) {
+        window.alert(`You dropped ${item.name} into ${dropResult.name}!`);
+      }
+    }
+  })
+});
+
+const pickProps = (attach, monitor, { boxSource }) => ({
+  attachDragSource: (node) => attach(boxSource, node),
+  isOver: monitor.isOver(boxSource),
+  canDrop: monitor.canDrop(boxSource)
+});
+
+export default configureDragDrop(Box, registerHandlers, pickProps);
diff --git a/examples/_dustbin-simple/Dustbin.js b/examples/_dustbin-simple/Dustbin.js
@@ -2,13 +2,7 @@
 
 import React, { PropTypes, createClass } from 'react';
 import ItemTypes from './ItemTypes';
-import { DropTarget, ObservePolyfill } from 'react-dnd';
-
-class DustbinDropTarget extends DropTarget {
-  drop() {
-    return { name: 'Dustbin' };
-  }
-}
+import { configureDragDrop } from 'react-dnd';
 
 const style = {
   height: '12rem',
@@ -19,24 +13,14 @@ const style = {
 };
 
 const Dustbin = createClass({
-  contextTypes: {
-    dragDrop: PropTypes.object.isRequired
+  propTypes: {
+    isOver: PropTypes.bool.isRequired,
+    canDrop: PropTypes.bool.isRequired,
+    attachDropTarget: PropTypes.func.isRequired
   },
 
-  mixins: [ObservePolyfill({
-    constructor() {
-      this.dropTarget = new DustbinDropTarget(this);
-    },
-
-    observe() {
-      return {
-        dropTarget: this.dropTarget.connectTo(this.context.dragDrop, ItemTypes.BOX)
-      };
-    }
-  })],
-
   render() {
-    const { canDrop, isOver, ref } = this.state.data.dropTarget;
+    const { canDrop, isOver, attachDropTarget } = this.props;
 
     let backgroundColor = '#222';
     if (isOver) {
@@ -46,7 +30,7 @@ const Dustbin = createClass({
     }
 
     return (
-      <div ref={ref}
+      <div ref={attachDropTarget}
            style={{ ...style, backgroundColor }}>
         {isOver ?
           'Release to drop' :
@@ -57,4 +41,18 @@ const Dustbin = createClass({
   }
 });
 
-export default Dustbin;
+const registerHandlers = (register) => ({
+  boxTarget: register.dropTarget(ItemTypes.BOX, {
+    drop() {
+      return { name: 'Dustbin' };
+    }
+  })
+});
+
+const pickProps = (attach, monitor, handlers) => ({
+  attachDropTarget: (node) => attach(handlers.boxTarget, node),
+  isOver: monitor.isOver(handlers.boxTarget),
+  canDrop: monitor.canDrop(handlers.boxTarget)
+});
+
+export default configureDragDrop(Dustbin, registerHandlers, pickProps);
diff --git a/examples/index.js b/examples/index.js
@@ -3,9 +3,9 @@
 import React from 'react';
 import Router, { Route, Link, Redirect, RouteHandler } from 'react-router';
 import DustbinSimple from './_dustbin-simple';
-import DustbinInteresting from './_dustbin-interesting';
-import NestingSources from './_nesting-sources';
-import SortableSimple from './_sortable-simple';
+//import DustbinInteresting from './_dustbin-interesting';
+//import NestingSources from './_nesting-sources';
+//import SortableSimple from './_sortable-simple';
 
 /*
 DragAroundNaive = require('./_drag-around-naive/index'),
@@ -19,9 +19,6 @@ const App = React.createClass({
       <div>
         <h1>react-dnd examples (<a target='_href' href='https://github.com/gaearon/react-dnd/blob/master/examples'>source</a>)</h1>
         <ul>
-          <li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>)</li>
-          <li>Nesting (<Link to='nesting-sources'>drag sources</Link>)</li>
-          <li>Sortable (<Link to='sortable-simple'>simple</Link>)</li>
         </ul>
         <hr />
         <RouteHandler />
@@ -33,24 +30,23 @@ const App = React.createClass({
 /*
 <ul>
   <li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>)</li>
+  <li>Nesting (<Link to='nesting-sources'>drag sources</Link>)</li>
+  <li>Sortable (<Link to='sortable-simple'>simple</Link>)</li>
   <li>Drag Around (<Link to='drag-around-naive'>naive</Link>, <Link to='drag-around-custom'>custom</Link>)</li>
 </ul>
 */
 
 const routes = (
   <Route handler={App}>
     <Route name='dustbin-simple' path='dustbin-simple' handler={DustbinSimple} />
-    <Route name='dustbin-interesting' path='dustbin-interesting' handler={DustbinInteresting} />
-    <Route name='nesting-sources' path='nesting-sources' handler={NestingSources} />
-    <Route name='sortable-simple' path='sortable-simple' handler={SortableSimple} />
     <Redirect from='/' to='dustbin-simple' />
   </Route>
 );
 
 /*
 <Route name='dustbin-interesting' path='dustbin-interesting' handler={DustbinInteresting} />
-<Route name='drag-around-naive' path='drag-around-naive' handler={DragAroundNaive} />
-<Route name='drag-around-custom' path='drag-around-custom' handler={DragAroundCustom} />
+<Route name='nesting-sources' path='nesting-sources' handler={NestingSources} />
+<Route name='sortable-simple' path='sortable-simple' handler={SortableSimple} />
 */
 
 Router.run(routes,

diff --git a/modules/ObservePolyfill.js b/modules/ObservePolyfill.js
diff --git a/modules/configureDragDrop.js b/modules/configureDragDrop.js
@@ -0,0 +1,26 @@
+'use strict';
+
+import { Component, PropTypes } from 'react';
+
+export default function configureDragDrop(InnerComponent, registerHandlers, pickProps) {
+  class DragDropContainer extends Component {
+    constructor(props, context) {
+      super(props, context);
+
+      //const manager = context.dragDrop;
+      this.state = {
+        // TODO
+      };
+    }
+
+    render() {
+      return <InnerComponent {...this.props} {...this.state} />;
+    }
+  }
+
+  DragDropContainer.contextTypes = {
+    dragDrop: PropTypes.object.isRequired
+  };
+
+  return DragDropContainer;
+}
diff --git a/modules/index.js b/modules/index.js
@@ -1,8 +1,6 @@
 export { default as HTML5Backend } from './backends/HTML5';
-export { default as DragSource } from './ReactDragSource';
-export { default as DropTarget } from './ReactDropTarget';
 export { default as NativeTypes } from './NativeTypes';
+export { default as configureDragDrop } from './configureDragDrop';
 
 // We want need those after React 0.14:
 export { default as DragDropContext } from './DragDropContext';
-export { default as ObservePolyfill } from './ObservePolyfill';