@onehat/ui 0.3.377 → 0.3.380

package/package.json

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

package/src/Components/Tree/Tree.js

@@ -50,6 +50,7 @@ import Input from '../Form/Field/Input.js';
 import Xmark from '../Icons/Xmark.js';
 import Dot from '../Icons/Dot.js';
 import Collapse from '../Icons/Collapse.js';
+import Expand from '../Icons/Expand.js';
 import FolderClosed from '../Icons/FolderClosed.js';
 import FolderOpen from '../Icons/FolderOpen.js';
 import MagnifyingGlass from '../Icons/MagnifyingGlass.js';
@@ -334,36 +335,51 @@ function TreeComponent(props) {
 				buildRowToDatumMap();
 			}
 		},
-		onToggle = (datum) => {
+		onToggle = async (datum, e) => {
 			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();
+			const
+				isExpanded = !datum.isExpanded, // sets new state
+				isShiftKey = e.shiftKey; // hold down the shift key to load all children
+				
+			datum.isExpanded = isExpanded;
+
+			if (isExpanded) {
+				// opening
+				if (datum.item.repository?.isRemote && datum.item.hasChildren) {
+					if (isShiftKey) {
+						// load ALL children
+						await loadChildren(datum, 'all');
+						return;
+					} else if (!datum.item.areChildrenLoaded) {
+						// load only one level
+						await loadChildren(datum, 1);
+						return;
+					}
+				}
+			} else {
+				// closing
+				if (datumContainsSelection(datum)) {
+					deselectAll();
+				}
 			}
 			
 			forceUpdate();
-
 			buildRowToDatumMap();
 		},
-		onCollapseAll = (setNewTreeNodeData = true) => {
-			// Go through whole tree and collapse all nodes
+		onCollapseAll = () => {
 			const newTreeNodeData = _.clone(getTreeNodeData());
 			collapseNodes(newTreeNodeData);
-
-			if (setNewTreeNodeData) {
+			setTreeNodeData(newTreeNodeData);
+		},
+		onExpandAll = () => {
+			confirm('Are you sure you want to expand the whole tree? This may take a while.', async () => {
+				const newTreeNodeData = _.clone(getTreeNodeData());
+				await expandNodes(newTreeNodeData);
 				setTreeNodeData(newTreeNodeData);
-			}
-			buildRowToDatumMap();
-			return newTreeNodeData;
+			});
 		},
 		onSearchTree = async (q) => {
 			let found = [];
@@ -433,20 +449,20 @@ function TreeComponent(props) {
 			});
 			return found;
 		},
-		buildTreeNodeDatum = (treeNode) => {
+		buildTreeNodeDatum = (treeNode, defaultToExpanded = false) => {
 			// Build the data-representation of one node and its children,
 			// caching text & icon, keeping track of the state for whole tree
 			// renderTreeNode uses this to render the nodes.
 			const
 				isRoot = treeNode.isRoot,
-				children = buildTreeNodeData(treeNode.children), // recursively get data for children
+				children = buildTreeNodeData(treeNode.children, defaultToExpanded), // recursively get data for children
 				datum = {
 					item: treeNode,
 					text: getNodeText(treeNode),
 					iconCollapsed: getNodeIcon(COLLAPSED, treeNode),
 					iconExpanded: getNodeIcon(EXPANDED, treeNode),
 					iconLeaf: getNodeIcon(LEAF, treeNode),
-					isExpanded: isRoot, // all non-root treeNodes are collapsed by default
+					isExpanded: defaultToExpanded || isRoot, // all non-root treeNodes are collapsed by default
 					isVisible: isRoot ? areRootsVisible : true,
 					isLoading: false,
 					children,
@@ -454,10 +470,10 @@ function TreeComponent(props) {
 
 			return datum;
 		},
-		buildTreeNodeData = (treeNodes) => {
+		buildTreeNodeData = (treeNodes, defaultToExpanded = false) => {
 			const data = [];
 			_.each(treeNodes, (item) => {
-				data.push(buildTreeNodeDatum(item));
+				data.push(buildTreeNodeDatum(item, defaultToExpanded));
 			});
 			return data;
 		},
@@ -655,8 +671,19 @@ function TreeComponent(props) {
 			
 			try {
 
-				const children = await datum.item.loadChildren(depth);
-				datum.children = buildTreeNodeData(children);
+				let defaultToExpanded = false;
+				if (depth === 'all') {
+					defaultToExpanded = true;
+					depth = 9999;
+				}
+
+				const
+					depthChildren = await datum.item.loadChildren(depth),
+					directChildren = _.filter(depthChildren, (child) => { // narrow list to only direct descendants, so buildTreeNodeData can work correctly
+						return child.depth === datum.item.depth + 1;
+					});
+
+				datum.children = buildTreeNodeData(directChildren, defaultToExpanded);
 				datum.isExpanded = true;
 
 			} catch (err) {
@@ -685,6 +712,25 @@ function TreeComponent(props) {
 				}
 			});
 		},
+		expandNodes = async (nodes) => {
+
+			// load all children of nodes
+			for (const node of nodes) {
+				await loadChildren(node, 'all');
+			}
+
+			// expand them in UI
+			expandNodesRecursive(nodes);
+			buildRowToDatumMap();
+		},
+		expandNodesRecursive = (nodes) => {
+			_.each(nodes, (node) => {
+				node.isExpanded = true;
+				if (!_.isEmpty(node.children)) {
+					expandNodesRecursive(node.children);
+				}
+			});
+		},
 		expandPath = async (cPath, highlight = true) => {
 			// First, close the whole tree.
 			let newTreeNodeData = _.clone(getTreeNodeData());
@@ -789,12 +835,19 @@ function TreeComponent(props) {
 						isDisabled: !treeSearchValue.length,
 					},
 					{
-						key: 'collapseBtn',
+						key: 'collapseAllBtn',
 						text: 'Collapse whole tree',
 						handler: onCollapseAll,
 						icon: Collapse,
 						isDisabled: false,
 					},
+					{
+						key: 'expandAllBtn',
+						text: 'Expand whole tree',
+						handler: onExpandAll,
+						icon: Expand,
+						isDisabled: false,
+					},
 				];
 			if (canNodesReorder) {
 				buttons.push({

package/src/Components/Tree/TreeNode.js

@@ -56,8 +56,13 @@ export default function TreeNode(props) {
 					
 					{isLoading ? 
 						<Spinner px={2} /> : 
-						(hasChildren && !isDragMode ? <IconButton icon={icon} onPress={() => onToggle(datum)} {...testProps('expandBtn')} /> : <Icon as={icon} px={2} />)}
-
+						(hasChildren && !isDragMode ? 
+							<IconButton
+								icon={icon}
+								onPress={(e) => onToggle(datum, e)}
+								{...testProps('expandBtn')}
+							/> : <Icon as={icon} px={2} />)}
+					
 					<Text
 						overflow="hidden"
 						textOverflow="ellipsis"

package/src/Functions/getIconButtonFromConfig.js

@@ -31,7 +31,7 @@ export default function getIconButtonFromConfig(config, ix, parent) {
 				key={key || ix}
 				parent={parent}
 				reference={key || ix}
-				onPress={() => handler(parent)}
+				onPress={(e) => handler(parent, e)}
 				icon={icon}
 				_icon={_icon}
 				isDisabled={isDisabled}

package/src/Functions/getReport.js

@@ -9,7 +9,7 @@ import UiGlobals from '../UiGlobals.js';
 export default function getReport(args) {
 	const {
 			reportId,
-			data,
+			data = {},
 			reportType = REPORT_TYPES__EXCEL,
 			showReportHeaders = true,
 		} = args;