@onehat/ui 0.2.64 → 0.2.66

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -14,6 +14,7 @@ export default function Editor(props) {
 			onEditorCancel: onCancel,
 			onEditorSave: onSave,
 			onEditorClose: onClose,
+			onEditorDelete: onDelete,
 			editorMode,
 			setEditorMode,
 
@@ -41,6 +42,7 @@ export default function Editor(props) {
 					Repository={Repository}
 					onEditMode={isViewOnly ? null : onEditMode}
 					onClose={onClose}
+					onDelete={onDelete}
 					{...props}
 				/>;
 	}
@@ -49,11 +51,12 @@ export default function Editor(props) {
 	// and only show in one column when it's not.
 
 	return <Form
+				{...props}
 				record={selection}
 				onViewMode={onViewMode}
 				onCancel={onCancel}
 				onSave={onSave}
 				onClose={onClose}
-				{...props}
+				onDelete={onDelete}
 			/>;
 }

package/src/Components/Editor/Viewer.js

@@ -0,0 +1,71 @@
+import {
+	Button,
+	Column,
+	Icon,
+	ScrollView,
+	Row,
+	Text,
+} from 'native-base';
+import Label from '../Form/Label.js';
+import Pencil from '../Icons/Pencil.js';
+import Footer from '../Layout/Footer.js';
+import _ from 'lodash';
+
+// This is a wrapper for the Viewer subcomponent passed to props,]
+// that adds
+
+
+export default function Viewer(props) {
+	const {
+			Viewer, // Subcomponent
+			additionalViewButtons = [],
+			onEditMode,
+			onClose,
+			onDelete,
+		} = props;
+
+	return <Column flex={1} w="100%">
+				<ScrollView flex={1} w="100%">
+					<Column m={2}>
+						{onEditMode && <Row mb={4} justifyContent="flex-end">
+											<Button
+												key="editBtn"
+												onPress={onEditMode}
+												leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
+												color="#fff"
+											>To Edit</Button>
+										</Row>}
+						
+						{!_.isEmpty(additionalViewButtons) && 
+							<Row p={2} alignItems="center" justifyContent="flex-end">
+								{additionalViewButtons}
+							</Row>}
+
+						<Viewer {...props} />
+
+					</Column>
+				</ScrollView>
+				<Footer justifyContent="flex-end">
+					{onDelete && <Row flex={1} justifyContent="flex-start">
+											<Button
+												key="deleteBtn"
+												onPress={() => {
+													confirm('Are you sure you want to delete this record?', onDelete);
+												}}
+												bg="warning"
+												_hover={{
+													bg: 'warningHover',
+												}}
+												color="#fff"
+											>Delete</Button>
+										</Row>}
+					<Button.Group space={2}>
+						<Button
+							key="closeBtn"
+							onPress={onClose}
+							color="#fff"
+						>Close</Button>
+					</Button.Group>
+				</Footer>
+			</Column>;
+}

package/src/Components/Form/Form.js

@@ -65,7 +65,7 @@ function Form(props) {
 			onBack,
 			onReset,
 			onViewMode,
-			additionalButtons = [],
+			additionalEditButtons = [],
 			ancillaryComponents = [],
 			
 			// sizing of outer container
@@ -83,9 +83,9 @@ function Form(props) {
 			isViewOnly = false,
 			editorMode,
 			onCancel,
-			onEditorSave,
-			onSave = onEditorSave,
+			onSave,
 			onClose,
+			onDelete,
 
 			// DataMgt
 			selectorId,
@@ -121,7 +121,7 @@ function Form(props) {
 			mode: 'onChange', // onChange | onBlur | onSubmit | onTouched | all
 			// reValidateMode: 'onChange', // onChange | onBlur | onSubmit
 			defaultValues,
-			// values: defaultValues, // NOTE: This will cause a looping re-render if not used carefully!
+			// values: defaultValues,
 			// resetOptions: {
 			// 	keepDirtyValues: false, // user-interacted input will be retained
 			// 	keepErrors: false, // input errors will be retained with value update
@@ -478,6 +478,14 @@ function Form(props) {
 			editorModeF = isMultiple ? 'Edit Multiple' : 'Edit';
 			break;
 	}
+
+	let isSaveDisabled = false;
+	if (!_.isEmpty(formState.errors)) {
+		isSaveDisabled = true;
+	}
+	if (_.isEmpty(formState.dirtyFields) && !record?.isRemotePhantom) {
+		isSaveDisabled = true;
+	}
 	
 	return <Column {...sizeProps} onLayout={onLayout}>
 
@@ -493,20 +501,40 @@ 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>}
 				</Row>
-				{!_.isEmpty(additionalButtons) && 
+				{editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalEditButtons) && 
 					<Row p={2} alignItems="center" justifyContent="flex-end">
-						{additionalButtons}
+						{additionalEditButtons}
 					</Row>}
 				
 				{editor}
 
 				<Footer justifyContent="flex-end" {...footerProps}>
+					{onDelete && <Row flex={1} justifyContent="flex-start">
+										<Button
+											key="deleteBtn"
+											onPress={() => {
+												confirm('Are you sure you want to delete this record?', onDelete);
+											}}
+											bg="warning"
+											_hover={{
+												bg: 'warningHover',
+											}}
+											color="#fff"
+										>Delete</Button>
+									</Row>}
 					<Button.Group space={2} {...buttonGroupProps}>
+				
 						{!isViewOnly && <IconButton
 											key="resetBtn"
 											onPress={() => {
@@ -521,7 +549,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 +560,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={isSaveDisabled}
 														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,
 
@@ -45,10 +45,7 @@ export default function withEditor(WrappedComponent) {
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
-			addRecord = async () => {
-				if (!userCanEdit || disableAdd) {
-					return;
-				}
+			onAdd = async () => {
 				const defaultValues = Repository.getSchema().model.defaultValues;
 				let addValues = _.clone(defaultValues);
 
@@ -75,31 +72,25 @@ export default function withEditor(WrappedComponent) {
 				setEditorMode(EDITOR_MODE__ADD);
 				setIsEditorShown(true);
 			},
-			editRecord = () => {
-				if (!userCanEdit || disableEdit) {
-					return;
-				}
+			onEdit = () => {
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
-			deleteRecord = (e) => {
-				if (!userCanEdit || disableDelete) {
-					return;
-				}
+			onDelete = () => {
 				const
 					isSingle = selection.length === 1,
 					isPhantom = selection[0] && selection[0].isPhantom;
 
 				if (isSingle && isPhantom) {
-					onDelete();
+					deleteRecord();
 				} else {
 					const identifier = getRecordIdentifier(selection);
-					confirm('Are you sure you want to delete the ' + identifier, onDelete);
+					confirm('Are you sure you want to delete the ' + identifier, deleteRecord);
 				}
 			},
-			onDelete = async () => {
-				Repository.delete(selection);
+			deleteRecord = async () => {
+				await Repository.delete(selection);
 				if (!Repository.isAutoSave) {
 					await Repository.save();
 				}
@@ -160,7 +151,7 @@ export default function withEditor(WrappedComponent) {
 					isSingle = selection.length === 1,
 					isPhantom = selection[0] && selection[0].isPhantom;
 				if (isSingle && isPhantom) {
-					await onDelete();
+					await deleteRecord();
 				}
 				setEditorMode(EDITOR_MODE__VIEW);
 				setIsEditorShown(false);
@@ -168,6 +159,11 @@ export default function withEditor(WrappedComponent) {
 			onEditorClose = () => {
 				setIsEditorShown(false);
 			},
+			onEditorDelete = async () => {
+				await deleteRecord();
+				setEditorMode(EDITOR_MODE__VIEW);
+				setIsEditorShown(false);
+			},
 			calculateEditorMode = () => {
 				let mode = EDITOR_MODE__VIEW;
 				if (userCanEdit) {
@@ -208,13 +204,14 @@ export default function withEditor(WrappedComponent) {
 					editorMode={editorMode}
 					setEditorMode={setEditorMode}
 					setIsEditorShown={setIsEditorShown}
-					onAdd={addRecord}
-					onEdit={editRecord}
-					onDelete={deleteRecord}
+					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
+					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
+					onDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onDelete}
 					onView={viewRecord}
 					onDuplicate={duplicateRecord}
 					onEditorSave={onEditorSave}
 					onEditorCancel={onEditorCancel}
+					onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
 					onEditorClose={onEditorClose}
 					useEditor={useEditor}
 					userCanEdit={userCanEdit}

package/src/Styles/ThemeOverrides.js

@@ -23,6 +23,7 @@ const ThemeOverrides = {
 		vip: '#3a78bc',
 		navBlue: '#3b82f6',
 		warning: '#d92b2b',
+		warningHover: '#af1313',
 		orange: '#de9000',
 		greens: {
 			100: '#4CAF50',