refactor: get rid of dndWrapExternalSource api

fritz-c · fritz-c · commit d103e9f47da8 · 2017-08-04T23:32:38.000+09:00
BREAKING CHANGE: `dndWrapExternalSource` api no longer exists.
You can achieve the same functionality and more with react-dnd
APIs, as demonstrated in the storybook example.
diff --git a/README.md b/README.md
@@ -83,88 +83,6 @@ Notable among the available functions:
 Documentation for each method is only available in the code at this time. You can also refer to the tests for simple usage examples.
 If your hobbies happen to include writing documentation, by all means submit a pull request. It would really help out.
 
-## Adding External Nodes
-
-### How to wrap your own component as an external node
-
-To use your own components as external nodes, you can call `dndWrapExternalSource`, exported from [`drag-and-drop-utils.js`](https://github.com/fritz-c/react-sortable-tree/blob/master/src/utils/drag-and-drop-utils.js), like in this example below, as long as you also pass the exact same [react-dnd type](http://react-dnd.github.io/react-dnd/docs-overview.html) as set for your tree component, so your custom components can become valid react-dnd [DragSources](http://react-dnd.github.io/react-dnd/docs-drag-source.html), that can be dropped in to add nodes to your own tree component.
-
-```jsx
-import React, { Component } from 'react'
-import { dndWrapExternalSource } from 'react-sortable-tree';
-
-const YourExternalNodeComponent = ({ node }) =>
-  <div>{node.title}</div>;
-
-export const externalNodeType = 'yourNodeType';
-
-// this will wrap your external node component as a valid react-dnd DragSource
-export default dndWrapExternalSource(YourExternalNodeComponent, externalNodeType);
-```
-
-__NOTE:__ You need to implement a `dropCancelled` method and an `addNewItem` method, passed as props to your external node component from your parent component, so that your tree-component can effectively respond to your external node. Check out the external node demo for an example implementation. A simple example below:
-
-```jsx
-import React, { Component } from 'react'
-import {
-  SortableTreeWithoutDndContext as SortableTree,
-  insertNode,
-} from 'react-sortable-tree'
-import YourExternalNodeComponent, {
-  externalNodeType,
-} from './YourExternalNodeComponent.js'
-
-class App extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      treeData: [
-        { title: 'node1' },
-        { title: 'node2' },
-      ],
-    }
-  }
-
-  render() {
-    return (
-      <div>
-        <div style={{ height: 200 }}>
-          <SortableTree
-            treeData={this.state.treeData}
-            onChange={treeData => this.setState({ treeData })}
-            dndType={externalNodeType}
-          />
-        </div>
-
-        <YourExternalNodeComponent 
-          node={{ title: 'I am an external node' }}
-          addNewItem={(newItem) => {
-            const { treeData } = insertNode({
-              treeData: this.state.treeData,
-              newNode: newItem.node,
-              depth: newItem.depth,
-              minimumTreeIndex: newItem.minimumTreeIndex,
-              expandParent: true,
-              getNodeKey: ({ treeIndex }) => treeIndex,
-            });
-            this.setState({ treeData });
-          }}
-          // Update the tree appearance post-drag
-          dropCancelled={() => this.setState(state => ({
-            treeData: state.treeData.concat(),
-          }))}
-        />
-      </div>
-    )
-  }
-}
-```
-
-
-In addition, the external node wrapper assumes you are using the tree component as `SortableTreeWithoutDndContext`
-
-
 ## Browser Compatibility
 
 | Browser | Works? |
diff --git a/examples/storybooks/__snapshots__/storyshots.test.js.snap b/examples/storybooks/__snapshots__/storyshots.test.js.snap
@@ -6,7 +6,7 @@ exports[`Storyshots Advanced Drag from external source 1`] = `
     <div
       style={
         Object {
-          "height": 250,
+          "height": 300,
         }
       }
     >
@@ -112,7 +112,7 @@ exports[`Storyshots Advanced Drag from external source 1`] = `
                             <span
                               className="rowTitle"
                             >
-                              node1
+                              Mama Rabbit
                             </span>
                           </div>
                           <div
@@ -182,7 +182,7 @@ exports[`Storyshots Advanced Drag from external source 1`] = `
                             <span
                               className="rowTitle"
                             >
-                              node2
+                              Papa Rabbit
                             </span>
                           </div>
                           <div
@@ -199,22 +199,19 @@ exports[`Storyshots Advanced Drag from external source 1`] = `
         </div>
       </div>
     </div>
-    <div>
-      <div
-        style={
-          Object {
-            "background": "blue",
-            "border": "solid black 1px",
-            "color": "white",
-            "display": "inline-block",
-            "padding": "3px 5px",
-          }
+    <div
+      style={
+        Object {
+          "background": "blue",
+          "color": "white",
+          "display": "inline-block",
+          "padding": "3px 5px",
         }
-      >
-        External node
-      </div>
+      }
+    >
+      Baby Rabbit
     </div>
-    ↑ drag this
+    ← drag this
   </div>
   <br />
   <a
diff --git a/examples/storybooks/external-node.js b/examples/storybooks/external-node.js
@@ -1,19 +1,31 @@
 import React, { Component } from 'react';
-import { DragDropContext } from 'react-dnd';
+import { DragDropContext, DragSource } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
-import {
-  SortableTreeWithoutDndContext as SortableTree,
-  dndWrapExternalSource,
-} from '../../src';
+import { SortableTreeWithoutDndContext as SortableTree } from '../../src';
 
+// -------------------------
+// Create an drag source component that can be dragged into the tree
+// https://react-dnd.github.io/react-dnd/docs-drag-source.html
+// -------------------------
+// This type must be assigned to the tree via the `dndType` prop as well
 const externalNodeType = 'yourNodeType';
-
-// this will wrap your external node component as a valid react-dnd DragSource
-const YourExternalNodeComponent = dndWrapExternalSource(
-  ({ node }) =>
+const externalNodeSpec = {
+  // This needs to return an object with a property `node` in it.
+  // Object rest spread is recommended to avoid side effects of
+  // referencing the same object in different trees.
+  beginDrag: componentProps => ({ node: { ...componentProps.node } }),
+};
+const externalNodeCollect = (connect /* , monitor */) => ({
+  connectDragSource: connect.dragSource(),
+  // Add props via react-dnd APIs to enable more visual
+  // customization of your component
+  // isDragging: monitor.isDragging(),
+  // didDrop: monitor.didDrop(),
+});
+const externalNodeBaseComponent = ({ connectDragSource, node }) =>
+  connectDragSource(
     <div
       style={{
-        border: 'solid black 1px',
         display: 'inline-block',
         padding: '3px 5px',
         background: 'blue',
@@ -22,35 +34,40 @@ const YourExternalNodeComponent = dndWrapExternalSource(
     >
       {node.title}
     </div>,
-  externalNodeType
-);
+    { dropEffect: 'copy' }
+  );
+const YourExternalNodeComponent = DragSource(
+  externalNodeType,
+  externalNodeSpec,
+  externalNodeCollect
+)(externalNodeBaseComponent);
 
 class App extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      treeData: [{ title: 'node1' }, { title: 'node2' }],
+      treeData: [{ title: 'Mama Rabbit' }, { title: 'Papa Rabbit' }],
     };
   }
 
   render() {
     return (
       <div>
-        <div style={{ height: 250 }}>
+        <div style={{ height: 300 }}>
           <SortableTree
             treeData={this.state.treeData}
             onChange={treeData => this.setState({ treeData })}
             dndType={externalNodeType}
           />
         </div>
         <YourExternalNodeComponent
-          node={{ title: 'External node' }}
+          node={{ title: 'Baby Rabbit' }}
           addNewItem={() => {}}
           // Update the tree appearance post-drag
           dropCancelled={() => {}}
         />
-        ↑ drag this
+        ← drag this
       </div>
     );
   }
diff --git a/examples/storybooks/tree-to-tree.js b/examples/storybooks/tree-to-tree.js
@@ -1,12 +1,6 @@
 import React, { Component } from 'react';
-// import { DragDropContext } from 'react-dnd';
-// import HTML5Backend from 'react-dnd-html5-backend';
 import SortableTree from '../../src';
-// SortableTreeWithoutDndContext as SortableTree,
-// insertNode,
-// dndWrapExternalSource,
 
-const externalNodeType = 'yourNodeType';
 
 class App extends Component {
   constructor(props) {
@@ -22,6 +16,9 @@ class App extends Component {
   }
 
   render() {
+    // Both trees need to share this same node type in their
+    // `dndType` prop
+    const externalNodeType = 'yourNodeType';
     return (
       <div>
         <div
diff --git a/src/index.js b/src/index.js
@@ -4,7 +4,6 @@ import SortableTree, {
 
 export * from './utils/default-handlers';
 export * from './utils/tree-data-utils';
-export { dndWrapExternalSource } from './utils/drag-and-drop-utils';
 export default SortableTree;
 
 // Export the tree component without the react-dnd DragDropContext,
diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js
@@ -142,13 +142,7 @@ class ReactSortableTree extends Component {
     // it means that the drag was canceled or the dragSource dropped
     // elsewhere, and we should reset the state of this tree
     if (!monitor.isDragging() && this.state.draggingTreeData) {
-      this.setState({
-        draggingTreeData: null,
-        swapFrom: null,
-        swapLength: null,
-        swapDepth: null,
-        rows: this.getRows(this.props.treeData),
-      });
+      this.endDrag();
     }
   }
 
@@ -328,8 +322,8 @@ class ReactSortableTree extends Component {
         rows: this.getRows(this.props.treeData),
       });
     } else if (dropResult.treeId !== this.treeId) {
-      const { node, path: prevPath, treeIndex: prevTreeIndex } = dropResult;
       // The node was dropped in an external drop target or tree
+      const { node, path: prevPath, treeIndex: prevTreeIndex } = dropResult;
       const treeData = this.state.draggingTreeData || this.props.treeData;
       this.props.onChange(treeData);
 
diff --git a/src/utils/drag-and-drop-utils.js b/src/utils/drag-and-drop-utils.js
@@ -4,8 +4,6 @@ import {
   DropTarget as dropTarget,
 } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
-import React from 'react';
-import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import { getDepth } from './tree-data-utils';
 import { memoizedInsertNode } from './memoized-tree-data-utils';
@@ -35,23 +33,8 @@ const nodeDragSource = {
   },
 };
 
-const externalSource = {
-  beginDrag(props) {
-    return {
-      node: {
-        ...props.node,
-      },
-      path: [],
-      treeId: null,
-      parentNode: null,
-      treeIndex: -1, // Use -1 to indicate external node
-    };
-  },
-};
-
 function getTargetDepth(dropTargetProps, monitor, component) {
   let dropTargetDepth = 0;
-  const draggedItem = monitor.getItem();
 
   const rowAbove = dropTargetProps.getPrevRow();
   if (rowAbove) {
@@ -84,9 +67,10 @@ function getTargetDepth(dropTargetProps, monitor, component) {
     );
   }
 
+  const dragSourcePath = monitor.getItem().path || [];
   let targetDepth = Math.min(
     dropTargetDepth,
-    Math.max(0, draggedItem.path.length + blocksOffset - 1)
+    Math.max(0, dragSourcePath.length + blocksOffset - 1)
   );
 
   // If a maxDepth is defined, constrain the target depth
@@ -190,13 +174,6 @@ const nodeDropTarget = {
   canDrop,
 };
 
-function externalSourcePropInjection(connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  };
-}
-
 function nodeDragSourcePropInjection(connect, monitor) {
   return {
     connectDragSource: connect.dragSource(),
@@ -216,31 +193,6 @@ function nodeDropTargetPropInjection(connect, monitor) {
   };
 }
 
-export function dndWrapExternalSource(UserComponent, type) {
-  class DndWrapExternalSource extends React.Component {
-    render() {
-      return this.props.connectDragSource(
-        <div>
-          <UserComponent {...this.props} />
-        </div>,
-        { dropEffect: 'copy' }
-      );
-    }
-  }
-
-  DndWrapExternalSource.propTypes = {
-    connectDragSource: PropTypes.func.isRequired,
-    /* eslint-disable react/no-unused-prop-types */
-    // The following are used within the react-dnd lifecycle hooks
-    node: PropTypes.shape({}).isRequired,
-    /* eslint-enable react/no-unused-prop-types */
-  };
-
-  return dragSource(type, externalSource, externalSourcePropInjection)(
-    DndWrapExternalSource
-  );
-}
-
 export function dndWrapSource(el, type) {
   return dragSource(type, nodeDragSource, nodeDragSourcePropInjection)(el);
 }
