Merge pull request #70 from fritz-c/can-drop-api

Add `canDrop` API

Author: fritz-c

README.md

@@ -58,6 +58,7 @@ generateNodeProps         | func           |                     |          | Ge
 getNodeKey                | func           | defaultGetNodeKey   |          | Determine the unique key used to identify each node and generate the `path` array passed in callbacks. By default, returns the index in the tree (omitting hidden nodes).<div>`({ node: object, treeIndex: number }): string or number`</div>
 onMoveNode                | func           |                     |          | Called after node move operation. <div>`({ treeData: object[], node: object, treeIndex: number, path: number[] or string[] }): void`</div>
 onVisibilityToggle        | func           |                     |          | Called after children nodes collapsed or expanded. <div>`({ treeData: object[], node: object, expanded: bool }): void`</div>
+canDrop                   | func           |                     |          | Return false to prevent node from dropping in the given location. <div>`({ node: object, prevPath: number[] or string[], prevParent: object, nextPath: number[] or string[], nextParent: object}): bool`</div>
 reactVirtualizedListProps | object         |                     |          | Custom properties to hand to the [react-virtualized list](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types)
 rowHeight                 | number or func | `62`                |          | Used by react-virtualized. Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`
 slideRegionSize           | number         | `100`               |          | Size in px of the region near the edges that initiates scrolling on dragover.

src/examples/basicExample/app.js

@@ -124,6 +124,11 @@ class App extends Component {
                                 },
                             ],
                         },
+                        {
+                            title: 'You cannot give this children',
+                            subtitle: 'Dropping is prevented via the `canDrop` API using `nextParent`',
+                            noChildren: true,
+                        },
                         {
                             title: 'When node contents are really long, it will cause a horizontal scrollbar' +
                                 ' to appear. Deeply nested elements will also trigger the scrollbar.',
@@ -282,6 +287,7 @@ class App extends Component {
                             maxDepth={maxDepth}
                             searchQuery={searchString}
                             searchFocusOffset={searchFocusIndex}
+                            canDrop={({ nextParent }) => !nextParent || !nextParent.noChildren}
                             searchFinishCallback={matches =>
                                 this.setState({
                                     searchFoundCount: matches.length,

src/node-renderer-default.js

@@ -21,7 +21,6 @@ const NodeRendererDefault = ({
     connectDragPreview,
     connectDragSource,
     isDragging,
-    isOver,
     canDrop,
     node,
     draggedNode,
@@ -32,8 +31,11 @@ const NodeRendererDefault = ({
     buttons,
     className,
     style = {},
-    startDrag: _startDrag,
-    endDrag: _endDrag,
+    didDrop,
+    isOver:     _isOver,     // Not needed, but preserved for other renderers
+    parentNode: _parentNode, // Needed for drag-and-drop utils
+    endDrag:    _endDrag,    // Needed for drag-and-drop utils
+    startDrag:  _startDrag,  // Needed for drag-and-drop utils
     ...otherProps,
 }) => {
     let handle;
@@ -66,6 +68,7 @@ const NodeRendererDefault = ({
     }
 
     const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
+    const isLandingPadActive  = !didDrop && isDragging;
 
     return (
         <div
@@ -95,8 +98,8 @@ const NodeRendererDefault = ({
                 {connectDragPreview(
                     <div
                         className={styles.row +
-                            (isDragging && isOver ? ` ${styles.rowLandingPad}` : '') +
-                            (isDragging && !isOver && canDrop ? ` ${styles.rowCancelPad}` : '') +
+                            (isLandingPadActive ? ` ${styles.rowLandingPad}` : '') +
+                            (isLandingPadActive && !canDrop ? ` ${styles.rowCancelPad}` : '') +
                             (isSearchMatch ? ` ${styles.rowSearchMatch}` : '') +
                             (isSearchFocus ? ` ${styles.rowSearchFocus}` : '') +
                             (className ? ` ${className}` : '')
@@ -163,13 +166,15 @@ NodeRendererDefault.propTypes = {
     // Drag source
     connectDragPreview: PropTypes.func.isRequired,
     connectDragSource:  PropTypes.func.isRequired,
+    parentNode:         PropTypes.object,          // Needed for drag-and-drop utils
     startDrag:          PropTypes.func.isRequired, // Needed for drag-and-drop utils
     endDrag:            PropTypes.func.isRequired, // Needed for drag-and-drop utils
     isDragging:         PropTypes.bool.isRequired,
+    didDrop:            PropTypes.bool.isRequired,
     draggedNode:        PropTypes.object,
     // Drop target
     isOver:  PropTypes.bool.isRequired,
-    canDrop: PropTypes.bool.isRequired,
+    canDrop: PropTypes.bool,
 };
 
 export default NodeRendererDefault;

src/react-sortable-tree.js

@@ -20,6 +20,9 @@ import {
     getDescendantCount,
     find,
 } from './utils/tree-data-utils';
+import {
+    memoizedInsertNode,
+} from './utils/memoized-tree-data-utils';
 import {
     swapRows,
 } from './utils/generic-utils';
@@ -233,12 +236,13 @@ class ReactSortableTree extends Component {
     }
 
     dragHover({ node: draggedNode, depth, minimumTreeIndex }) {
-        const addedResult = insertNode({
+        const addedResult = memoizedInsertNode({
             treeData: this.state.draggingTreeData,
             newNode: draggedNode,
             depth,
             minimumTreeIndex,
             expandParent: true,
+            getNodeKey: this.props.getNodeKey,
         });
 
         const rows               = this.getRows(addedResult.treeData);
@@ -397,7 +401,14 @@ class ReactSortableTree extends Component {
         );
     }
 
-    renderRow({ node, path, lowerSiblingCounts, treeIndex }, listIndex, key, style, getPrevRow, matchKeys) {
+    renderRow(
+        { node, parentNode, path, lowerSiblingCounts, treeIndex },
+        listIndex,
+        key,
+        style,
+        getPrevRow,
+        matchKeys
+    ) {
         const TreeNodeRenderer    = this.treeNodeRenderer;
         const NodeContentRenderer = this.nodeContentRenderer;
         const nodeKey = path[path.length - 1];
@@ -407,6 +418,7 @@ class ReactSortableTree extends Component {
 
         const nodeProps = !this.props.generateNodeProps ? {} : this.props.generateNodeProps({
             node,
+            parentNode,
             path,
             lowerSiblingCounts,
             treeIndex,
@@ -421,6 +433,9 @@ class ReactSortableTree extends Component {
                 treeIndex={treeIndex}
                 listIndex={listIndex}
                 getPrevRow={getPrevRow}
+                treeData={this.state.draggingTreeData || this.state.treeData}
+                getNodeKey={this.props.getNodeKey}
+                customCanDrop={this.props.canDrop}
                 node={node}
                 path={path}
                 lowerSiblingCounts={lowerSiblingCounts}
@@ -433,6 +448,7 @@ class ReactSortableTree extends Component {
             >
                 <NodeContentRenderer
                     node={node}
+                    parentNode={parentNode}
                     path={path}
                     isSearchMatch={isSearchMatch}
                     isSearchFocus={isSearchFocus}
@@ -527,6 +543,9 @@ ReactSortableTree.propTypes = {
     // Called after node move operation.
     onMoveNode: PropTypes.func,
 
+    // Determine whether a node can be dropped based on its path and parents'.
+    canDrop: PropTypes.func,
+
     // Called after children nodes collapsed or expanded.
     onVisibilityToggle: PropTypes.func,
 

src/tree-node.js

@@ -14,11 +14,14 @@ const TreeNode = ({
     draggedNode,
     canDrop,
     treeIndex,
-    getPrevRow: _getPrevRow, // Delete from otherProps
-    node:       _node,       // Delete from otherProps
-    path:       _path,       // Delete from otherProps
-    maxDepth:   _maxDepth,   // Delete from otherProps
-    dragHover:  _dragHover,  // Delete from otherProps
+    customCanDrop: _customCanDrop, // Delete from otherProps
+    dragHover:     _dragHover,     // Delete from otherProps
+    getNodeKey:    _getNodeKey,    // Delete from otherProps
+    getPrevRow:    _getPrevRow,    // Delete from otherProps
+    maxDepth:      _maxDepth,      // Delete from otherProps
+    node:          _node,          // Delete from otherProps
+    path:          _path,          // Delete from otherProps
+    treeData:      _treeData,      // Delete from otherProps
     ...otherProps,
 }) => {
     // Construct the scaffold representing the structure of the tree
@@ -147,7 +150,7 @@ TreeNode.propTypes = {
     // Drop target
     connectDropTarget: PropTypes.func.isRequired,
     isOver:            PropTypes.bool.isRequired,
-    canDrop:           PropTypes.bool.isRequired,
+    canDrop:           PropTypes.bool,
     draggedNode:       PropTypes.object,
 };
 

src/utils/drag-and-drop-utils.js

@@ -7,14 +7,18 @@ import HTML5Backend from 'react-dnd-html5-backend';
 import {
     getDepth,
 } from './tree-data-utils';
+import {
+    memoizedInsertNode,
+} from './memoized-tree-data-utils';
 
 const nodeDragSource = {
     beginDrag(props) {
         props.startDrag(props);
 
         return {
-            node: props.node,
-            path: props.path,
+            node:       props.node,
+            parentNode: props.parentNode,
+            path:       props.path,
         };
     },
 
@@ -57,28 +61,43 @@ function getTargetDepth(dropTargetProps, monitor) {
     return targetDepth;
 }
 
-function canDrop(dropTargetProps, monitor, isHover = false) {
-    let abovePath      = [];
-    let aboveNode      = {};
-    const rowAbove = dropTargetProps.getPrevRow();
-    if (rowAbove) {
-        abovePath = rowAbove.path;
-        aboveNode = rowAbove.node;
+function canDrop(dropTargetProps, monitor) {
+    if (!monitor.isOver()) {
+        return false;
     }
 
+    const rowAbove    = dropTargetProps.getPrevRow();
+    const abovePath   = rowAbove ? rowAbove.path : [];
+    const aboveNode   = rowAbove ? rowAbove.node : {};
     const targetDepth = getTargetDepth(dropTargetProps, monitor);
-    const draggedNode = monitor.getItem().node;
-    return (
-        // Either we're not adding to the children of the row above...
-        targetDepth < abovePath.length ||
-        // ...or we guarantee it's not a function we're trying to add to
-        typeof aboveNode.children !== 'function'
-    ) && (
-        // Ignore when hovered above the identical node...
-        !(dropTargetProps.node === draggedNode && isHover === true) ||
-        // ...unless it's at a different level than the current one
-        targetDepth !== (dropTargetProps.path.length - 1)
-    );
+
+    // Cannot drop if we're adding to the children of the row above and
+    //  the row above is a function
+    if (targetDepth >= abovePath.length && typeof aboveNode.children === 'function') {
+        return false;
+    }
+
+    if (typeof dropTargetProps.customCanDrop === 'function') {
+        const node = monitor.getItem().node;
+        const addedResult = memoizedInsertNode({
+            treeData:         dropTargetProps.treeData,
+            newNode:          node,
+            depth:            targetDepth,
+            getNodeKey:       dropTargetProps.getNodeKey,
+            minimumTreeIndex: dropTargetProps.listIndex,
+            expandParent:     true,
+        });
+
+        return dropTargetProps.customCanDrop({
+            node,
+            prevPath:   monitor.getItem().path,
+            prevParent: monitor.getItem().parentNode,
+            nextPath:   addedResult.path,
+            nextParent: addedResult.parentNode,
+        });
+    }
+
+    return true;
 }
 
 const nodeDropTarget = {
@@ -92,15 +111,24 @@ const nodeDropTarget = {
     },
 
     hover(dropTargetProps, monitor) {
-        if (!canDrop(dropTargetProps, monitor, true)) {
+        const targetDepth = getTargetDepth(dropTargetProps, monitor);
+        const draggedNode = monitor.getItem().node;
+        const needsRedraw = (
+            // Redraw if hovered above different nodes
+            dropTargetProps.node !== draggedNode ||
+            // Or hovered above the same node but at a different depth
+            targetDepth !== (dropTargetProps.path.length - 1)
+        );
+
+        if (!needsRedraw) {
             return;
         }
 
         dropTargetProps.dragHover({
-            node:             monitor.getItem().node,
+            node:             draggedNode,
             path:             monitor.getItem().path,
             minimumTreeIndex: dropTargetProps.listIndex,
-            depth:            getTargetDepth(dropTargetProps, monitor),
+            depth:            targetDepth,
         });
     },
 
@@ -112,6 +140,7 @@ function nodeDragSourcePropInjection(connect, monitor) {
         connectDragSource:  connect.dragSource(),
         connectDragPreview: connect.dragPreview(),
         isDragging:         monitor.isDragging(),
+        didDrop:            monitor.didDrop(),
     };
 }
 

src/utils/memoized-tree-data-utils.js

@@ -0,0 +1,39 @@
+import { insertNode } from './tree-data-utils';
+
+let memoizedInsertArgsArray = [];
+let memoizedInsertKeysArray = [];
+let memoizedInsertResult    = null;
+
+/**
+ * Insert a node into the tree at the given depth, after the minimum index
+ *
+ * @param {!Object[]} treeData - Tree data
+ * @param {!number} depth - The depth to insert the node at (the first level of the array being depth 0)
+ * @param {!number} minimumTreeIndex - The lowest possible treeIndex to insert the node at
+ * @param {!Object} newNode - The node to insert into the tree
+ * @param {boolean=} ignoreCollapsed - Ignore children of nodes without `expanded` set to `true`
+ * @param {boolean=} expandParent - If true, expands the parent of the inserted node
+ * @param {!function} getNodeKey - Function to get the key from the nodeData and tree index
+ *
+ * @return {Object} result
+ * @return {Object[]} result.treeData - The tree data with the node added
+ * @return {number} result.treeIndex - The tree index at which the node was inserted
+ * @return {number[]|string[]} result.path - Array of keys leading to the node location after insertion
+ */
+export function memoizedInsertNode(args) {
+    const keysArray = Object.keys(args).sort();
+    const argsArray = keysArray.map(key => args[key]);
+
+    // If the arguments for the last insert operation are different than this time,
+    // recalculate the result
+    if (argsArray.length !== memoizedInsertArgsArray.length ||
+        argsArray.some((arg, index) => arg !== memoizedInsertArgsArray[index]) ||
+        keysArray.some((key, index) => key !== memoizedInsertKeysArray[index])
+    ) {
+        memoizedInsertArgsArray = argsArray;
+        memoizedInsertKeysArray = keysArray;
+        memoizedInsertResult    = insertNode(args);
+    }
+
+    return memoizedInsertResult;
+}

src/utils/memoized-tree-data-utils.test.js

@@ -0,0 +1,23 @@
+import {
+    insertNode,
+} from './tree-data-utils';
+
+import {
+    memoizedInsertNode,
+} from './memoized-tree-data-utils';
+
+describe('insertNode', () => {
+    it('should handle empty data', () => {
+        const params = {
+            treeData: [],
+            depth: 0,
+            minimumTreeIndex: 0,
+            newNode: {},
+            getNodeKey: ({ treeIndex }) => treeIndex,
+        };
+
+        expect(insertNode(params) === insertNode(params)).toEqual(false);
+        expect(memoizedInsertNode(params) === memoizedInsertNode(params)).toEqual(true);
+        expect(memoizedInsertNode(params) === memoizedInsertNode({...params, treeData: [{}]})).toEqual(false);
+    });
+});