@onehat/ui 0.4.64 → 0.4.66

package/src/Components/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-import { useMemo, } from 'react';
+import { useMemo, useEffect, } from 'react';
 import {
 	Box,
 	HStackNative,
@@ -7,9 +7,16 @@ import {
 	TextNative,
 } from '@project-components/Gluestack';
 import * as colourMixer from '@k-renwick/colour-mixer';
+import {
+	UI_MODE_WEB,
+	CURRENT_MODE,
+} from '../../Constants/UiModes.js';
+import { getEmptyImage } from 'react-dnd-html5-backend';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
+import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
+import TreeNodeDragHandle from './TreeNodeDragHandle.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
@@ -20,18 +27,26 @@ export default function TreeNode(props) {
 			datum,
 			nodeProps = {},
 			onToggle,
-			isSelected,
+			bg,
+			isDragSource,
 			isHovered,
-			isDragMode,
 			isHighlighted,
-			bg,
+			isOver,
+			isSelected,
+			canDrop,
+			draggedItem,
+			validateDrop, // same as canDrop (for visual feedback)
+			getDragProxy,
+			dragSourceRef,
+			dragPreviewRef,
+			dropTargetRef,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
 		item = datum.item,
-		isPhantom = item.isPhantom,
 		isExpanded = datum.isExpanded,
 		isLoading = datum.isLoading,
+		isPhantom = item.isPhantom,
 		hasChildren = item.hasChildren,
 		depth = item.depth,
 		text = datum.text,
@@ -41,11 +56,38 @@ export default function TreeNode(props) {
 		iconLeaf = datum.iconLeaf,
 		hash = item?.hash || item;
 
+	// Hide the default drag preview only when using custom drag proxy (and only on web)
+	useEffect(() => {
+		if (dragPreviewRef && typeof dragPreviewRef === 'function' && getDragProxy && CURRENT_MODE === UI_MODE_WEB) {
+			// Only suppress default drag preview when we have a custom one and we're on web
+			dragPreviewRef(getEmptyImage(), { captureDraggingState: true });
+		}
+	}, [dragPreviewRef, getDragProxy]);
+
 	return useMemo(() => {
 		const icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf;
 		let bg = props.nodeProps?.bg || props.bg || styles.TREE_NODE_BG,
 			mixWith;
-		if (isSelected) {
+		
+		// Determine visual state priority (highest to lowest):
+		// 1. Drop target states (when being hovered during drag)
+		// 2. Selection states
+		// 3. Hover states
+		// 4. Highlighted state
+		
+		// Use custom validation for enhanced visual feedback, fallback to React DnD's canDrop
+		let actualCanDrop = canDrop;
+		if (isOver && draggedItem && validateDrop) {
+			actualCanDrop = validateDrop(draggedItem);
+		}
+		
+		if (isOver && actualCanDrop) {
+			// Valid drop target - show positive feedback
+			mixWith = styles.TREE_NODE_DROP_VALID_BG || '#4ade80'; // green-400 fallback
+		// } else if (isOver && actualCanDrop === false) {
+		// 	// Invalid drop target - show negative feedback
+		// 	mixWith = styles.TREE_NODE_DROP_INVALID_BG || '#f87171'; // red-400 fallback
+		} else if (isSelected) {
 			if (isHovered) {
 				mixWith = styles.TREE_NODE_SELECTED_BG_HOVER;
 			} else {
@@ -53,8 +95,7 @@ export default function TreeNode(props) {
 			}
 		} else if (isHovered) {
 			mixWith = styles.TREE_NODE_BG_HOVER;
-		}
-		if (isHighlighted) {
+		} else if (isHighlighted) {
 			mixWith = styles.TREE_NODE_HIGHLIGHTED_BG;
 		}
 		if (mixWith) {
@@ -70,7 +111,17 @@ export default function TreeNode(props) {
 			items-center
 			flex-1
 			grow-1
+			select-none
+			cursor-pointer
 		`;
+		
+		// Add drop state classes for additional styling
+		if (isOver && actualCanDrop) {
+			className += ' TreeNode--dropValid border-2 border-green-400';
+		// } else if (isOver && actualCanDrop === false) {
+		// 	className += ' TreeNode--dropInvalid border-2 border-red-400';
+		}
+		
 		if (props.className) {
 			className += ' ' + props.className;
 		}
@@ -83,12 +134,24 @@ export default function TreeNode(props) {
 					style={{
 						backgroundColor: bg,
 					}}
+					ref={(element) => {
+						// Attach both drag and drop refs to the same element
+						if (dragSourceRef && typeof dragSourceRef === 'function') {
+							dragSourceRef(element);
+						}
+						if (dropTargetRef && dropTargetRef.current !== undefined) {
+							// dropTargetRef is a ref object, not a callback
+							dropTargetRef.current = element;
+						}
+					}}
 				>
 					{isPhantom && <Box t={0} l={0} className="absolute bg-[#f00] h-[2px] w-[2px]" />}
 					
+					{isDragSource && <TreeNodeDragHandle />}
+					
 					{isLoading ? 
 						<Spinner className="px-2" /> : 
-						(icon && hasChildren && !isDragMode ? 
+						(icon && hasChildren ? 
 							<IconButton
 								{...testProps('expandBtn')}
 								icon={icon}
@@ -107,10 +170,11 @@ export default function TreeNode(props) {
 									flex
 									flex-1
 									text-ellipsis
+									select-none
 									${styles.TREE_NODE_CLASSNAME}
 								`}
 								style={{
-									// userSelect: 'none',
+									userSelect: 'none',
 								}}
 							>{text}</TextNative> : null}
 
@@ -122,18 +186,24 @@ export default function TreeNode(props) {
 		bg,
 		item,
 		hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
-		isDragMode,
-		isHighlighted,
-		isSelected,
-		isPhantom,
+		isDragSource,
 		isExpanded,
+		isHighlighted,
 		isLoading,
+		isOver,
+		isPhantom,
+		isSelected,
 		hasChildren,
 		depth,
 		text,
 		content,
 		onToggle,
-		isLoading,
+		canDrop,
+		draggedItem,
+		validateDrop,
+		dragSourceRef,
+		dragPreviewRef,
+		dropTargetRef,
 	]);
 }
 
@@ -147,3 +217,7 @@ function withAdditionalProps(WrappedComponent) {
 }
 
 export const DraggableTreeNode = withAdditionalProps(withDraggable(TreeNode));
+
+export const DragSourceTreeNode = withDragSource(TreeNode);
+export const DropTargetTreeNode = withDropTarget(TreeNode);
+export const DragSourceDropTargetTreeNode = withDropTarget(withDragSource(TreeNode));

package/src/Components/Tree/TreeNodeDragHandle.js

@@ -0,0 +1,20 @@
+import {
+	Icon,
+	VStack,
+} from '@project-components/Gluestack';
+import styles from '../../Styles/StyleSheets.js';
+import GripVertical from '../Icons/GripVertical.js';
+
+function TreeNodeDragHandle(props) {
+	return <VStack
+				style={styles.ewResize}
+				className="TreeNodeDragHandle h-full w-[14px] px-[2px] border-l-2 items-center justify-center select-none"
+			>
+				<Icon
+					as={GripVertical}
+					size="xs"
+					className="handle w-full h-full text-[#ccc]" />
+			</VStack>;
+}
+
+export default TreeNodeDragHandle;

package/src/Components/index.js

@@ -8,7 +8,9 @@ import AngleLeft from './Icons/AngleLeft.js';
 import AngleRight from './Icons/AngleRight.js';
 import AnglesLeft from './Icons/AnglesLeft.js';
 import AnglesRight from './Icons/AnglesRight.js';
+import Arcs from './Icons/Arcs.js';
 import Asterisk from './Icons/Asterisk.js';
+import ArrowPointer from './Icons/ArrowPointer.js';
 import ArrowUp from './Icons/ArrowUp.js';
 import Ban from './Icons/Ban.js';
 import Bars from './Icons/Bars.js';
@@ -204,6 +206,7 @@ import Color from './Form/Field/Color.js';
 import Combo from './Form/Field/Combo/Combo.js';
 // import { ComboEditor } from './Form/Field/Combo/Combo.js';
 import Container from './Container/Container.js';
+import ContainerColumn from './Container/ContainerColumn.js';
 import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';
 import DateRange from './Filter/DateRange.js';
@@ -253,7 +256,9 @@ const components = {
 	AngleRight,
 	AnglesLeft,
 	AnglesRight,
+	Arcs,
 	Asterisk,
+	ArrowPointer,
 	ArrowUp,
 	Ban,
 	Bars,
@@ -449,6 +454,7 @@ const components = {
 	Combo,
 	// ComboEditor,
 	Container,
+	ContainerColumn,
 	DataMgt,
 	Date,
 	DateRange,

package/src/Constants/Styles.js

@@ -126,6 +126,8 @@ const defaults = {
 	TREE_NODE_SELECTED_BG: '#ff0', // must be hex
 	TREE_NODE_SELECTED_BG_HOVER: '#cc0', // must be hex
 	TREE_NODE_HIGHLIGHTED_BG: '#0f0', // must be hex
+	TREE_NODE_DROP_VALID_BG: '#4ade80', // must be hex - green-400 for valid drop targets
+	TREE_NODE_DROP_INVALID_BG: '#f87171', // must be hex - red-400 for invalid drop targets
 	TOOLBAR_CLASSNAME: 'bg-grey-200',
 	TOOLBAR_ITEMS_COLOR: 'text-grey-800',
 	TOOLBAR_ITEMS_ICON_SIZE: 'sm',

package/src/PlatformImports/Web/Attachments.js

@@ -118,7 +118,14 @@ function AttachmentsElement(props) {
 		[isReady, setIsReady] = useState(false),
 		[isUploading, setIsUploading] = useState(false),
 		[showAll, setShowAll] = useState(false),
-		[files, setFiles] = useState([]),
+		setFilesRaw = useRef([]),
+		setFiles = (files) => {
+			setFilesRaw.current = files;
+			forceUpdate();
+		},
+		getFiles = () => {
+			return setFilesRaw.current;
+		},
 		buildFiles = () => {
 			const files = _.map(Repository.entities, (entity) => {
 				return {
@@ -201,7 +208,9 @@ function AttachmentsElement(props) {
 			}
 		},
 		onFileDelete = (id) => {
-			const file = _.find(files, { id });
+			const
+				files = getFiles(),
+				file = _.find(files, { id });
 			if (confirmBeforeDelete) {
 				confirm('Are you sure you want to delete the file "' + file.name + '"?', () => doDelete(id));
 			} else {
@@ -219,6 +228,7 @@ function AttachmentsElement(props) {
 			}
 		},
 		buildModalBody = (url, id) => {
+			const files = getFiles();
 			// This method was abstracted out so showModal/onPrev/onNext can all use it.
 			// url comes from FileMosaic, which passes in imageUrl,
 			// whereas FileCardCustom passes in id.
@@ -316,7 +326,9 @@ function AttachmentsElement(props) {
 			});
 		},
 		doDelete = (id) => {
-			const file = Repository.getById(id);
+			const 
+				files = getFiles(),
+				file = Repository.getById(id);
 			if (file) {
 				// if the file exists in the repository, delete it there
 				Repository.deleteById(id);
@@ -409,7 +421,9 @@ function AttachmentsElement(props) {
 	}
 
 	if (self) {
-		self.files = files;
+		self.getFiles = getFiles;
+		self.setFiles = setFiles;
+		self.clearFiles = clearFiles;
 	}
 
 	if (canCrud) {
@@ -425,6 +439,7 @@ function AttachmentsElement(props) {
 	if (props.className) {
 		className += ' ' + props.className;
 	}
+	const files = getFiles();
 	let content = <VStack className={className}>
 						<HStack className="AttachmentsElement-HStack flex-wrap">
 							{files.length === 0 && <Text className="text-grey-600 italic">No files</Text>}