@onehat/ui 0.2.68 → 0.2.70

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.68",
+	"version": "0.2.70",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -25,7 +25,7 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.18.1",
+		"@onehat/data": "^1.18.7",
 		"@hookform/resolvers": "^3.1.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"js-cookie": "^3.0.5",

package/src/Components/Grid/Grid.js

@@ -881,7 +881,8 @@ export const WindowedGridEditor = withAlert(
 															withPresetButtons(
 																withContextMenu(
 																	Grid
-																)
+																),
+																true // isGrid
 															)
 														)
 													)
@@ -901,7 +902,8 @@ export const InlineGridEditor = withAlert(
 															withContextMenu(
 																withFilters(
 																	Grid
-																)
+																),
+																true // isGrid
 															)
 														)
 													)

package/src/Components/Hoc/withPresetButtons.js

@@ -22,7 +22,7 @@ const presetButtons = [
 	// 'print',
 ];
 
-export default function withPresetButtons(WrappedComponent) {
+export default function withPresetButtons(WrappedComponent, isGrid = false) {
 	return (props) => {
 		const {
 				// extract and pass
@@ -37,10 +37,10 @@ export default function withPresetButtons(WrappedComponent) {
 				disableAdd = false,
 				disableEdit = false,
 				disableDelete = false,
-				disableView = false,
-				disableCopy = false,
-				disableDuplicate = false,
-				disablePrint = false,
+				disableView = !isGrid,
+				disableCopy = !isGrid,
+				disableDuplicate = !isGrid,
+				disablePrint = !isGrid,
 
 				// withEditor
 				userCanEdit = true,

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,54 +52,27 @@ 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 node +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 root+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?
 // Maybe if Repository is not AjaxRepository, everything needs to be present at once!
 
-
-// isRootVisible
-
 //////////////////////
 //////////////////////
 
 
-
-
-
-
 export function Tree(props) {
 	const {
-			isRootVisible = true,
-			getAdditionalParams = () => { // URL params needed to get nodes from server (e.g, { venue_id: 1, getEquipment: true, getRentalEquipment: false, }), in addition to filters.
-				return {};
-			},
+			areRootsVisible = true,
+			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) {
@@ -107,11 +81,11 @@ export function Tree(props) {
 						icon = FolderClosed;
 					}
 				} else {
-					icon = Circle;
+					icon = Dot;
 				}
 				return icon;
 			},
-			nodeProps = (item) => {
+			getNodeProps = (item) => {
 				return {};
 			},
 			noneFoundText,
@@ -170,7 +144,12 @@ export function Tree(props) {
 		[searchFormData, setSearchFormData] = useState([]),
 		[dragNodeSlot, setDragNodeSlot] = useState(null),
 		[dragNodeIx, setDragNodeIx] = useState(),
+		[treeSearchValue, setTreeSearchValue] = useState(''),
 		onNodeClick = (item, e) => {
+			if (!setSelection) {
+				return;
+			}
+
 			const
 				{
 					shiftKey,
@@ -243,13 +222,12 @@ export function Tree(props) {
 		getHeaderToolbarItems = () => {
 			const
 				buttons = [
-					
 					{
 						key: 'searchBtn',
 						text: 'Search tree',
 						handler: onSearchTree,
 						icon: MagnifyingGlass,
-						isDisabled: false,
+						isDisabled: !treeSearchValue.length,
 					},
 					{
 						key: 'collapseBtn',
@@ -262,7 +240,7 @@ export function Tree(props) {
 			if (canNodesReorder) {
 				buttons.push({
 					key: 'reorderBtn',
-					text: 'Reorder tree',
+					text: 'Enter reorder mode',
 					handler: () => setIsReorderMode(!isReorderMode),
 					icon: isReorderMode ? NoReorderRows : ReorderRows,
 					isDisabled: false,
@@ -271,10 +249,16 @@ 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"
-				onChangeValue={onSearchTree}
+				placeholder="Find tree node"
+				onChangeText={(val) => setTreeSearchValue(val)}
+				onKeyPress={(e, value) => {
+					if (e.key === 'Enter') {
+						onSearchTree(value);
+					}
+				}}
+				value={treeSearchValue}
 				autoSubmit={false}
 			/>);
 
@@ -292,11 +276,12 @@ export function Tree(props) {
 					mx: 1,
 					px: 3,
 				},
-				iconProps = {
+				_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,
@@ -305,16 +290,11 @@ export function Tree(props) {
 					icon = null,
 					isDisabled = false,
 				} = config;
-			if (icon) {
-				const thisIconProps = {
-					color: isDisabled ? styles.TREE_TOOLBAR_ITEMS_DISABLED_COLOR : styles.TREE_TOOLBAR_ITEMS_COLOR,
-				};
-				icon = React.cloneElement(icon, {...iconProps, ...thisIconProps});
-			}
 			return <IconButton
 						key={key || ix}
 						onPress={handler}
 						icon={icon}
+						_icon={_icon}
 						isDisabled={isDisabled}
 						tooltip={text}
 						{...iconButtonProps}
@@ -326,16 +306,17 @@ export function Tree(props) {
 			// renderTreeNode uses this to render the nodes.
 			const
 				isRoot = treeNode.isRoot,
-				isLeaf = !treeNode.hasChildren,
+				children = buildTreeNodeData(treeNode.children), // recursively get data for children
 				datum = {
 					item: treeNode,
 					text: getNodeText(treeNode),
-					iconCollapsed: isLeaf ? null : getNodeIcon(treeNode, false),
-					iconExpanded: isLeaf ? null : getNodeIcon(treeNode, true),
-					iconLeaf: isLeaf ? getNodeIcon(treeNode) : null,
+					iconCollapsed: getNodeIcon(treeNode, false),
+					iconExpanded: getNodeIcon(treeNode, true),
+					iconLeaf: getNodeIcon(treeNode),
 					isExpanded: isRoot, // all non-root treeNodes are not expanded by default
-					isVisible: isRoot ? isRootVisible : true,
-					children: buildTreeNodeData(treeNode.children), // recursively get data for children
+					isVisible: isRoot ? areRootsVisible : true,
+					isLoading: false,
+					children,
 				};
 
 			return datum;
@@ -348,7 +329,9 @@ export function Tree(props) {
 			return data;
 		},
 		renderTreeNode = (datum) => {
-			const item = datum.item;
+			const
+				item = datum.item,
+				depth = item.depth;
 			if (item.isDestroyed) {
 				return null;
 			}
@@ -391,7 +374,11 @@ export function Tree(props) {
 								e.preventDefault();
 							}
 							if (isReorderMode) {
-								return
+								return;
+							}
+
+							if (!setSelection) {
+								return;
 							}
 							
 							// context menu
@@ -402,7 +389,7 @@ export function Tree(props) {
 							}
 						}}
 						flexDirection="row"
-						flexGrow={1}
+						ml={((areRootsVisible ? depth : depth -1) * 20) + 'px'}
 					>
 						{({
 							isHovered,
@@ -455,122 +442,125 @@ export function Tree(props) {
 					</Pressable>;
 		},
 		renderTreeNodes = (data) => {
-			const nodes = [];
+			let nodes = [];
 			_.each(data, (datum) => {
-				nodes.push(renderTreeNode(datum));
-			});
-			return nodes;
-		},
-		renderAllTreeNodes = () => {
-			const nodes = [];
-			_.each(treeNodeData, (datum) => {
 				const node = renderTreeNode(datum);
-				if (_.isEmpty(node)) {
-					return;
-				}
-				
 				nodes.push(node);
 
-				if (_.isEmpty(datum.children)) {
-					return;
+				if (datum.children.length && datum.isExpanded) {
+					const childTreeNodes = renderTreeNodes(datum.children); // recursion
+					nodes = nodes.concat(childTreeNodes);
 				}
-
-				const children = renderTreeNodes(datum.children);
-				if (_.isEmpty(children)) {
-					return;
-				}
-
-				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.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 collapseChildren(children) {
-				_.each(children, (child) => {
-					child.isExpanded = true;
-					if (!_.isEmpty(child.children)) {
-						collapseChildren(child.children);
-					}
-				});
-			}
-
-			collapseChildren(newTreeNodeData);
+			collapseNodes(newTreeNodeData);
 
 			if (setNewTreeNodeData) {
 				setTreeNodeData(newTreeNodeData);
 			}
 			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
@@ -625,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
@@ -650,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 +930,9 @@ export function Tree(props) {
 
 			let rootNodes;
 			if (Repository) {
-				rootNodes = await Repository.getRootNodes(true, 1, getAdditionalParams);
+				if (!Repository.areRootNodesLoaded) {
+					rootNodes = await Repository.getRootNodes(1);
+				}
 			} else {
 				// TODO: Make this work for data array
 
@@ -945,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);
@@ -955,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);
@@ -1004,15 +998,13 @@ export function Tree(props) {
 	}, [selectorId, selectorSelected]);
 
 	const
-		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), []),
-		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isReorderMode]);
+		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [treeSearchValue, treeNodeData]),
+		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isReorderMode, treeNodeData]);
 
 	if (!isReady) {
 		return null;
 	}
-
-	// Actual TreeNodes
-	const treeNodes = renderAllTreeNodes();
+	const treeNodes = renderTreeNodes(treeNodeData);
 
 	// headers & footers
 	let treeFooterComponent = null;
@@ -1031,21 +1023,21 @@ export function Tree(props) {
 					w="100%"
 				>
 					{topToolbar}
-					{headerToolbarItemComponents}
+					{headerToolbarItemComponents?.length && <Row>{headerToolbarItemComponents}</Row>}
 
-					<Column w="100%" flex={1} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
+					<Column w="100%" flex={1} p={2} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
 						if (!isReorderMode) {
 							deselectAll();
 						}
 					}}>
-						{!treeNodes.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
+						{!treeNodes?.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
 							treeNodes}
 					</Column>
 
 					{treeFooterComponent}
 				</Column>
 
-				<Modal
+				{/* <Modal
 					isOpen={isSearchModalShown}
 					onClose={() => setIsSearchModalShown(false)}
 				>
@@ -1095,7 +1087,7 @@ export function Tree(props) {
 							}}
 						/>
 					</Column>
-				</Modal>
+				</Modal> */}
 			</>;
 
 }

package/src/Components/Tree/TreeNode.js

@@ -1,7 +1,9 @@
 import { useState, useMemo, } from 'react';
 import {
 	Box,
+	Icon,
 	Row,
+	Spinner,
 	Text,
 } from 'native-base';
 import {
@@ -16,24 +18,26 @@ import _ from 'lodash';
 
 export default function TreeNode(props) {
 	const {
-			nodeProps,
+			nodeProps = {},
 			bg,
 			datum,
 			onToggle,
+			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
 		item = datum.item,
 		isPhantom = item.isPhantom,
 		isExpanded = datum.isExpanded,
-		hasChildren = datum.hasChildren,
-		depth = datum.depth,
+		isLoading = datum.isLoading,
+		hasChildren = item.hasChildren,
+		depth = item.depth,
 		text = datum.text,
 		iconCollapsed = datum.iconCollapsed,
 		iconExpanded = datum.iconExpanded,
 		iconLeaf = datum.iconLeaf,
 		hash = item?.hash || item;
 
-	const icon = hasChildren ? (isExpanded ? iconCollapsed : iconExpanded) : iconLeaf;
+	const icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf;
 
 	return useMemo(() => {
 		
@@ -43,17 +47,14 @@ 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} />}
 					
-					<IconButton
-						icon={icon}
-						onPress={onToggle}
-					/>
+					{isLoading ? 
+						<Spinner px={2} /> : 
+						(hasChildren ? <IconButton icon={icon} onPress={() => onToggle(datum)} /> : <Icon as={icon} px={2} />)}
 
 					<Text
-						key={key}
 						overflow="hidden"
 						textOverflow="ellipsis"
 						alignSelf="center"
@@ -79,6 +80,7 @@ export default function TreeNode(props) {
 		text,
 		icon,
 		onToggle,
+		isLoading,
 	]);
 }