@onehat/ui 0.3.274 → 0.3.277

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.274",
+	"version": "0.3.277",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -30,7 +30,7 @@
 		"@gluestack-ui/themed": "^1.1.26",
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
-		"@onehat/data": "^1.20.0",
+		"@onehat/data": "^1.21.0",
 		"@reduxjs/toolkit": "^1.9.5",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",

package/src/Components/Form/Field/CKEditor/CKEditor.js

@@ -29,6 +29,7 @@ const
 		useEffect(() => {
 			// Set up debounce fn
 			// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
+			debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
 			debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
 		}, [setValue]);
 

package/src/Components/Form/Field/Combo/Combo.js

@@ -237,7 +237,7 @@ export function ComboComponent(props) {
 					}
 					
 					if (_.isEmpty(gridSelection)) {
-						confirm('You have nothing selected in the dropdown menu. Clear value?', doIt, true);
+						hideMenu();
 						return;
 					}
 
@@ -304,7 +304,11 @@ export function ComboComponent(props) {
 				return;
 			}
 			clearGridFilters();
-			showMenu();
+			if (isMenuShown) {
+				hideMenu();
+			} else {
+				showMenu();
+			}
 		},
 		onTriggerBlur = (e) => {
 			if (!isMenuShown) {

package/src/Components/Form/Field/Date.js

@@ -50,10 +50,15 @@ export function DateElement(props) {
 			isDisabled = false,
 			tooltipPlacement = 'bottom',
 			placeholder = 'Choose a date.',
+			testID,
+
+			// withComponent
+			self,
 
 			// withValue
 			value,
 			setValue,
+			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
 		Datetime = getComponentFromType('Datetime'),
@@ -97,9 +102,6 @@ export function DateElement(props) {
 			return value;
 		},
 		showPicker = () => {
-			if (isPickerShown) {
-				return;
-			}
 			if (UiGlobals.mode === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
 				// For web, ensure it's in the proper place
 				const 
@@ -124,9 +126,6 @@ export function DateElement(props) {
 			setIsPickerShown(true);
 		},
 		hidePicker = () => {
-			if (!isPickerShown) {
-				return;
-			}
 			setIsPickerShown(false);
 		},
 		togglePicker = () => {
@@ -165,7 +164,7 @@ export function DateElement(props) {
 			}
 			showPicker();
 		},
-		onInputChangeText = (value) => {
+		onInputChangeValue = (value) => {
 			if (disableDirectEntry) {
 				return;
 			}
@@ -174,6 +173,7 @@ export function DateElement(props) {
 				setTextInputValue('');
 				return;
 			}
+
 			value = formatByMode(value);
 			
 			if (value !== 'Invalid date') {
@@ -358,11 +358,11 @@ export function DateElement(props) {
 									>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</Text>
 								</Pressable> :
 								<Input
-									{...testProps('input')}
+									testID={testID}
 									ref={inputRef}
 									value={textInputValue}
 									// setValue={onInputSetValue}
-									onChangeValue={onInputChangeText}
+									onChangeValue={onInputChangeValue}
 									onKeyPress={onInputKeyPress}
 									onBlur={onInputBlur}
 									onFocus={onInputFocus}
@@ -559,7 +559,7 @@ export function DateElement(props) {
 							value={textInputValue}
 							autoSubmit={true}
 							isDisabled={isDisabled}
-							onChangeValue={onInputChangeText}
+							onChangeValue={onInputChangeValue}
 							onKeyPress={onInputKeyPress}
 							onFocus={onInputFocus}
 							onBlur={onInputBlur}
@@ -619,7 +619,7 @@ export function DateElement(props) {
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
 	}
-	assembledComponents = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
+	assembledComponents = <Row {...refProps} {...propsToPass} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
 							{xButton}
 							{inputAndTrigger}
 							{additionalButtons}

package/src/Components/Form/Field/Input.js

@@ -20,12 +20,14 @@ function InputElement(props) {
 			onChangeText,
 			tooltip = null,
 			tooltipPlacement = 'bottom',
+			self,
 		} = props,
 		styles = UiGlobals.styles,
 		debouncedSetValueRef = useRef(),
 		[localValue, setLocalValue] = useState(value),
 		onKeyPressLocal = (e) => {
 			if (e.key === 'Enter') {
+				debouncedSetValueRef.current?.cancel();
 				setValue(localValue);
 			}
 			if (onKeyPress) {
@@ -48,15 +50,20 @@ function InputElement(props) {
 		};
 		
 	useEffect(() => {
+
 		// Set up debounce fn
 		// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
+		debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
 		debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
+
 	}, [setValue]);
 		
 	useEffect(() => {
 
-		// Make local value conform to externally changed value
-		setLocalValue(value);
+		if (value !== localValue) {
+			// Make local value conform to externally changed value
+			setLocalValue(value);
+		}
 
 	}, [value]);
 

package/src/Components/Form/Field/Number.js

@@ -26,6 +26,8 @@ function NumberElement(props) {
 		autoSubmitDelay = UiGlobals.autoSubmitDelay,
 		tooltip = null,
 		isDisabled = false,
+		testID,
+		...propsToPass
 	} = props,
 	styles = UiGlobals.styles,
 	debouncedSetValueRef = useRef(),
@@ -40,6 +42,7 @@ function NumberElement(props) {
 				onIncrement();
 				break;
 			case 'Enter':
+				debouncedSetValueRef.current?.cancel();
 				setValue(value);
 				break;
 			case 'ArrowLeft':
@@ -93,6 +96,7 @@ function NumberElement(props) {
 	useEffect(() => {
 		// Set up debounce fn
 		// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
+		debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
 		debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
 	}, [setValue]);
 	
@@ -119,7 +123,15 @@ function NumberElement(props) {
 		isIncrementDisabled = typeof maxValue !== 'undefined' && value === maxValue,
 		isDecrementDisabled = typeof minValue !== 'undefined' && (value === minValue || (!value && minValue === 0));
 
-	return <Row flex={1} h="100%" p={0} borderWidth={1} borderColor="trueGray.400" borderRadius={6} {...props}>
+	return <Row
+				flex={1}
+				h="100%"
+				p={0}
+				borderWidth={1}
+				borderColor="trueGray.400"
+				borderRadius={6}
+				{...propsToPass}
+			>
 				<IconButton
 					{...testProps('decrementBtn')}
 					icon={<Icon as={Minus} color={(isDecrementDisabled || isDisabled) ? 'disabled' : 'trueGray.500'} />}
@@ -135,7 +147,7 @@ function NumberElement(props) {
 					zIndex={10}
 				/>
 				<InputWithTooltip
-					{...testProps('input')}
+					testID={testID}
 					value={inputValue}
 					onChangeText={onChangeText}
 					onKeyPress={onInputKeyPress}

package/src/Components/Form/Field/TextArea.js

@@ -36,6 +36,7 @@ const
 		useEffect(() => {
 			// Set up debounce fn
 			// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
+			debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
 			debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
 		}, [setValue]);
 

package/src/Components/Panel/Panel.js

@@ -12,6 +12,7 @@ import {
 import Inflector from 'inflector-js';
 import Header from './Header.js';
 import Mask from './Mask.js';
+import testProps from '../../Functions/testProps.js';
 import withCollapsible from '../Hoc/withCollapsible.js';
 import withComponent from '../Hoc/withComponent.js';
 import emptyFn from '../../Functions/emptyFn.js';
@@ -145,19 +146,20 @@ function Panel(props) {
 		framePropsToUse = frameProps;
 	}
 
+	const self = props.self;
 	if (isCollapsed) {
 		if (collapseDirection === HORIZONTAL) {
-			return <Column overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} w="33px">
+			return <Column {...testProps(self?.reference)} overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} w="33px">
 						{isDisabled && <Mask />}
 						{headerComponent}
 					</Column>;
 		}
-		return <Column overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} h="33px">
+		return <Column {...testProps(self?.reference)} overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} h="33px">
 					{isDisabled && <Mask />}
 					{headerComponent}
 				</Column>;
 	}
-	return <Column overflow="hidden" {...propsToPass} {...framePropsToUse} {...sizeProps} onLayout={onLayout}>
+	return <Column {...testProps(self?.reference)} overflow="hidden" {...propsToPass} {...framePropsToUse} {...sizeProps} onLayout={onLayout}>
 				{isDisabled && <Mask />}
 				{headerComponent}
 				{topToolbar}

package/src/Components/Tree/Tree.js

@@ -6,6 +6,7 @@ import {
 	Pressable,
 	Icon,
 	Row,
+	ScrollView,
 	Text,
 } from 'native-base';
 import {
@@ -52,6 +53,7 @@ import ReorderRows from '../Icons/ReorderRows.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
 import NoRecordsFound from '../Grid/NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
+import Loading from '../Messages/Loading.js';
 import _ from 'lodash';
 
 const DEPTH_INDENT_PX = 25;
@@ -361,7 +363,7 @@ function TreeComponent(props) {
 
 			const isMultipleHits = found.length > 1;
 			if (!isMultipleHits) {
-				expandPath(found[0].path); // highlights and selects the last node in the path
+				expandPath(found[0].cPath); // highlights and selects the last node in the cPath
 				return;
 			}
 
@@ -650,23 +652,23 @@ function TreeComponent(props) {
 				}
 			});
 		},
-		expandPath = async (path) => {
+		expandPath = async (cPath) => {
 			// First, close thw whole tree.
 			let newTreeNodeData = _.clone(getTreeNodeData());
 			collapseNodes(newTreeNodeData);
 
 			// As it navigates down, it will expand the appropriate branches,
 			// and then finally highlight & select the node in question
-			let pathParts,
+			let cPathParts,
 				id,
 				currentLevelData = newTreeNodeData,
 				currentDatum,
 				parentDatum,
 				currentNode;
 			
-			while(path.length) {
-				pathParts = path.split('/');
-				id = parseInt(pathParts[0], 10); // grab the first part of the path
+			while(cPath.length) {
+				cPathParts = cPath.split('/');
+				id = parseInt(cPathParts[0], 10); // grab the first part of the cPath
 				
 				// find match in current level
 				currentDatum = _.find(currentLevelData, (treeNodeDatum) => {
@@ -687,7 +689,7 @@ function TreeComponent(props) {
 				// THE MAGIC!
 				currentDatum.isExpanded = true;
 				
-				path = pathParts.slice(1).join('/'); // put the rest of it back together
+				cPath = cPathParts.slice(1).join('/'); // put the rest of it back together
 				currentLevelData = currentDatum.children;
 				parentDatum = currentDatum;
 			}
@@ -729,7 +731,7 @@ function TreeComponent(props) {
 			// Also, keep in mind that document.getElementById(id).scrollIntoView() might not work as expected in all situations, especially in complex layouts or when using certain CSS properties. Always test your code thoroughly to make sure it works as expected.
 
 			// ... Not sure how to do this with NativeBase, as I've had trouble assigning IDs
-			// Maybe I first collapse the tree, then expand just the path?
+			// Maybe I first collapse the tree, then expand just the cPath?
 		},
 
 		// render
@@ -1088,18 +1090,22 @@ function TreeComponent(props) {
 		
 	useEffect(() => {
 
-		if (!isReady) {
-			if (Repository) {
-				Repository.setBaseParams(extraParams);
-			}
+		if (!Repository) {
 			(async () => {
 				await buildAndSetTreeNodeData();
 				setIsReady(true);
 			})();
+			return () => {};
 		}
 
-		if (!Repository) {
-			return () => {};
+		if (!_.isEmpty(extraParams)) {
+			Repository.setBaseParams(extraParams);
+		}
+
+		async function rebuildTree() {
+			setIsReady(false);
+			await buildAndSetTreeNodeData();
+			setIsReady(true);
 		}
 		
 		// set up @onehat/data repository
@@ -1109,12 +1115,14 @@ function TreeComponent(props) {
 		
 		Repository.on('beforeLoad', setTrue);
 		Repository.on('load', setFalse);
+		Repository.on('loadRootNodes', rebuildTree);
 		Repository.on('changeFilters', reloadTree);
 		Repository.on('changeSorters', reloadTree);
 
 		return () => {
 			Repository.off('beforeLoad', setTrue);
 			Repository.off('load', setFalse);
+			Repository.off('loadRootNodes', rebuildTree);
 			Repository.off('changeFilters', reloadTree);
 			Repository.off('changeSorters', reloadTree);
 		};
@@ -1149,7 +1157,7 @@ function TreeComponent(props) {
 		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isDragMode, getTreeNodeData()]);
 
 	if (!isReady) {
-		return null;
+		return <Loading />;
 	}
 	
 	const treeNodes = renderTreeNodes(getTreeNodeData());
@@ -1197,9 +1205,11 @@ function TreeComponent(props) {
 							}
 						}}
 					>
-						{!treeNodes?.length ? 
-							<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
-							treeNodes}
+						<ScrollView flex={1} w="100%">
+							{!treeNodes?.length ? 
+								<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
+								treeNodes}
+						</ScrollView>
 					</Column>
 
 					{treeFooterComponent}
@@ -1239,8 +1249,8 @@ function TreeComponent(props) {
 									treeNode = _.find(searchResults, (item) => {
 										return item.id === data.node_id;
 									}),
-									path = treeNode.path;
-								expandPath(path);
+									cPath = treeNode.cPath;
+								expandPath(cPath);
 
 								// Close the modal
 								setIsModalShown(false);