@onehat/ui 0.4.40 → 0.4.42

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import { useState, useEffect, useRef, } from 'react';
 import {
 	HStack,
 	Text,
@@ -13,211 +13,206 @@ import Slider from '@react-native-community/slider'; // https://www.npmjs.com/pa
 import UiGlobals from '../../../UiGlobals.js';
 import testProps from '../../../Functions/testProps.js';
 import withComponent from '../../Hoc/withComponent.js';
-import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
 
 const FAKE_ZERO = 0.0000000001; // Slider doesn't like zero
 
-const InputWithTooltip = withTooltip(Input);
-
-const
-	SliderElement = (props) => {
-		let {
-				value = 0,
-				setValue,
-				minValue = 0,
-				maxValue = 100,
-				step = 10,
-				autoSubmitDelay = UiGlobals.autoSubmitDelay,
-				minimizeForRow = false,
-				tooltip = null,
-				isDisabled = false,
-				testID,
-			} = props,
-			styles = UiGlobals.styles,
-			debouncedSetValueRef = useRef(),
-			[localValue, setLocalValue] = useState(value),
-			onInputKeyPress = (e) => {
-				const key = e.nativeEvent.key; // e.key works on web, but not mobile; so use e.nativeEvent.key which works on both
-				switch(key) {
-					case 'ArrowDown':
-						onDecrement();
-						break;
-					case 'ArrowUp':
-						onIncrement();
-						break;
-					case 'Enter':
-						debouncedSetValueRef.current?.cancel();
-						setValue(value);
-						break;
-					case 'ArrowLeft':
-					case 'ArrowRight':
-					case 'Tab':
-					case 'Backspace':
-						return;
-					default:
-				}
-				if (!key.match(/^[\-\d\.]*$/)) {
-					e.preventDefault(); // kill anything that's not a number
-				}
-			},
-			onChangeText = (value) => {
-				if (!value || value === '') {
-					value = 0; // empty string makes value null
-				} else if (value.match(/\.$/)) { // value ends with a decimal point
-					// don't parseFloat, otherwise we'll lose the decimal point
-				} else if (value.match(/0$/)) { // value ends with a zero
-					// don't parseFloat, otherwise we'll lose the ability to do things like 1.03
-				} else {
-					value = parseFloat(value, 10);
-				}
-				if (value < minValue) {
-					value = minValue;
-				} else if (value > maxValue) {
-					value = maxValue;
-				}
-				setLocalValue(value);
-				debouncedSetValueRef.current(value);
-			},
-			onDecrement = () => {
-				let localValue = value;
-				if (minValue && localValue === minValue) {
-					return;
-				}
-				if (!localValue) {
-					localValue = 0;
-				}
-				localValue = new Decimal(localValue).minus(step).toNumber();
-				if (minValue > localValue) {
-					localValue = minValue;
-				}
-				setValue(localValue);
-			},
-			onIncrement = () => {
-				let localValue = value;
-				if (maxValue && localValue === maxValue) {
+function SliderElement(props) {
+	let {
+			value = 0,
+			setValue,
+			minValue = 0,
+			maxValue = 100,
+			step = 10,
+			autoSubmitDelay = UiGlobals.autoSubmitDelay,
+			minimizeForRow = false,
+			tooltip,
+			tooltipPlacement,
+			isDisabled = false,
+			testID,
+		} = props,
+		styles = UiGlobals.styles,
+		debouncedSetValueRef = useRef(),
+		[localValue, setLocalValue] = useState(value),
+		onInputKeyPress = (e) => {
+			const key = e.nativeEvent.key; // e.key works on web, but not mobile; so use e.nativeEvent.key which works on both
+			switch(key) {
+				case 'ArrowDown':
+					onDecrement();
+					break;
+				case 'ArrowUp':
+					onIncrement();
+					break;
+				case 'Enter':
+					debouncedSetValueRef.current?.cancel();
+					setValue(value);
+					break;
+				case 'ArrowLeft':
+				case 'ArrowRight':
+				case 'Tab':
+				case 'Backspace':
 					return;
-				}
-				if (!localValue) {
-					localValue = 0;
-				}
-				localValue = new Decimal(localValue).plus(step).toNumber();
-				if (maxValue < localValue) {
-					localValue = maxValue;
-				}
-				setValue(localValue);
-			};
-		
-		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
-			if (value !== localValue) {
-				setLocalValue(value);
+				default:
+			}
+			if (!key.match(/^[\-\d\.]*$/)) {
+				e.preventDefault(); // kill anything that's not a number
+			}
+		},
+		onChangeText = (value) => {
+			if (!value || value === '') {
+				value = 0; // empty string makes value null
+			} else if (value.match(/\.$/)) { // value ends with a decimal point
+				// don't parseFloat, otherwise we'll lose the decimal point
+			} else if (value.match(/0$/)) { // value ends with a zero
+				// don't parseFloat, otherwise we'll lose the ability to do things like 1.03
+			} else {
+				value = parseFloat(value, 10);
+			}
+			if (value < minValue) {
+				value = minValue;
+			} else if (value > maxValue) {
+				value = maxValue;
+			}
+			setLocalValue(value);
+			debouncedSetValueRef.current(value);
+		},
+		onDecrement = () => {
+			let localValue = value;
+			if (minValue && localValue === minValue) {
+				return;
+			}
+			if (!localValue) {
+				localValue = 0;
+			}
+			localValue = new Decimal(localValue).minus(step).toNumber();
+			if (minValue > localValue) {
+				localValue = minValue;
+			}
+			setValue(localValue);
+		},
+		onIncrement = () => {
+			let localValue = value;
+			if (maxValue && localValue === maxValue) {
+				return;
+			}
+			if (!localValue) {
+				localValue = 0;
 			}
+			localValue = new Decimal(localValue).plus(step).toNumber();
+			if (maxValue < localValue) {
+				localValue = maxValue;
+			}
+			setValue(localValue);
+		};
 	
-		}, [value]);
+	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]);
 
-		let sliderValue = value;
+	useEffect(() => {
 
-		if (localValue === null || typeof localValue === 'undefined') {
-			localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+		// Make local value conform to externally changed value
+		if (value !== localValue) {
+			setLocalValue(value);
 		}
 
-		if (sliderValue === null || typeof sliderValue === 'undefined') {
-			sliderValue = 0; // If the value is null or undefined, force slider to use zero
-		}
+	}, [value]);
 
-		// convert localValue to string if necessary, because numbers work on web but not mobile; while strings work in both places
-		let inputValue = localValue;
-		if (_.isNumber(inputValue)) {
-			inputValue = '' + inputValue;
-		}
+	let sliderValue = value;
 
-		const style = props.style || {};
-		if (!hasWidth(props) && !hasFlex(props)) {
-			style.flex = 1;
-		}
+	if (localValue === null || typeof localValue === 'undefined') {
+		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+	}
 
-		if (sliderValue === 0) {
-			sliderValue = FAKE_ZERO; // Slider doesn't like zero
-		}
+	if (sliderValue === null || typeof sliderValue === 'undefined') {
+		sliderValue = 0; // If the value is null or undefined, force slider to use zero
+	}
 
-		let className = `
-				w-full
-				items-center
-			`,
-			inputClassName = `
-				InputWithTooltip
-				h-full
-				w-[60px]
-				mr-4
-				text-center
-				rounded-md
-				${styles.SLIDER_READOUT_FONTSIZE}
-			`;
-		if (props.className) {
-			className += ' ' + props.className;
-		}
-		if (minimizeForRow) {
-			inputClassName += ' h-auto min-h-0 max-h-[50px] mr-1';
-		}
-		
-		return <HStack
-					className={className}
-					style={props.style}
-				>
-					<InputWithTooltip
-						{...testProps('readout')}
-						value={inputValue}
-						onChangeText={onChangeText}
-						onKeyPress={onInputKeyPress}
-						isDisabled={isDisabled}
-						disableAutoFlex={true}
-						className={inputClassName}
-						textAlignIsCenter={true}
-						{...props._input}
+	// convert localValue to string if necessary, because numbers work on web but not mobile; while strings work in both places
+	let inputValue = localValue;
+	if (_.isNumber(inputValue)) {
+		inputValue = '' + inputValue;
+	}
+
+	const style = props.style || {};
+	if (!hasWidth(props) && !hasFlex(props)) {
+		style.flex = 1;
+	}
+
+	if (sliderValue === 0) {
+		sliderValue = FAKE_ZERO; // Slider doesn't like zero
+	}
+
+	let className = `
+			w-full
+			items-center
+		`,
+		inputClassName = `
+			Input
+			h-full
+			w-[60px]
+			mr-4
+			text-center
+			rounded-md
+			${styles.SLIDER_READOUT_FONTSIZE}
+		`;
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	if (minimizeForRow) {
+		inputClassName += ' h-auto min-h-0 max-h-[50px] mr-1';
+	}
+	
+	return <HStack
+				className={className}
+				style={props.style}
+			>
+				<Input
+					{...testProps('readout')}
+					value={inputValue}
+					onChangeText={onChangeText}
+					onKeyPress={onInputKeyPress}
+					isDisabled={isDisabled}
+					disableAutoFlex={true}
+					className={inputClassName}
+					textAlignIsCenter={true}
+					tooltip={tooltip}
+					tooltipPlacement={tooltipPlacement}
+					{...props._input}
+				/>
+				<HStack className="flex-1">
+					<Slider
+						{...testProps('slider')}
+						ref={props.outerRef}
+						style={{
+							width: '100%', 
+							height: 40,
+						}}
+						minimumTrackTintColor={styles.SLIDER_MIN_TRACK_COLOR}
+						maximumTrackTintColor={styles.SLIDER_MAX_TRACK_COLOR}
+						thumbTintColor={styles.SLIDER_THUMB_COLOR}
+						minimumValue={minValue}
+						maximumValue={maxValue}
+						step={step}
+						value={sliderValue}
+						onValueChange={(value) => {
+							// This sets the localValue, only for display purposes
+							setLocalValue(value);
+						}}
+						onSlidingComplete={(value) => {
+							// This sets the actual value
+							if (value === FAKE_ZERO) {
+								value = 0;
+							}
+							setValue(value);
+						}}
 					/>
-					<HStack className="flex-1">
-						<Slider
-							{...testProps('slider')}
-							ref={props.outerRef}
-							style={{
-								width: '100%', 
-								height: 40,
-							}}
-							minimumTrackTintColor={styles.SLIDER_MIN_TRACK_COLOR}
-							maximumTrackTintColor={styles.SLIDER_MAX_TRACK_COLOR}
-							thumbTintColor={styles.SLIDER_THUMB_COLOR}
-							minimumValue={minValue}
-							maximumValue={maxValue}
-							step={step}
-							value={sliderValue}
-							onValueChange={(value) => {
-								// This sets the localValue, only for display purposes
-								setLocalValue(value);
-							}}
-							onSlidingComplete={(value) => {
-								// This sets the actual value
-								if (value === FAKE_ZERO) {
-									value = 0;
-								}
-								setValue(value);
-							}}
-						/>
-					</HStack>
-				</HStack>;
-	},
-	SliderField = withComponent(withValue(SliderElement));
+				</HStack>
+			</HStack>;
+};
 
-// Tooltip needs us to forwardRef
-export default withTooltip(React.forwardRef((props, ref) => {
-	return <SliderField {...props} outerRef={ref} />;
-}));
+export default withComponent(withValue(SliderElement));

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

@@ -124,11 +124,13 @@ function TagComponent(props) {
 			if (!id) {
 				displayValue = '';
 			} else if (Repository) {
-				item = Repository.getById(id);
-				if (!item) {
-					throw Error('item not found');
+				if (!Repository.isDestroyed) {
+					item = Repository.getById(id);
+					if (!item) {
+						throw Error('item not found');
+					}
+					displayValue = item.displayValue;
 				}
-				displayValue = item.displayValue;
 			} else {
 				item = _.find(data, (datum) => datum[idIx] === id);
 				if (!item) {
@@ -248,19 +250,19 @@ function TagComponent(props) {
 		className += ' ' + props.className;
 	}
 	const style = {};
-	if (!props.flex && !props.w) {
+	if (props.style) {
+		_.assign(style, props.style); // needed for grid; otherwise valuebox width can be too wide
+	}
+	if (!props.flex && !props.w && !style.width) {
 		style.flex = 1;
 	} else {
-		if (props.w) {
+		if (props.w && !style.width) {
 			style.width = props.w;
 		}
-		if (props.flex) {
+		if (props.flex && !style.width) {
 			style.flex = props.flex;
 		}
 	}
-	if (props.style) {
-		_.assign(style, props.style); // needed for grid; otherwise valuebox width can be too wide
-	}
 	let valueBoxesClassName = `
 		Tag-valueBoxes-container
 		w-full

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	Textarea, TextareaInput,
 } from '@project-components/Gluestack';
@@ -8,106 +8,104 @@ import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
 
-const
-	TextAreaElement = (props) => {
-		let { // so localValue can be changed, if needed
-				setValue,
-				autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
-				autoSubmitDelay = UiGlobals.autoSubmitDelay,
-				onChangeText,
-				placeholder,
-				minimizeForRow = false,
-				testID,
-			} = props,
-			value = _.isNil(props.value) ? '' : props.value, // null value may not actually reset this TextArea, so set it explicitly to empty string
-			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);
-				}, autoSubmitDelay + 1000);
-			},
-			clearIsTypingTimeout = () => {
-				if (isTypingTimeoutRef.current) {
-					clearTimeout(isTypingTimeoutRef.current);
-				}
-			},
-			onChangeTextLocal = (value) => {
-				setIsTyping(true);
-				if (value === '') {
-					value = null; // empty string makes value null
-				}
-				setLocalValue(value);
-				if (autoSubmit) {
-					debouncedSetValueRef.current(value);
-				}
-				if (onChangeText) {
-					onChangeText(value);
-				}
-			};
-		
-		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(() => {
-
-			if (!isTyping() && value !== localValue) {
-				// Make local value conform to externally changed value
-				setLocalValue(value);
+const TextAreaElement = forwardRef((props, ref) => {
+	let { // so localValue can be changed, if needed
+			setValue,
+			autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
+			autoSubmitDelay = UiGlobals.autoSubmitDelay,
+			onChangeText,
+			placeholder,
+			minimizeForRow = false,
+			testID,
+			className,
+			...propsToPass
+		} = props,
+		value = _.isNil(props.value) ? '' : props.value, // null value may not actually reset this TextArea, so set it explicitly to empty string
+		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);
+			}, autoSubmitDelay + 1000);
+		},
+		clearIsTypingTimeout = () => {
+			if (isTypingTimeoutRef.current) {
+				clearTimeout(isTypingTimeoutRef.current);
+			}
+		},
+		onChangeTextLocal = (value) => {
+			setIsTyping(true);
+			if (value === '') {
+				value = null; // empty string makes value null
+			}
+			setLocalValue(value);
+			if (autoSubmit) {
+				debouncedSetValueRef.current(value);
+			}
+			if (onChangeText) {
+				onChangeText(value);
 			}
+		};
 	
-		}, [value]);
+	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]);
 
-		if (localValue === null || typeof localValue === 'undefined') {
-			localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
-		}
-		let textareaClassName = `
-				Textarea
-			`,
-			inputClassName = `
-				TextAreaInput
-				flex-1
-				${styles.FORM_TEXTAREA_CLASSNAME}
-			`;
-		if (props.className) {
-			inputClassName += ' ' + props.className;
-		}
-		if (minimizeForRow) {
-			textareaClassName += ' h-auto min-h-0 max-h-[40px] overflow-auto';
-			inputClassName += ' py-0';
+	useEffect(() => {
+
+		if (!isTyping() && value !== localValue) {
+			// Make local value conform to externally changed value
+			setLocalValue(value);
 		}
 
-		return <Textarea className={textareaClassName}>
-					<TextareaInput
-						testID={testID}
-						ref={props.outerRef}
-						onChangeText={onChangeTextLocal}
-						value={localValue}
-						className={inputClassName}
-						placeholder={placeholder}
-					/>
-				</Textarea>;
-	},
-	TextAreaField = withComponent(withValue(TextAreaElement));
+	}, [value]);
+
+	if (localValue === null || typeof localValue === 'undefined') {
+		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+	}
+	let textareaClassName = `
+			Textarea
+		`,
+		inputClassName = `
+			TextAreaInput
+			flex-1
+			${styles.FORM_TEXTAREA_CLASSNAME}
+		`;
+	if (className) {
+		inputClassName += ' ' + className;
+	}
+	if (minimizeForRow) {
+		textareaClassName += ' h-auto min-h-0 max-h-[40px] overflow-auto';
+		inputClassName += ' py-0';
+	}
+
+	return <Textarea className={textareaClassName}>
+				<TextareaInput
+					{...propsToPass}
+					testID={testID}
+					ref={ref}
+					onChangeText={onChangeTextLocal}
+					value={localValue}
+					className={inputClassName}
+					placeholder={placeholder}
+				/>
+			</Textarea>;
+});
 
-// withTooltip needs us to forwardRef
-export default withTooltip(React.forwardRef((props, ref) => {
-	return <TextAreaField {...props} outerRef={ref} />;
-}));
+export default withComponent(withValue(withTooltip(TextAreaElement)));