@onehat/ui 0.2.40 → 0.2.42

package/package.json

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

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

@@ -5,10 +5,13 @@ import {
 import UiGlobals from '../../../UiGlobals.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
+import _ from 'lodash';
 
 const
 	TextAreaElement = (props) => {
-		const styles = UiGlobals.styles;
+		const
+			styles = UiGlobals.styles,
+			value = _.isNil(props.value) ? '' : props.value; // null value may not actually reset this TextArea, so set it explicitly to empty string
 		return <TextArea
 					ref={props.outerRef}
 					onChangeText={props.setValue}
@@ -17,6 +20,7 @@ const
 					fontSize={styles.FORM_TEXTAREA_FONTSIZE}
 					h={styles.FORM_TEXTAREA_HEIGHT}
 					{...props}
+					value={value}
 				/>;
 	},
 	TextAreaField = withValue(TextAreaElement);

package/src/Components/Form/Form.js

@@ -14,6 +14,9 @@ import {
 	EDITOR_TYPE__SIDE,
 	EDITOR_TYPE__SMART,
 	EDITOR_TYPE__PLAIN,
+	EDITOR_MODE__VIEW,
+	EDITOR_MODE__ADD,
+	EDITOR_MODE__EDIT,
 } from '../../Constants/Editor.js';
 import { useForm, Controller } from 'react-hook-form'; // https://react-hook-form.com/api/
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
@@ -74,6 +77,7 @@ function Form(props) {
 			
 			// withEditor
 			isViewOnly = false,
+			editorMode,
 			onCancel,
 			onEditorSave,
 			onSave = onEditorSave,
@@ -456,18 +460,32 @@ function Form(props) {
 					<Row flex={1}>{formComponents}</Row>
 				</ScrollView>;
 	}
+
+	let editorModeF;
+	switch(editorMode) {
+		case EDITOR_MODE__VIEW:
+			editorModeF = 'View';
+			break;
+		case EDITOR_MODE__ADD:
+			editorModeF = 'Add';
+			break;
+		case EDITOR_MODE__EDIT:
+			editorModeF = isMultiple ? 'Edit Multiple' : 'Edit';
+			break;
+	}
 	
 	return <Column {...sizeProps} onLayout={onLayout}>
 
-				{onBack && <Row p={2} alignItems="center">
-								<Button
-									key="backBtn"
-									onPress={onBack}
-									leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
-									color="#fff"
-								>Back</Button>
-								<Text ml={2} fontSize={18}>Edit Mode</Text>
-							</Row>}
+				<Row p={2} alignItems="center">
+					{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 
+						<Button
+							key="backBtn"
+							onPress={onBack}
+							leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
+							color="#fff"
+						>Back</Button>}
+					<Text ml={2} fontSize={18}>{editorModeF} Mode</Text>
+				</Row>
 				
 				{editor}
 
@@ -475,7 +493,7 @@ function Form(props) {
 					<Button.Group space={2} {...buttonGroupProps}>
 						{!isViewOnly && <IconButton
 											key="resetBtn"
-											onPress={reset}
+											onPress={() => reset()}
 											icon={<Rotate color="#fff" />}
 										/>}
 						{!isViewOnly && onCancel && <Button
@@ -495,7 +513,7 @@ function Form(props) {
 														onPress={(e) => handleSubmit(onSave, onSubmitError)(e)}
 														isDisabled={!_.isEmpty(formState.errors) || (!isSingle && !record?.isPhantom && !formState.isDirty)}
 														color="#fff"
-													>Save</Button>}
+													>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
 						{isViewOnly && onClose && <Button
 														key="closeBtn"
 														onPress={onClose}

package/src/Components/Hoc/withEditor.js

@@ -1,4 +1,4 @@
-import { useState, } from 'react';
+import { useEffect, useState, } from 'react';
 import {
 	EDITOR_MODE__VIEW,
 	EDITOR_MODE__ADD,
@@ -8,6 +8,8 @@ import _ from 'lodash';
 
 export default function withEditor(WrappedComponent) {
 	return (props) => {
+
+		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
 				useEditor = false,
 				userCanEdit = true,
@@ -38,9 +40,9 @@ export default function withEditor(WrappedComponent) {
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
-			[editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW),
+			[lastSelection, setLastSelection] = useState(),
 			addRecord = async () => {
-				if (!userCanEdit) {
+				if (!userCanEdit || disableAdd) {
 					return;
 				}
 				const
@@ -52,7 +54,7 @@ export default function withEditor(WrappedComponent) {
 				setIsEditorShown(true);
 			},
 			editRecord = () => {
-				if (!userCanEdit) {
+				if (!userCanEdit || disableEdit) {
 					return;
 				}
 				setIsEditorViewOnly(false);
@@ -60,7 +62,7 @@ export default function withEditor(WrappedComponent) {
 				setIsEditorShown(true);
 			},
 			deleteRecord = (e) => {
-				if (!userCanEdit) {
+				if (!userCanEdit || disableDelete) {
 					return;
 				}
 				const
@@ -74,11 +76,9 @@ export default function withEditor(WrappedComponent) {
 					confirm('Are you sure you want to delete the ' + identifier, onDelete);
 				}
 			},
-			onDelete = () => {
+			onDelete = async () => {
 				Repository.delete(selection);
-				if (!Repository.isAutoSave) {
-					Repository.save();
-				}
+				await Repository.save();
 			},
 			viewRecord = () => {
 				if (!userCanView) {
@@ -92,7 +92,7 @@ export default function withEditor(WrappedComponent) {
 				setIsEditorShown(true);
 			},
 			duplicateRecord = async () => {
-				if (!userCanEdit) {
+				if (!userCanEdit || disableDuplicate) {
 					return;
 				}
 				if (selection.length !== 1) {
@@ -104,9 +104,10 @@ export default function withEditor(WrappedComponent) {
 					rawValues = _.omit(entity.rawValues, idProperty),
 					duplicate = await Repository.add(rawValues, false, true);
 				setSelection([duplicate]);
+				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
-			onEditorSave = (data, e) => {
+			onEditorSave = async (data, e) => {
 				const
 					what = record || selection,
 					isSingle = what.length === 1;
@@ -123,24 +124,53 @@ export default function withEditor(WrappedComponent) {
 
 
 				}
-				if (!Repository.isAutoSave) {
-					Repository.save();
-				}
+				await Repository.save();
 				setIsEditorShown(false);
 			},
-			onEditorCancel = () => {
+			onEditorCancel = async () => {
 				const
 					isSingle = selection.length === 1,
 					isPhantom = selection[0] && selection[0].isPhantom;
 				if (isSingle && isPhantom) {
-					onDelete();
+					await onDelete();
 				}
+				setEditorMode(EDITOR_MODE__VIEW);
 				setIsEditorShown(false);
 			},
 			onEditorClose = () => {
 				setIsEditorShown(false);
+			},
+			calculateEditorMode = () => {
+				let mode = EDITOR_MODE__VIEW;
+				if (userCanEdit) {
+					if (selection.length > 1) {
+						if (!disableEdit) {
+							// For multiple entities selected, change it to edit multiple mode
+							mode = EDITOR_MODE__EDIT;
+						}
+					} else if (selection.length === 1 && selection.isPhantom) {
+						if (!disableAdd) {
+							// When a phantom entity is selected, change it to add mode.
+							mode = EDITOR_MODE__ADD;
+						}
+					}
+				}
+				return mode;
 			};
 
+		useEffect(() => {
+			// When selection changes, set the mode appropriately
+			const mode = calculateEditorMode();
+			setEditorMode(mode);
+			setLastSelection(selection);
+		}, [selection]);
+
+		if (lastSelection !== selection) {
+			// NOTE: If I don't calculate this on the fly for selection changes,
+			// we see a flash of the previous state, since useEffect hasn't yet run.
+			editorMode = calculateEditorMode();
+		}
+
 		return <WrappedComponent
 					{...props}
 					currentRecord={currentRecord}