@onehat/ui 0.3.380 → 0.4.0

package/src/Components/Tree/Tree.js

@@ -1,14 +1,10 @@
 import { useState, useEffect, useRef, useMemo, } from 'react';
 import {
-	Column,
-	FlatList,
-	Modal,
+	HStack,
 	Pressable,
-	Icon,
-	Row,
 	ScrollView,
-	Text,
-} from 'native-base';
+	VStack,
+} from '../Gluestack';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
@@ -24,7 +20,6 @@ import {
 	EXPANDED,
 	LEAF,
 } from '../../Constants/Tree.js';
-import * as colourMixer from '@k-renwick/colour-mixer'
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import withContextMenu from '../Hoc/withContextMenu.js';
@@ -34,6 +29,7 @@ import withData from '../Hoc/withData.js';
 import withEvents from '../Hoc/withEvents.js';
 import withSideEditor from '../Hoc/withSideEditor.js';
 import withFilters from '../Hoc/withFilters.js';
+import withModal from '../Hoc/withModal.js';
 import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withPresetButtons from '../Hoc/withPresetButtons.js';
 import withPermissions from '../Hoc/withPermissions.js';
@@ -42,8 +38,8 @@ import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
 import inArray from '../../Functions/inArray.js';
 import testProps from '../../Functions/testProps.js';
-import nbToRgb from '../../Functions/nbToRgb.js';
-import ReloadTreeButton from '../Buttons/ReloadTreeButton.js';
+import CenterBox from '../Layout/CenterBox.js';
+import ReloadButton from '../Buttons/ReloadButton.js';
 import TreeNode, { DraggableTreeNode } from './TreeNode.js';
 import FormPanel from '../Panel/FormPanel.js';
 import Input from '../Form/Field/Input.js';
@@ -63,7 +59,12 @@ import Loading from '../Messages/Loading.js';
 import Unauthorized from '../Messages/Unauthorized.js';
 import _ from 'lodash';
 
-const DEPTH_INDENT_PX = 25;
+const
+	DEPTH_INDENT_PX = 25,
+	SIMULATED_CLICK = 0,
+	SINGLE_CLICK = 1,
+	DOUBLE_CLICK = 2,
+	TRIPLE_CLICK = 3;
 
 function TreeComponent(props) {
 	const {
@@ -121,6 +122,10 @@ function TreeComponent(props) {
 			alert,
 			confirm,
 			showInfo,
+
+			// withModal
+			showModal,
+			hideModal,
 		
 			// withEditor
 			onAdd,
@@ -166,7 +171,6 @@ function TreeComponent(props) {
 		treeNodeData = useRef(),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
-		[isModalShown, setIsModalShown] = useState(false),
 		[rowToDatumMap, setRowToDatumMap] = useState({}),
 		[searchResults, setSearchResults] = useState([]),
 		[searchFormData, setSearchFormData] = useState([]),
@@ -288,8 +292,6 @@ function TreeComponent(props) {
 
 			// Update the datum with the new entity
 			return onAfterEdit(entities);
-			
-
 		},
 		onBeforeEditSave = (entities) => {
 			onBeforeSave(entities);
@@ -417,8 +419,52 @@ function TreeComponent(props) {
 			});
 			setSearchFormData(searchFormData);
 			setSearchResults(found);
-			setIsModalShown(true);
+			showChooseTreeNode();
 		},
+		showChooseTreeNode = () => {
+			showModal({
+				body: <VStack className="bg-white w-[300px]">
+						<FormPanel
+							_panel={{ 
+								title: 'Choose Tree Node',
+							}}
+							instructions="Multiple tree nodes matched your search. Please select which one to show."
+							_form={{ 
+								flex: 1,
+								items: [
+									{
+										type: 'Column',
+										flex: 1,
+										items: [
+											{
+												key: 'node_id',
+												name: 'node_id',
+												type: 'Combo',
+												label: 'Tree Node',
+												data: searchFormData,
+											}
+										],
+									},
+								],
+								onCancel: (e) => {
+									setHighlitedDatum(null);
+									hideModal();
+								},
+								onSave: (data, e) => {
+									const
+										treeNode = _.find(searchResults, (item) => {
+											return item.id === data.node_id;
+										}),
+										cPath = treeNode.cPath;
+									expandPath(cPath);
+									hideModal();
+								},
+							}}
+						/>
+					</VStack>,
+				onCancel: hideModal,
+			});
+		};
 
 		// utilities
 		getNodeData = (id) => {
@@ -864,7 +910,7 @@ function TreeComponent(props) {
 
 			items.unshift(<Input // Add text input to beginning of header items
 				key="searchNodes"
-				flex={1}
+				className="flex-1"
 				placeholder="Find tree node"
 				onChangeText={(val) => setTreeSearchValue(val)}
 				onKeyPress={(e) => {
@@ -916,11 +962,11 @@ function TreeComponent(props) {
 								return
 							}
 							switch (e.detail) {
-								case 0: // simulated click
-								case 1: // single click
+								case SIMULATED_CLICK:
+								case SINGLE_CLICK:
 									onNodeClick(item, e); // sets selection
 									break;
-								case 2: // double click
+								case 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
 									}
@@ -939,7 +985,7 @@ function TreeComponent(props) {
 										onView();
 									}
 									break;
-								case 3: // triple click
+								case TRIPLE_CLICK:
 									break;
 								default:
 							}
@@ -960,38 +1006,21 @@ function TreeComponent(props) {
 							const selection = [item];
 							setSelection(selection);
 							if (onContextMenu) {
-								onContextMenu(item, e, selection, setSelection);
+								onContextMenu(item, e, selection);
 							}
 						}}
-						flexDirection="row"
-						ml={((areRootsVisible ? depth : depth -1) * DEPTH_INDENT_PX) + 'px'}
+						className={`
+							flex-row
+						`}
+						style={{
+							paddingLeft: (areRootsVisible ? depth : depth -1) * DEPTH_INDENT_PX,
+						}}
 					>
 						{({
-							isHovered,
-							isFocused,
-							isPressed,
+							hovered,
+							focused,
+							pressed,
 						}) => {
-							let bg = nodeProps.bg || styles.TREE_NODE_BG,
-								mixWith;
-							if (!isDragMode) {
-								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);
-								}
-							} else {
-
-							}
 							let WhichTreeNode = TreeNode,
 								dragProps = {};
 							if (canNodesReorder && isDragMode && !datum.item.isRoot) { // Can't drag root nodes
@@ -1006,18 +1035,18 @@ function TreeComponent(props) {
 									proxyParent: treeRef.current,
 									proxyPositionRelativeToParent: true,
 								};
-								nodeProps.width = '100%';
+								nodeProps.className = 'w-full';
 							}
 							
 							return <WhichTreeNode
-										nodeProps={nodeProps}
-										{...dragProps}
-										bg={bg}
 										datum={datum}
+										nodeProps={nodeProps}
 										onToggle={onToggle}
+										isSelected={isSelected}
+										isHovered={hovered}
 										isDragMode={isDragMode}
 										isHighlighted={highlitedDatum === datum}
-										isSelected={isSelected}
+										{...dragProps}
 
 										// fields={fields}
 									/>;
@@ -1205,20 +1234,16 @@ function TreeComponent(props) {
 			})();
 			return () => {};
 		}
-
-		(async () => {
-			if (autoLoadRootNodes) {
-				await reloadTree();
-			}
-			setIsReady(true);
-		})();
-
 		
 		// set up @onehat/data repository
 		const
 			setTrue = () => setIsLoading(true),
 			setFalse = () => setIsLoading(false);
 		
+		if (Repository.isLoading) {
+			setTrue();
+		}
+		
 		Repository.on('beforeLoad', setTrue);
 		Repository.on('load', setFalse);
 		Repository.on('loadRootNodes', setFalse);
@@ -1227,6 +1252,13 @@ function TreeComponent(props) {
 		Repository.on('changeFilters', reloadTree);
 		Repository.on('changeSorters', reloadTree);
 
+		(async () => {
+			if (autoLoadRootNodes) {
+				await reloadTree();
+			}
+			setIsReady(true);
+		})();
+
 		return () => {
 			Repository.off('beforeLoad', setTrue);
 			Repository.off('load', setFalse);
@@ -1252,7 +1284,9 @@ function TreeComponent(props) {
 	}, [selectorId, selectorSelected]);
 
 	if (canUser && !canUser('view')) {
-		return <Unauthorized />;
+		return <CenterBox>
+					<Unauthorized />
+				</CenterBox>;
 	}
 
 	if (setWithEditListeners) {
@@ -1279,7 +1313,9 @@ function TreeComponent(props) {
 		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isDragMode, getTreeNodeData()]);
 
 	if (!isReady) {
-		return <Loading />;
+		return <CenterBox>
+					<Loading />
+				</CenterBox>;
 	}
 	
 	const treeNodes = renderTreeNodes(getTreeNodeData());
@@ -1295,103 +1331,64 @@ function TreeComponent(props) {
 									/>;
 		} else if (footerToolbarItemComponents.length) {
 			treeFooterComponent = <Toolbar>
-										<ReloadTreeButton Repository={Repository} self={self} />
+										<ReloadButton isTree={true} Repository={Repository} self={self} />
 										{footerToolbarItemComponents}
 									</Toolbar>;
 		}
 	}
 
-	const borderProps = {};
+	let className = `
+		Tree-VStack
+		flex-1
+		w-full
+		min-w-[300px]
+	`;
 	if (isDragMode) {
-		borderProps.borderWidth = isDragMode ? styles.REORDER_BORDER_WIDTH : 0;
-		borderProps.borderColor = isDragMode ? styles.REORDER_BORDER_COLOR : null;
-		borderProps.borderStyle = styles.REORDER_BORDER_STYLE;
+		className += `
+			${styles.GRID_REORDER_BORDER_COLOR}
+			${styles.GRID_REORDER_BORDER_WIDTH}
+			${styles.GRID_REORDER_BORDER_STYLE}
+		`;
 	} else {
-		borderProps.borderTopWidth = isLoading ? 2 : 1;
-		borderProps.borderTopColor = isLoading ? '#f00' : 'trueGray.300';
+		if (isLoading) {
+			className += ' border-t-2 border-[#f00]';
+		} else {
+			className += ' border-t-1 border-grey-300';
+		}
+	}
+	if (props.className) {
+		className += ' ' + props.className;
 	}
 
-	return <>
-				<Column
-					{...testProps(self)}
-					flex={1}
-					w="100%"
-				>
-					{topToolbar}
-
-					{headerToolbarItemComponents?.length && <Row>{headerToolbarItemComponents}</Row>}
-
-					<Column
-						ref={treeRef}
-						w="100%"
-						flex={1}
-						p={2}
-						bg="#fff"
-						{...borderProps}
-						onClick={() => {
-							if (!isDragMode) {
-								deselectAll();
-							}
-						}}
-					>
-						<ScrollView {...testProps('ScrollView')} flex={1} w="100%">
-							{!treeNodes?.length ? 
-								<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
-								treeNodes}
-						</ScrollView>
-					</Column>
-
-					{treeFooterComponent}
+	return <VStack
+				{...testProps(self)}
+				className={className}
+			>
+				{topToolbar}
 
-				</Column>
+				{headerToolbarItemComponents?.length && <HStack>{headerToolbarItemComponents}</HStack>}
 
-				<Modal
-					isOpen={isModalShown}
-					onClose={() => setIsModalShown(false)}
+				<VStack
+					ref={treeRef}
+					onClick={() => {
+						if (!isDragMode) {
+							deselectAll();
+						}
+					}}
+					className="Tree-deselector w-full flex-1 p-1 bg-white"
 				>
-					<Column bg="#fff" w={300}>
-						<FormPanel
-							_panel={{ 
-								title: 'Choose Tree Node',
-							}}
-							instructions="Multiple tree nodes matched your search. Please select which one to show."
-							_form={{ 
-								flex: 1,
-								items: [
-									{
-										type: 'Column',
-										flex: 1,
-										items: [
-											{
-												key: 'node_id',
-												name: 'node_id',
-												type: 'Combo',
-												label: 'Tree Node',
-												data: searchFormData,
-											}
-										],
-									},
-								],
-								onCancel: (e) => {
-									setHighlitedDatum(null);
-									setIsModalShown(false);
-								},
-								onSave: (data, e) => {
-									const
-										treeNode = _.find(searchResults, (item) => {
-											return item.id === data.node_id;
-										}),
-										cPath = treeNode.cPath;
-									expandPath(cPath);
-	
-									// Close the modal
-									setIsModalShown(false);
-								},
-							}}
-						/>
-					</Column>
-				</Modal>
-			</>;
+					<ScrollView {...testProps('ScrollView')} className="ScrollView flex-1 w-full">
+						{!treeNodes?.length ? 
+						<CenterBox>
+							<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} />
+						</CenterBox> :
+						treeNodes}
+					</ScrollView>
+				</VStack>
+
+				{treeFooterComponent}
+
+			</VStack>;
 
 }
 

package/src/Components/Tree/TreeNode.js

@@ -1,11 +1,12 @@
 import { useMemo, } from 'react';
 import {
 	Box,
+	HStack,
 	Icon,
-	Row,
 	Spinner,
-	Text,
-} from 'native-base';
+	TextNative,
+} from '../Gluestack';
+import * as colourMixer from '@k-renwick/colour-mixer';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -16,13 +17,14 @@ import _ from 'lodash';
 
 export default function TreeNode(props) {
 	const {
-			nodeProps = {},
-			bg,
 			datum,
+			nodeProps = {},
 			onToggle,
+			isSelected,
+			isHovered,
 			isDragMode,
 			isHighlighted,
-			isSelected,
+			bg,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
@@ -38,60 +40,97 @@ export default function TreeNode(props) {
 		iconLeaf = datum.iconLeaf,
 		hash = item?.hash || item;
 
-	const
-		icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf,
-		adjustedBg = isHighlighted ? styles.TREE_NODE_HIGHLIGHTED_BG : bg;
-
 	return useMemo(() => {
-		
-		return <Row
+		const icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf;
+		let bg = props.bg || styles.TREE_NODE_BG,
+			mixWith;
+		if (isSelected) {
+			if (isHovered) {
+				mixWith = styles.TREE_NODE_SELECTED_BG_HOVER;
+			} else {
+				mixWith = styles.TREE_NODE_SELECTED_BG;
+			}
+		} else if (isHovered) {
+			mixWith = styles.TREE_NODE_BG_HOVER;
+		}
+		if (isHighlighted) {
+			mixWith = styles.TREE_NODE_HIGHLIGHTED_BG;
+		}
+		if (mixWith) {
+			// const
+			// 	mixWithObj = gsToHex(mixWith),
+			// 	ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
+			// bg = colourMixer.blend(bg, ratio, mixWithObj.color);
+			bg = colourMixer.blend(bg, 0.5, mixWith);
+		}
+
+		let className = `
+			treenode
+			items-center
+			flex
+			flex-1
+			grow-1
+		`;
+		if (props.className) {
+			className += ' ' + props.className;
+		}
+	
+		return <HStack
 					{...testProps('node' + (isSelected ? '-selected' : ''))}
-					alignItems="center"
-					flexGrow={1}
 					{...nodeProps}
-					bg={adjustedBg}
 					key={hash}
+					className={className}
+					style={{
+						backgroundColor: bg,
+					}}
 				>
-					{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
+					{isPhantom && <Box t={0} l={0} className="absolute bg-[#f00] h-[2px] w-[2px]" />}
 					
 					{isLoading ? 
-						<Spinner px={2} /> : 
+						<Spinner className="px-2" /> : 
 						(hasChildren && !isDragMode ? 
 							<IconButton
+								{...testProps('expandBtn')}
 								icon={icon}
 								onPress={(e) => onToggle(datum, e)}
-								{...testProps('expandBtn')}
-							/> : <Icon as={icon} px={2} />)}
-					
-					<Text
-						overflow="hidden"
-						textOverflow="ellipsis"
-						alignSelf="center"
-						style={{ userSelect: 'none', }}
-						fontSize={styles.TREE_NODE_FONTSIZE}
-						px={styles.TREE_NODE_PX}
-						py={styles.TREE_NODE_PY}
+							/> : 
+							<Icon as={icon} className="ml-4 mr-1" />)}
+
+					<TextNative
 						numberOfLines={1}
 						ellipsizeMode="head"
-						{...propsToPass}
-					>{text}</Text>
+						// {...propsToPass}
+						className={`
+							treenode-text
+							self-center
+							overflow-hidden
+							flex
+							flex-1
+							text-ellipsis
+							${styles.TREE_NODE_PY}
+							${styles.TREE_NODE_PX}
+							${styles.TREE_NODE_FONTSIZE}
+						`}
+						style={{ userSelect: 'none', }}
+					>{text}</TextNative>
 
-				</Row>;
+				</HStack>;
 	}, [
 		nodeProps,
-		adjustedBg,
+		bg,
 		item,
-		isPhantom,
 		hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
+		isDragMode,
+		isHighlighted,
+		isSelected,
+		isPhantom,
 		isExpanded,
+		isLoading,
 		hasChildren,
 		depth,
 		text,
-		icon,
 		onToggle,
 		isLoading,
-		isDragMode,
-		isHighlighted,
 	]);
 }