@onehat/ui 0.2.74 → 0.2.75

package/package.json

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

package/src/Components/Buttons/IconButton.js

@@ -6,6 +6,7 @@ import {
 	Tooltip,
 } from 'native-base';
 import styles from '../../Constants/Styles.js';
+import _ from 'lodash';
 
 const IconButton = React.forwardRef((props, ref) => {
 	const {
@@ -17,12 +18,16 @@ const IconButton = React.forwardRef((props, ref) => {
 			tooltipPlacement = 'bottom',
 		} = props;
 	const propsIcon = props._icon || {};
-	let icon = props.icon || <Icon {...propsIcon} />,
+	let icon = props.icon,
 		ret;
 	if (isLoading) {
 		icon = <Spinner {..._spinner} />;
 	}
-	if (!React.isValidElement(icon)) {
+	if (React.isValidElement(icon)) {
+		if (!_.isEmpty(propsIcon)) {
+			icon = React.cloneElement(icon, {...propsIcon});
+		}
+	} else {
 		icon = <Icon as={icon} {...propsIcon} />;
 	}
 	const pressable = <Pressable

package/src/Components/Hoc/withAlert.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect, } from 'react';
 import {
+	AlertDialog,
 	Button,
 	Column,
 	Icon,
@@ -30,26 +31,29 @@ export default function withAlert(WrappedComponent) {
 			[customButtons, setCustomButtons] = useState(),
 			[mode, setMode] = useState(ALERT_MODE_OK),
 			autoFocusRef = useRef(null),
-			onAlert = (arg1, callback, includeCancel = false) => {
+			cancelRef = useRef(null),
+			onAlert = (arg1, okCallback, includeCancel = false) => {
 				clearAll();
 				if (_.isString(arg1)) {
 					setMode(ALERT_MODE_OK);
 					setTitle('Alert');
 					setMessage(arg1);
-					setOkCallback(() => callback);
+					setOkCallback(() => okCallback);
+					setIncludeCancel(includeCancel);
 				} else if (_.isPlainObject(arg1)) {
 					// custom
 					const {
 							title = 'Alert',
 							message,
 							buttons,
+							includeCancel,
 						} = arg1;
 					setMode(ALERT_MODE_CUSTOM);
 					setTitle(title);
 					setMessage(message);
 					setCustomButtons(buttons);
+					setIncludeCancel(includeCancel);
 				}
-				setIncludeCancel(includeCancel);
 				showAlert();
 			},
 			onConfirm = (message, callback, includeCancel = false) => {
@@ -65,31 +69,29 @@ export default function withAlert(WrappedComponent) {
 				setIsAlertShown(false);
 			},
 			onOk = () => {
-				const callback = okCallback;
-				hideAlert();
-				if (callback) {
-					callback();
+				if (okCallback) {
+					okCallback();
 				}
+				hideAlert();
 			},
 			onYes = () => {
-				const callback = yesCallback;
-				hideAlert();
-				if (callback) {
-					callback();
+				if (yesCallback) {
+					yesCallback();
 				}
+				hideAlert();
 			},
 			onNo = () => {
-				const callback = noCallback;
-				hideAlert();
-				if (callback) {
-					callback();
+				if (noCallback) {
+					noCallback();
 				}
+				hideAlert();
 			},
 			showAlert = () => {
 				setIsAlertShown(true);
 			},
 			hideAlert = () => {
 				setIsAlertShown(false);
+				clearAll();
 			},
 			clearAll = () => {
 				setOkCallback();
@@ -104,7 +106,9 @@ export default function withAlert(WrappedComponent) {
 								key="cancelBtn"
 								onPress={onCancel}
 								color="#fff"
-								variant="ghost"
+								colorScheme="coolGray"
+								variant="ghost" // or unstyled
+								ref={cancelRef}
 							>Cancel</Button>);
 		}
 		switch(mode) {
@@ -128,10 +132,13 @@ export default function withAlert(WrappedComponent) {
 								ref={autoFocusRef}
 								onPress={onYes}
 								color="#fff"
+								colorScheme="danger"
 							>Yes</Button>);
 				break;
 			case ALERT_MODE_CUSTOM:
-				buttons = customButtons;
+				_.each(customButtons, (button) => {
+					buttons.push(button);
+				});
 				break;
 			default:
 		}
@@ -141,36 +148,32 @@ export default function withAlert(WrappedComponent) {
 						{...props}
 						alert={onAlert}
 						confirm={onConfirm}
+						hideAlert={hideAlert}
 					/>
-					<Modal
+
+					<AlertDialog
+						leastDestructiveRef={cancelRef}
 						isOpen={isAlertShown}
-						onOpen={() => {debugger;}}
 						onClose={() => setIsAlertShown(false)}
 					>
-						<Column bg="#fff" w={400} onLayout={() => {
-							if (autoFocusRef.current) {
-								autoFocusRef.current.focus();
-							}
-						}}>
-							<Panel
-								title={title}
-								isCollapsible={false}
-								p={0}
-								footer={<Footer justifyContent="flex-end" >
-											<Button.Group space={2}>
-												{buttons}
-											</Button.Group>
-										</Footer>}
-								>
-								<Row flex={1} p={5}>
+						<AlertDialog.Content>
+							<AlertDialog.CloseButton />
+							<AlertDialog.Header>{title}</AlertDialog.Header>
+							<AlertDialog.Body>
+								<Row>
 									<Column w="40px" p={0} mr={5}>
 										<Icon as={TriangleExclamation} size={10} color="#f00" />
 									</Column>
-									<Text>{message}</Text>
+									<Text flex={1}>{message}</Text>
 								</Row>
-							</Panel>
-						</Column>
-					</Modal>
+							</AlertDialog.Body>
+							<AlertDialog.Footer>
+								<Button.Group space={2}>
+									{buttons}
+								</Button.Group>
+							</AlertDialog.Footer>
+						</AlertDialog.Content>
+					</AlertDialog>
 				</>;
 	};
 }

package/src/Components/Hoc/withEditor.js

@@ -1,8 +1,6 @@
-import { useEffect, useState, } from 'react';
+import { useEffect, useState, useRef, } from 'react';
 import {
-	Column,
-	Modal,
-	Text,
+	Button,
 } from 'native-base';
 import {
 	EDITOR_MODE__VIEW,
@@ -11,7 +9,7 @@ import {
 } from '../../Constants/Editor.js';
 import _ from 'lodash';
 
-export default function withEditor(WrappedComponent) {
+export default function withEditor(WrappedComponent, isTree = false) {
 	return (props) => {
 
 		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
@@ -24,7 +22,6 @@ export default function withEditor(WrappedComponent) {
 				disableDelete = false,
 				disableDuplicate = false,
 				disableView = false,
-				isTree = false,
 				getRecordIdentifier = (selection) => {
 					if (selection.length > 1) {
 						return 'records?';
@@ -45,13 +42,23 @@ export default function withEditor(WrappedComponent) {
 				setSelection,
 
 				// withAlert
+				alert,
 				confirm,
+				hideAlert,
 			} = props,
+			listeners = useRef({}),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
 			[isModalShown, setIsModalShown] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
+			getListeners = () => {
+				return listeners.current;
+			},
+			setListeners = (obj) => {
+				listeners.current = obj;
+				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the listeners in every child render
+			},
 			onAdd = async () => {
 				const defaultValues = Repository.getSchema().model.defaultValues;
 				let addValues = _.clone(defaultValues);
@@ -60,42 +67,84 @@ export default function withEditor(WrappedComponent) {
 					addValues[selectorId] = selectorSelected.id;
 				}
 
+				if (getListeners().onBeforeAdd) {
+					const listenerResult = await getListeners().onBeforeAdd();
+					if (listenerResult === false) {
+						return;
+					}
+				}
+
 				if (isTree) {
 					if (!selection[0]) {
 						throw Error('Must select a parent node.');
 					}
 					addValues.parentId = selection[0].id;
-				}
-
-				// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
-				const currentSorter = Repository.sorters[0];
-				if (currentSorter.name !== Repository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
-					Repository.pauseEvents();
-					Repository.sort(Repository.schema.model.idProperty, 'DESC');
-					Repository.setPage(1);
-					Repository.resumeEvents();
-					await Repository.reload();
+				} else {
+					// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
+					const currentSorter = Repository.sorters[0];
+					if (currentSorter.name !== Repository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
+						Repository.pauseEvents();
+						Repository.sort(Repository.schema.model.idProperty, 'DESC');
+						Repository.setPage(1);
+						Repository.resumeEvents();
+						await Repository.reload();
+					}
 				}
 
 				// Unmap the values, so we can input true originalData
 				addValues = Repository.unmapData(addValues);
 
-				const entity = await Repository.add(addValues, false, true, true);
+				const entity = await Repository.add(addValues, false, true);
 				setSelection([entity]);
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__ADD);
 				setIsEditorShown(true);
+
+				if (getListeners().onAfterAdd) {
+					await getListeners().onAfterAdd(entity);
+				}
 			},
-			onEdit = () => {
+			onEdit = async () => {
+				if (getListeners().onBeforeEdit) {
+					const listenerResult = await getListeners().onBeforeEdit();
+					if (listenerResult === false) {
+						return;
+					}
+				}
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
-			onDelete = () => {
+			onDelete = async () => {
+				if (getListeners().onBeforeDelete) {
+					const listenerResult = await getListeners().onBeforeDelete();
+					if (listenerResult === false) {
+						return;
+					}
+				}
 				const
 					isSingle = selection.length === 1,
-					isPhantom = selection[0] && selection[0].isPhantom;
+					firstSelection = selection[0],
+					isTree = firstSelection?.isTree,
+					hasChildren = firstSelection?.hasChildren,
+					isPhantom = firstSelection?.isPhantom;
 
+				if (isSingle && isTree && hasChildren) {
+					alert({
+						title: 'Move up children?',
+						message: 'The node you have selected for deletion has children. ' + 
+								'Should these children be moved up to this node\'s parent, or be deleted?',
+						buttons: [
+							<Button colorScheme="danger" onPress={onMoveChildren} key="moveBtn">
+								Move Children
+							</Button>,
+							<Button colorScheme="danger" onPress={onDeleteChildren} key="deleteBtn">
+								Delete Children
+							</Button>
+						],
+						includeCancel: true,
+					});
+				} else
 				if (isSingle && isPhantom) {
 					deleteRecord();
 				} else {
@@ -103,13 +152,28 @@ export default function withEditor(WrappedComponent) {
 					confirm('Are you sure you want to delete the ' + identifier, deleteRecord);
 				}
 			},
-			deleteRecord = async () => {
+			onMoveChildren = () => {
+				hideAlert();
+				deleteRecord(true);
+			},
+			onDeleteChildren = () => {
+				hideAlert();
+				deleteRecord();
+			},
+			deleteRecord = async (moveSubtreeUp) => {
+				if (getListeners().onBeforeDeleteSave) {
+					await getListeners().onBeforeDeleteSave(selection);
+				}
+
 				await Repository.delete(selection);
 				if (!Repository.isAutoSave) {
 					await Repository.save();
 				}
+				if (getListeners().onAfterDelete) {
+					await getListeners().onAfterDelete(selection);
+				}
 			},
-			viewRecord = () => {
+			viewRecord = async () => {
 				if (!userCanView) {
 					return;
 				}
@@ -119,6 +183,10 @@ export default function withEditor(WrappedComponent) {
 				setIsEditorViewOnly(true);
 				setEditorMode(EDITOR_MODE__VIEW);
 				setIsEditorShown(true);
+
+				if (getListeners().onAfterDelete) {
+					await getListeners().onAfterDelete(entity);
+				}
 			},
 			duplicateRecord = async () => {
 				if (!userCanEdit || disableDuplicate) {
@@ -157,8 +225,17 @@ export default function withEditor(WrappedComponent) {
 						}
 					});
 				}
+
+				if (getListeners().onBeforeEditSave) {
+					await getListeners().onBeforeEditSave(what);
+				}
+
 				await Repository.save();
 				setIsEditorShown(false);
+				
+				if (getListeners().onAfterEdit) {
+					await getListeners().onAfterEdit(what);
+				}
 			},
 			onEditorCancel = async () => {
 				const
@@ -174,9 +251,17 @@ export default function withEditor(WrappedComponent) {
 				setIsEditorShown(false);
 			},
 			onEditorDelete = async () => {
+				if (getListeners().onBeforeDeleteSave) {
+					await getListeners().onBeforeDeleteSave(selection);
+				}
+
 				await deleteRecord();
 				setEditorMode(EDITOR_MODE__VIEW);
 				setIsEditorShown(false);
+				
+				if (getListeners().onAfterDelete) {
+					await getListeners().onAfterDelete(selection);
+				}
 			},
 			calculateEditorMode = () => {
 				let mode = EDITOR_MODE__VIEW;
@@ -209,42 +294,34 @@ export default function withEditor(WrappedComponent) {
 			editorMode = calculateEditorMode();
 		}
 
-		return <>
-					<WrappedComponent
-						{...props}
-						currentRecord={currentRecord}
-						setCurrentRecord={setCurrentRecord}
-						isEditorShown={isEditorShown}
-						isEditorViewOnly={isEditorViewOnly}
-						editorMode={editorMode}
-						setEditorMode={setEditorMode}
-						setIsEditorShown={setIsEditorShown}
-						onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
-						onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
-						onDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onDelete}
-						onView={viewRecord}
-						onDuplicate={duplicateRecord}
-						onEditorSave={onEditorSave}
-						onEditorCancel={onEditorCancel}
-						onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
-						onEditorClose={onEditorClose}
-						isEditor={true}
-						useEditor={useEditor}
-						userCanEdit={userCanEdit}
-						userCanView={userCanView}
-						disableAdd={disableAdd}
-						disableEdit={disableEdit}
-						disableDelete={disableDelete}
-						disableDuplicate={disableDuplicate}
-						disableView ={disableView}
-					/>
-					{isTree && isModalShown && 
-						<Modal
-							isOpen={true}
-							onClose={() => setIsModalShown(false)}
-						>
-
-						</Modal>}
-				</>;
+		return <WrappedComponent
+					{...props}
+					currentRecord={currentRecord}
+					setCurrentRecord={setCurrentRecord}
+					isEditorShown={isEditorShown}
+					isEditorViewOnly={isEditorViewOnly}
+					editorMode={editorMode}
+					setEditorMode={setEditorMode}
+					setIsEditorShown={setIsEditorShown}
+					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
+					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
+					onDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onDelete}
+					onView={viewRecord}
+					onDuplicate={duplicateRecord}
+					onEditorSave={onEditorSave}
+					onEditorCancel={onEditorCancel}
+					onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
+					onEditorClose={onEditorClose}
+					setWithEditListeners={setListeners}
+					isEditor={true}
+					useEditor={useEditor}
+					userCanEdit={userCanEdit}
+					userCanView={userCanView}
+					disableAdd={disableAdd}
+					disableEdit={disableEdit}
+					disableDelete={disableDelete}
+					disableDuplicate={disableDuplicate}
+					disableView ={disableView}
+				/>;
 	};
 }

package/src/Components/Tree/Tree.js

@@ -52,18 +52,6 @@ import Toolbar from '../Toolbar/Toolbar.js';
 import _ from 'lodash';
 
 
-//////////////////////
-//////////////////////
-
-// Need to take into account whether using Repository or data.
-// If using data, everything exists at once. What format will data be in?
-// How does this interface with Repository?
-// Maybe if Repository is not AjaxRepository, everything needs to be present at once!
-
-//////////////////////
-//////////////////////
-
-
 function TreeComponent(props) {
 	const {
 			areRootsVisible = true,
@@ -103,7 +91,7 @@ function TreeComponent(props) {
 			additionalToolbarButtons = [],
 			reload = null, // Whenever this value changes after initial render, the tree will reload from scratch
 			parentIdIx,
-
+		
 			// withEditor
 			onAdd,
 			onEdit,
@@ -112,6 +100,7 @@ function TreeComponent(props) {
 			onDuplicate,
 			onReset,
 			onContextMenu,
+			setWithEditListeners,
 
 			// withData
 			Repository,
@@ -141,16 +130,27 @@ function TreeComponent(props) {
 		styles = UiGlobals.styles,
 		forceUpdate = useForceUpdate(),
 		treeRef = useRef(),
+		treeNodeData = useRef(),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
 		[isReorderMode, setIsReorderMode] = useState(false),
 		[isSearchModalShown, setIsSearchModalShown] = useState(false),
-		[treeNodeData, setTreeNodeData] = useState({}),
 		[searchResults, setSearchResults] = useState([]),
 		[searchFormData, setSearchFormData] = useState([]),
 		[dragNodeSlot, setDragNodeSlot] = useState(null),
 		[dragNodeIx, setDragNodeIx] = useState(),
 		[treeSearchValue, setTreeSearchValue] = useState(''),
+
+		// state getters & setters
+		getTreeNodeData = () => {
+			return treeNodeData.current;
+		},
+		setTreeNodeData = (tnd) => {
+			treeNodeData.current = tnd;
+			forceUpdate();
+		},
+
+		// event handers
 		onNodeClick = (item, e) => {
 			if (!setSelection) {
 				return;
@@ -213,65 +213,137 @@ function TreeComponent(props) {
 				}
 			}
 		},
-		onRefresh = () => {
-			if (!Repository) {
-				return;
+		onBeforeAdd = async () => {
+			// Load children before adding the new node
+			const
+				parent = selection[0],
+				parentDatum = getNodeData(parent.id);
+
+			if (parent.hasChildren && !parent.areChildrenLoaded) {
+				await loadChildren(parentDatum);
 			}
-			const promise = Repository.reload();
-			if (promise) { // Some repository types don't use promises
-				promise.then(() => {
-					setIsLoading(false);
-					forceUpdate();
-				});
+		},
+		onAfterAdd = async (entity) => {
+			// Expand the parent before showing the new node
+			const
+				parent = entity.parent,
+				parentDatum = getNodeData(parent.id);
+
+			if (!parentDatum.isExpanded) {
+				parentDatum.isExpanded = true;
 			}
+
+			// Add the entity to the tree
+			const entityDatum = buildTreeNodeDatum(entity);
+			parentDatum.children.unshift(entityDatum);
+			forceUpdate();
 		},
-		getHeaderToolbarItems = () => {
+		onBeforeEditSave = (entities) => {
+			onBeforeSave(entities);
+		},
+		onAfterEdit = async (entities) => {
+			// Refresh the node's display
 			const
-				buttons = [
-					{
-						key: 'searchBtn',
-						text: 'Search tree',
-						handler: onSearchTree,
-						icon: MagnifyingGlass,
-						isDisabled: !treeSearchValue.length,
-					},
-					{
-						key: 'collapseBtn',
-						text: 'Collapse whole tree',
-						handler: onCollapseAll,
-						icon: Collapse,
-						isDisabled: false,
-					},
-				];
-			if (canNodesReorder) {
-				buttons.push({
-					key: 'reorderBtn',
-					text: 'Enter reorder mode',
-					handler: () => setIsReorderMode(!isReorderMode),
-					icon: isReorderMode ? NoReorderRows : ReorderRows,
-					isDisabled: false,
-				});
+				node = entities[0],
+				existingDatum = getNodeData(node.id), // TODO: Make this work for >1 entity
+				newDatum = buildTreeNodeDatum(node);
+
+			// copy the updated data to existingDatum
+			_.merge(existingDatum, newDatum);
+			existingDatum.isLoading = false;
+			forceUpdate();
+		},
+		onBeforeDeleteSave = (entities) => {
+			onBeforeSave(entities);
+		},
+		onBeforeSave = (entities) => {
+			const
+				node = entities[0],
+				datum = getNodeData(node.id); // TODO: Make this work for >1 entity
+			
+			datum.isLoading = true;
+			forceUpdate();
+		},
+		onAfterDelete = async (entities) => {
+			// TODO: Refresh the parent node
+
+			debugger;
+		},
+		onToggle = (datum) => {
+			if (datum.isLoading) {
+				return;
 			}
-			const items = _.map(buttons, getIconButtonFromConfig);
 
-			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) => {
-					if (e.key === 'Enter') {
-						onSearchTree(value);
-					}
-				}}
-				value={treeSearchValue}
-				autoSubmit={false}
-			/>);
+			datum.isExpanded = !datum.isExpanded;
 
-			return items;
+			if (datum.isExpanded && datum.item.repository?.isRemote && datum.item.hasChildren && !datum.item.areChildrenLoaded) {
+				loadChildren(datum, 1);
+				return;
+			}
+
+			if (!datum.isExpanded && datumContainsSelection(datum)) {
+				deselectAll();
+			}
+			
+			forceUpdate();
 		},
-		getFooterToolbarItems = () => {
-			return _.map(additionalToolbarButtons, getIconButtonFromConfig);
+		onCollapseAll = (setNewTreeNodeData = true) => {
+			// Go through whole tree and collapse all nodes
+			const newTreeNodeData = _.clone(getTreeNodeData());
+			collapseNodes(newTreeNodeData);
+
+			if (setNewTreeNodeData) {
+				setTreeNodeData(newTreeNodeData);
+			}
+			return newTreeNodeData;
+		},
+		onSearchTree = async (value) => {
+			let found = [];
+			if (Repository?.isRemote) {
+				// Search tree on server
+				found = await Repository.searchNodes(value);
+			} else {
+				// Search local tree data
+				found = findTreeNodesByText(value);
+			}
+
+			const isMultipleHits = found.length > 1;
+			if (!isMultipleHits) {
+				expandPath(found[0].path);
+				return;
+			}
+
+			const searchFormData = [];
+			_.each(found, (item) => {
+				searchFormData.push([item.id, getNodeText(item)]);
+			});
+			setSearchFormData(searchFormData);
+			setSearchResults(found);
+			setIsSearchModalShown(true);
+		},
+
+		// utilities
+		getNodeData = (itemId) => {
+			function findNodeById(node, id) {
+				if (node.item.id === id) {
+					return node;
+				}
+				if (!_.isEmpty(node.children)) {
+					return _.find(node.children, (node2) => {
+						return findNodeById(node2, id);
+					})
+				}
+				return false;
+			}
+			let found = null;
+			_.each(getTreeNodeData(), (node) => {
+				const foundNode = findNodeById(node, itemId);
+				if (foundNode) {
+					found = foundNode;
+					return false;
+				}
+			});
+			return found;
 		},
 		buildTreeNodeDatum = (treeNode) => {
 			// Build the data-representation of one node and its children,
@@ -286,7 +358,7 @@ function TreeComponent(props) {
 					iconCollapsed: getNodeIcon(treeNode, false),
 					iconExpanded: getNodeIcon(treeNode, true),
 					iconLeaf: getNodeIcon(treeNode),
-					isExpanded: isRoot, // all non-root treeNodes are not expanded by default
+					isExpanded: isRoot, // all non-root treeNodes are collapsed by default
 					isVisible: isRoot ? areRootsVisible : true,
 					isLoading: false,
 					children,
@@ -301,131 +373,56 @@ function TreeComponent(props) {
 			});
 			return data;
 		},
-		renderTreeNode = (datum) => {
-			const
-				item = datum.item,
-				depth = item.depth;
-			if (item.isDestroyed) {
-				return null;
-			}
-			if (!datum.isVisible) {
-				return null;
+		buildAndSetTreeNodeData = async () => {
+			let nodes = [];
+			if (Repository) {
+				if (!Repository.areRootNodesLoaded) {
+					nodes = await Repository.loadRootNodes(1);
+				} else {
+					nodes = Repository.getRootNodes();
+				}
+			} else {
+				nodes = assembleDataTreeNodes();
 			}
 
-			let nodeProps = getNodeProps ? getNodeProps(item) : {},
-				isSelected = isInSelection(item);
+			setTreeNodeData(buildTreeNodeData(nodes));
+		},
+		datumContainsSelection = (datum) => {
+			if (_.isEmpty(selection)) {
+				return false;
+			}
+			const
+				selectionIds = _.map(selection, (item) => item.id),
+				datumIds = getDatumChildIds(datum),
+				intersection = selectionIds.filter(x => datumIds.includes(x));
 
-			return <Pressable
-						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
-						key={item.hash}
-						onPress={(e) => {
-							if (e.preventDefault && e.cancelable) {
-								e.preventDefault();
-							}
-							if (isReorderMode) {
-								return
-							}
-							switch (e.detail) {
-								case 1: // single click
-									onNodeClick(item, e); // sets selection
-									break;
-								case 2: // double click
-									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
-										onNodeClick(item, e); // so reselect it
-									}
-									if (onEdit) {
-										onEdit();
-									}
-									break;
-								case 3: // triple click
-									break;
-								default:
-							}
-						}}
-						onLongPress={(e) => {
-							if (e.preventDefault && e.cancelable) {
-								e.preventDefault();
-							}
-							if (isReorderMode) {
-								return;
-							}
+			return !_.isEmpty(intersection);
+		},
+		findTreeNodesByText = (text) => {
+			// Helper for onSearchTree
+			// Searches whole treeNodeData for any matching items
+			// Returns multiple nodes
 
-							if (!setSelection) {
-								return;
-							}
-							
-							// context menu
-							const selection = [item];
-							setSelection(selection);
-							if (onContextMenu) {
-								onContextMenu(item, e, selection, setSelection);
-							}
-						}}
-						flexDirection="row"
-						ml={((areRootsVisible ? depth : depth -1) * 20) + 'px'}
-					>
-						{({
-							isHovered,
-							isFocused,
-							isPressed,
-						}) => {
-							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;
-								}
-							} 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);
-							}
-							let WhichTreeNode = TreeNode,
-								rowReorderProps = {};
-							if (canNodesReorder && isReorderMode) {
-								WhichTreeNode = ReorderableTreeNode;
-								rowReorderProps = {
-									mode: VERTICAL,
-									onDragStart: onNodeReorderDragStart,
-									onDrag: onNodeReorderDrag,
-									onDragStop: onNodeReorderDragStop,
-									proxyParent: treeRef.current?.getScrollableNode().children[0],
-									proxyPositionRelativeToParent: true,
-									getParentNode: (node) => node.parentElement.parentElement.parentElement,
-									getProxy: getReorderProxy,
-								};
-							}
-							
-							return <WhichTreeNode
-										nodeProps={nodeProps}
-										bg={bg}
-										datum={datum}
-										onToggle={onToggle}
+			const regex = new RegExp(text, 'i'); // instead of matching based on full text match, search for a partial match
 
-										// fields={fields}
-										{...rowReorderProps}
-									/>;
-						}}
-					</Pressable>;
+			function searchChildren(children, found = []) {
+				_.each(children, (child) => {
+					if (child.text.match(regex)) {
+						found.push(child);
+					}
+					if (child.children) {
+						searchChildren(child.children, found);
+					}
+				});
+				return found;
+			}
+			return searchChildren(treeNodeData);
 		},
-		renderTreeNodes = (data) => {
-			let nodes = [];
-			_.each(data, (datum) => {
-				const node = renderTreeNode(datum);
-				nodes.push(node);
-
-				if (datum.children.length && datum.isExpanded) {
-					const childTreeNodes = renderTreeNodes(datum.children); // recursion
-					nodes = nodes.concat(childTreeNodes);
-				}
-			});
-			return nodes;
+		getTreeNodeByNodeId = (node_id) => {
+			if (Repository) {
+				return Repository.getById(node_id);
+			}
+			return data[node_id]; // TODO: This is probably not right!
 		},
 		getDatumChildIds = (datum) => {
 			let ids = [];
@@ -439,30 +436,6 @@ function TreeComponent(props) {
 			});
 			return ids;
 		},
-		datumContainsSelection = (datum) => {
-			if (_.isEmpty(selection)) {
-				return false;
-			}
-			const
-				selectionIds = _.map(selection, (item) => item.id),
-				datumIds = getDatumChildIds(datum),
-				intersection = selectionIds.filter(x => datumIds.includes(x));
-
-			return !_.isEmpty(intersection);
-		},
-		buildAndSetTreeNodeData = async () => {
-			let rootNodes;
-			if (Repository) {
-				if (!Repository.areRootNodesLoaded) {
-					rootNodes = await Repository.getRootNodes(1);
-				}
-			} else {
-				rootNodes = assembleDataTreeNodes();
-			}
-
-			const treeNodeData = buildTreeNodeData(rootNodes);
-			setTreeNodeData(treeNodeData);
-		},
 		assembleDataTreeNodes = () => {
 			// Populates the TreeNodes with .parent and .children references
 			// NOTE: This is only for 'data', not for Repositories!
@@ -502,47 +475,27 @@ function TreeComponent(props) {
 				treeNode.depth = i;
 				treeNode.hash = treeNode[idIx];
 
-				if (treeNode.isRoot) {
-					treeNodes.push(treeNode);
-				}
-			});
-
-			return treeNodes;
-		},
-		reloadTree = () => {
-			Repository.areRootNodesLoaded = false;
-			return buildAndSetTreeNodeData();
-		};
-
-		// Button handlers
-		onToggle = (datum) => {
-			if (datum.isLoading) {
-				return;
-			}
-
-			datum.isExpanded = !datum.isExpanded;
-
-			if (datum.isExpanded && datum.item.repository?.isRemote && datum.item.hasChildren && !datum.item.areChildrenLoaded) {
-				loadChildren(datum, 1);
-				return;
-			}
+				if (treeNode.isRoot) {
+					treeNodes.push(treeNode);
+				}
+			});
 
-			if (!datum.isExpanded && datumContainsSelection(datum)) {
-				deselectAll();
-			}
-			
-			forceUpdate();
+			return treeNodes;
+		},
+		reloadTree = () => {
+			Repository.areRootNodesLoaded = false;
+			return buildAndSetTreeNodeData();
 		},
-		loadChildren = async (datum, depth) => {
+		loadChildren = async (datum, depth = 1) => {
 			// Show loading indicator (spinner underneath current node?)
 			datum.isLoading = true;
 			forceUpdate();
 			
 			try {
 
-				const children = await datum.item.loadChildren(1);
-				const tnd = buildTreeNodeData(children);
-				datum.children = tnd;
+				const children = await datum.item.loadChildren(depth);
+				datum.children = buildTreeNodeData(children);
+				datum.isExpanded = true;
 
 			} catch (err) {
 				// TODO: how do I handle errors? 
@@ -556,16 +509,6 @@ function TreeComponent(props) {
 			datum.isLoading = false;
 			forceUpdate();
 		},
-		onCollapseAll = (setNewTreeNodeData = true) => {
-			// Go through whole tree and collapse all nodes
-			const newTreeNodeData = _.clone(treeNodeData);
-			collapseNodes(newTreeNodeData);
-
-			if (setNewTreeNodeData) {
-				setTreeNodeData(newTreeNodeData);
-			}
-			return newTreeNodeData;
-		},
 		collapseNodes = (nodes) => {
 			_.each(nodes, (node) => {
 				node.isExpanded = false;
@@ -574,61 +517,9 @@ function TreeComponent(props) {
 				}
 			});
 		},
-		onSearchTree = async (value) => {
-			let found = [];
-			if (Repository?.isRemote) {
-				// Search tree on server
-				found = await Repository.searchNodes(value);
-			} else {
-				// Search local tree data
-				found = findTreeNodesByText(value);
-			}
-
-			const isMultipleHits = found.length > 1;
-			if (!isMultipleHits) {
-				expandPath(found[0].path);
-				return;
-			}
-
-			const searchFormData = [];
-			_.each(found, (item) => {
-				searchFormData.push([item.id, getNodeText(item)]);
-			});
-			setSearchFormData(searchFormData);
-			setSearchResults(found);
-			setIsSearchModalShown(true);
-		},
-		findTreeNodesByText = (text) => {
-			// Helper for onSearchTree
-			// Searches whole treeNodeData for any matching items
-			// Returns multiple nodes
-
-			const regex = new RegExp(text, 'i'); // instead of matching based on full text match, search for a partial match
-
-			function searchChildren(children, found = []) {
-				_.each(children, (child) => {
-					if (child.text.match(regex)) {
-						found.push(child);
-					}
-					if (child.children) {
-						searchChildren(child.children, found);
-					}
-				});
-				return found;
-			}
-			return searchChildren(treeNodeData);
-		},
-		getTreeNodeByNodeId = (node_id) => {
-			if (Repository) {
-				return Repository.getById(node_id);
-			}
-			return data[node_id]; // TODO: This is probably not right!
-		},
 		expandPath = async (path) => {
-			// Helper for onSearchTree
-
 			// First, close thw whole tree.
-			let newTreeNodeData = _.clone(treeNodeData);
+			let newTreeNodeData = _.clone(getTreeNodeData());
 			collapseNodes(newTreeNodeData);
 
 			// As it navigates down, it will expand the appropriate branches,
@@ -692,7 +583,185 @@ function TreeComponent(props) {
 
 		},
 
-		// Drag/Drop
+		// render
+		getHeaderToolbarItems = () => {
+			const
+				buttons = [
+					{
+						key: 'searchBtn',
+						text: 'Search tree',
+						handler: onSearchTree,
+						icon: MagnifyingGlass,
+						isDisabled: !treeSearchValue.length,
+					},
+					{
+						key: 'collapseBtn',
+						text: 'Collapse whole tree',
+						handler: onCollapseAll,
+						icon: Collapse,
+						isDisabled: false,
+					},
+				];
+			if (canNodesReorder) {
+				buttons.push({
+					key: 'reorderBtn',
+					text: 'Enter reorder mode',
+					handler: () => setIsReorderMode(!isReorderMode),
+					icon: isReorderMode ? NoReorderRows : ReorderRows,
+					isDisabled: false,
+				});
+			}
+			const items = _.map(buttons, getIconButtonFromConfig);
+
+			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) => {
+					if (e.key === 'Enter') {
+						onSearchTree(value);
+					}
+				}}
+				value={treeSearchValue}
+				autoSubmit={false}
+			/>);
+
+			return items;
+		},
+		getFooterToolbarItems = () => {
+			return _.map(additionalToolbarButtons, getIconButtonFromConfig);
+		},
+		renderTreeNode = (datum) => {
+			if (!datum.isVisible) {
+				return null;
+			}
+			const item = datum.item;
+			if (item.isDestroyed) {
+				return null;
+			}
+			const depth = item.depth;
+
+			let nodeProps = getNodeProps ? getNodeProps(item) : {},
+				isSelected = isInSelection(item);
+
+			return <Pressable
+						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
+						key={item.hash}
+						onPress={(e) => {
+							if (e.preventDefault && e.cancelable) {
+								e.preventDefault();
+							}
+							if (isReorderMode) {
+								return
+							}
+							switch (e.detail) {
+								case 1: // single click
+									onNodeClick(item, e); // sets selection
+									break;
+								case 2: // double click
+									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
+										onNodeClick(item, e); // so reselect it
+									}
+									if (onEdit) {
+										onEdit();
+									}
+									break;
+								case 3: // triple click
+									break;
+								default:
+							}
+						}}
+						onLongPress={(e) => {
+							if (e.preventDefault && e.cancelable) {
+								e.preventDefault();
+							}
+							if (isReorderMode) {
+								return;
+							}
+
+							if (!setSelection) {
+								return;
+							}
+							
+							// context menu
+							const selection = [item];
+							setSelection(selection);
+							if (onContextMenu) {
+								onContextMenu(item, e, selection, setSelection);
+							}
+						}}
+						flexDirection="row"
+						ml={((areRootsVisible ? depth : depth -1) * 20) + 'px'}
+					>
+						{({
+							isHovered,
+							isFocused,
+							isPressed,
+						}) => {
+							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;
+								}
+							} 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);
+							}
+							let WhichTreeNode = TreeNode,
+								rowReorderProps = {};
+							if (canNodesReorder && isReorderMode) {
+								WhichTreeNode = ReorderableTreeNode;
+								rowReorderProps = {
+									mode: VERTICAL,
+									onDragStart: onNodeReorderDragStart,
+									onDrag: onNodeReorderDrag,
+									onDragStop: onNodeReorderDragStop,
+									proxyParent: treeRef.current?.getScrollableNode().children[0],
+									proxyPositionRelativeToParent: true,
+									getParentNode: (node) => node.parentElement.parentElement.parentElement,
+									getProxy: getReorderProxy,
+								};
+							}
+							
+							return <WhichTreeNode
+										nodeProps={nodeProps}
+										bg={bg}
+										datum={datum}
+										onToggle={onToggle}
+
+										// fields={fields}
+										{...rowReorderProps}
+									/>;
+						}}
+					</Pressable>;
+		},
+		renderTreeNodes = (data) => {
+			let nodes = [];
+			_.each(data, (datum) => {
+				const node = renderTreeNode(datum);
+				if (!node) {
+					return;
+				}
+				nodes.push(node);
+
+				if (datum.children.length && datum.isExpanded) {
+					const childTreeNodes = renderTreeNodes(datum.children); // recursion
+					nodes = nodes.concat(childTreeNodes);
+				}
+			});
+			return nodes;
+		},
+
+		// drag/drop
 		getReorderProxy = (node) => {
 			const
 				row = node.parentElement.parentElement,
@@ -967,16 +1036,12 @@ function TreeComponent(props) {
 		
 		Repository.on('beforeLoad', setTrue);
 		Repository.on('load', setFalse);
-		Repository.ons(['changePage', 'changePageSize',], deselectAll);
-		Repository.ons(['changeData', 'change'], buildAndSetTreeNodeData);
 		Repository.on('changeFilters', reloadTree);
 		Repository.on('changeSorters', reloadTree);
 
 		return () => {
 			Repository.off('beforeLoad', setTrue);
 			Repository.off('load', setFalse);
-			Repository.offs(['changePage', 'changePageSize',], deselectAll);
-			Repository.offs(['changeData', 'change'], buildAndSetTreeNodeData);
 			Repository.off('changeFilters', reloadTree);
 			Repository.off('changeSorters', reloadTree);
 		};
@@ -993,17 +1058,26 @@ function TreeComponent(props) {
 			}
 			Repository.filter(selectorId, id, false); // so it doesn't clear existing filters
 		}
-
 	}, [selectorId, selectorSelected]);
 
+	setWithEditListeners({ // Update withEdit's listeners on every render
+		onBeforeAdd,
+		onAfterAdd,
+		onBeforeEditSave,
+		onAfterEdit,
+		onBeforeDeleteSave,
+		onAfterDelete,
+	});
+	
 	const
-		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [treeSearchValue, treeNodeData]),
-		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isReorderMode, treeNodeData]);
+		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [treeSearchValue, getTreeNodeData()]),
+		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isReorderMode, getTreeNodeData()]);
 
 	if (!isReady) {
 		return null;
 	}
-	const treeNodes = renderTreeNodes(treeNodeData);
+	
+	const treeNodes = renderTreeNodes(getTreeNodeData());
 
 	// headers & footers
 	let treeFooterComponent = null;
@@ -1029,7 +1103,7 @@ function TreeComponent(props) {
 							deselectAll();
 						}
 					}}>
-						{!treeNodes?.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
+						{!treeNodes?.length ? <NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
 							treeNodes}
 					</Column>
 

package/src/Constants/Styles.js

@@ -95,7 +95,7 @@ const defaults = {
 	TREE_NODE_SELECTED_BG: 'selected',
 	TREE_NODE_SELECTED_HOVER_BG: 'selectedHover',
 	TOOLBAR_ITEMS_COLOR: 'trueGray.800',
-	TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
+	TOOLBAR_ITEMS_DISABLED_COLOR: 'trueGray.400',
 	TOOLBAR_ITEMS_ICON_SIZE: 'sm',
 	VIEWER_ANCILLARY_FONTSIZE: 22,
 };

package/src/Functions/getIconButtonFromConfig.js

@@ -1,9 +1,15 @@
 import IconButton from '../Components/Buttons/IconButton.js';
 import UiGlobals from '../UiGlobals.js';
 
-
-export default function getIconButtonFromConfig($config, ix) {
+export default function getIconButtonFromConfig(config, ix) {
 	const
+		{
+			key,
+			text,
+			handler,
+			icon = null,
+			isDisabled = false,
+		} = config,
 		styles = UiGlobals.styles,
 		iconButtonProps = {
 			_hover: {
@@ -19,13 +25,6 @@ export default function getIconButtonFromConfig($config, ix) {
 			w: 20,
 			color: isDisabled ? styles.TOOLBAR_ITEMS_DISABLED_COLOR : styles.TOOLBAR_ITEMS_COLOR,
 		};
-	let {
-			key,
-			text,
-			handler,
-			icon = null,
-			isDisabled = false,
-		} = config;
 	return <IconButton
 				key={key || ix}
 				onPress={handler}