@onehat/ui 0.3.263 → 0.3.265

package/package.json

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

package/src/Components/Form/Form.js

@@ -975,7 +975,7 @@ function Form(props) {
 						>{editor}</Row>}
 					{editorType !== EDITOR_TYPE__INLINE &&
 						<ScrollView _web={{ minHeight, }} width="100%" pb={1}>
-							{formheader}
+							{formHeader}
 							{formButtons}
 							{editor}
 						</ScrollView>}

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -17,7 +17,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 	return (props) => {
 
 		if (props.secondaryDisableWithEditor) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} isTree={isTree} />;
 		}
 
 		let [secondaryEditorMode, secondarySetEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
@@ -560,6 +560,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondaryDisableDuplicate={secondaryDisableDuplicate}
 					secondaryDisableView ={secondaryDisableView}
 					secondarySetSelection={secondarySetSelectionDecorated}
+					isTree={isTree}
 				/>;
 	};
 }

package/src/Components/Hoc/withEditor.js

@@ -15,7 +15,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 	return (props) => {
 
 		if (props.disableWithEditor) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} isTree={isTree} />;
 		}
 
 		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
@@ -569,6 +569,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					disableDuplicate={disableDuplicate}
 					disableView ={disableView}
 					setSelection={setSelectionDecorated}
+					isTree={isTree}
 				/>;
 	};
 }

package/src/Components/Hoc/withPresetButtons.js

@@ -51,6 +51,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				// for local use
 				isEditor = false,
 				isTree = false,
+				canDeleteRootNode = false,
 				isSideEditor = false,
 				canEditorViewOnly = false,
 				disableAdd = !isEditor,
@@ -192,6 +193,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (verifyCanDelete && !verifyCanDelete(selection)) {
 							isDisabled = true;
 						}
+						if (isTree) {
+							const isRootNode = !!_.find(selection, { isRoot: true, });
+							if (isRootNode && !canDeleteRootNode) {
+								isDisabled = true;
+							}
+						}
 						break;
 					case 'view':
 						key = 'viewBtn';

package/src/Components/Tree/Tree.js

@@ -41,6 +41,7 @@ import nbToRgb from '../../Functions/nbToRgb.js';
 import TreeNode, { DraggableTreeNode } from './TreeNode.js';
 import FormPanel from '../Panel/FormPanel.js';
 import Input from '../Form/Field/Input.js';
+import Xmark from '../Icons/Xmark.js';
 import Dot from '../Icons/Dot.js';
 import Collapse from '../Icons/Collapse.js';
 import FolderClosed from '../Icons/FolderClosed.js';
@@ -53,7 +54,7 @@ import NoRecordsFound from '../Grid/NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import _ from 'lodash';
 
-const DEPTH_INDENT_PX = 20;
+const DEPTH_INDENT_PX = 25;
 
 function TreeComponent(props) {
 	const {
@@ -96,6 +97,14 @@ function TreeComponent(props) {
 			additionalToolbarButtons = [],
 			reload = null, // Whenever this value changes after initial render, the tree will reload from scratch
 			parentIdIx,
+
+			// withComponent
+			self,
+
+			// withAlert
+			alert,
+			confirm,
+			showInfo,
 		
 			// withEditor
 			onAdd,
@@ -138,7 +147,7 @@ function TreeComponent(props) {
 		treeNodeData = useRef(),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
-		[isSearchModalShown, setIsSearchModalShown] = useState(false),
+		[isModalShown, setIsModalShown] = useState(false),
 		[rowToDatumMap, setRowToDatumMap] = useState({}),
 		[searchResults, setSearchResults] = useState([]),
 		[searchFormData, setSearchFormData] = useState([]),
@@ -222,6 +231,10 @@ function TreeComponent(props) {
 		},
 		onBeforeAdd = async () => {
 			// Load children before adding the new node
+			if (_.isEmpty(selection)) {
+				alert('Please select a parent node first.')
+				return;
+			}
 			const
 				parent = selection[0],
 				parentDatum = getNodeData(parent.id);
@@ -229,16 +242,17 @@ function TreeComponent(props) {
 			if (parent.hasChildren && !parent.areChildrenLoaded) {
 				await loadChildren(parentDatum);
 			}
+			if (!parentDatum.isExpanded) {
+				parentDatum.isExpanded = true;
+			}
+			forceUpdate();
 		},
-		onAfterAdd = async (entity) => {
+		onAfterAdd = async (entities) => {
 			// Expand the parent before showing the new node
 			const
-				parent = entity.parent,
-				parentDatum = getNodeData(parent.id);
+				entity = entities[0],
+				parentDatum = getNodeData(entity.parentId);
 
-			if (!parentDatum.isExpanded) {
-				parentDatum.isExpanded = true;
-			}
 
 			// Add the entity to the tree
 			const entityDatum = buildTreeNodeDatum(entity);
@@ -322,29 +336,43 @@ function TreeComponent(props) {
 			buildRowToDatumMap();
 			return newTreeNodeData;
 		},
-		onSearchTree = async (value) => {
+		onSearchTree = async (q) => {
 			let found = [];
+			if (q === '') {
+				setHighlitedDatum(null);
+				alert('Please enter a search query.');
+				return;
+			}
+
 			if (Repository?.isRemote) {
 				// Search tree on server
-				found = await Repository.searchNodes(value);
+				found = await Repository.searchNodes(q);
 			} else {
 				// Search local tree data
-				found = findTreeNodesByText(value);
+				found = findTreeNodesByText(q);
+			}
+
+			if (_.isEmpty(found)) {
+				deselectAll();
+				setHighlitedDatum(null);
+				alert('No matches found.');
+				return;
 			}
 
 			const isMultipleHits = found.length > 1;
 			if (!isMultipleHits) {
-				expandPath(found[0].path);
+				expandPath(found[0].path); // highlights and selects the last node in the path
 				return;
 			}
 
+			// Show modal so user can select which node to go to
 			const searchFormData = [];
 			_.each(found, (item) => {
 				searchFormData.push([item.id, getNodeText(item)]);
 			});
 			setSearchFormData(searchFormData);
 			setSearchResults(found);
-			setIsSearchModalShown(true);
+			setIsModalShown(true);
 		},
 
 		// utilities
@@ -677,7 +705,31 @@ function TreeComponent(props) {
 
 			// TODO: This will probably need different methods in web and mobile
 
-
+			// From Github Copliot:
+			// In React, if you want to scroll individual DOM nodes into view, you would typically assign a ref to each of them. However, managing a large number of refs can be cumbersome and may lead to performance issues.
+			// An alternative approach is to assign a unique id to each DOM node and use the document.getElementById(id).scrollIntoView() method to scroll to a specific node. This way, you don't need to manage a large number of refs.
+			// Here's an example:
+			// const MyComponent = () => {
+			// 	const scrollTo = (id) => {
+			// 	  document.getElementById(id).scrollIntoView();
+			// 	};
+			// 	return (
+			// 	  <div>
+			// 		{Array.from({ length: 100 }).map((_, index) => (
+			// 		  <div id={`item-${index}`} key={index}>
+			// 			Item {index}
+			// 		  </div>
+			// 		))}
+			// 		<button onClick={() => scrollTo('item-50')}>Scroll to item 50</button>
+			// 	  </div>
+			// 	);
+			// };
+			// In this example, we're creating 100 divs each with a unique id. We also have a button that, when clicked, scrolls to the div with the id 'item-50'.
+			// Please note that this approach uses the DOM API directly, which is generally discouraged in React. It's recommended to use refs when you need to interact with DOM nodes directly. However, in cases where you need to manage a large number of DOM nodes, using ids can be a more practical solution.
+			// Also, keep in mind that document.getElementById(id).scrollIntoView() might not work as expected in all situations, especially in complex layouts or when using certain CSS properties. Always test your code thoroughly to make sure it works as expected.
+
+			// ... Not sure how to do this with NativeBase, as I've had trouble assigning IDs
+			// Maybe I first collapse the tree, then expand just the path?
 		},
 
 		// render
@@ -687,7 +739,7 @@ function TreeComponent(props) {
 					{
 						key: 'searchBtn',
 						text: 'Search tree',
-						handler: onSearchTree,
+						handler: () => onSearchTree(treeSearchValue),
 						icon: MagnifyingGlass,
 						isDisabled: !treeSearchValue.length,
 					},
@@ -704,32 +756,44 @@ function TreeComponent(props) {
 					key: 'reorderBtn',
 					text: (isDragMode ? 'Exit' : 'Enter') + ' reorder mode',
 					handler: () => {
-						setIsDragMode(!isDragMode)
+						setIsDragMode(!isDragMode);
 					},
 					icon: isDragMode ? NoReorderRows : ReorderRows,
 					isDisabled: false,
 				});
 			}
-			const items = _.map(buttons, getIconButtonFromConfig);
+			const items = _.map(buttons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 
 			items.unshift(<Input // Add text input to beginning of header items
 				key="searchNodes"
 				flex={1}
 				placeholder="Find tree node"
 				onChangeText={(val) => setTreeSearchValue(val)}
-				onKeyPress={(e, value) => {
+				onKeyPress={(e) => {
 					if (e.key === 'Enter') {
-						onSearchTree(value);
+						onSearchTree(treeSearchValue);
 					}
 				}}
 				value={treeSearchValue}
 				autoSubmit={false}
 			/>);
 
+			if (treeSearchValue.length) {
+				// Add 'X' button to clear search
+				items.unshift(getIconButtonFromConfig({
+					key: 'xBtn',
+					handler: () => {
+						setHighlitedDatum(null);
+						setTreeSearchValue('');
+					},
+					icon: Xmark,
+				}, 0, self));
+			}
+
 			return items;
 		},
 		getFooterToolbarItems = () => {
-			return _.map(additionalToolbarButtons, getIconButtonFromConfig);
+			return _.map(additionalToolbarButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 		},
 		renderTreeNode = (datum) => {
 			if (!datum.isVisible) {
@@ -743,7 +807,6 @@ function TreeComponent(props) {
 
 			let nodeProps = getNodeProps ? getNodeProps(item) : {},
 				isSelected = isInSelection(item);
-
 			return <Pressable
 						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
 						key={item.hash}
@@ -1115,6 +1178,7 @@ function TreeComponent(props) {
 					w="100%"
 				>
 					{topToolbar}
+
 					{headerToolbarItemComponents?.length && <Row>{headerToolbarItemComponents}</Row>}
 
 					<Column
@@ -1129,16 +1193,18 @@ function TreeComponent(props) {
 							}
 						}}
 					>
-						{!treeNodes?.length ? <NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
+						{!treeNodes?.length ? 
+							<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
 							treeNodes}
 					</Column>
 
 					{treeFooterComponent}
+
 				</Column>
 
 				<Modal
-					isOpen={isSearchModalShown}
-					onClose={() => setIsSearchModalShown(false)}
+					isOpen={isModalShown}
+					onClose={() => setIsModalShown(false)}
 				>
 					<Column bg="#fff" w={300}>
 						<FormPanel
@@ -1161,8 +1227,8 @@ function TreeComponent(props) {
 								},
 							]}
 							onCancel={(e) => {
-								// Just close the modal
-								setIsSearchModalShown(false);
+								setHighlitedDatum(null);
+								setIsModalShown(false);
 							}}
 							onSave={(data, e) => {
 								const
@@ -1173,7 +1239,7 @@ function TreeComponent(props) {
 								expandPath(path);
 
 								// Close the modal
-								setIsSearchModalShown(false);
+								setIsModalShown(false);
 							}}
 						/>
 					</Column>

package/src/Constants/Styles.js

@@ -116,7 +116,7 @@ const defaults = {
 	TREE_NODE_HOVER_BG: 'hover',
 	TREE_NODE_SELECTED_BG: 'selected',
 	TREE_NODE_SELECTED_HOVER_BG: 'selectedHover',
-	TREE_NODE_HIGHLIGHTED_BG: '#ffa',
+	TREE_NODE_HIGHLIGHTED_BG: 'highlighted',
 	TOOLBAR_ITEMS_COLOR: 'trueGray.800',
 	TOOLBAR_ITEMS_DISABLED_COLOR: 'trueGray.400',
 	TOOLBAR_ITEMS_ICON_SIZE: 'sm',