Simpler connect API

react-dnd · Mar 26, 2015 · fbabc65 · fbabc65
1 parent 553695a
commit fbabc65
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 62 deletions.
diff --git a/examples/_dustbin-interesting/Box.js b/examples/_dustbin-interesting/Box.js
@@ -15,18 +15,18 @@ const style = {
 const propTypes = {
   name: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
-  attachDragSource: PropTypes.func.isRequired,
+  connectDragSource: PropTypes.func.isRequired,
   isDragging: PropTypes.bool.isRequired,
   isDropped: PropTypes.bool.isRequired
 };
 
 class Box extends Component {
   render() {
-    const { name, isDropped, isDragging, attachDragSource } = this.props;
+    const { name, isDropped, isDragging, connectDragSource } = this.props;
     const opacity = isDragging ? 0.4 : 1;
 
     return (
-      <div ref={attachDragSource}
+      <div ref={connectDragSource}
            style={{ ...style, opacity }}>
         {isDropped ?
           <s>{name}</s> :
@@ -58,9 +58,9 @@ export default configureDragDrop(Box, {
     };
   },
 
-  getProps(attach, monitor, handlers) {
+  getProps(connect, monitor, handlers) {
     return {
-      attachDragSource: (ref) => attach(handlers.boxSource, ref),
+      connectDragSource: connect(handlers.boxSource),
       isDragging: monitor.isDragging(handlers.boxSource)
     };
   }

diff --git a/examples/_dustbin-interesting/Dustbin.js b/examples/_dustbin-interesting/Dustbin.js
@@ -17,14 +17,14 @@ const propTypes = {
   accepts: PropTypes.arrayOf(PropTypes.string).isRequired,
   isOver: PropTypes.bool.isRequired,
   canDrop: PropTypes.bool.isRequired,
-  attachDropTarget: PropTypes.func.isRequired,
+  connectDropTarget: PropTypes.func.isRequired,
   lastDroppedItem: PropTypes.object,
   onDrop: PropTypes.func.isRequired
 };
 
 class Dustbin extends Component {
   render() {
-    const { accepts, isOver, canDrop, attachDropTarget, lastDroppedItem } = this.props;
+    const { accepts, isOver, canDrop, connectDropTarget, lastDroppedItem } = this.props;
     const isActive = isOver && canDrop;
 
     let backgroundColor = '#222';
@@ -35,7 +35,7 @@ class Dustbin extends Component {
     }
 
     return (
-      <div ref={attachDropTarget}
+      <div ref={connectDropTarget}
            style={{ ...style, backgroundColor }}>
 
         {isActive ?
@@ -63,11 +63,11 @@ export default configureDragDrop(Dustbin, {
     };
   },
 
-  getProps(attach, monitor, handlers) {
+  getProps(connect, monitor, handlers) {
     return {
       isOver: monitor.isOver(handlers.dustbinTarget),
       canDrop: monitor.canDrop(handlers.dustbinTarget),
-      attachDropTarget: ref => attach(handlers.dustbinTarget, ref)
+      connectDropTarget: connect(handlers.dustbinTarget)
     };
   }
 });
diff --git a/examples/_dustbin-simple/Box.js b/examples/_dustbin-simple/Box.js
@@ -15,17 +15,17 @@ const style = {
 const propTypes = {
   name: PropTypes.string.isRequired,
   isDragging: PropTypes.bool.isRequired,
-  attachDragSource: PropTypes.func.isRequired
+  connectDragSource: PropTypes.func.isRequired
 };
 
 class Box extends Component {
   render() {
-    const { isDragging, attachDragSource } = this.props;
+    const { isDragging, connectDragSource } = this.props;
     const { name } = this.props;
     const opacity = isDragging ? 0.4 : 1;
 
     return (
-      <div ref={attachDragSource}
+      <div ref={connectDragSource}
            style={{ ...style, opacity }}>
         {name}
       </div>
@@ -58,9 +58,9 @@ export default configureDragDrop(Box, {
     };
   },
 
-  getProps(attach, monitor, handlers) {
+  getProps(connect, monitor, handlers) {
     return {
-      attachDragSource: (ref) => attach(handlers.boxSource, ref),
+      connectDragSource: connect(handlers.boxSource),
       isDragging: monitor.isDragging(handlers.boxSource)
     };
   }

diff --git a/examples/_dustbin-simple/Dustbin.js b/examples/_dustbin-simple/Dustbin.js
@@ -15,12 +15,12 @@ const style = {
 const propTypes = {
   isOver: PropTypes.bool.isRequired,
   canDrop: PropTypes.bool.isRequired,
-  attachDropTarget: PropTypes.func.isRequired
+  connectDropTarget: PropTypes.func.isRequired
 };
 
 class Dustbin extends Component {
   render() {
-    const { canDrop, isOver, attachDropTarget } = this.props;
+    const { canDrop, isOver, connectDropTarget } = this.props;
     const isActive = canDrop && isOver;
 
     let backgroundColor = '#222';
@@ -31,7 +31,7 @@ class Dustbin extends Component {
     }
 
     return (
-      <div ref={attachDropTarget}
+      <div ref={connectDropTarget}
            style={{ ...style, backgroundColor }}>
         {isActive ?
           'Release to drop' :
@@ -54,9 +54,9 @@ export default configureDragDrop(Dustbin, {
     };
   },
 
-  getProps(attach, monitor, handlers) {
+  getProps(connect, monitor, handlers) {
     return {
-      attachDropTarget: (ref) => attach(handlers.boxTarget, ref),
+      connectDropTarget: connect(handlers.boxTarget),
       isOver: monitor.isOver(handlers.boxTarget),
       canDrop: monitor.canDrop(handlers.boxTarget)
     };

diff --git a/examples/_nesting-sources/Source.js b/examples/_nesting-sources/Source.js
@@ -16,12 +16,12 @@ const propTypes = {
   isDragging: PropTypes.bool.isRequired,
   forbidDrag: PropTypes.bool.isRequired,
   onToggleForbidDrag: PropTypes.func.isRequired,
-  attachDragSource: PropTypes.func.isRequired
+  connectDragSource: PropTypes.func.isRequired
 };
 
 class Source extends Component {
   render() {
-    const { color, children, isDragging, attachDragSource, forbidDrag, onToggleForbidDrag } = this.props;
+    const { color, children, isDragging, connectDragSource, forbidDrag, onToggleForbidDrag } = this.props;
     const opacity = isDragging ? 0.4 : 1;
 
     let backgroundColor;
@@ -35,7 +35,7 @@ class Source extends Component {
     }
 
     return (
-      <div ref={attachDragSource}
+      <div ref={connectDragSource}
            style={{ ...style, backgroundColor, opacity }}>
         <input type='checkbox'
                checked={forbidDrag}
@@ -65,9 +65,9 @@ const DraggableSource = configureDragDrop(Source, {
     };
   },
 
-  getProps(attach, monitor, handlers) {
+  getProps(connect, monitor, handlers) {
     return {
-      attachDragSource: (ref) => attach(handlers.colorSource, ref),
+      connectDragSource: connect(handlers.colorSource),
       isDragging: monitor.isDragging(handlers.colorSource)
     };
   }

diff --git a/examples/_nesting-sources/Target.js b/examples/_nesting-sources/Target.js
@@ -17,13 +17,13 @@ const propTypes = {
   canDrop: PropTypes.bool.isRequired,
   draggingColor: PropTypes.string,
   lastDroppedColor: PropTypes.string,
-  attachDropTarget: PropTypes.func.isRequired,
+  connectDropTarget: PropTypes.func.isRequired,
   onDrop: PropTypes.func.isRequired
 }
 
 class Target extends Component {
   render() {
-    const { canDrop, isOver, draggingColor, lastDroppedColor, attachDropTarget } = this.props;
+    const { canDrop, isOver, draggingColor, lastDroppedColor, connectDropTarget } = this.props;
     const opacity = isOver ? 1 : 0.7;
 
     let backgroundColor = '#fff';
@@ -37,7 +37,7 @@ class Target extends Component {
     }
 
     return (
-      <div ref={attachDropTarget}
+      <div ref={connectDropTarget}
            style={{ ...style, backgroundColor, opacity }}>
 
         <p>Drop here.</p>
@@ -62,9 +62,9 @@ const DraggableTarget = configureDragDrop(Target, {
     }
   },
 
-  getProps(attach, monitor, handlers) {
+  getProps(connect, monitor, handlers) {
     return {
-      attachDropTarget: (ref) => attach(handlers.colorTarget, ref),
+      connectDropTarget: connect(handlers.colorTarget),
       isOver: monitor.isOver(handlers.colorTarget),
       canDrop: monitor.canDrop(handlers.colorTarget),
       draggingColor: monitor.getItemType()

diff --git a/modules/DragDropContext.js b/modules/DragDropContext.js
diff --git a/modules/configureDragDrop.js b/modules/configureDragDrop.js
@@ -11,6 +11,8 @@ export default function configureDragDrop(InnerComponent, { getHandlers, getProp
       super(props);
 
       this.handleChange = this.handleChange.bind(this);
+      this.connectTo = this.connectTo.bind(this);
+
       this.manager = context[managerName];
       this.handles = {};
       this.handlers = {};
@@ -136,13 +138,13 @@ export default function configureDragDrop(InnerComponent, { getHandlers, getProp
       this.attachHandler(key, nextHandler);
     }
 
-    getCurrentState() {
-      const monitor = this.manager.getMonitor();
-      const backend = this.manager.getBackend();
-      const registry = this.manager.getRegistry();
+    connectTo(handle) {
+      const manager = this.manager;
 
-      function attach(handle, ref) {
+      return function (ref) {
         const node = findDOMNode(ref);
+        const backend = manager.getBackend();
+        const registry = manager.getRegistry();
 
         if (registry.isSourceHandle(handle)) {
           backend.updateSourceNode(handle, node);
@@ -152,8 +154,11 @@ export default function configureDragDrop(InnerComponent, { getHandlers, getProp
           invariant(false, 'Handle is neither a source nor a target.');
         }
       }
+    }
 
-      return getProps(attach, monitor, this.handles);
+    getCurrentState() {
+      const monitor = this.manager.getMonitor();
+      return getProps(this.connectTo, monitor, this.handles);
     }
 
     render() {