@onehat/ui 0.2.67 → 0.2.69

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.67",
+	"version": "0.2.69",
 	"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/Container/Container.js

@@ -15,6 +15,7 @@ import {
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import Splitter from './Splitter.js';
+import _ from 'lodash';
 
 export default function Container(props) {
 	const {

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

@@ -60,14 +60,14 @@ import _ from 'lodash';
 //////////////////////
 
 // 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.
+// 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 root+1 again?
+// 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.
 
@@ -78,9 +78,6 @@ import _ from 'lodash';
 // How does this interface with Repository?
 // Maybe if Repository is not AjaxRepository, everything needs to be present at once!
 
-
-// isRootVisible
-
 //////////////////////
 //////////////////////
 
@@ -91,7 +88,7 @@ import _ from 'lodash';
 
 export function Tree(props) {
 	const {
-			isRootVisible = true,
+			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 {};
 			},
@@ -111,7 +108,7 @@ export function Tree(props) {
 				}
 				return icon;
 			},
-			nodeProps = (item) => {
+			getNodeProps = (item) => {
 				return {};
 			},
 			noneFoundText,
@@ -170,6 +167,7 @@ export function Tree(props) {
 		[searchFormData, setSearchFormData] = useState([]),
 		[dragNodeSlot, setDragNodeSlot] = useState(null),
 		[dragNodeIx, setDragNodeIx] = useState(),
+		[treeSearchValue, setTreeSearchValue] = useState(''),
 		onNodeClick = (item, e) => {
 			const
 				{
@@ -243,13 +241,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 +259,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,
@@ -274,7 +271,8 @@ export function Tree(props) {
 				key="searchTree"
 				flex={1}
 				placeholder="Search all tree nodes"
-				onChangeValue={onSearchTree}
+				onChangeText={(val) => setTreeSearchValue(val)}
+				value={treeSearchValue}
 				autoSubmit={false}
 			/>);
 
@@ -292,11 +290,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 +304,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,15 +320,14 @@ export function Tree(props) {
 			// renderTreeNode uses this to render the nodes.
 			const
 				isRoot = treeNode.isRoot,
-				isLeaf = !treeNode.hasChildren,
 				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,
+					isVisible: isRoot ? areRootsVisible : true,
 					children: buildTreeNodeData(treeNode.children), // recursively get data for children
 				};
 
@@ -348,7 +341,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;
 			}
@@ -402,7 +397,7 @@ export function Tree(props) {
 							}
 						}}
 						flexDirection="row"
-						flexGrow={1}
+						ml={((areRootsVisible ? depth : depth -1) * 20) + 'px'}
 					>
 						{({
 							isHovered,
@@ -462,7 +457,7 @@ export function Tree(props) {
 			return nodes;
 		},
 		renderAllTreeNodes = () => {
-			const nodes = [];
+			let nodes = [];
 			_.each(treeNodeData, (datum) => {
 				const node = renderTreeNode(datum);
 				if (_.isEmpty(node)) {
@@ -471,6 +466,10 @@ export function Tree(props) {
 				
 				nodes.push(node);
 
+				if (!datum.isExpanded) {
+					return;
+				}
+
 				if (_.isEmpty(datum.children)) {
 					return;
 				}
@@ -480,7 +479,7 @@ export function Tree(props) {
 					return;
 				}
 
-				nodes.concat(children);
+				nodes = nodes.concat(children);
 			});
 			return nodes;
 		},
@@ -490,7 +489,7 @@ export function Tree(props) {
 			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.isChildrenLoaded) {
 				loadChildren(datum, 1);
 			}
 		},
@@ -514,16 +513,16 @@ export function Tree(props) {
 			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);
+			function collapseNodes(nodes) {
+				_.each(nodes, (node) => {
+					node.isExpanded = false;
+					if (!_.isEmpty(node.children)) {
+						collapseNodes(node.children);
 					}
 				});
 			}
 
-			collapseChildren(newTreeNodeData);
+			collapseNodes(newTreeNodeData);
 
 			if (setNewTreeNodeData) {
 				setTreeNodeData(newTreeNodeData);
@@ -935,7 +934,9 @@ export function Tree(props) {
 
 			let rootNodes;
 			if (Repository) {
-				rootNodes = await Repository.getRootNodes(true, 1, getAdditionalParams);
+				if (!Repository.areRootNodesLoaded) {
+					rootNodes = await Repository.getRootNodes(true, 1, getAdditionalParams);
+				}
 			} else {
 				// TODO: Make this work for data array
 
@@ -1004,14 +1005,12 @@ 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();
 
 	// headers & footers
@@ -1031,21 +1030,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 +1094,7 @@ export function Tree(props) {
 							}}
 						/>
 					</Column>
-				</Modal>
+				</Modal> */}
 			</>;
 
 }

package/src/Components/Tree/TreeNode.js

@@ -1,6 +1,7 @@
 import { useState, useMemo, } from 'react';
 import {
 	Box,
+	Icon,
 	Row,
 	Text,
 } from 'native-base';
@@ -20,20 +21,21 @@ export default function TreeNode(props) {
 			bg,
 			datum,
 			onToggle,
+			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
 		item = datum.item,
 		isPhantom = item.isPhantom,
 		isExpanded = datum.isExpanded,
-		hasChildren = datum.hasChildren,
-		depth = datum.depth,
+		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(() => {
 		
@@ -47,13 +49,9 @@ export default function TreeNode(props) {
 				>
 					{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
 					
-					<IconButton
-						icon={icon}
-						onPress={onToggle}
-					/>
+					{hasChildren ? <IconButton icon={icon} onPress={() => onToggle(datum)} /> : <Icon as={icon} />}
 
 					<Text
-						key={key}
 						overflow="hidden"
 						textOverflow="ellipsis"
 						alignSelf="center"