@onehat/ui 0.2.63 → 0.2.65

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.63",
+	"version": "0.2.65",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -25,7 +25,7 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.18.0",
+		"@onehat/data": "^1.18.1",
 		"@hookform/resolvers": "^3.1.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"js-cookie": "^3.0.5",

package/src/Components/Form/Form.js

@@ -121,7 +121,7 @@ function Form(props) {
 			mode: 'onChange', // onChange | onBlur | onSubmit | onTouched | all
 			// reValidateMode: 'onChange', // onChange | onBlur | onSubmit
 			defaultValues,
-			values: defaultValues,
+			// values: defaultValues, // NOTE: This will cause a looping re-render if not used carefully!
 			// resetOptions: {
 			// 	keepDirtyValues: false, // user-interacted input will be retained
 			// 	keepErrors: false, // input errors will be retained with value update
@@ -493,7 +493,13 @@ function Form(props) {
 					{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && 
 						<Button
 							key="viewBtn"
-							onPress={onViewMode}
+							onPress={() => {
+								if (!_.isEmpty(formState.dirtyFields)) {
+									confirm('This record has unsaved changes. Are you sure you want to switch to "View" mode? Changes will be lost.', onViewMode);
+								} else {
+									onViewMode();
+								}
+							}}
 							leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
 							color="#fff"
 						>To View</Button>}
@@ -521,7 +527,7 @@ function Form(props) {
 														key="cancelBtn"
 														variant="ghost"
 														onPress={() => {
-															if (formState.isDirty) {
+															if (!_.isEmpty(formState.dirtyFields)) {
 																confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', onCancel);
 															} else {
 																onCancel();
@@ -532,7 +538,7 @@ function Form(props) {
 						{!isViewOnly && onSave && <Button
 														key="saveBtn"
 														onPress={(e) => handleSubmit(onSave, onSubmitError)(e)}
-														isDisabled={!_.isEmpty(formState.errors) || (!isSingle && !record?.isPhantom && !formState.isDirty)}
+														isDisabled={!_.isEmpty(formState.errors) || (!isSingle && !record?.isPhantom && !_.isEmpty(formState.dirtyFields))}
 														color="#fff"
 													>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
 						{isViewOnly && onClose && <Button

package/src/Components/Hoc/withAlert.js

@@ -155,16 +155,16 @@ export default function withAlert(WrappedComponent) {
 							<Panel
 								title={title}
 								isCollapsible={false}
-								p={5}
+								p={0}
 								footer={<Footer justifyContent="flex-end" >
 											<Button.Group space={2}>
 												{buttons}
 											</Button.Group>
 										</Footer>}
 								>
-								<Row flex={1}>
-									<Column w={50} p={0} mr={5}>
-										<Icon as={TriangleExclamation} size={10}/>
+								<Row flex={1} p={5}>
+									<Column w="40px" p={0} mr={5}>
+										<Icon as={TriangleExclamation} size={10} color="#f00" />
 									</Column>
 									<Text>{message}</Text>
 								</Row>

package/src/Components/Hoc/withEditor.js

@@ -23,7 +23,7 @@ export default function withEditor(WrappedComponent) {
 					if (selection.length > 1) {
 						return 'records?';
 					}
-					return 'record?';
+					return 'record' + (selection[0].displayValue ? ' ' + selection[0].displayValue : '') + '?';
 				},
 				record,
 
@@ -49,9 +49,8 @@ export default function withEditor(WrappedComponent) {
 				if (!userCanEdit || disableAdd) {
 					return;
 				}
-				const
-					defaultValues = Repository.getSchema().model.defaultValues,
-					addValues = _.clone(defaultValues);
+				const defaultValues = Repository.getSchema().model.defaultValues;
+				let addValues = _.clone(defaultValues);
 
 				if (selectorId && !_.isEmpty(selectorSelected)) {
 					addValues[selectorId] = selectorSelected.id;
@@ -67,8 +66,11 @@ export default function withEditor(WrappedComponent) {
 					await Repository.reload();
 				}
 
+				// Unmap the values, so we can input true originalData
+				addValues = Repository.unmapData(addValues);
+
 				const entity = await Repository.add(addValues, false, true, true);
-				setSelection([entity]); 
+				setSelection([entity]);
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__ADD);
 				setIsEditorShown(true);
@@ -97,8 +99,10 @@ export default function withEditor(WrappedComponent) {
 				}
 			},
 			onDelete = async () => {
-				Repository.delete(selection);
-				await Repository.save();
+				await Repository.delete(selection);
+				if (!Repository.isAutoSave) {
+					await Repository.save();
+				}
 			},
 			viewRecord = () => {
 				if (!userCanView) {