@onehat/ui 0.3.238 → 0.3.240

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useRef, } from 'react';
 import {
 	TextArea,
 } from 'native-base';
@@ -10,12 +10,49 @@ import _ from 'lodash';
 
 const
 	TextAreaElement = (props) => {
-		const
+		let { // so localValue can be changed, if needed
+				setValue,
+				autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
+				autoSubmitDelay = UiGlobals.autoSubmitDelay,
+				onChangeText,
+			} = 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,
-			value = _.isNil(props.value) ? '' : props.value; // null value may not actually reset this TextArea, so set it explicitly to empty string
+			debouncedSetValueRef = useRef(),
+			[localValue, setLocalValue] = useState(value),
+			onChangeTextLocal = (value) => {
+				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 = _.debounce(setValue, autoSubmitDelay);
+		}, [setValue]);
+
+		useEffect(() => {
+
+			// Make local value conform to externally changed value
+			setLocalValue(value);
+	
+		}, [value]);
+
+		if (localValue === null || typeof localValue === 'undefined') {
+			localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+		}
+
 		return <TextArea
 					ref={props.outerRef}
-					onChangeText={props.setValue}
+					onChangeText={onChangeTextLocal}
 					flex={1}
 					bg={styles.FORM_TEXTAREA_BG}
 					_focus={{
@@ -24,7 +61,7 @@ const
 					fontSize={styles.FORM_TEXTAREA_FONTSIZE}
 					h={styles.FORM_TEXTAREA_HEIGHT}
 					{...props}
-					value={value}
+					value={localValue}
 				/>;
 	},
 	TextAreaField = withComponent(withValue(TextAreaElement));

package/src/Components/Form/Form.js

@@ -237,7 +237,7 @@ function Form(props) {
 											let editorProps = {};
 											if (!editor) {
 												const propertyDef = fieldName && Repository?.getSchema().getPropertyDefinition(fieldName);
-												editor = propertyDef && propertyDef[fieldName].editorType;
+												editor = propertyDef?.editorType;
 												if (_.isPlainObject(editor)) {
 													const {
 															type,
@@ -248,6 +248,13 @@ function Form(props) {
 													editor = type;
 												}
 											}
+											if (!editor) {
+												editor = 'Text';
+											}
+											if (!editor.match(/Toggle/)) {
+												editorProps.h = '40px'; // Toggle height gets applied incorrectly; just skip it
+											}
+
 											const Element = getComponentFromType(editor);
 
 											if (useSelectorId) {
@@ -258,19 +265,20 @@ function Form(props) {
 											let element = <Element
 																name={name}
 																value={value}
-																setValue={(newValue) => {
+																onChangeValue={(newValue) => {
+																	if (newValue === undefined) {
+																		newValue = null; // React Hook Form doesn't respond well when setting value to undefined
+																	}
 																	onChange(newValue);
-																	if (onEditorChange) {
+																	if (typeof onEditorChange !== 'undefined' && onEditorChange) {
 																		onEditorChange(newValue, formSetValue, formGetValues, formState);
 																	}
 																}}
 																onBlur={onBlur}
 																flex={1}
-																{...editorProps}
 																parent={self}
 																reference={fieldName}
-																// {...defaults}
-																// {...propsToPass}
+																{...editorProps}
 															/>;
 
 											// element = <Tooltip key={ix} label={header} placement="bottom">
@@ -516,22 +524,20 @@ function Form(props) {
 												{...editorTypeProps}
 												{...dynamicProps}
 											/>;
-							if (editorType !== EDITOR_TYPE__INLINE) {
-								let message = null;
-								if (error) {
-									message = error.message;
-									if (label && error.ref?.name) {
-										message = message.replace(error.ref.name, label);
-									}
+							let message = null;
+							if (error) {
+								message = error.message;
+								if (label && error.ref?.name) {
+									message = message.replace(error.ref.name, label);
 								}
-								if (message) {
-									message = <Text color="#f00">{message}</Text>;
-								}
-								element = <Column pt={1} flex={1}>
-											{element}
-											{message}
-										</Column>;
 							}
+							if (message) {
+								message = <Text color="#f00">{message}</Text>;
+							}
+							element = <Column pt={1} flex={1}>
+										{element}
+										{message}
+									</Column>;
 
 							if (item.additionalEditButtons) {
 								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
@@ -830,9 +836,17 @@ function Form(props) {
 		}
 
 		if (editorType === EDITOR_TYPE__INLINE) {
-			buttonGroupProps.position = 'fixed';
-			buttonGroupProps.left = 10; // TODO: I would prefer to have this be centered, but it's a lot more complex than just making it stick to the left
-			footerProps.alignItems = 'flex-start';
+			footerProps.position = 'sticky';
+			footerProps.alignSelf = 'flex-start';
+			footerProps.justifyContent = 'center';
+			footerProps.top = '100px';
+			footerProps.left = '20px';
+			footerProps.width = '200px';
+			footerProps.bg = 'primary.100';
+			footerProps.p = 0;
+			footerProps.px = 4;
+			footerProps.py = 2;
+			footerProps.borderBottomRadius = 5;
 		}
 
 		if (onDelete && editorMode === EDITOR_MODE__EDIT && isSingle) {
@@ -868,11 +882,11 @@ function Form(props) {
 		}
 	}
 	
-	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef}>
+	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef} testID="form">
 				{!!containerWidth && <>
 					{editorType === EDITOR_TYPE__INLINE &&
-						<ScrollView
-							horizontal={true}
+						<Row
+							display="inline-block"
 							flex={1}
 							bg="#fff"
 							py={1}
@@ -880,7 +894,7 @@ function Form(props) {
 							borderBottomWidth={5}
 							borderTopColor="primary.100"
 							borderBottomColor="primary.100"
-						>{editor}</ScrollView>}
+						>{editor}</Row>}
 					{editorType !== EDITOR_TYPE__INLINE &&
 						<ScrollView _web={{ minHeight, }} width="100%" pb={1}>
 							{formButtons}

package/src/Components/Hoc/withInlineEditor.js

@@ -82,7 +82,7 @@ export default function withInlineEditor(WrappedComponent) {
 					editorBounds = editor.parentElement.getBoundingClientRect(), // reference parentElement, because this doesn't change based on last moveEditor call
 					delta = editorBounds.top - rowBounds.top;
 
-				editorStyle.top = (-1 * delta) -20 + 'px';
+				editorStyle.top = (-1 * delta) + 'px';
 			};
 
 		if (isEditorShown && selection.length < 1) {
@@ -100,13 +100,14 @@ export default function withInlineEditor(WrappedComponent) {
 			inlineEditor = <>
 								{isEditorShown && <Box
 													ref={maskRef}
+													testID="mask"
 													position="fixed"
 													w="100vw"
 													h="100vh"
 													top="0"
 													left="0"
 													bg="#000"
-													opacity={0.35}
+													opacity={0.3}
 													zIndex={0}
 													onClick={(e) => {
 														e.preventDefault();
@@ -118,39 +119,34 @@ export default function withInlineEditor(WrappedComponent) {
 									ref={inlineEditorRef}
 									position="absolute"
 									zIndex={10}
+									testID="inline-editor"
+									h={isEditorShown ? '100px' : 0}
+									minWidth="100%"
+									display="inline-block"
+									whiteSpace="nowrap"
 								>
-									{isEditorShown && <Form
-															parent={self}
-															reference="form"
-															editorType={EDITOR_TYPE__INLINE}
-															editorStateRef={editorStateRef}
-															record={selection[0]}
-															Repository={Repository}
-															isMultiple={selection.length > 1}
-															isEditorViewOnly={isEditorViewOnly}
-															columnsConfig={localColumnsConfig}
-															onCancel={onEditorCancel}
-															onSave={onEditorSave}
-															onClose={onEditorClose}
-															footerProps={{
-																justifyContent: 'center',
-																bg: null, // make bg transparent
-																p: 0,
-															}}
-															buttonGroupProps={{
-																bg: 'primary.100',
-																borderBottomRadius: 5,
-																px: 4,
-																py: 2,
-															}}
-															bg="#fff"
-															borderTopWidth={4}
-															borderTopColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
-															borderBottomWidth={4}
-															borderBottomColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
-															py={1}
-															px={0}
-														/>}
+									{isEditorShown &&
+										<Form
+											parent={self}
+											reference="form"
+											editorType={EDITOR_TYPE__INLINE}
+											editorStateRef={editorStateRef}
+											record={selection[0]}
+											Repository={Repository}
+											isMultiple={selection.length > 1}
+											isEditorViewOnly={isEditorViewOnly}
+											columnsConfig={localColumnsConfig}
+											onCancel={onEditorCancel}
+											onSave={onEditorSave}
+											onClose={onEditorClose}
+											bg="#fff"
+											borderTopWidth={4}
+											borderTopColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
+											borderBottomWidth={4}
+											borderBottomColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
+											py={1}
+											px={0}
+										/>}
 								</Column>
 							</>;
 		}