@onehat/ui 0.3.358 → 0.3.360

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.358",
+	"version": "0.3.360",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

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

@@ -9,7 +9,7 @@ import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
 
 function InputElement(props) {
-	let {
+	let { // so localValue can be changed, if needed
 			value,
 			setValue,
 			autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
@@ -25,6 +25,28 @@ function InputElement(props) {
 		styles = UiGlobals.styles,
 		debouncedSetValueRef = useRef(),
 		[localValue, setLocalValue] = useState(value),
+		isTypingRef = useRef(),
+		isTypingTimeoutRef = useRef(),
+		isTyping = () => {
+			return isTypingRef.current;
+		},
+		setIsTyping = (isTyping) => {
+			isTypingRef.current = isTyping;
+			if (isTyping) {
+				startIsTypingTimeout();
+			}
+		},
+		startIsTypingTimeout = () => {
+			clearIsTypingTimeout();
+			isTypingTimeoutRef.current = setTimeout(() => {
+				setIsTyping(false);
+			}, 2000);
+		},
+		clearIsTypingTimeout = () => {
+			if (isTypingTimeoutRef.current) {
+				clearTimeout(isTypingTimeoutRef.current);
+			}
+		},
 		onKeyPressLocal = (e) => {
 			if (e.key === 'Enter') {
 				debouncedSetValueRef.current?.cancel();
@@ -35,6 +57,7 @@ function InputElement(props) {
 			}
 		},
 		onChangeTextLocal = (value) => {
+			setIsTyping(true);
 			if (value === '') {
 				value = null; // empty string makes value null
 				setLocalValue(value);
@@ -60,7 +83,7 @@ function InputElement(props) {
 		
 	useEffect(() => {
 
-		if (value !== localValue) {
+		if (!isTyping() && value !== localValue) {
 			// Make local value conform to externally changed value
 			setLocalValue(value);
 		}

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

@@ -20,7 +20,30 @@ const
 			styles = UiGlobals.styles,
 			debouncedSetValueRef = useRef(),
 			[localValue, setLocalValue] = useState(value),
+			isTypingRef = useRef(),
+			isTypingTimeoutRef = useRef(),
+			isTyping = () => {
+				return isTypingRef.current;
+			},
+			setIsTyping = (isTyping) => {
+				isTypingRef.current = isTyping;
+				if (isTyping) {
+					startIsTypingTimeout();
+				}
+			},
+			startIsTypingTimeout = () => {
+				clearIsTypingTimeout();
+				isTypingTimeoutRef.current = setTimeout(() => {
+					setIsTyping(false);
+				}, 2000);
+			},
+			clearIsTypingTimeout = () => {
+				if (isTypingTimeoutRef.current) {
+					clearTimeout(isTypingTimeoutRef.current);
+				}
+			},
 			onChangeTextLocal = (value) => {
+				setIsTyping(true);
 				if (value === '') {
 					value = null; // empty string makes value null
 				}
@@ -42,8 +65,10 @@ const
 
 		useEffect(() => {
 
-			// Make local value conform to externally changed value
-			setLocalValue(value);
+			if (!isTyping() && value !== localValue) {
+				// Make local value conform to externally changed value
+				setLocalValue(value);
+			}
 	
 		}, [value]);
 

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

@@ -79,7 +79,7 @@ const
 					>
 						<Text
 							{...testProps('readout')}
-							ml={2}
+							mx={2}
 							fontSize={styles.FORM_TOGGLE_FONTSIZE}
 						>{_.isNil(value) ? 'N/A' : (!!value ? 'Yes' : 'No')}</Text>
 					</Pressable>

package/src/Components/Hoc/withFilters.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, } from 'react';
 import {
+	Box,
 	Column,
 	Modal,
 	Row,
@@ -328,6 +329,21 @@ export default function withFilters(WrappedComponent) {
 												{filterElement}
 											</Row>;
 						}
+						// add a container for each filter
+						filterElement = <Row
+											key={'filter-' + ix}
+											bg="trueGray.100"
+											px={1}
+											mx={1}
+											borderRadius={6}
+											borderLeftWidth={1}
+											borderLeftColor="#fff"
+											alignItems="center"
+											h="100%"
+										>
+											{filterElement}
+										</Row>;
+
 						filterElements.push(filterElement);
 					});
 					return filterElements;