@onehat/ui 0.3.273 → 0.3.276

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.273",
+	"version": "0.3.276",
 	"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

@@ -58,6 +58,7 @@ export function ComboComponent(props) {
 			onGridSave, // to hook into when menu saves (ComboEditor only)
 			onGridDelete, // to hook into when menu deletes (ComboEditor only)
 			newEntityDisplayProperty,
+			testID,
 
 			// withComponent
 			self,
@@ -236,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;
 					}
 
@@ -303,7 +304,11 @@ export function ComboComponent(props) {
 				return;
 			}
 			clearGridFilters();
-			showMenu();
+			if (isMenuShown) {
+				hideMenu();
+			} else {
+				showMenu();
+			}
 		},
 		onTriggerBlur = (e) => {
 			if (!isMenuShown) {
@@ -361,7 +366,7 @@ export function ComboComponent(props) {
 					menuRef.current === relatedTarget || 
 					menuRef.current?.contains(relatedTarget);
 		},
-		getFilterName = () => {
+		getFilterName = (isId) => {
 			// Only used for remote repositories
 			// Gets the filter name of the query, which becomes the condition sent to server 
 			let filterName = FILTER_NAME;
@@ -372,7 +377,10 @@ export function ComboComponent(props) {
 					displayFieldDef = schema.getPropertyDefinition(displayFieldName);
 	
 				// Verify displayField is a real field
-				if (!displayFieldDef.isVirtual) {
+				if (isId) {
+					const idFieldName = schema.model.idProperty;
+					filterName = idFieldName;
+				} else if (!displayFieldDef.isVirtual) {
 					filterName = displayFieldName + ' LIKE';
 				}
 			}
@@ -418,10 +426,13 @@ export function ComboComponent(props) {
 				}
 
 				// Set filter
-				const filterName = getFilterName();
+				const
+					idRegex = /^id:(.*)$/,
+					isId = _.isString(value) && !!value.match(idRegex),
+					filterName = getFilterName(isId);
 				if (Repository.isRemote) {
 					// remote
-					const filterValue = _.isEmpty(value) ? null : value + '%';
+					const filterValue = _.isEmpty(value) ? null : (isId ? value.match(idRegex)[1] : value + '%');
 					await Repository.filter(filterName, filterValue);
 					if (!Repository.isAutoLoad) {
 						await Repository.reload();
@@ -958,7 +969,7 @@ export function ComboComponent(props) {
 	if (isRendered && additionalButtons?.length && containerWidth < 500) {
 		// be responsive for small screen sizes and bump additionalButtons to the next line
 		assembledComponents = 
-			<Column>
+			<Column testID={testID}>
 				<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%">
 					{xButton}
 					{eyeButton}
@@ -971,7 +982,7 @@ export function ComboComponent(props) {
 			</Column>;
 	} else {
 		assembledComponents = 
-			<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%" onLayout={onLayout}>
+			<Row testID={testID} {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%" onLayout={onLayout}>
 				{xButton}
 				{eyeButton}
 				{inputAndTrigger}

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 {
@@ -361,7 +362,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 +651,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 +688,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 +730,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
@@ -1197,9 +1198,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 +1242,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);