@onehat/ui 0.2.73 → 0.2.75

package/src/Components/Tree/Tree.js

@@ -32,6 +32,7 @@ import withPresetButtons from '../Hoc/withPresetButtons.js';
 import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
+import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
 import TreeNode, { ReorderableTreeNode } from './TreeNode.js';
@@ -51,19 +52,7 @@ 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!
-
-//////////////////////
-//////////////////////
-
-
-export function TreeComponent(props) {
+function TreeComponent(props) {
 	const {
 			areRootsVisible = true,
 			extraParams = {}, // Additional params to send with each request ( e.g. { order: 'Categories.name ASC' })
@@ -102,7 +91,7 @@ export function TreeComponent(props) {
 			additionalToolbarButtons = [],
 			reload = null, // Whenever this value changes after initial render, the tree will reload from scratch
 			parentIdIx,
-
+		
 			// withEditor
 			onAdd,
 			onEdit,
@@ -111,6 +100,7 @@ export function TreeComponent(props) {
 			onDuplicate,
 			onReset,
 			onContextMenu,
+			setWithEditListeners,
 
 			// withData
 			Repository,
@@ -140,16 +130,27 @@ export 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;
@@ -212,98 +213,137 @@ export function TreeComponent(props) {
 				}
 			}
 		},
-		onRefresh = () => {
-			if (!Repository) {
-				return;
-			}
-			const promise = Repository.reload();
-			if (promise) { // Some repository types don't use promises
-				promise.then(() => {
-					setIsLoading(false);
-					forceUpdate();
-				});
+		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);
 			}
 		},
-		getHeaderToolbarItems = () => {
+		onAfterAdd = async (entity) => {
+			// Expand the parent before showing the new node
 			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,
-				});
+				parent = entity.parent,
+				parentDatum = getNodeData(parent.id);
+
+			if (!parentDatum.isExpanded) {
+				parentDatum.isExpanded = true;
 			}
-			const items = _.map(buttons, getIconFromConfig);
 
-			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}
-			/>);
+			// Add the entity to the tree
+			const entityDatum = buildTreeNodeDatum(entity);
+			parentDatum.children.unshift(entityDatum);
+			forceUpdate();
+		},
+		onBeforeEditSave = (entities) => {
+			onBeforeSave(entities);
+		},
+		onAfterEdit = async (entities) => {
+			// Refresh the node's display
+			const
+				node = entities[0],
+				existingDatum = getNodeData(node.id), // TODO: Make this work for >1 entity
+				newDatum = buildTreeNodeDatum(node);
 
-			return items;
+			// copy the updated data to existingDatum
+			_.merge(existingDatum, newDatum);
+			existingDatum.isLoading = false;
+			forceUpdate();
 		},
-		getFooterToolbarItems = () => {
-			return _.map(additionalToolbarButtons, getIconFromConfig);
+		onBeforeDeleteSave = (entities) => {
+			onBeforeSave(entities);
 		},
-		getIconFromConfig = (config, ix) => {
+		onBeforeSave = (entities) => {
 			const
-				iconButtonProps = {
-					_hover: {
-						bg: 'trueGray.400',
-					},
-					mx: 1,
-					px: 3,
-				},
-				_icon = {
-					alignSelf: 'center',
-					size: styles.TREE_TOOLBAR_ITEMS_ICON_SIZE,
-					h: 20,
-					w: 20,
-					color: isDisabled ? styles.TREE_TOOLBAR_ITEMS_DISABLED_COLOR : styles.TREE_TOOLBAR_ITEMS_COLOR,
-				};
-			let {
-					key,
-					text,
-					handler,
-					icon = null,
-					isDisabled = false,
-				} = config;
-			return <IconButton
-						key={key || ix}
-						onPress={handler}
-						icon={icon}
-						_icon={_icon}
-						isDisabled={isDisabled}
-						tooltip={text}
-						{...iconButtonProps}
-					/>;
+				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;
+			}
+
+			datum.isExpanded = !datum.isExpanded;
+
+			if (datum.isExpanded && datum.item.repository?.isRemote && datum.item.hasChildren && !datum.item.areChildrenLoaded) {
+				loadChildren(datum, 1);
+				return;
+			}
+
+			if (!datum.isExpanded && datumContainsSelection(datum)) {
+				deselectAll();
+			}
+			
+			forceUpdate();
+		},
+		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,
@@ -318,7 +358,7 @@ export 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,
@@ -333,131 +373,56 @@ export 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 = [];
@@ -471,30 +436,6 @@ export 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!
@@ -544,37 +485,17 @@ export function TreeComponent(props) {
 		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 (!datum.isExpanded && datumContainsSelection(datum)) {
-				deselectAll();
-			}
-			
-			forceUpdate();
 		},
-		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? 
@@ -588,16 +509,6 @@ export 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;
@@ -606,61 +517,9 @@ export 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,
@@ -724,7 +583,185 @@ export 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,
@@ -999,16 +1036,12 @@ export 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);
 		};
@@ -1025,17 +1058,26 @@ export 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;
@@ -1061,7 +1103,7 @@ export function TreeComponent(props) {
 							deselectAll();
 						}
 					}}>
-						{!treeNodes?.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
+						{!treeNodes?.length ? <NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
 							treeNodes}
 					</Column>
 
@@ -1114,25 +1156,21 @@ export function TreeComponent(props) {
 
 }
 
-const Tree = withAlert(
-				withEvents(
-					withData(
-						// withMultiSelection(
-							withSelection(
-								// withSideEditor(
-									withFilters(
-										// withPresetButtons(
+export const Tree = withAlert(
+						withEvents(
+							withData(
+								// withMultiSelection(
+									withSelection(
+										withFilters(
 											withContextMenu(
 												TreeComponent
 											)
-										// )
+										)
 									)
 								// )
 							)
-						// )
-					)
-				)
-			);
+						)
+					);
 
 export const SideTreeEditor = withAlert(
 									withEvents(
@@ -1146,7 +1184,8 @@ export const SideTreeEditor = withAlert(
 																	TreeComponent
 																)
 															)
-														)
+														),
+														true // isTree
 													)
 												)
 											// )
@@ -1166,7 +1205,8 @@ export const WindowedTreeEditor = withAlert(
 																	TreeComponent
 																)
 															)
-														)
+														),
+														true // isTree
 													)
 												)
 											// )