@onehat/ui 0.2.69 → 0.2.71

package/package.json

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

package/src/Components/Grid/Grid.js

@@ -851,6 +851,27 @@ export function Grid(props) {
 
 }
 
+export const Grid = withAlert(
+									withEvents(
+										withData(
+											withMultiSelection(
+												withSelection(
+													// withSideEditor(
+														withFilters(
+															withPresetButtons(
+																withContextMenu(
+																	Grid
+																),
+																true // isGrid
+															)
+														)
+													// )
+												)
+											)
+										)
+									)
+								);
+
 export const SideGridEditor = withAlert(
 									withEvents(
 										withData(
@@ -861,7 +882,8 @@ export const SideGridEditor = withAlert(
 															withPresetButtons(
 																withContextMenu(
 																	Grid
-																)
+																),
+																true // isGrid
 															)
 														)
 													)
@@ -913,4 +935,4 @@ export const InlineGridEditor = withAlert(
 									)
 								);
 
-export default WindowedGridEditor;
+export default Grid;

package/src/Components/Hoc/withEditor.js

@@ -11,7 +11,7 @@ export default function withEditor(WrappedComponent) {
 
 		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
-				useEditor = false,
+				useEditor = true,
 				userCanEdit = true,
 				userCanView = true,
 				disableAdd = false,
@@ -213,6 +213,7 @@ export default function withEditor(WrappedComponent) {
 					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}

package/src/Components/Hoc/withPresetButtons.js

@@ -33,10 +33,11 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 			} = props,
 			{
 				// for local use
+				isEditor = false,
 				useEditor = true,
-				disableAdd = false,
-				disableEdit = false,
-				disableDelete = false,
+				disableAdd = !isEditor,
+				disableEdit = !isEditor,
+				disableDelete = !isEditor,
 				disableView = !isGrid,
 				disableCopy = !isGrid,
 				disableDuplicate = !isGrid,

package/src/Components/Hoc/withSideEditor.js

@@ -14,6 +14,10 @@ export default function withSideEditor(WrappedComponent) {
 				sideFlex = 100,
 			} = props;
 
+		if (!Editor) {
+			throw Error('Editor is not defined');
+		}
+
 		return <Container
 					center={<WrappedComponent {...props} />}
 					east={<Editor

package/src/Components/Hoc/withWindowedEditor.js

@@ -35,6 +35,10 @@ export default function withWindowedEditor(WrappedComponent) {
 				editorProps = {},
 			} = props;
 
+		if (!Editor) {
+			throw Error('Editor is not defined');
+		}
+
 		return <>
 					<WrappedComponent {...props} />
 					{useEditor && isEditorShown && 

package/src/Components/Icons/Dot.js

@@ -0,0 +1,18 @@
+import * as React from "react"
+import Svg, { G, Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+	return (
+		<Icon
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 508.3 508.87"
+			{...props}
+		>
+			<Path d="M253.87 387.44c73.46 0 133-59.55 133-133s-59.55-133-133-133-133 59.55-133 133 59.55 133 133 133z" />
+			<Path d="M0 0H508.3V508.87H0z" fill="none" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Panel/InlineGridEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { InlineGridEditor, } from '../Grid/Grid.js';
+import _ from 'lodash';
+
+export function GridPanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<InlineGridEditor {...props} />
+			</Panel>;
+}
+
+export default GridPanel;

package/src/Components/Panel/SideGridEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { SideGridEditor, } from '../Grid/Grid.js';
+import _ from 'lodash';
+
+export function GridPanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<SideGridEditor {...props} />
+			</Panel>;
+}
+
+export default GridPanel;

package/src/Components/Panel/SideTreeEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { SideTreeEditor, } from '../Tree/Tree.js';
+import _ from 'lodash';
+
+export function TreePanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<SideTreeEditor {...props} />
+			</Panel>;
+}
+
+export default TreePanel;

package/src/Components/Panel/WindowedGridEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { WindowedGridEditor, } from '../Grid/Grid.js';
+import _ from 'lodash';
+
+export function GridPanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<WindowedGridEditor {...props} />
+			</Panel>;
+}
+
+export default GridPanel;

package/src/Components/Panel/WindowedTreeEditorPanel.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, } from 'react';
+import Panel from './Panel.js';
+import { WindowedTreeEditor, } from '../Tree/Tree.js';
+import _ from 'lodash';
+
+export function TreePanel(props) {
+	const {
+			disableTitleChange = false,
+			selectorSelected,
+		} = props,
+		originalTitle = props.title,
+		[isReady, setIsReady] = useState(disableTitleChange),
+		[title, setTitle] = useState(originalTitle);
+
+	useEffect(() => {
+		if (!disableTitleChange && originalTitle) {
+			let newTitle = originalTitle;
+			if (selectorSelected?.[0]?.displayValue) {
+				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
+			}
+			if (newTitle !== title) {
+				setTitle(newTitle);
+			}
+		}
+		if (!isReady) {
+			setIsReady(true);
+		}
+	}, [selectorSelected, disableTitleChange, originalTitle]);
+
+	if (!isReady) {
+		return null;
+	}
+
+	return <Panel {...props} title={title}>
+				<WindowedTreeEditor {...props} />
+			</Panel>;
+}
+
+export default TreePanel;

package/src/Components/Tree/Tree.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo, } from 'react';
+import { useState, useEffect, useRef, useMemo, } from 'react';
 import {
 	Column,
 	FlatList,
@@ -38,7 +38,7 @@ import TreeNode, { ReorderableTreeNode } from './TreeNode.js';
 import FormPanel from '../Panel/FormPanel.js';
 import Input from '../Form/Field/Input.js';
 import IconButton from '../Buttons/IconButton.js';
-import Circle from '../Icons/Circle.js';
+import Dot from '../Icons/Dot.js';
 import Collapse from '../Icons/Collapse.js';
 import FolderClosed from '../Icons/FolderClosed.js';
 import FolderOpen from '../Icons/FolderOpen.js';
@@ -51,28 +51,9 @@ import Toolbar from '../Toolbar/Toolbar.js';
 import _ from 'lodash';
 
 
-// Tree requires the use of HOC withSelection() whenever it's used.
-// The default export is *with* the HOC. A separate *raw* component is
-// exported which can be combined with many HOCs for various functionality.
-
-
 //////////////////////
 //////////////////////
 
-// I'm thinking if a repository senses that it's a tree, then at initial load
-// it should get the root nodes +1 level of children.
-//
-// How would it then subsequently get the proper children?
-// i.e. When a node gets its children, how will it do this
-// while maintaining the nodes that already exist there?
-// We don't want it to *replace* all exisitng nodes!
-//
-// And if the repository does a reload, should it just get roots+1 again?
-// Changing filters would potentially change the tree structure.
-// Changing sorting would only change the ordering, not what is expanded/collapsed or visible/invisible.
-
-
-
 // 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?
@@ -82,20 +63,18 @@ import _ from 'lodash';
 //////////////////////
 
 
-
-
-
-
 export function Tree(props) {
 	const {
 			areRootsVisible = true,
-			getAdditionalParams = () => { // URL params needed to get nodes from server (e.g, { venue_id: 1, getEquipment: true, getRentalEquipment: false, }), in addition to filters.
-				return {};
-			},
+			extraParams = {}, // Additional params to send with each request ( e.g. { order: 'Categories.name ASC' })
 			getNodeText = (item) => { // extracts model/data and decides what the row text should be
-				return item.displayValue;
+				if (Repository) {
+					return item.displayValue;
+				}
+				return item[displayIx];
 			},
 			getNodeIcon = (item, isExpanded) => { // 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) {
@@ -104,7 +83,7 @@ export function Tree(props) {
 						icon = FolderClosed;
 					}
 				} else {
-					icon = Circle;
+					icon = Dot;
 				}
 				return icon;
 			},
@@ -121,6 +100,8 @@ export function Tree(props) {
 			bottomToolbar = null,
 			topToolbar = null,
 			additionalToolbarButtons = [],
+			reload = null, // Whenever this value changes after initial render, the tree will reload from scratch
+			parentIdIx,
 
 			// withEditor
 			onAdd,
@@ -164,11 +145,16 @@ export function Tree(props) {
 		[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(''),
 		onNodeClick = (item, e) => {
+			if (!setSelection) {
+				return;
+			}
+
 			const
 				{
 					shiftKey,
@@ -268,10 +254,15 @@ export function Tree(props) {
 			const items = _.map(buttons, getIconFromConfig);
 
 			items.unshift(<Input // Add text input to beginning of header items
-				key="searchTree"
+				key="searchNodes"
 				flex={1}
-				placeholder="Search all tree nodes"
+				placeholder="Find tree node"
 				onChangeText={(val) => setTreeSearchValue(val)}
+				onKeyPress={(e, value) => {
+					if (e.key === 'Enter') {
+						onSearchTree(value);
+					}
+				}}
 				value={treeSearchValue}
 				autoSubmit={false}
 			/>);
@@ -320,6 +311,7 @@ export function Tree(props) {
 			// renderTreeNode uses this to render the nodes.
 			const
 				isRoot = treeNode.isRoot,
+				children = buildTreeNodeData(treeNode.children), // recursively get data for children
 				datum = {
 					item: treeNode,
 					text: getNodeText(treeNode),
@@ -328,7 +320,8 @@ export function Tree(props) {
 					iconLeaf: getNodeIcon(treeNode),
 					isExpanded: isRoot, // all non-root treeNodes are not expanded by default
 					isVisible: isRoot ? areRootsVisible : true,
-					children: buildTreeNodeData(treeNode.children), // recursively get data for children
+					isLoading: false,
+					children,
 				};
 
 			return datum;
@@ -386,7 +379,11 @@ export function Tree(props) {
 								e.preventDefault();
 							}
 							if (isReorderMode) {
-								return
+								return;
+							}
+
+							if (!setSelection) {
+								return;
 							}
 							
 							// context menu
@@ -450,78 +447,150 @@ export function Tree(props) {
 					</Pressable>;
 		},
 		renderTreeNodes = (data) => {
-			const nodes = [];
+			let nodes = [];
 			_.each(data, (datum) => {
-				nodes.push(renderTreeNode(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;
 		},
-		renderAllTreeNodes = () => {
-			let nodes = [];
-			_.each(treeNodeData, (datum) => {
-				const node = renderTreeNode(datum);
-				if (_.isEmpty(node)) {
-					return;
+		getDatumChildIds = (datum) => {
+			let ids = [];
+			 _.each(datum.children, (childDatum) => {
+				ids.push(childDatum.item.id);
+				if (childDatum.children.length) {
+					const childIds = getDatumChildIds(childDatum);
+					ids = ids.concat(childIds);
+					const t = true;
 				}
-				
-				nodes.push(node);
+			});
+			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));
 
-				if (!datum.isExpanded) {
-					return;
+			return !_.isEmpty(intersection);
+		},
+		buildAndSetTreeNodeData = async () => {
+			let rootNodes;
+			if (Repository) {
+				if (!Repository.areRootNodesLoaded) {
+					rootNodes = await Repository.getRootNodes(1);
 				}
+			} else {
+				rootNodes = assembleDataTreeNodes();
+			}
 
-				if (_.isEmpty(datum.children)) {
-					return;
+			const treeNodeData = buildTreeNodeData(rootNodes);
+			setTreeNodeData(treeNodeData);
+		},
+		assembleDataTreeNodes = () => {
+			// Populates the TreeNodes with .parent and .children references
+			// NOTE: This is only for 'data', not for Repositories!
+			// 'data' is essentially an Adjacency List, not a ClosureTable.
+
+			const clonedData = _.clone(data);
+
+			// Reset all parent/child relationships
+			_.each(clonedData, (treeNode) => {
+				treeNode.isRoot = !treeNode[parentIdIx];
+				treeNode.parent = null;
+				treeNode.children = [];
+			});
+
+			// Rebuild all parent/child relationships
+			_.each(clonedData, (treeNode) => {
+				const parent = _.find(clonedData, (tn) => {
+					return tn[idIx] === treeNode[parentIdIx];
+				});
+				if (parent) {
+					treeNode.parent = parent;
+					parent.children.push(treeNode);
 				}
+			});
 
-				const children = renderTreeNodes(datum.children);
-				if (_.isEmpty(children)) {
-					return;
+			// populate calculated fields
+			const treeNodes = [];
+			_.each(clonedData, (treeNode) => {
+				treeNode.hasChildren = !_.isEmpty(treeNode.children);
+
+				let parent = treeNode.parent,
+					i = 0;
+				while(parent) {
+					i++;
+					parent = parent.parent;
 				}
+				treeNode.depth = i;
+				treeNode.hash = treeNode[idIx];
 
-				nodes = nodes.concat(children);
+				if (treeNode.isRoot) {
+					treeNodes.push(treeNode);
+				}
 			});
-			return nodes;
+
+			return treeNodes;
 		},
+		reloadTree = () => {
+			Repository.areRootNodesLoaded = false;
+			return buildAndSetTreeNodeData();
+		};
 
 		// Button handlers
 		onToggle = (datum) => {
+			if (datum.isLoading) {
+				return;
+			}
+
 			datum.isExpanded = !datum.isExpanded;
-			forceUpdate();
 
-			if (datum.isExpanded && datum.item?.repository.isRemote && datum.item.hasChildren && !datum.item.isChildrenLoaded) {
+			if (datum.isExpanded && datum.item.repository?.isRemote && datum.item.hasChildren && !datum.item.areChildrenLoaded) {
 				loadChildren(datum, 1);
+				return;
 			}
+
+			if (!datum.isExpanded && datumContainsSelection(datum)) {
+				deselectAll();
+			}
+			
+			forceUpdate();
 		},
 		loadChildren = async (datum, depth) => {
-			// Helper for onToggle
-
-			// TODO: Flesh this out
-			// Show loading indicator (red bar at top? Spinner underneath current node?)
-
+			// Show loading indicator (spinner underneath current node?)
+			datum.isLoading = true;
+			forceUpdate();
 			
-			// Calls getAdditionalParams(), then submits to server
-			// Server returns this for each node:
-			// Build up treeNodeData for just these new nodes
-
+			try {
+
+				const children = await datum.item.loadChildren(1);
+				const tnd = buildTreeNodeData(children);
+				datum.children = tnd;
+
+			} catch (err) {
+				// TODO: how do I handle errors? 
+				// 		Color parent node red
+				// 		Modal alert box?
+				// 		Inline error msg? I'm concerned about modals not stacking correctly, but if we put it inline, it'll work. 
+				datum.isExpanded = false;
+			}
 
 			// Hide loading indicator
-			
+			datum.isLoading = false;
+			forceUpdate();
 		},
 		onCollapseAll = (setNewTreeNodeData = true) => {
 			// Go through whole tree and collapse all nodes
 			const newTreeNodeData = _.clone(treeNodeData);
-			
-			// Recursive method to collapse all children
-			function collapseNodes(nodes) {
-				_.each(nodes, (node) => {
-					node.isExpanded = false;
-					if (!_.isEmpty(node.children)) {
-						collapseNodes(node.children);
-					}
-				});
-			}
-
 			collapseNodes(newTreeNodeData);
 
 			if (setNewTreeNodeData) {
@@ -529,47 +598,37 @@ export function Tree(props) {
 			}
 			return newTreeNodeData;
 		},
+		collapseNodes = (nodes) => {
+			_.each(nodes, (node) => {
+				node.isExpanded = false;
+				if (!_.isEmpty(node.children)) {
+					collapseNodes(node.children);
+				}
+			});
+		},
 		onSearchTree = async (value) => {
-
 			let found = [];
 			if (Repository?.isRemote) {
 				// Search tree on server
-				found = await Repository.searchTree(value);
+				found = await Repository.searchNodes(value);
 			} else {
 				// Search local tree data
 				found = findTreeNodesByText(value);
 			}
 
-
 			const isMultipleHits = found.length > 1;
-			let path = '';
-			let searchFormData = [];
-			
-			if (Repository?.isRemote) {
-				if (isMultipleHits) {
-					// 'found' is the results from the server. Use these to show the modal and choose which node you want to select
-					
-					
-					
-					
-				} else {
-					// Search local tree data
-					found = findTreeNodesByText(value);
-				}
-				
-				// TODO: create searchFormData based on 'found' array
-				
-
-
-
-
-				setSearchFormData(searchFormData);
-				setIsSearchModalShown(true);
-
-			} else {
-				// Expand that one path immediately
-				expandPath(path);
+			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
@@ -597,41 +656,12 @@ export function Tree(props) {
 			}
 			return data[node_id]; // TODO: This is probably not right!
 		},
-		getPathByTreeNode = (treeNode) => {
-
-			///////// THIS DOESN'T WORK YET /////////
-
-			function searchChildren(children, currentPath = []) {
-				let found = [];
-				_.each(children, (child) => {
-					const
-						item = child.item,
-						id = idField ? item[idField] : item.id;
-					if (child.text.match(regex)) {
-						found.push(child);
-						return false;
-					}
-					if (child.children) {
-						const childrenFound = searchChildren(child.children, [...currentPath, id]);
-						if (!_.isEmpty(childrenFound)) {
-							return false;
-						}
-					}
-				});
-				return found;
-			}
-			const nodes = searchChildren(treeNodeData);
-			return nodes.join('/');
-
-		},
-		expandPath = (path) => {
+		expandPath = async (path) => {
 			// Helper for onSearchTree
 
-			// Drills down the tree based on path (usually given by server).
-			// Path would be a list of sequential IDs (3/35/263/1024)
-			// Initially, it closes thw whole tree.
-
-			let newTreeNodeData = collapseAll(false); // false = don't set new treeNodeData
+			// First, close thw whole tree.
+			let newTreeNodeData = _.clone(treeNodeData);
+			collapseNodes(newTreeNodeData);
 
 			// As it navigates down, it will expand the appropriate branches,
 			// and then finally highlight & select the node in question
@@ -639,6 +669,7 @@ export function Tree(props) {
 				id,
 				currentLevelData = newTreeNodeData,
 				currentDatum,
+				parentDatum,
 				currentNode;
 			
 			while(path.length) {
@@ -649,6 +680,15 @@ export function Tree(props) {
 				currentDatum = _.find(currentLevelData, (treeNodeDatum) => {
 					return treeNodeDatum.item.id === id; 
 				});
+
+				if (!currentDatum) {
+					// datum is not currently loaded, so load it
+					await loadChildren(parentDatum, 1);
+					currentLevelData = parentDatum.children;
+					currentDatum = _.find(currentLevelData, (treeNodeDatum) => {
+						return treeNodeDatum.item.id === id; 
+					});
+				}
 				
 				currentNode = currentDatum.item;
 				
@@ -657,6 +697,7 @@ export function Tree(props) {
 				
 				path = pathParts.slice(1).join('/'); // put the rest of it back together
 				currentLevelData = currentDatum.children;
+				parentDatum = currentDatum;
 			}
 
 			setSelection([currentNode]);
@@ -927,26 +968,20 @@ export function Tree(props) {
 			}
 			setDragNodeSlot(null);
 		};
+
+	useEffect(() => {
+		if (!isReady) {
+			return () => {};
+		}
+		reloadTree();
+	}, [reload]);
 		
 	useEffect(() => {
 
-		async function buildAndSetTreeNodeData() {
-
-			let rootNodes;
+		if (!isReady) {
 			if (Repository) {
-				if (!Repository.areRootNodesLoaded) {
-					rootNodes = await Repository.getRootNodes(true, 1, getAdditionalParams);
-				}
-			} else {
-				// TODO: Make this work for data array
-
+				Repository.setBaseParams(extraParams);
 			}
-
-			const treeNodeData = buildTreeNodeData(rootNodes);
-			setTreeNodeData(treeNodeData);
-		}
-
-		if (!isReady) {
 			(async () => {
 				await buildAndSetTreeNodeData();
 				setIsReady(true);
@@ -956,37 +991,26 @@ export function Tree(props) {
 		if (!Repository) {
 			return () => {};
 		}
-
+		
 		// set up @onehat/data repository
 		const
 			setTrue = () => setIsLoading(true),
-			setFalse = () => setIsLoading(false),
-			onChangeFilters = () => {
-				if (!Repository.isAutoLoad) {
-					Repository.reload();
-				}
-			},
-			onChangeSorters = () => {
-				if (!Repository.isAutoLoad) {
-					Repository.reload();
-				}
-			};
-
+			setFalse = () => setIsLoading(false);
+		
 		Repository.on('beforeLoad', setTrue);
 		Repository.on('load', setFalse);
 		Repository.ons(['changePage', 'changePageSize',], deselectAll);
 		Repository.ons(['changeData', 'change'], buildAndSetTreeNodeData);
-		Repository.on('changeFilters', onChangeFilters);
-		Repository.on('changeSorters', onChangeSorters);
-
+		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', onChangeFilters);
-			Repository.off('changeSorters', onChangeSorters);
+			Repository.off('changeFilters', reloadTree);
+			Repository.off('changeSorters', reloadTree);
 		};
 	}, []);
 
@@ -1011,7 +1035,7 @@ export function Tree(props) {
 	if (!isReady) {
 		return null;
 	}
-	const treeNodes = renderAllTreeNodes();
+	const treeNodes = renderTreeNodes(treeNodeData);
 
 	// headers & footers
 	let treeFooterComponent = null;
@@ -1044,11 +1068,11 @@ export function Tree(props) {
 					{treeFooterComponent}
 				</Column>
 
-				{/* <Modal
+				<Modal
 					isOpen={isSearchModalShown}
 					onClose={() => setIsSearchModalShown(false)}
 				>
-					<Column bg="#fff" w={500}>
+					<Column bg="#fff" w={300}>
 						<FormPanel
 							title="Choose Tree Node"
 							instructions="Multiple tree nodes matched your search. Please select which one to show."
@@ -1073,32 +1097,43 @@ export function Tree(props) {
 								setIsSearchModalShown(false);
 							}}
 							onSave={(data, e) => {
-
-								const node_id = data.node_id; // NOT SURE THIS IS CORRECT!
-
-								if (isMultipleHits) {
-									// Tell the server which one you want and get it, loading all children necessary to get there
-									
-									
-									
-								} else {
-									// Show the path based on local data
-									const
-										treeNode = getTreeNodeByNodeId(node_id),
-										path = getPathByTreeNode(treeNode);
-									expandPath(path);
-								}
+								const
+									treeNode = _.find(searchResults, (item) => {
+										return item.id === data.node_id;
+									}),
+									path = treeNode.path;
+								expandPath(path);
 
 								// Close the modal
 								setIsSearchModalShown(false);
 							}}
 						/>
 					</Column>
-				</Modal> */}
+				</Modal>
 			</>;
 
 }
 
+export const Tree = withAlert(
+									withEvents(
+										withData(
+											// withMultiSelection(
+												withSelection(
+													// withSideEditor(
+														withFilters(
+															// withPresetButtons(
+																withContextMenu(
+																	Tree
+																)
+															// )
+														)
+													// )
+												)
+											// )
+										)
+									)
+								);
+
 export const SideTreeEditor = withAlert(
 									withEvents(
 										withData(
@@ -1139,4 +1174,4 @@ export const WindowedTreeEditor = withAlert(
 									)
 								);
 
-export default WindowedTreeEditor;
+export default Tree;

package/src/Components/Tree/TreeNode.js

@@ -3,6 +3,7 @@ import {
 	Box,
 	Icon,
 	Row,
+	Spinner,
 	Text,
 } from 'native-base';
 import {
@@ -17,7 +18,7 @@ import _ from 'lodash';
 
 export default function TreeNode(props) {
 	const {
-			nodeProps,
+			nodeProps = {},
 			bg,
 			datum,
 			onToggle,
@@ -27,6 +28,7 @@ export default function TreeNode(props) {
 		item = datum.item,
 		isPhantom = item.isPhantom,
 		isExpanded = datum.isExpanded,
+		isLoading = datum.isLoading,
 		hasChildren = item.hasChildren,
 		depth = item.depth,
 		text = datum.text,
@@ -45,11 +47,12 @@ export default function TreeNode(props) {
 					{...nodeProps}
 					bg={bg}
 					key={hash}
-					pl={(depth * 10) + 'px'}
 				>
 					{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
 					
-					{hasChildren ? <IconButton icon={icon} onPress={() => onToggle(datum)} /> : <Icon as={icon} />}
+					{isLoading ? 
+						<Spinner px={2} /> : 
+						(hasChildren ? <IconButton icon={icon} onPress={() => onToggle(datum)} /> : <Icon as={icon} px={2} />)}
 
 					<Text
 						overflow="hidden"
@@ -77,6 +80,7 @@ export default function TreeNode(props) {
 		text,
 		icon,
 		onToggle,
+		isLoading,
 	]);
 }