@onehat/ui 0.3.224 → 0.3.226

package/package.json

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

package/src/Components/Container/Splitter.js

@@ -45,6 +45,15 @@ function Splitter(props) {
 			</Column>;
 }
 
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					isDraggable={true}
+					{...props}
+				/>;
+	};
+}
+
 // Need a hoc to specifically deliver the 'getParentNode' prop
 function withParentNode(WrappedComponent) {
 	return (props) => {
@@ -58,4 +67,4 @@ function withParentNode(WrappedComponent) {
 	};
 }
 
-export default withParentNode(withDraggable(Splitter));
+export default withParentNode(withAdditionalProps(withDraggable(Splitter)));

package/src/Components/Grid/Grid.js

@@ -454,20 +454,22 @@ function GridComponent(props) {
 								rowReorderProps.proxyPositionRelativeToParent = true;
 								rowReorderProps.getParentNode = (node) => node.parentElement.parentElement.parentElement;
 								rowReorderProps.getProxy = getReorderProxy;
-							}
-							if (areRowsDragSource) {
-								rowDragProps.isDragSource = true;
-								rowDragProps.dragSourceType = rowDragSourceType;
-								rowDragProps.dragSourceItem = getRowDragSourceItem ? getRowDragSourceItem(item) : { id: item.id };
-							}
-							if (areRowsDropTarget) {
-								rowDragProps.isDropTarget = true;
-								rowDragProps.dropTargetAccept = dropTargetAccept;
-								rowDragProps.onDrop = (droppedItem) => {
-									// TODO: the item is somehow getting stale
-									// might have something to do with memoization
-									onRowDrop(item, droppedItem);
-								};
+							} else {
+								// Don't allow drag/drop from withDnd while reordering
+								if (areRowsDragSource) {
+									rowDragProps.isDragSource = true;
+									rowDragProps.dragSourceType = rowDragSourceType;
+									rowDragProps.dragSourceItem = getRowDragSourceItem ? getRowDragSourceItem(item) : { id: item.id };
+								}
+								if (areRowsDropTarget) {
+									rowDragProps.isDropTarget = true;
+									rowDragProps.dropTargetAccept = dropTargetAccept;
+									rowDragProps.onDrop = (droppedItem) => {
+										// TODO: the item is somehow getting stale
+										// might have something to do with memoization
+										onRowDrop(item, droppedItem);
+									};
+								}
 							}
 							return <GridRow
 										columnsConfig={localColumnsConfig}

package/src/Components/Grid/GridHeaderRow.js

@@ -305,7 +305,7 @@ export default function GridHeaderRow(props) {
 						propsToPass = {
 							borderRightWidth: 2,
 							borderRightColor: '#fff',
-						}
+						};
 
 					if (all.length === 1) {
 						propsToPass.w = '100%';

package/src/Components/Grid/GridRow.js

@@ -27,7 +27,8 @@ function GridRow(props) {
 			bg,
 			item,
 			isInlineEditorShown,
-			isDragSource = false,
+			isDraggable = false, // withDraggable
+			isDragSource = false, // withDnd
 			isOver = false,
 		} = props,
 		styles = UiGlobals.styles;
@@ -40,12 +41,6 @@ function GridRow(props) {
 		isPhantom = item.isPhantom,
 		hash = item?.hash || item;
 
-	if (props.dragSourceRef) {
-		rowProps.ref = props.dragSourceRef;
-	}
-	if (props.dropTargetRef) {
-		rowProps.ref = props.dropTargetRef;
-	}
 	return useMemo(() => {
 		const renderColumns = (item) => {
 			if (_.isArray(columnsConfig)) {
@@ -188,26 +183,36 @@ function GridRow(props) {
 			rowProps.borderWidth = 0;
 			rowProps.borderColor = null;
 		}
+
+		let rowContents = <>
+							{(isDragSource || isDraggable) && <RowDragHandle />}
+							{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
+							
+							{renderColumns(item)}
+
+							{!hideNavColumn && <AngleRight
+													color={styles.GRID_NAV_COLUMN_COLOR}
+													variant="ghost"
+													w={30}
+													alignSelf="center"
+													mx={3}
+												/>}
+						</>;
+
+		if (props.dragSourceRef) {
+			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={props.dragSourceRef}>{rowContents}</Row>;
+		}
+		if (props.dropTargetRef) {
+			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={props.dropTargetRef}>{rowContents}</Row>;
+		}
+
 		return <Row
 					alignItems="center"
 					flexGrow={1}
 					{...rowProps}
 					bg={bg}
 					key={hash}
-				>
-					{isDragSource && <RowDragHandle />}
-					{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
-					
-					{renderColumns(item)}
-
-					{!hideNavColumn && <AngleRight
-											color={styles.GRID_NAV_COLUMN_COLOR}
-											variant="ghost"
-											w={30}
-											alignSelf="center"
-											mx={3}
-										/>}
-				</Row>;
+				>{rowContents}</Row>;
 	}, [
 		columnsConfig,
 		columnProps,

package/src/Components/Grid/HeaderReorderHandle.js

@@ -26,4 +26,13 @@ function HeaderReorderHandle(props) {
 			</Column>;
 }
 
-export default withDraggable(HeaderReorderHandle);
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					isDraggable={true}
+					{...props}
+				/>;
+	};
+}
+
+export default withAdditionalProps(withDraggable(HeaderReorderHandle));

package/src/Components/Grid/HeaderResizeHandle.js

@@ -26,4 +26,13 @@ function HeaderResizeHandle(props) {
 			</Column>;
 }
 
-export default withDraggable(HeaderResizeHandle);
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					isDraggable={true}
+					{...props}
+				/>;
+	};
+}
+
+export default withAdditionalProps(withDraggable(HeaderResizeHandle));

package/src/Components/Grid/RowDragHandle.js

@@ -11,7 +11,7 @@ function RowDragHandle(props) {
 	return <Column
 				testID="HeaderReorderHandle"
 				bg="trueGray.100"
-				h="100%"
+				// h="100%"
 				w={3}
 				alignItems="center"
 				justifyContent="center"

package/src/Components/Tree/TreeNode.js

@@ -87,4 +87,13 @@ export default function TreeNode(props) {
 	]);
 }
 
-export const DraggableTreeNode = withDraggable(TreeNode);
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					isDraggable={true}
+					{...props}
+				/>;
+	};
+}
+
+export const DraggableTreeNode = withAdditionalProps(withDraggable(TreeNode));