@onehat/ui 0.3.238 → 0.3.241

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.238",
+	"version": "0.3.241",
 	"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

@@ -193,6 +193,7 @@ function Form(props) {
 			_.each(columnsConfig, (config, ix) => {
 				let {
 						fieldName,
+						editField,
 						isEditable,
 						editor,
 						renderer,
@@ -211,9 +212,10 @@ function Form(props) {
 										<Text numberOfLines={1} ellipsizeMode="head">{renderedValue}</Text>
 									</Box>);
 				} else {
+					const fieldToEdit = editField || fieldName;
 					elements.push(<Controller
 										key={'controller-' + ix}
-										name={fieldName}
+										name={fieldToEdit}
 										// rules={rules}
 										control={control}
 										render={(args) => {
@@ -236,8 +238,8 @@ function Form(props) {
 												} = fieldState;
 											let editorProps = {};
 											if (!editor) {
-												const propertyDef = fieldName && Repository?.getSchema().getPropertyDefinition(fieldName);
-												editor = propertyDef && propertyDef[fieldName].editorType;
+												const propertyDef = fieldToEdit && Repository?.getSchema().getPropertyDefinition(fieldToEdit);
+												editor = propertyDef?.editorType;
 												if (_.isPlainObject(editor)) {
 													const {
 															type,
@@ -248,6 +250,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,21 +267,25 @@ 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}
+																reference={fieldToEdit}
+																{...editorProps}
 															/>;
 
+											if (editor.match(/Tag/)) {
+												columnProps.overflow = 'auto';
+											}
 											// element = <Tooltip key={ix} label={header} placement="bottom">
 											// 				{element}
 											// 			</Tooltip>;
@@ -516,22 +529,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 +841,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 +887,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,14 +899,14 @@ 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}
 							{editor}
 						</ScrollView>}
 					
-					<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
+					<Footer justifyContent="flex-end" {...footerProps} {...savingProps}>
 						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
 
 							<Row flex={1} justifyContent="flex-start">

package/src/Components/Grid/Grid.js

@@ -44,6 +44,7 @@ import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import withInlineEditor from '../Hoc/withInlineEditor.js';
+import withInlineSideEditor from '../Hoc/withInlineSideEditor.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
@@ -1155,4 +1156,29 @@ export const InlineGridEditor = withComponent(
 									)
 								);
 
+// export const InlineSideGridEditor = withComponent(
+// 									withAlert(
+// 										withEvents(
+// 											withData(
+// 												withDropTarget(
+// 													withMultiSelection(
+// 														withSelection(
+// 															withInlineSideEditor(
+// 																withFilters(
+// 																	withPresetButtons(
+// 																		withContextMenu(
+// 																			GridComponent
+// 																		)
+// 																	),
+// 																	true // isGrid
+// 																)
+// 															)
+// 														)
+// 													)
+// 												)
+// 											)
+// 										)
+// 									)
+// 								);
+
 export default Grid;

package/src/Components/Hoc/withInlineEditor.js

@@ -31,10 +31,10 @@ function withAdditionalProps(WrappedComponent) {
 }
 
 // NOTE: Effectivtly, the HOC composition is:
-// withAdditionalProps(withEditor(withWindowedEditor))
+// withAdditionalProps(withEditor(withInlineEditor))
 
-export default function withInlineEditor(WrappedComponent) {
-	return withAdditionalProps(withEditor((props) => {
+export default function withInlineEditor(WrappedComponent, skipWrappers = false) {
+	const InlineEditor = (props) => {
 		const {
 				editorType,
 				isEditorShown = false,
@@ -82,11 +82,17 @@ 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';
 			};
+		
+		useEffect(() => {
+			if (maskRef.current) {
+				maskRef.current.focus();
+			}
+		}, [isEditorShown]);
 
 		if (isEditorShown && selection.length < 1) {
-			throw new Error('Lost the selection!');
+			return null; // phantom record may have just been deleted
 		}
 		if (isEditorShown && selection.length !== 1) {
 			throw new Error('Can only edit one at a time with inline editor!');
@@ -100,57 +106,59 @@ 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();
 														e.stopPropagation();
 														onEditorCancel();
 													}}
+													tabIndex={-1}
+													onKeyDown={(e) => {
+														if (e.key === 'Escape') {
+															onEditorCancel();
+														}
+													}}
 												></Box>}
 								<Column
 									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>
 							</>;
 		}
@@ -162,5 +170,9 @@ export default function withInlineEditor(WrappedComponent) {
 					inlineEditor={inlineEditor}
 					isInlineEditorShown={isEditorShown}
 				/>;
-	}));
+	};
+	if (skipWrappers) {
+		return InlineEditor; // this is for InlineSideEditor, not yet implemented
+	}
+	return withAdditionalProps(withEditor(InlineEditor));
 }

package/src/Components/Hoc/withInlineSideEditor.js

@@ -0,0 +1,9 @@
+
+import withInlineEditor from './withInlineEditor.js';
+import withSideEditor from './withSideEditor.js';
+
+
+export default function withInlineSideEditor(WrappedComponent) {
+	throw Error('Not yet implemented');
+	return withSideEditor(withInlineEditor(WrappedComponent, true));
+}

package/src/Components/Hoc/withSideEditor.js

@@ -20,7 +20,7 @@ function withAdditionalProps(WrappedComponent) {
 // withAdditionalProps(withEditor(withSideEditor))
 
 export default function withSideEditor(WrappedComponent, isTree = false) {
-	return withAdditionalProps(withEditor((props) => {
+	const SideEditor = (props) => {
 		const {
 				Editor,
 				editorProps = {},
@@ -57,5 +57,6 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 								reference="editor"
 							/>}
 				/>;
-	}));
+	};
+	return withAdditionalProps(withEditor(SideEditor));
 }

package/src/Components/Hoc/withWindowedEditor.js

@@ -42,7 +42,7 @@ function withAdditionalProps(WrappedComponent) {
 // withAdditionalProps(withEditor(withWindowedEditor))
 
 export default function withWindowedEditor(WrappedComponent, isTree = false) {
-	return withAdditionalProps(withEditor((props) => {
+	const WindowedEditor = (props) => {
 		const {
 				isEditorShown = false,
 				setIsEditorShown,
@@ -81,5 +81,6 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 							/>
 						</Modal>}
 				</>;
-	}, isTree));
+	};
+	return withAdditionalProps(withEditor(WindowedEditor, isTree));
 }

package/src/Constants/Editor.js

@@ -1,6 +1,7 @@
 export const EDITOR_TYPE__INLINE = 'EDITOR_TYPE__INLINE';
 export const EDITOR_TYPE__WINDOWED = 'EDITOR_TYPE__WINDOWED';
 export const EDITOR_TYPE__SIDE = 'EDITOR_TYPE__SIDE';
+export const EDITOR_TYPE__INLINE_SIDE = 'EDITOR_TYPE__INLINE_SIDE';
 export const EDITOR_TYPE__SMART = 'EDITOR_TYPE__SMART';
 export const EDITOR_TYPE__PLAIN = 'EDITOR_TYPE__PLAIN';
 export const EDITOR_MODE__VIEW = 'EDITOR_MODE__VIEW';