@onehat/ui 0.3.321 → 0.3.322

package/package.json

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

package/src/Components/Form/Form.js

@@ -82,6 +82,8 @@ function Form(props) {
 			onReset,
 			onInit,
 			onViewMode,
+			onValidityChange,
+			onDirtyChange,
 			submitBtnLabel,
 			onSubmit,
 			formSetup, // this fn will be executed after the form setup is complete
@@ -807,6 +809,18 @@ function Form(props) {
 		};
 	}, [Repository]);
 
+	if (onValidityChange) {
+		useEffect(() => {
+			onValidityChange(formState.isValid);
+		}, [formState.isValid]);
+	}
+
+	if (onDirtyChange) {
+		useEffect(() => {
+			onDirtyChange(formState.isDirty);
+		}, [formState.isDirty]);
+	}
+
 	if (skipAll) {
 		return null;
 	}
@@ -821,6 +835,8 @@ function Form(props) {
 
 	if (self) {
 		self.ref = formRef;
+		self.reset = doReset;
+		self.submit = handleSubmit;
 		self.formState = formState;
 		self.formSetValue = formSetValue;
 		self.formGetValues = formGetValues;

package/src/Components/Hoc/withModal.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, } from 'react';
+import React, { useState, useRef } from 'react';
 import {
 	Box,
 	Button,
@@ -8,7 +8,10 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import Form from '../Form/Form.js';
 import Panel from '../Panel/Panel.js';
+import IconButton from '../Buttons/IconButton.js';
+import Rotate from '../Icons/Rotate.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
 import testProps from '../../Functions/testProps.js';
@@ -31,19 +34,36 @@ export default function withModal(WrappedComponent) {
 			[message, setMessage] = useState(''),
 			[canClose, setCanClose] = useState(true),
 			[includeCancel, setIncludeCancel] = useState(false),
+			[includeReset, setIncludeReset] = useState(false),
 			[isModalShown, setIsModalShown] = useState(false),
+			[isValid, setIsValid] = useState(false),
+			[isDirty, setIsDirty] = useState(false),
 			[h, setHeight] = useState(250),
 			[w, setWidth] = useState(400),
 			[onOk, setOnOk] = useState(),
 			[okBtnLabel, setOkBtnLabel] = useState('OK'),
 			[onYes, setOnYes] = useState(),
 			[onNo, setOnNo] = useState(),
+			[onSubmit, setOnSubmit] = useState(),
+			[submitBtnLabel, setSubmitBtnLabel] = useState(),
 			[customButtons, setCustomButtons] = useState(),
+			[formProps, setFormProps] = useState(),
+			[self, setSelf] = useState(),
 			[color, setColor] = useState('#000'),
 			[body, setBody]	= useState(), 
+			useForm = !!formProps, // convenience flag
 			autoFocusRef = useRef(null),
 			cancelRef = useRef(null),
 			[width, height] = useAdjustedWindowSize(w, h),
+			onValidityChange = (isValid) => {
+				setIsValid(isValid);
+			},
+			onDirtyChange = (isDirty) => {
+				setIsDirty(isDirty);
+			},
+			onReset = () => {
+				self?.children?.ModalForm?.reset();
+			},
 			onCancel = () => {
 				setIsModalShown(false);
 			},
@@ -51,35 +71,41 @@ export default function withModal(WrappedComponent) {
 				const {
 					title = '',
 					message = '',
+					body,
 					canClose = true,
 					includeCancel = false,
 					onOk,
 					okBtnLabel,
 					onYes,
 					onNo,
+					onSubmit,
+					submitBtnLabel,
 					customButtons,
+					includeReset = false,
+					formProps,
+					self,
 					color,
-					// formItems = {},
-					body,
 					h,
 					w,
 				} = args;
 
-				if (!message && !body) {
-					throw new Error('Either message or body is required for showModal');
+				if (!message && !body && !formProps) {
+					throw new Error('Either message, body, or formProps is required for showModal');
+				}
+				if (includeReset && !self) {
+					throw new Error('self is required when using includeReset');
 				}
-
 				if (title) {
 					setTitle(title);
 				}
 				if (message) {
 					setMessage(message);
 				}
+				if (body) {
+					setBody(body);
+				}
 				setCanClose(canClose);
 				setIncludeCancel(includeCancel);
-				if (onNo) {
-					setOnNo(() => onNo);
-				}
 				if (onOk) {
 					setOnOk(() => onOk);
 				}
@@ -89,15 +115,28 @@ export default function withModal(WrappedComponent) {
 				if (onYes) {
 					setOnYes(() => onYes);
 				}
+				if (onNo) {
+					setOnNo(() => onNo);
+				}
+				if (onSubmit) {
+					setOnSubmit(() => onSubmit);
+				}
+				if (submitBtnLabel) {
+					setSubmitBtnLabel(submitBtnLabel);
+				}
 				if (customButtons) {
 					setCustomButtons(customButtons);
 				}
+				setIncludeReset(includeReset);
+				if (formProps) {
+					setFormProps(formProps);
+				}
+				if (self) {
+					setSelf(self);
+				}
 				if (color) {
 					setColor(color);
 				}
-				if (body) {
-					setBody(body);
-				}
 				if (h) {
 					setHeight(h);
 				}
@@ -111,6 +150,19 @@ export default function withModal(WrappedComponent) {
 		let buttons = [];
 		if (isModalShown) {
 			// assemble buttons
+			if (includeReset) {
+				buttons.push(<IconButton
+								{...testProps('resetBtn')}
+								key="resetBtn"
+								onPress={onReset}
+								icon={Rotate}
+								_icon={{
+									color: !isDirty ? 'trueGray.400' : '#000',
+								}}
+								isDisabled={!isDirty}
+								mr={2}
+							/>);
+			}
 			if (includeCancel) {
 				buttons.push(<Button
 									{...testProps('cancelBtn')}
@@ -147,6 +199,15 @@ export default function withModal(WrappedComponent) {
 								onPress={onYes}
 							>Yes</Button>);
 			}
+			if (useForm && onSubmit) {
+				buttons.push(<Button
+								{...testProps('submitBtn')}
+								key="submitBtn"
+								onPress={onSubmit}
+								isDisabled={!isValid}
+								color="#fff"
+							>{submitBtnLabel || 'Submit'}</Button>);
+			}
 			if (customButtons) {
 				_.each(customButtons, (button) => {
 					buttons.push(button);
@@ -154,6 +215,25 @@ export default function withModal(WrappedComponent) {
 			}
 		}
 
+		let modalBody = null;
+		if (useForm) {
+			modalBody = <Form
+							{...formProps} 
+							reference="ModalForm"
+							onValidityChange={onValidityChange} 
+							onDirtyChange={onDirtyChange}
+						/>;
+		} else if (body) {
+			modalBody = body;
+		} else {
+			modalBody = <>
+							<Box w="50px" mx={2}>
+								<Icon as={TriangleExclamation} color={color} size="10" />
+							</Box>
+							<Text flex={1} color={color} fontSize="18px">{message}</Text>
+						</>;
+		}
+
 		return <>
 					<WrappedComponent
 						{...props}
@@ -185,13 +265,7 @@ export default function withModal(WrappedComponent) {
 									borderRadius={5}
 									flexDirection="row"
 								>
-									{body || 
-										<>
-											<Box w="50px" mx={2}>
-												<Icon as={TriangleExclamation} color={color} size="10" />
-											</Box>
-											<Text flex={1} color={color} fontSize="18px">{message}</Text>
-										</>}
+									{modalBody}
 								</Modal.Body>
 								<Modal.Footer py={2} pr={4} justifyContent="flex-end">
 									{buttons}