@onehat/ui 0.2.29 → 0.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.29",
+	"version": "0.2.33",
 	"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/CKEditor/CKEditor.js

@@ -4,17 +4,17 @@ import {
 } from 'native-base';
 import {
 	AUTO_SUBMIT_DELAY,
-} from '../../../Constants/Input.js';
+} from '../../../../Constants/Input.js';
 import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
 import './ckeditor.css';
 import Editor from 'ckeditor5-custom-build/build/ckeditor.js'; // built using https://ckeditor.com/ckeditor-5/online-builder/
-import withValue from '../../Hoc/withValue.js';
-import withTooltip from '../../Hoc/withTooltip.js';
+import withValue from '../../../Hoc/withValue.js';
+import withTooltip from '../../../Hoc/withTooltip.js';
 import _ from 'lodash';
 
 
 const
-	HtmlEditorElement = (props) => {
+	CKEditorElement = (props) => {
 		const {
 				value,
 				setValue,
@@ -53,12 +53,12 @@ const
 					/>
 				</Row>;
 	},
-	HtmlEditorField = withValue(HtmlEditorElement);
+	CKEditorField = withValue(CKEditorElement);
 	
 
-export default HtmlEditorField;
+export default CKEditorField;
 
 // // Tooltip needs us to forwardRef
 // export default withTooltip(React.forwardRef((props, ref) => {
-// 	return <HtmlEditorField {...props} outerRef={ref} />;
+// 	return <CKEditorField {...props} outerRef={ref} />;
 // }));

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;
+								reorderProps = {
+									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>;

package/src/Components/index.js

@@ -9,6 +9,7 @@ import ArrayRadioGroup from './Form/Field/RadioGroup/ArrayRadioGroup.js';
 import Blank from './Blank.js';
 import BooleanCombo from './Form/Field/Combo/BooleanCombo.js';
 // import CartButtonWithBadge from '../Components/Buttons/CartButtonWithBadge.js';
+// import CKEditor from './Form/Field/CKEditor/CKEditor.js'; // web only
 import CheckboxGroup from './Form/Field/CheckboxGroup/CheckboxGroup.js';
 import Color from './Form/Field/Color.js';
 import Combo from './Form/Field/Combo/Combo.js';
@@ -25,7 +26,6 @@ import FiltersForm from './Form/FiltersForm.js';
 import Form from './Form/Form.js';
 import Grid from './Grid/Grid.js';
 import GridPanel from './Panel/GridPanel.js';
-import HtmlEditor from './Form/Field/HtmlEditor.js';
 import IconButton from './Buttons/IconButton.js';
 import Input from './Form/Field/Input.js';
 import IntervalsCombo from './Form/Field/Combo/IntervalsCombo.js';
@@ -56,6 +56,7 @@ const components = {
 	BooleanCombo,
 	// CartButtonWithBadge,
 	CheckboxGroup,
+	// CKEditor,
 	Color,
 	Column,
 	Combo,
@@ -72,7 +73,6 @@ const components = {
 	Form,
 	Grid,
 	GridPanel,
-	HtmlEditor,
 	IconButton,
 	Input,
 	IntervalsCombo,