@onehat/ui 0.2.41 → 0.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.41",
+	"version": "0.2.43",
 	"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,12 +77,13 @@ function Form(props) {
 			
 			// withEditor
 			isViewOnly = false,
+			editorMode,
 			onCancel,
 			onEditorSave,
 			onSave = onEditorSave,
 			onClose,
 
-			// withSelection
+			// DataMgt
 			selectorId,
 			selectorSelected,
 
@@ -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/Grid/Grid.js

@@ -82,6 +82,7 @@ export function Grid(props) {
 			hideNavColumn = true,
 			noneFoundText,
 			disableLoadingIndicator = false,
+			disableSelectorSelected = false,
 			showRowExpander = false,
 			rowExpanderTpl = '',
 			showHeaders = true,
@@ -129,10 +130,9 @@ export function Grid(props) {
 			isInSelection,
 			noSelectorMeansNoResults = false,
 
-			// selectorSelected
+			// DataMgt
 			selectorId,
 			selectorSelected,
-			disableSelectorSelected = false,
 
 			// withInlineEditor
 			inlineEditorRef,

package/src/Components/Hoc/withEditor.js

@@ -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,
@@ -25,6 +27,10 @@ export default function withEditor(WrappedComponent) {
 				},
 				record,
 
+				// DataMgt
+				selectorId,
+				selectorSelected,
+
 				// withData
 				Repository,
 
@@ -38,21 +44,27 @@ 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
 					defaultValues = Repository.getSchema().model.defaultValues,
-					entity = await Repository.add(defaultValues, false, true, true);
+					addValues = _.clone(defaultValues);
+
+				if (selectorId && !_.isEmpty(selectorSelected)) {
+					addValues[selectorId] = selectorSelected.id;
+				}
+
+				const entity = await Repository.add(addValues, false, true, true);
 				setSelection([entity]);
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__ADD);
 				setIsEditorShown(true);
 			},
 			editRecord = () => {
-				if (!userCanEdit) {
+				if (!userCanEdit || disableEdit) {
 					return;
 				}
 				setIsEditorViewOnly(false);
@@ -60,7 +72,7 @@ export default function withEditor(WrappedComponent) {
 				setIsEditorShown(true);
 			},
 			deleteRecord = (e) => {
-				if (!userCanEdit) {
+				if (!userCanEdit || disableDelete) {
 					return;
 				}
 				const
@@ -74,11 +86,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 +102,7 @@ export default function withEditor(WrappedComponent) {
 				setIsEditorShown(true);
 			},
 			duplicateRecord = async () => {
-				if (!userCanEdit) {
+				if (!userCanEdit || disableDuplicate) {
 					return;
 				}
 				if (selection.length !== 1) {
@@ -104,9 +114,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;
@@ -117,42 +128,63 @@ export default function withEditor(WrappedComponent) {
 				} else if (selection.length > 1) {
 					// Edit multiple entities
 
-
-					debugger;
-
-
-
-				}
-				if (!Repository.isAutoSave) {
-					Repository.save();
+					// Loop through all entities and change fields that are not null
+					const propertyNames = Object.getOwnPropertyNames(data);
+					_.each(propertyNames, (propertyName) => {
+						if (!_.isNil(data[propertyName])) {
+							_.each(what, (rec) => {
+								rec[propertyName] = data[propertyName]
+							});
+						}
+					});
 				}
+				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(() => {
-			if (selection.length === 1 && selection.isPhantom && userCanEdit) {
-				if (editorMode !== EDITOR_MODE__ADD) {
-					setEditorMode(EDITOR_MODE__ADD);
-				}
-			} else {
-				if (editorMode !== EDITOR_MODE__VIEW) {
-					setEditorMode(EDITOR_MODE__VIEW);
-				}
-			}
+			// 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}

package/src/Components/Hoc/withPresetButtons.js

@@ -33,12 +33,6 @@ export default function withPresetButtons(WrappedComponent) {
 			} = props,
 			{
 				// for local use
-				selection,
-				onAdd,
-				onEdit,
-				onDelete,
-				onView,
-				onDuplicate,
 				useEditor = true,
 				disableAdd = false,
 				disableEdit = false,
@@ -51,6 +45,19 @@ export default function withPresetButtons(WrappedComponent) {
 				// withEditor
 				userCanEdit = true,
 				userCanView = true,
+				onAdd,
+				onEdit,
+				onDelete,
+				onView,
+				onDuplicate,
+
+				// withSelection
+				selection,
+				setSelection,
+
+				// DataMgt
+				selectorId,
+				selectorSelected,
 			} = props,
 			[isReady, setIsReady] = useState(false),
 			[localContextMenuItems, setLocalContextMenuItems] = useState([]),
@@ -210,7 +217,7 @@ export default function withPresetButtons(WrappedComponent) {
 			if (!isReady) {
 				setIsReady(true);
 			}
-		}, [selection, localColumnsConfig]);
+		}, [selection, selectorSelected, localColumnsConfig]);
 
 		if (!isReady) {
 			return null;
@@ -229,6 +236,7 @@ export default function withPresetButtons(WrappedComponent) {
 		if (additionalToolbarButtons) {
 			additionalToolbarButtonsToPass.concat(additionalToolbarButtons);
 		}
+
 		return <WrappedComponent
 					{...propsToPass}
 					contextMenuItems={contextMenuItemsToPass}

package/src/Components/Screens/DataMgt.js

@@ -44,8 +44,8 @@ export default function DataMgt(props) {
 		[isWestCollapsed, setIsWestCollapsed] = useState(westStartsCollapsed),
 		[isEastCollapsed, setIsEastCollapsed] = useState(eastStartsCollapsed),
 		[isFullscreen, setIsFullscreen] = useState(false),
-		[westSelected, setWestSelectedRaw] = useState([]),
-		[centerSelected, setCenterSelected] = useState([]),
+		[westSelected, setWestSelectedRaw] = useState(),
+		[centerSelected, setCenterSelected] = useState(),
 		setWestSelected = (selected) => {
 			setWestSelectedRaw(selected);
 			setCenterSelected(); // clear selection in center
@@ -156,7 +156,7 @@ export default function DataMgt(props) {
 					autoLoad={!showSelector}
 					uniqueRepository={true}
 					selectorId={showSelector ? westSelector_id : null}
-					selectorSelected={westSelected}
+					selectorSelected={westSelected?.[0]}
 					noSelectorMeansNoResults={centerNoSelectorMeansNoResults}
 					onChangeSelection={setCenterSelected}
 					onEvent={onEvent}
@@ -167,7 +167,7 @@ export default function DataMgt(props) {
 		isFullscreen,
 		showSelector,
 		westSelected,
-		westSelected?.hash,
+		westSelected?.[0].hash,
 		centerNoSelectorMeansNoResults,
 		// {...centerProps}
 	])
@@ -191,7 +191,7 @@ export default function DataMgt(props) {
 					controlledByCenter = typeof associatedPanel.props.controlledByCenter === 'undefined' ? true : associatedPanel.props.controlledByCenter,
 					thisAssociatedPanelProps = {
 						selectorId: controlledByCenter ? centerSelector_id : westSelector_id,
-						selectorSelected: controlledByCenter ? centerSelected : westSelected,
+						selectorSelected: controlledByCenter ? centerSelected?.[0] : westSelected?.[0],
 						...associatedPanel.props,
 					};
 				return React.cloneElement(associatedPanel, { key: ix, reference: 'associatedPanel' + ix, ...allAssociatedPanelProps, ...thisAssociatedPanelProps, });