@onehat/ui 0.2.69 → 0.2.70

package/package.json

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

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/Tree/Tree.js

@@ -19,6 +19,7 @@ import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
 } from '../../Constants/Tree.js';
+import sleep from '@onehat/ui/src/Functions/sleep.js';
 import * as colourMixer from '@k-renwick/colour-mixer'
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
@@ -38,7 +39,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 +52,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 +64,15 @@ 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;
 			},
 			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 +81,7 @@ export function Tree(props) {
 						icon = FolderClosed;
 					}
 				} else {
-					icon = Circle;
+					icon = Dot;
 				}
 				return icon;
 			},
@@ -169,6 +146,10 @@ export function Tree(props) {
 		[dragNodeIx, setDragNodeIx] = useState(),
 		[treeSearchValue, setTreeSearchValue] = useState(''),
 		onNodeClick = (item, e) => {
+			if (!setSelection) {
+				return;
+			}
+
 			const
 				{
 					shiftKey,
@@ -268,10 +249,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 +306,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 +315,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 +374,11 @@ export function Tree(props) {
 								e.preventDefault();
 							}
 							if (isReorderMode) {
-								return
+								return;
+							}
+
+							if (!setSelection) {
+								return;
 							}
 							
 							// context menu
@@ -450,78 +442,87 @@ export function Tree(props) {
 					</Pressable>;
 		},
 		renderTreeNodes = (data) => {
-			const nodes = [];
-			_.each(data, (datum) => {
-				nodes.push(renderTreeNode(datum));
-			});
-			return nodes;
-		},
-		renderAllTreeNodes = () => {
 			let nodes = [];
-			_.each(treeNodeData, (datum) => {
+			_.each(data, (datum) => {
 				const node = renderTreeNode(datum);
-				if (_.isEmpty(node)) {
-					return;
-				}
-				
 				nodes.push(node);
 
-				if (!datum.isExpanded) {
-					return;
+				if (datum.children.length && datum.isExpanded) {
+					const childTreeNodes = renderTreeNodes(datum.children); // recursion
+					nodes = nodes.concat(childTreeNodes);
 				}
-
-				if (_.isEmpty(datum.children)) {
-					return;
-				}
-
-				const children = renderTreeNodes(datum.children);
-				if (_.isEmpty(children)) {
-					return;
-				}
-
-				nodes = nodes.concat(children);
 			});
 			return nodes;
 		},
+		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;
+				}
+			});
+			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);
+		},
 
 		// 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 +530,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
+			if (!isMultipleHits) {
+				path = found[0].path;
 				expandPath(path);
+				return;
 			}
+
+			setSearchFormData(searchFormData);
+			setIsSearchModalShown(true);
 		},
 		findTreeNodesByText = (text) => {
 			// Helper for onSearchTree
@@ -624,14 +615,12 @@ export function Tree(props) {
 			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
@@ -649,6 +638,13 @@ export function Tree(props) {
 				currentDatum = _.find(currentLevelData, (treeNodeDatum) => {
 					return treeNodeDatum.item.id === id; 
 				});
+
+				if (!currentDatum) {
+					// datum is not currently loaded, so load it
+
+					// LEFT OFF HERE
+					debugger;
+				}
 				
 				currentNode = currentDatum.item;
 				
@@ -935,7 +931,7 @@ export function Tree(props) {
 			let rootNodes;
 			if (Repository) {
 				if (!Repository.areRootNodesLoaded) {
-					rootNodes = await Repository.getRootNodes(true, 1, getAdditionalParams);
+					rootNodes = await Repository.getRootNodes(1);
 				}
 			} else {
 				// TODO: Make this work for data array
@@ -946,7 +942,15 @@ export function Tree(props) {
 			setTreeNodeData(treeNodeData);
 		}
 
+		function reloadTreeData() {
+			Repository.areRootNodesLoaded = false;
+			return buildAndSetTreeNodeData();
+		}
+
 		if (!isReady) {
+			if (Repository) {
+				Repository.setBaseParams(extraParams);
+			}
 			(async () => {
 				await buildAndSetTreeNodeData();
 				setIsReady(true);
@@ -956,29 +960,18 @@ 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', reloadTreeData);
+		Repository.on('changeSorters', reloadTreeData);
 
 		return () => {
 			Repository.off('beforeLoad', setTrue);
@@ -1011,7 +1004,7 @@ export function Tree(props) {
 	if (!isReady) {
 		return null;
 	}
-	const treeNodes = renderAllTreeNodes();
+	const treeNodes = renderTreeNodes(treeNodeData);
 
 	// headers & footers
 	let treeFooterComponent = null;

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,
 	]);
 }