@onehat/ui 0.2.30 → 0.2.34

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.30",
+	"version": "0.2.34",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -19,7 +19,7 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.13.6",
+		"@onehat/data": "^1.15.5",
 		"@hookform/resolvers": "^2.9.11",
 		"ckeditor5-custom-build": "file:ckeditor5",
 		"js-cookie": "^3.0.1",

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

@@ -30,7 +30,8 @@ function NumberElement(props) {
 	debouncedSetValueRef = useRef(),
 	[localValue, setLocalValue] = useState(value),
 	onInputKeyPress = (e) => {
-		switch(e.key) {
+		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':
 			case 'ArrowLeft':
 				onDecrement();
@@ -48,7 +49,7 @@ function NumberElement(props) {
 				break;
 				default:
 		}
-		if (!e.key.match(/^[\-\d\.]*$/)) {
+		if (!key.match(/^[\-\d\.]*$/)) {
 			e.preventDefault(); // kill anything that's not a number
 		}
 	},
@@ -56,6 +57,7 @@ function NumberElement(props) {
 		if (value === '') {
 			value = null; // empty string makes value null
 		}
+		value = parseFloat(value, 10);
 		setLocalValue(value);
 		debouncedSetValueRef.current(value);
 	},
@@ -91,7 +93,9 @@ function NumberElement(props) {
 	useEffect(() => {
 
 		// Make local value conform to externally changed value
-		setLocalValue(value);
+		if (value !== localValue) {
+			setLocalValue(value);
+		}
 
 	}, [value]);
 
@@ -99,6 +103,12 @@ function NumberElement(props) {
 		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled 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
 		isIncrementDisabled = typeof maxValue !== 'undefined' && value === maxValue,
 		isDecrementDisabled = typeof minValue !== 'undefined' && (value === minValue || (!value && minValue === 0));
@@ -118,7 +128,7 @@ function NumberElement(props) {
 					zIndex={10}
 				/>
 				<InputWithTooltip
-					value={localValue}
+					value={inputValue}
 					onChangeText={onChangeText}
 					onKeyPress={onInputKeyPress}
 					flex={5}

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

@@ -11,11 +11,14 @@ const
 		const {
 				value,
 				setValue,
+				flex, // flex doesn't work right on mobile
+				...propsToPass
 			} = props,
 			styles = UiGlobals.styles,
 			onToggle = () => {
 				setValue(!value);
 			};
+
 		return <Switch
 					ref={props.outerRef}
 					onToggle={onToggle}
@@ -29,7 +32,7 @@ const
 						onTrackColor: styles.FORM_TOGGLE_ON_HOVER_COLOR,
 						offTrackColor: styles.FORM_TOGGLE_OFF_HOVER_COLOR,
 					}}
-					{...props}
+					{...propsToPass}
 				/>;
 	},
 	ToggleField = withValue(ToggleElement);

package/src/Components/Grid/Grid.js

@@ -361,10 +361,22 @@ export function Grid(props) {
 									bg = styles.GRID_ROW_BG;
 								}
 							}
-							let WhichGridRow = GridRow;
+							let WhichGridRow = GridRow,
+								rowReorderProps = {};
 							if (canRowsReorder && isReorderMode) {
 								WhichGridRow = ReorderableGridRow;
+								rowReorderProps = {
+									mode: VERTICAL,
+									onDragStart: onRowReorderDragStart,
+									onDrag: onRowReorderDrag,
+									onDragStop: onRowReorderDragStop,
+									proxyParent: gridRef.current?.getScrollableNode().children[0],
+									proxyPositionRelativeToParent: true,
+									getParentNode: (node) => node.parentElement.parentElement.parentElement,
+									getProxy: getReorderProxy,
+								};
 							}
+							
 							return <WhichGridRow
 										columnsConfig={localColumnsConfig}
 										columnProps={columnProps}
@@ -373,15 +385,7 @@ export function Grid(props) {
 										hideNavColumn={hideNavColumn}
 										bg={bg}
 										item={item}
-
-										mode={VERTICAL}
-										onDragStart={onRowReorderDragStart}
-										onDrag={onRowReorderDrag}
-										onDragStop={onRowReorderDragStop}
-										proxyParent={gridRef.current?.getScrollableNode().children[0]}
-										proxyPositionRelativeToParent={true}
-										getParentNode={(node) => node.parentElement.parentElement.parentElement}
-										getProxy={getReorderProxy}
+										{...rowReorderProps}
 									/>;
 						}}
 					</Pressable>;