Draft: JSK-11518: autoSnapRowsAfter, autoSnapRowsBefore option fronte…

…nd-collective#937
d9k · Feb 3, 2023 · 2dacc8b · 2dacc8b
1 parent 3364883
commit 2dacc8b
Show file tree

Hide file tree

Showing 9 changed files with 2,883 additions and 810 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/react-sortable-tree",
-  "version": "2.8.4",
+  "version": "2.8.7",
   "description": "Drag-and-drop sortable component for nested data and hierarchies",
   "scripts": {
     "prebuild": "yarn run lint && yarn run clean",

diff --git a/src/node-renderer-default.js b/src/node-renderer-default.js
@@ -7,13 +7,15 @@ import './node-renderer-default.css';
 class NodeRendererDefault extends Component {
   render() {
     const {
+      autoSnapEnabled,
       scaffoldBlockPxWidth,
       toggleChildrenVisibility,
       connectDragPreview,
       connectDragSource,
       isDragging,
       canDrop,
       canDrag,
+      lastCanDrop,
       node,
       title,
       subtitle,
@@ -32,6 +34,7 @@ class NodeRendererDefault extends Component {
       rowDirection,
       ...otherProps
     } = this.props;
+
     const nodeTitle = title || node.title;
     const nodeSubtitle = subtitle || node.subtitle;
     const rowDirectionClass = rowDirection === 'rtl' ? 'rst__rtl' : null;
@@ -66,7 +69,9 @@ class NodeRendererDefault extends Component {
     }
 
     const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
+
     const isLandingPadActive = !didDrop && isDragging;
+    const isLandingPadCancel = isLandingPadActive && (!canDrop && !(autoSnapEnabled && lastCanDrop));
 
     let buttonStyle = { left: -0.5 * scaffoldBlockPxWidth };
     if (rowDirection === 'rtl') {
@@ -112,7 +117,7 @@ class NodeRendererDefault extends Component {
               className={classnames(
                 'rst__row',
                 isLandingPadActive && 'rst__rowLandingPad',
-                isLandingPadActive && !canDrop && 'rst__rowCancelPad',
+                isLandingPadCancel && 'rst__rowCancelPad',
                 isSearchMatch && 'rst__rowSearchMatch',
                 isSearchFocus && 'rst__rowSearchFocus',
                 rowDirectionClass,
@@ -181,6 +186,7 @@ class NodeRendererDefault extends Component {
 }
 
 NodeRendererDefault.defaultProps = {
+  autoSnapEnabled: false,
   isSearchMatch: false,
   isSearchFocus: false,
   canDrag: false,
@@ -197,6 +203,7 @@ NodeRendererDefault.defaultProps = {
 };
 
 NodeRendererDefault.propTypes = {
+  autoSnapEnabled: PropTypes.bool,
   node: PropTypes.shape({}).isRequired,
   title: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   subtitle: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),

diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js
@@ -49,6 +49,8 @@ class ReactSortableTree extends Component {
     this.rowHeightRerunPlanned = false;
 
     const {
+      autoSnapRowsAfter,
+      autoSnapRowsBefore,
       dndType,
       nodeContentRenderer,
       treeNodeRenderer,
@@ -58,12 +60,13 @@ class ReactSortableTree extends Component {
 
     this.dndManager = new DndManager(this);
 
+    this.autoSnapRowsAfter = autoSnapRowsAfter;
+    this.autoSnapRowsBefore = autoSnapRowsBefore;
     // Wrapping classes for use with react-dnd
     this.treeId = `rst__${treeIdCounter}`;
     treeIdCounter += 1;
     this.dndType = dndType || this.treeId;
     this.nodeContentRenderer = this.dndManager.wrapSource(nodeContentRenderer);
-    this.firstRenderAfterDragStart = true;
     this.treePlaceholderRenderer = this.dndManager.wrapPlaceholder(
       TreePlaceholder
     );
@@ -109,6 +112,10 @@ class ReactSortableTree extends Component {
     this.handleDndMonitorChange = this.handleDndMonitorChange.bind(this);
   }
 
+  get autoSnapEnabled() {
+    return !!(this.autoSnapRowsAfter || this.autoSnapRowsBefore);
+  }
+
   componentDidMount() {
     ReactSortableTree.loadLazyChildren(this.props, this.state);
     const stateUpdate = ReactSortableTree.search(
@@ -176,8 +183,7 @@ class ReactSortableTree extends Component {
   };
 
   rowHeightsVirtualListRecompute() {
-    if (this.props.isVirtualized) {
-      if (!this.rowHeightRecomputing) {
+    if (this.props.isVirtualized && !this.rowHeightRecomputing) {
       this.rowHeightRecomputing = true;
 
       // TODO seems like calling recomputeRowHeights() immediately aborts dragging :c
@@ -187,7 +193,6 @@ class ReactSortableTree extends Component {
         this.rowHeightRerunPlanned = false;
         this.rowHeightsVirtualListRecompute();
       }
-      }
     } else {
       // this.forceUpdate();
     }
@@ -311,13 +316,18 @@ class ReactSortableTree extends Component {
     });
   }
 
-  moveNode({
-    node,
-    path: prevPath,
-    treeIndex: prevTreeIndex,
-    depth,
-    minimumTreeIndex,
-  }) {
+  moveNode(args) {
+
+    const {
+      node,
+      path: prevPath,
+      treeIndex: prevTreeIndex,
+      depth,
+      minimumTreeIndex,
+    } = args;
+
+    console.log('react-sortable-tree: moveNode():', args);
+
     const {
       treeData,
       treeIndex,
@@ -450,7 +460,12 @@ class ReactSortableTree extends Component {
       return;
     }
 
+
+    console.log('react-sortable-tree: dragHover():', {draggedNode, draggedDepth, draggedMinimumTreeIndex});
+
     this.setState(({ draggingTreeData, instanceProps }) => {
+      // console.log('react-sortable-tree: dragHover(): tree:', {draggingTreeData, treeData: instanceProps.treeData});
+
       // Fall back to the tree data if something is being dragged in from
       //  an external element
       const newDraggingTreeData = draggingTreeData || instanceProps.treeData;
@@ -614,7 +629,7 @@ class ReactSortableTree extends Component {
 
   renderRow(
     row,
-    { listIndex, style, getPrevRow, matchKeys, swapFrom, swapDepth, swapLength }
+    { listIndex, style, getPrevRow, getRows, matchKeys, swapFrom, swapDepth, swapLength }
   ) {
     const { node, parentNode, path, lowerSiblingCounts, treeIndex } = row;
 
@@ -627,6 +642,9 @@ class ReactSortableTree extends Component {
     } = this.mergeTheme(this.props);
     const TreeNodeRenderer = this.treeNodeRenderer;
     const NodeContentRenderer = this.nodeContentRenderer;
+
+    const { autoSnapEnabled } = this;
+
     const nodeKey = path[path.length - 1];
     const isSearchMatch = nodeKey in matchKeys;
     const isSearchFocus =
@@ -655,23 +673,29 @@ class ReactSortableTree extends Component {
       rowDirection,
     };
 
+    // console.log(`react-sortable-tree: renderRow(): ${JSON.stringify(sharedProps.path)}`, {nodeProps, sharedProps});
+
     return (
       <TreeNodeRenderer
         style={style}
         key={nodeKey}
         listIndex={listIndex}
         getPrevRow={getPrevRow}
+        getRows={getRows}
+        // getRows={getRows}
         lowerSiblingCounts={lowerSiblingCounts}
         swapFrom={swapFrom}
         swapLength={swapLength}
         swapDepth={swapDepth}
         {...sharedProps}
       >
         <NodeContentRenderer
+          autoSnapEnabled={autoSnapEnabled}
           parentNode={parentNode}
           isSearchMatch={isSearchMatch}
           isSearchFocus={isSearchFocus}
           canDrag={rowCanDrag}
+          lastCanDrop={this.dndManager.lastCanDrop}
           toggleChildrenVisibility={this.toggleChildrenVisibility}
           {...sharedProps}
           {...nodeProps}
@@ -796,6 +820,7 @@ class ReactSortableTree extends Component {
                   listIndex: index,
                   style: rowStyle,
                   getPrevRow: () => rows[index - 1] || null,
+                  getRows: () => rows,
                   matchKeys,
                   swapFrom,
                   swapDepth: draggedDepth,
@@ -825,6 +850,7 @@ class ReactSortableTree extends Component {
                   }),
           },
           getPrevRow: () => rows[index - 1] || null,
+          getRows: () => rows,
           matchKeys,
           swapFrom,
           swapDepth: draggedDepth,
@@ -847,6 +873,9 @@ class ReactSortableTree extends Component {
 }
 
 ReactSortableTree.propTypes = {
+  autoSnapRowsAfter: PropTypes.number,
+  autoSnapRowsBefore: PropTypes.number,
+
   dragDropManager: PropTypes.shape({
     getMonitor: PropTypes.func,
   }).isRequired,
@@ -981,6 +1010,8 @@ ReactSortableTree.propTypes = {
 };
 
 ReactSortableTree.defaultProps = {
+  autoSnapRowsAfter: 0,
+  autoSnapRowsBefore: 0,
   canDrag: true,
   canDrop: null,
   canNodeHaveChildren: () => true,

diff --git a/src/tree-node.js b/src/tree-node.js
@@ -20,6 +20,7 @@ class TreeNode extends Component {
       treeIndex,
       treeId, // Delete from otherProps
       getPrevRow, // Delete from otherProps
+      getRows, // Delete from otherProps
       node, // Delete from otherProps
       path, // Delete from otherProps
       rowDirection,
@@ -192,6 +193,7 @@ TreeNode.propTypes = {
 
   // used in dndManager
   getPrevRow: PropTypes.func.isRequired,
+  getRows: PropTypes.func.isRequired,
   node: PropTypes.shape({}).isRequired,
   path: PropTypes.arrayOf(
     PropTypes.oneOfType([PropTypes.string, PropTypes.number])