@onehat/ui 0.2.76 → 0.2.77

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.76",
+	"version": "0.2.77",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Grid/Grid.js

@@ -223,7 +223,6 @@ function GridComponent(props) {
 			if (canRowsReorder) {
 				items.unshift(<IconButton
 					key="reorderBtn"
-					{...iconButtonProps}
 					onPress={() => setIsReorderMode(!isReorderMode)}
 					icon={<Icon as={isReorderMode ? NoReorderRows : ReorderRows} color={styles.GRID_TOOLBAR_ITEMS_COLOR} />}
 				/>);
@@ -388,7 +387,7 @@ function GridComponent(props) {
 				row = node.parentElement.parentElement,
 				parent = row.parentElement,
 				parentRect = parent.getBoundingClientRect(),
-				rows = _.filter(row.parentElement.children, (childNode) => {
+				rows = _.filter(parent.children, (childNode) => {
 					return childNode.getBoundingClientRect().height !== 0; // Skip zero-height children
 				}),
 				currentY = proxyRect.top - parentRect.top, // top position of pointer, relative to page
@@ -473,7 +472,7 @@ function GridComponent(props) {
 				row = node.parentElement.parentElement,
 				parent = row.parentElement,
 				parentRect = parent.getBoundingClientRect(),
-				rows = _.filter(row.parentElement.children, (childNode) => {
+				rows = _.filter(parent.children, (childNode) => {
 					return childNode.getBoundingClientRect().height !== 0; // Skip zero-height children
 				}),
 				currentY = proxyRect.top - parentRect.top, // top position of pointer, relative to page
@@ -537,7 +536,7 @@ function GridComponent(props) {
 			const
 				rowContainerRect = rows[newIx].getBoundingClientRect(),
 				top = (useBottom ? rowContainerRect.bottom : rowContainerRect.top) - parentRect.top - parseInt(parent.style.borderWidth); // get relative Y position
-			let marker = dragRowSlot && dragRowSlot.marker;
+			let marker = dragRowSlot?.marker;
 			if (marker) {
 				marker.style.top = top -4 + 'px'; // -4 so it's always visible
 			}
@@ -782,9 +781,9 @@ function GridComponent(props) {
 							nestedScrollEnabled={true}
 							contentContainerStyle={{
 								overflow: 'auto',
-								borderWidth: isReorderMode ? 4 : 0,
-								borderColor: isReorderMode ? '#23d9ea' : null,
-								borderStyle: 'dashed',
+								borderWidth: isReorderMode ? styles.REORDER_BORDER_WIDTH : 0,
+								borderColor: isReorderMode ? styles.REORDER_BORDER_COLOR : null,
+								borderStyle: styles.REORDER_BORDER_STYLE,
 								flex: 1,
 							}}
 							refreshing={isLoading}

package/src/Components/Hoc/withDraggable.js

@@ -29,11 +29,13 @@ export default function withDraggable(WrappedComponent) {
 				onDrag,
 				onDragStop,
 				onChangeIsDragging,
+				getDraggableNodeFromNode = (node) => node,
 				getParentNode = (node) => node.parentElement.parentElement,
 				getProxy,
 				proxyParent,
 				proxyPositionRelativeToParent = false,
 				handle,
+				draggableProps = {},
 				...propsToPass
 			} = props,
 			{
@@ -57,7 +59,7 @@ export default function withDraggable(WrappedComponent) {
 				}
 				
 				const
-					node = info.node,
+					node = getDraggableNodeFromNode(info.node),
 					parentContainer = getParentNode && getParentNode(node);
 
 				setNode(node);
@@ -226,8 +228,9 @@ export default function withDraggable(WrappedComponent) {
 							onStop={handleStop}
 							position={{ x: 0, y: 0, /* reset to dropped position */ }}
 							// bounds={bounds}
+							{...draggableProps}
 						>
-							<div className="nsResize">
+							<div className="nsResize" style={{ width: '100%', }}>
 								<WrappedComponent {...propsToPass} />
 							</div>
 						</Draggable>;
@@ -239,6 +242,7 @@ export default function withDraggable(WrappedComponent) {
 							onStop={handleStop}
 							position={{ x: 0, y: 0, /* reset to dropped position */ }}
 							// bounds={bounds}
+							{...draggableProps}
 						>
 							<div className="ewResize" style={{ height: '100%', }}>
 								<WrappedComponent {...propsToPass} />
@@ -252,8 +256,9 @@ export default function withDraggable(WrappedComponent) {
 						onStart={handleStart}
 						onDrag={handleDrag}
 						onStop={handleStop}
-						// position={{ x: 0, y: 0, /* reset to dropped position */ }}
+						position={{ x: 0, y: 0, /* reset to dropped position */ }}
 						handle={handle}
+						{...draggableProps}
 					>
 						<WrappedComponent {...propsToPass} />
 					</Draggable>;

package/src/Components/Hoc/withEditor.js

@@ -165,7 +165,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					await getListeners().onBeforeDeleteSave(selection);
 				}
 
-				await Repository.delete(selection);
+				await Repository.delete(selection, moveSubtreeUp);
 				if (!Repository.isAutoSave) {
 					await Repository.save();
 				}

package/src/Components/Tree/Tree.js

@@ -16,8 +16,9 @@ import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
 import {
-	DROP_POSITION_BEFORE,
-	DROP_POSITION_AFTER,
+	COLLAPSED,
+	EXPANDED,
+	LEAF,
 } from '../../Constants/Tree.js';
 import * as colourMixer from '@k-renwick/colour-mixer'
 import UiGlobals from '../../UiGlobals.js';
@@ -33,12 +34,12 @@ import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
+import inArray from '../../Functions/inArray.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
-import TreeNode, { ReorderableTreeNode } from './TreeNode.js';
+import TreeNode, { DraggableTreeNode } from './TreeNode.js';
 import FormPanel from '../Panel/FormPanel.js';
 import Input from '../Form/Field/Input.js';
-import IconButton from '../Buttons/IconButton.js';
 import Dot from '../Icons/Dot.js';
 import Collapse from '../Icons/Collapse.js';
 import FolderClosed from '../Icons/FolderClosed.js';
@@ -51,6 +52,7 @@ import NoRecordsFound from '../Grid/NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import _ from 'lodash';
 
+const DEPTH_INDENT_PX = 20;
 
 function TreeComponent(props) {
 	const {
@@ -62,17 +64,19 @@ function TreeComponent(props) {
 				}
 				return item[displayIx];
 			},
-			getNodeIcon = (item, isExpanded) => { // decides what icon to show for this node
+			getNodeIcon = (which, item) => { // decides what icon to show for this node
 				// TODO: Allow for dynamic props on the icon (e.g. special color for some icons)
 				let icon;
-				if (item.hasChildren) {
-					if (isExpanded) {
-						icon = FolderOpen;
-					} else {
+				switch(which) {
+					case COLLAPSED:
 						icon = FolderClosed;
-					}
-				} else {
-					icon = Dot;
+						break;
+					case EXPANDED:
+						icon = FolderOpen;
+						break;
+					case LEAF:
+						icon = Dot;
+						break;
 				}
 				return icon;
 			},
@@ -133,12 +137,14 @@ function TreeComponent(props) {
 		treeNodeData = useRef(),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
-		[isReorderMode, setIsReorderMode] = useState(false),
 		[isSearchModalShown, setIsSearchModalShown] = useState(false),
+		[rowToDatumMap, setRowToDatumMap] = useState({}),
 		[searchResults, setSearchResults] = useState([]),
 		[searchFormData, setSearchFormData] = useState([]),
-		[dragNodeSlot, setDragNodeSlot] = useState(null),
-		[dragNodeIx, setDragNodeIx] = useState(),
+		[highlitedDatum, setHighlitedDatum] = useState(null),
+		[isDragMode, setIsDragMode] = useState(false),
+		[dragNodeId, setDragNodeId] = useState(null),
+		[dropRowIx, setDropRowIx] = useState(null),
 		[treeSearchValue, setTreeSearchValue] = useState(''),
 
 		// state getters & setters
@@ -237,6 +243,8 @@ function TreeComponent(props) {
 			const entityDatum = buildTreeNodeDatum(entity);
 			parentDatum.children.unshift(entityDatum);
 			forceUpdate();
+			
+			buildRowToDatumMap();
 		},
 		onBeforeEditSave = (entities) => {
 			onBeforeSave(entities);
@@ -249,8 +257,18 @@ function TreeComponent(props) {
 				newDatum = buildTreeNodeDatum(node);
 
 			// copy the updated data to existingDatum
-			_.merge(existingDatum, newDatum);
+			_.assign(existingDatum, newDatum);
 			existingDatum.isLoading = false;
+
+
+			if (node.parent?.id) {
+				const
+					existingParentDatum = getNodeData(node.parent.id),
+					newParentDatum = buildTreeNodeDatum(node.parent);
+				_.assign(existingParentDatum, newParentDatum);
+				existingParentDatum.isExpanded = true;
+			}
+
 			forceUpdate();
 		},
 		onBeforeDeleteSave = (entities) => {
@@ -265,9 +283,12 @@ function TreeComponent(props) {
 			forceUpdate();
 		},
 		onAfterDelete = async (entities) => {
-			// TODO: Refresh the parent node
-
-			debugger;
+			const parent = entities[0].parent;
+			if (parent) {
+				await reloadNode(parent); // includes buildRowToDatumMap
+			} else {
+				buildRowToDatumMap();
+			}
 		},
 		onToggle = (datum) => {
 			if (datum.isLoading) {
@@ -286,6 +307,8 @@ function TreeComponent(props) {
 			}
 			
 			forceUpdate();
+
+			buildRowToDatumMap();
 		},
 		onCollapseAll = (setNewTreeNodeData = true) => {
 			// Go through whole tree and collapse all nodes
@@ -295,6 +318,7 @@ function TreeComponent(props) {
 			if (setNewTreeNodeData) {
 				setTreeNodeData(newTreeNodeData);
 			}
+			buildRowToDatumMap();
 			return newTreeNodeData;
 		},
 		onSearchTree = async (value) => {
@@ -323,21 +347,27 @@ function TreeComponent(props) {
 		},
 
 		// utilities
-		getNodeData = (itemId) => {
-			function findNodeById(node, id) {
+		getNodeData = (id) => {
+			function findNodeById(node) {
 				if (node.item.id === id) {
 					return node;
 				}
 				if (!_.isEmpty(node.children)) {
-					return _.find(node.children, (node2) => {
-						return findNodeById(node2, id);
+					let found1 = null;
+					_.each(node.children, (node2) => {
+						const found2 = findNodeById(node2);
+						if (found2) {
+							found1 = found2;
+							return false; // break loop
+						}
 					})
+					return found1
 				}
 				return false;
 			}
 			let found = null;
 			_.each(getTreeNodeData(), (node) => {
-				const foundNode = findNodeById(node, itemId);
+				const foundNode = findNodeById(node);
 				if (foundNode) {
 					found = foundNode;
 					return false;
@@ -355,9 +385,9 @@ function TreeComponent(props) {
 				datum = {
 					item: treeNode,
 					text: getNodeText(treeNode),
-					iconCollapsed: getNodeIcon(treeNode, false),
-					iconExpanded: getNodeIcon(treeNode, true),
-					iconLeaf: getNodeIcon(treeNode),
+					iconCollapsed: getNodeIcon(COLLAPSED, treeNode),
+					iconExpanded: getNodeIcon(EXPANDED, treeNode),
+					iconLeaf: getNodeIcon(LEAF, treeNode),
 					isExpanded: isRoot, // all non-root treeNodes are collapsed by default
 					isVisible: isRoot ? areRootsVisible : true,
 					isLoading: false,
@@ -385,7 +415,35 @@ function TreeComponent(props) {
 				nodes = assembleDataTreeNodes();
 			}
 
-			setTreeNodeData(buildTreeNodeData(nodes));
+			const treeNodeData = buildTreeNodeData(nodes);
+			setTreeNodeData(treeNodeData);
+
+			buildRowToDatumMap();
+		},
+		buildRowToDatumMap = () => {
+			const rowToDatumMap = {};
+			let ix = 0;
+
+			function walkTree(datum) {
+				if (!datum.isVisible) {
+					return;
+				}
+
+				// Add this datum's id
+				rowToDatumMap[ix] = datum;
+				ix++;
+
+				if (datum.isExpanded) {
+					_.each(datum.children, (child) => {
+						walkTree(child);
+					});
+				}
+			}
+			_.each(getTreeNodeData(), (rootDatum) => {
+				walkTree(rootDatum);
+			});
+			
+			setRowToDatumMap(rowToDatumMap);
 		},
 		datumContainsSelection = (datum) => {
 			if (_.isEmpty(selection)) {
@@ -416,7 +474,7 @@ function TreeComponent(props) {
 				});
 				return found;
 			}
-			return searchChildren(treeNodeData);
+			return searchChildren(getTreeNodeData());
 		},
 		getTreeNodeByNodeId = (node_id) => {
 			if (Repository) {
@@ -436,6 +494,27 @@ function TreeComponent(props) {
 			});
 			return ids;
 		},
+		getDatumById = (id) => {
+
+			let found = null;
+
+			function walkTree(datum) {
+				if (datum.item.id === id) {
+					found = datum;
+					return;
+				}
+				_.each(datum.children, (child) => {
+					if (!found) {
+						walkTree(child);
+					}
+				});
+			}
+			_.each(getTreeNodeData(), (rootDatum) => {
+				walkTree(rootDatum);
+			});
+
+			return found;
+		},
 		assembleDataTreeNodes = () => {
 			// Populates the TreeNodes with .parent and .children references
 			// NOTE: This is only for 'data', not for Repositories!
@@ -486,6 +565,25 @@ function TreeComponent(props) {
 			Repository.areRootNodesLoaded = false;
 			return buildAndSetTreeNodeData();
 		},
+		reloadNode = async (node) => {
+			// mark node as loading
+			const existingDatum = getNodeData(node.id);
+			existingDatum.isLoading = true;
+			forceUpdate();
+
+			// reload from server
+			await node.reload();
+
+			// Refresh the node's display
+			const newDatum = buildTreeNodeDatum(node);
+
+			// copy the updated data to existingDatum
+			_.assign(existingDatum, _.omit(newDatum, ['isExpanded']));
+			existingDatum.isLoading = false;
+			forceUpdate();
+
+			buildRowToDatumMap();
+		},
 		loadChildren = async (datum, depth = 1) => {
 			// Show loading indicator (spinner underneath current node?)
 			datum.isLoading = true;
@@ -508,12 +606,18 @@ function TreeComponent(props) {
 			// Hide loading indicator
 			datum.isLoading = false;
 			forceUpdate();
+			
+			buildRowToDatumMap();
 		},
 		collapseNodes = (nodes) => {
+			collapseNodesRecursive(nodes);
+			buildRowToDatumMap();
+		},
+		collapseNodesRecursive = (nodes) => {
 			_.each(nodes, (node) => {
 				node.isExpanded = false;
 				if (!_.isEmpty(node.children)) {
-					collapseNodes(node.children);
+					collapseNodesRecursive(node.children);
 				}
 			});
 		},
@@ -561,9 +665,10 @@ function TreeComponent(props) {
 
 			setSelection([currentNode]);
 			scrollToNode(currentNode);
-			highlightNode(currentNode);
+			setHighlitedDatum(currentDatum);
 
 			setTreeNodeData(newTreeNodeData);
+			buildRowToDatumMap();
 		},
 		scrollToNode = (node) => {
 			// Helper for expandPath
@@ -572,15 +677,6 @@ function TreeComponent(props) {
 			// TODO: This will probably need different methods in web and mobile
 
 
-		},
-		highlightNode = (node) => {
-			// Helper for expandPath
-			// Show a brief highlight animation to draw attention to the node
-
-			// TODO: This will probably need different methods in web and mobile
-			// react-highlight for web?
-
-
 		},
 
 		// render
@@ -605,9 +701,11 @@ function TreeComponent(props) {
 			if (canNodesReorder) {
 				buttons.push({
 					key: 'reorderBtn',
-					text: 'Enter reorder mode',
-					handler: () => setIsReorderMode(!isReorderMode),
-					icon: isReorderMode ? NoReorderRows : ReorderRows,
+					text: (isDragMode ? 'Exit' : 'Enter') + ' reorder mode',
+					handler: () => {
+						setIsDragMode(!isDragMode)
+					},
+					icon: isDragMode ? NoReorderRows : ReorderRows,
 					isDisabled: false,
 				});
 			}
@@ -652,7 +750,7 @@ function TreeComponent(props) {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();
 							}
-							if (isReorderMode) {
+							if (isDragMode) {
 								return
 							}
 							switch (e.detail) {
@@ -676,7 +774,7 @@ function TreeComponent(props) {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();
 							}
-							if (isReorderMode) {
+							if (isDragMode) {
 								return;
 							}
 
@@ -692,7 +790,7 @@ function TreeComponent(props) {
 							}
 						}}
 						flexDirection="row"
-						ml={((areRootsVisible ? depth : depth -1) * 20) + 'px'}
+						ml={((areRootsVisible ? depth : depth -1) * DEPTH_INDENT_PX) + 'px'}
 					>
 						{({
 							isHovered,
@@ -701,45 +799,52 @@ function TreeComponent(props) {
 						}) => {
 							let bg = nodeProps.bg || styles.TREE_NODE_BG,
 								mixWith;
-							if (isSelected) {
-								if (showHovers && isHovered) {
-									mixWith = styles.TREE_NODE_SELECTED_HOVER_BG;
-								} else {
-									mixWith = styles.TREE_NODE_SELECTED_BG;
+							if (!isDragMode) {
+								if (isSelected) {
+									if (showHovers && isHovered) {
+										mixWith = styles.TREE_NODE_SELECTED_HOVER_BG;
+									} else {
+										mixWith = styles.TREE_NODE_SELECTED_BG;
+									}
+								} else if (showHovers && isHovered) {
+									mixWith = styles.TREE_NODE_HOVER_BG;
 								}
-							} else if (showHovers && isHovered) {
-								mixWith = styles.TREE_NODE_HOVER_BG;
-							}
-							if (mixWith) {
-								const
-									mixWithObj = nbToRgb(mixWith),
-									ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
-								bg = colourMixer.blend(bg, ratio, mixWithObj.color);
+								if (mixWith) {
+									const
+										mixWithObj = nbToRgb(mixWith),
+										ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
+									bg = colourMixer.blend(bg, ratio, mixWithObj.color);
+								}
+							} else {
+
 							}
 							let WhichTreeNode = TreeNode,
-								rowReorderProps = {};
-							if (canNodesReorder && isReorderMode) {
-								WhichTreeNode = ReorderableTreeNode;
-								rowReorderProps = {
+								dragProps = {};
+							if (canNodesReorder && isDragMode && !datum.item.isRoot) { // Can't drag root nodes
+								WhichTreeNode = DraggableTreeNode;
+								dragProps = {
 									mode: VERTICAL,
-									onDragStart: onNodeReorderDragStart,
-									onDrag: onNodeReorderDrag,
-									onDragStop: onNodeReorderDragStop,
-									proxyParent: treeRef.current?.getScrollableNode().children[0],
+									onDrag,
+									onDragStop,
+									getParentNode: (node) => node.parentElement.parentElement,
+									getDraggableNodeFromNode: (node) => node.parentElement,
+									getProxy: getDragProxy,
+									proxyParent: treeRef.current,
 									proxyPositionRelativeToParent: true,
-									getParentNode: (node) => node.parentElement.parentElement.parentElement,
-									getProxy: getReorderProxy,
 								};
+								nodeProps.width = '100%';
 							}
 							
 							return <WhichTreeNode
 										nodeProps={nodeProps}
+										{...dragProps}
 										bg={bg}
 										datum={datum}
 										onToggle={onToggle}
+										isDragMode={isDragMode}
+										isHighlighted={highlitedDatum === datum}
 
 										// fields={fields}
-										{...rowReorderProps}
 									/>;
 						}}
 					</Pressable>;
@@ -762,129 +867,60 @@ function TreeComponent(props) {
 		},
 
 		// drag/drop
-		getReorderProxy = (node) => {
+		getDragProxy = (node) => {
+
+			// TODO: Maybe the proxy should grab itself and all descendants??
+
 			const
-				row = node.parentElement.parentElement,
+				row = node,
 				rowRect = row.getBoundingClientRect(),
 				parent = row.parentElement,
 				parentRect = parent.getBoundingClientRect(),
 				proxy = row.cloneNode(true),
 				top = rowRect.top - parentRect.top,
-				dragNodeIx = Array.from(parent.children).indexOf(row)
+				rows = _.filter(parent.children, (childNode) => {
+					if (childNode.getBoundingClientRect().height === 0 && childNode.style.visibility !== 'hidden') {
+						return false; // Skip zero-height children
+					}
+					if (childNode === proxy) {
+						return false;
+					}
+					return true;
+				}),
+				dragRowIx = Array.from(rows).indexOf(row),
+				dragRowRecord = rowToDatumMap[dragRowIx].item;
 			
-			setDragNodeIx(dragNodeIx); // the ix of which record is being dragged
+			setDragNodeId(dragRowRecord.id); // the id of which record is being dragged
 
 			proxy.style.top = top + 'px';
-			proxy.style.left = '20px';
+			proxy.style.left = (dragRowRecord.depth * DEPTH_INDENT_PX) + 'px';
 			proxy.style.height = rowRect.height + 'px';
 			proxy.style.width = rowRect.width + 'px';
 			proxy.style.display = 'flex';
-			// proxy.style.backgroundColor = '#ccc';
 			proxy.style.position = 'absolute';
-			proxy.style.border = '1px solid #000';
+			proxy.style.border = '1px solid #bbb';
 			return proxy;
 		},
-		onNodeReorderDragStart = (info, e, proxy, node) => {
-			// console.log('onNodeReorderDragStart', info, e, proxy, node);
+		onDrag = (info, e, proxy, node) => {
+			// console.log('onDrag', info, e, proxy, node);
 			const
 				proxyRect = proxy.getBoundingClientRect(),
-				row = node.parentElement.parentElement,
+				row = node,
 				parent = row.parentElement,
 				parentRect = parent.getBoundingClientRect(),
-				rows = _.filter(row.parentElement.children, (childNode) => {
-					return childNode.getBoundingClientRect().height !== 0; // Skip zero-height children
-				}),
-				currentY = proxyRect.top - parentRect.top, // top position of pointer, relative to page
-				headerNodeIx = showHeaders ? 0 : null,
-				firstActualNodeIx = showHeaders ? 1 : 0;
-
-			// Figure out which index the user wants
-			let newIx = 0;
-			_.each(rows, (child, ix, all) => {
-				const
-					rect = child.getBoundingClientRect(), // rect of the row of this iteration
-					{
-						top,
-						bottom,
-						height,
-					} = rect,
-					compensatedTop = top - parentRect.top,
-					compensatedBottom = bottom - parentRect.top,
-					halfHeight = height / 2;
-
-				if (ix === headerNodeIx || child === proxy) {
-					return;
-				}
-				if (ix === firstActualNodeIx) {
-					// first row
-					if (currentY < compensatedTop + halfHeight) {
-						newIx = firstActualNodeIx;
-						return false;
-					} else if (currentY < compensatedBottom) {
-						newIx = firstActualNodeIx + 1;
-						return false;
+				rows = _.filter(parent.children, (childNode) => {
+					if (childNode.getBoundingClientRect().height === 0 && childNode.style.visibility !== 'hidden') {
+						return false; // Skip zero-height children
 					}
-					return;
-				} else if (ix === all.length -1) {
-					// last row
-					if (currentY < compensatedTop + halfHeight) {
-						newIx = ix;
+					if (childNode === proxy) {
 						return false;
 					}
-					newIx = ix +1;
-					return false;
-				}
-				
-				// all other rows
-				if (compensatedTop <= currentY && currentY < compensatedTop + halfHeight) {
-					newIx = ix;
-					return false;
-				} else if (currentY < compensatedBottom) {
-					newIx = ix +1;
-					return false;
-				}
-			});
-
-			let useBottom = false;
-			if (!rows[newIx] || rows[newIx] === proxy) {
-				newIx--;
-				useBottom = true;
-			}
-
-			// Render marker showing destination location
-			const
-				rowContainerRect = rows[newIx].getBoundingClientRect(),
-				top = (useBottom ? rowContainerRect.bottom : rowContainerRect.top) - parentRect.top - parseInt(parent.style.borderWidth), // get relative Y position
-				treeNodesContainer = treeRef.current._listRef._scrollRef.childNodes[0],
-				treeNodesContainerRect = treeNodesContainer.getBoundingClientRect(),
-				marker = document.createElement('div');
-
-			marker.style.position = 'absolute';
-			marker.style.top = top -4 + 'px'; // -4 so it's always visible
-			marker.style.height = '4px';
-			marker.style.width = treeNodesContainerRect.width + 'px';
-			marker.style.backgroundColor = '#f00';
-
-			treeNodesContainer.appendChild(marker);
-
-			setDragNodeSlot({ ix: newIx, marker, useBottom, });
-		},
-		onNodeReorderDrag = (info, e, proxy, node) => {
-			// console.log('onNodeReorderDrag', info, e, proxy, node);
-			const
-				proxyRect = proxy.getBoundingClientRect(),
-				row = node.parentElement.parentElement,
-				parent = row.parentElement,
-				parentRect = parent.getBoundingClientRect(),
-				rows = _.filter(row.parentElement.children, (childNode) => {
-					return childNode.getBoundingClientRect().height !== 0; // Skip zero-height children
+					return true;
 				}),
-				currentY = proxyRect.top - parentRect.top, // top position of pointer, relative to page
-				headerNodeIx = showHeaders ? 0 : null,
-				firstActualNodeIx = showHeaders ? 1 : 0;
+				currentY = proxyRect.top - parentRect.top; // top position of pointer, relative to page
 
-			// Figure out which index the user wants
-			let newIx = 0;
+			// Figure out which row the user wants as a parentId
+			let newIx = 0; // default to root being new parentId
 			_.each(rows, (child, ix, all) => {
 				const
 					rect = child.getBoundingClientRect(), // rect of the row of this iteration
@@ -893,117 +929,89 @@ function TreeComponent(props) {
 						bottom,
 						height,
 					} = rect,
-					compensatedTop = top - parentRect.top,
-					compensatedBottom = bottom - parentRect.top,
-					halfHeight = height / 2;
+					compensatedBottom = bottom - parentRect.top;
 
-				if (ix === headerNodeIx || child === proxy) {
+				if (child === proxy) {
 					return;
 				}
-				if (ix === firstActualNodeIx) {
+				if (ix === 0) {
 					// first row
-					if (currentY < compensatedTop + halfHeight) {
-						newIx = firstActualNodeIx;
-						return false;
-					} else if (currentY < compensatedBottom) {
-						newIx = firstActualNodeIx + 1;
+					if (currentY < compensatedBottom) {
+						newIx = 0;
 						return false;
 					}
 					return;
 				} else if (ix === all.length -1) {
 					// last row
-					if (currentY < compensatedTop + halfHeight) {
+					if (currentY < compensatedBottom) {
 						newIx = ix;
 						return false;
 					}
-					newIx = ix +1;
-					return false;
+					return;
 				}
 				
 				// all other rows
-				if (compensatedTop <= currentY && currentY < compensatedTop + halfHeight) {
+				if (currentY < compensatedBottom) {
 					newIx = ix;
 					return false;
-				} else if (currentY < compensatedBottom) {
-					newIx = ix +1;
-					return false;
 				}
 			});
 
-			let useBottom = false;
-			if (!rows[newIx] || rows[newIx] === proxy) {
-				newIx--;
-				useBottom = true;
-			}
 
-			// Render marker showing destination location (can't use regular render cycle because this div is absolutely positioned on page)
 			const
-				rowContainerRect = rows[newIx].getBoundingClientRect(),
-				top = (useBottom ? rowContainerRect.bottom : rowContainerRect.top) - parentRect.top - parseInt(parent.style.borderWidth); // get relative Y position
-			let marker = dragNodeSlot && dragNodeSlot.marker;
-			if (marker) {
-				marker.style.top = top -4 + 'px'; // -4 so it's always visible
-			}
+				dragDatum = getDatumById(dragNodeId),
+				dragDatumChildIds = getDatumChildIds(dragDatum),
+				dropRowDatum = rowToDatumMap[newIx],
+				dropRowRecord = dropRowDatum.item,
+				dropNodeId = dropRowRecord.id,
+				dragNodeContainsDropNode = inArray(dropNodeId, dragDatumChildIds) || dropRowRecord.id === dragNodeId;
+			
+			if (dragNodeContainsDropNode) {
+				// the node can be a child of any node except itself or its own descendants
+				setDropRowIx(null);
+				setHighlitedDatum(null);
+
+			} else {
+				console.log('setDropRowIx', newIx);
+				setDropRowIx(newIx);
 
-			setDragNodeSlot({ ix: newIx, marker, useBottom, });
-			// console.log('onNodeReorderDrag', newIx);
+				// highlight the drop node
+				setHighlitedDatum(dropRowDatum);
 
+				// shift proxy's depth
+				const depth = (dropRowRecord.id === dragNodeId) ? dropRowRecord.depth : dropRowRecord.depth + 1;
+				proxy.style.left = (depth * DEPTH_INDENT_PX) + 'px';
+			}
 		},
-		onNodeReorderDragStop = (delta, e, config) => {
-			// console.log('onNodeReorderDragStop', delta, e, config);
-			const
-				dropIx = dragNodeSlot.ix,
-				compensatedDragIx = showHeaders ? dragNodeIx -1 : dragNodeIx, // ix, without taking header row into account
-				compensatedDropIx = showHeaders ? dropIx -1 : dropIx, // // ix, without taking header row into account
-				dropPosition = dragNodeSlot.useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE;
+		onDragStop = async (delta, e, config) => {
+			// console.log('onDragStop', delta, e, config);
 
-			let shouldMove = true,
-				finalDropIx = compensatedDropIx;
-			
-			if (dropPosition === DROP_POSITION_BEFORE) {
-				if (dragNodeIx === dropIx || dragNodeIx === dropIx -1) { // basically before or after the drag row's origin
-					// Same as origin; don't do anything
-					shouldMove = false;
-				} else {
-					// Actually move it
-					if (!Repository) { // If we're just going to be switching rows, rather than telling server to reorder rows, so maybe adjust finalDropIx...
-						if (finalDropIx > compensatedDragIx) { // if we're dropping *before* the origin ix
-							finalDropIx = finalDropIx -1; // Because we're using BEFORE, we want to switch with the row *prior to* the ix we're dropping before
-						}
-					}
-				}
-			} else if (dropPosition === DROP_POSITION_AFTER) {
-				// Only happens on the very last row. Everything else is BEFORE...
-				if (dragNodeIx === dropIx) {
-					// Same as origin; don't do anything
-					shouldMove = false;
-				}
+			if (_.isNil(dropRowIx)) {
+				return;
 			}
+			
+			const
+				dragDatum = getDatumById(dragNodeId),
+				dragRowRecord = dragDatum.item,
+				dropRowDatum = rowToDatumMap[dropRowIx],
+				dropRowRecord = dropRowDatum.item;
 
-			if (shouldMove) {
-				// Update the row with the new ix
-				let dragRecord,
-					dropRecord;
-				if (Repository) {
-					dragRecord = Repository.getByIx(compensatedDragIx);
-					dropRecord = Repository.getByIx(finalDropIx);
-					
-					Repository.reorder(dragRecord, dropRecord, dropPosition);
+			if (Repository) {
+				
+				const commonAncestorId = await Repository.moveTreeNode(dragRowRecord, dropRowRecord.id);
+				const commonAncestorDatum = getDatumById(commonAncestorId);
+				reloadNode(commonAncestorDatum.item);
 
-				} else {
-					function arrayMove(arr, fromIndex, toIndex) {
-						var element = arr[fromIndex];
-						arr.splice(fromIndex, 1);
-						arr.splice(toIndex, 0, element);
-					}
-					arrayMove(data, compensatedDragIx, finalDropIx);
-				}
-			}
+			} else {
 
-			if (dragNodeSlot) {
-				dragNodeSlot.marker.remove();
+				throw Error('Not yet implemented');
+				// function arrayMove(arr, fromIndex, toIndex) {
+				// 	var element = arr[fromIndex];
+				// 	arr.splice(fromIndex, 1);
+				// 	arr.splice(toIndex, 0, element);
+				// }
+				// arrayMove(data, dragNodeIx, finalDropIx);
 			}
-			setDragNodeSlot(null);
 		};
 
 	useEffect(() => {
@@ -1070,8 +1078,8 @@ function TreeComponent(props) {
 	});
 	
 	const
-		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [treeSearchValue, getTreeNodeData()]),
-		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isReorderMode, getTreeNodeData()]);
+		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [treeSearchValue, isDragMode, getTreeNodeData()]),
+		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isDragMode, getTreeNodeData()]);
 
 	if (!isReady) {
 		return null;
@@ -1088,7 +1096,17 @@ function TreeComponent(props) {
 			treeFooterComponent = <Toolbar>{footerToolbarItemComponents}</Toolbar>;
 		}
 	}
-	
+
+	const borderProps = {};
+	if (isDragMode) {
+		borderProps.borderWidth = isDragMode ? styles.REORDER_BORDER_WIDTH : 0;
+		borderProps.borderColor = isDragMode ? styles.REORDER_BORDER_COLOR : null;
+		borderProps.borderStyle = styles.REORDER_BORDER_STYLE;
+	} else {
+		borderProps.borderTopWidth = isLoading ? 2 : 1;
+		borderProps.borderTopColor = isLoading ? '#f00' : 'trueGray.300';
+	}
+
 	return <>
 				<Column
 					{...testProps('Tree')}
@@ -1098,11 +1116,18 @@ function TreeComponent(props) {
 					{topToolbar}
 					{headerToolbarItemComponents?.length && <Row>{headerToolbarItemComponents}</Row>}
 
-					<Column w="100%" flex={1} p={2} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
-						if (!isReorderMode) {
-							deselectAll();
-						}
-					}}>
+					<Column
+						ref={treeRef}
+						w="100%"
+						flex={1}
+						p={2}
+						{...borderProps}
+						onClick={() => {
+							if (!isDragMode) {
+								deselectAll();
+							}
+						}}
+					>
 						{!treeNodes?.length ? <NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
 							treeNodes}
 					</Column>

package/src/Components/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-import { useState, useMemo, } from 'react';
+import { useMemo, } from 'react';
 import {
 	Box,
 	Icon,
@@ -6,9 +6,6 @@ import {
 	Spinner,
 	Text,
 } from 'native-base';
-import {
-	VERTICAL,
-} from '../../Constants/Directions.js';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -22,6 +19,8 @@ export default function TreeNode(props) {
 			bg,
 			datum,
 			onToggle,
+			isDragMode,
+			isHighlighted,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
@@ -37,7 +36,9 @@ export default function TreeNode(props) {
 		iconLeaf = datum.iconLeaf,
 		hash = item?.hash || item;
 
-	const icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf;
+	const
+		icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf,
+		adjustedBg = isHighlighted ? styles.TREE_NODE_HIGHLIGHTED_BG : bg;
 
 	return useMemo(() => {
 		
@@ -45,14 +46,14 @@ export default function TreeNode(props) {
 					alignItems="center"
 					flexGrow={1}
 					{...nodeProps}
-					bg={bg}
+					bg={adjustedBg}
 					key={hash}
 				>
 					{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
 					
 					{isLoading ? 
 						<Spinner px={2} /> : 
-						(hasChildren ? <IconButton icon={icon} onPress={() => onToggle(datum)} /> : <Icon as={icon} px={2} />)}
+						(hasChildren && !isDragMode ? <IconButton icon={icon} onPress={() => onToggle(datum)} /> : <Icon as={icon} px={2} />)}
 
 					<Text
 						overflow="hidden"
@@ -70,7 +71,7 @@ export default function TreeNode(props) {
 				</Row>;
 	}, [
 		nodeProps,
-		bg,
+		adjustedBg,
 		item,
 		isPhantom,
 		hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
@@ -81,16 +82,9 @@ export default function TreeNode(props) {
 		icon,
 		onToggle,
 		isLoading,
+		isDragMode,
+		isHighlighted,
 	]);
 }
 
-function withAdditionalProps(WrappedComponent) {
-	return (props) => {
-		return <WrappedComponent
-					mode={VERTICAL}
-					{...props}
-				/>;
-	};
-}
-
-export const ReorderableTreeNode = withAdditionalProps(withDraggable(TreeNode));
+export const DraggableTreeNode = withDraggable(TreeNode);

package/src/Constants/Directions.js

@@ -1,5 +1,6 @@
 export const HORIZONTAL = 'HORIZONTAL';
 export const VERTICAL = 'VERTICAL';
+export const XY = 'XY';
 export const LEFT = 'LEFT';
 export const RIGHT = 'RIGHT';
 export const NORTH = 'NORTH';

package/src/Constants/Styles.js

@@ -76,6 +76,9 @@ const defaults = {
 	PANEL_HEADER_TEXT_FONTSIZE: 15,
 	PANEL_HEADER_PX: 3,
 	PANEL_HEADER_PY: 1,
+	REORDER_BORDER_COLOR: '#23d9ea',
+	REORDER_BORDER_WIDTH: 4,
+	REORDER_BORDER_STYLE: 'dashed',
 	TAB_ACTIVE_BG: 'trueGray.200',
 	TAB_ACTIVE_HOVER_BG: 'trueGray.200',
 	TAB_ACTIVE_COLOR: 'primary.800',
@@ -94,6 +97,7 @@ const defaults = {
 	TREE_NODE_HOVER_BG: 'hover',
 	TREE_NODE_SELECTED_BG: 'selected',
 	TREE_NODE_SELECTED_HOVER_BG: 'selectedHover',
+	TREE_NODE_HIGHLIGHTED_BG: '#ffa',
 	TOOLBAR_ITEMS_COLOR: 'trueGray.800',
 	TOOLBAR_ITEMS_DISABLED_COLOR: 'trueGray.400',
 	TOOLBAR_ITEMS_ICON_SIZE: 'sm',

package/src/Constants/Tree.js

@@ -1,4 +1,7 @@
 export const SORT_ASCENDING = 'ASC'; // This is what RestTrait expects
 export const SORT_DESCENDING = 'DESC'; // This is what RestTrait expects
 export const DROP_POSITION_BEFORE = 'before'; // This is what RestTrait expects
-export const DROP_POSITION_AFTER = 'after'; // This is what RestTrait expects
+export const DROP_POSITION_AFTER = 'after'; // This is what RestTrait expects
+export const COLLAPSED = 'COLLAPSED';
+export const EXPANDED = 'EXPANDED';
+export const LEAF = 'LEAF';

package/src/Constants/UiModes.js

@@ -5,8 +5,8 @@ export const UI_MODE_WEB = 'Web';
 export const UI_MODE_REACT_NATIVE = 'ReactNative';
 
 export let CURRENT_MODE;
-if (isReactNative) {
-	CURRENT_MODE = UI_MODE_REACT_NATIVE;
-} else if (isBrowser || isWebWorker) {
+if (isBrowser || isWebWorker) {
 	CURRENT_MODE = UI_MODE_WEB;
+} else if (isReactNative) {
+	CURRENT_MODE = UI_MODE_REACT_NATIVE;
 }