@onehat/ui 0.3.72 → 0.3.74

package/package.json

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

package/src/Components/Form/Form.js

@@ -712,7 +712,7 @@ function Form(props) {
 			}
 		}
 
-		if (!_.isEmpty(formState.errors)) {
+		if (!_.isEmpty(formState.errors) || !formState.isValid) {
 			isSaveDisabled = true;
 			isSubmitDisabled = true;
 		}
@@ -761,7 +761,7 @@ function Form(props) {
 		}
 	}
 	
-	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef}>
+	return <Column {...sizeProps} pb={10} onLayout={onLayoutDecorated} ref={formRef}>
 				{!!containerWidth && <>
 					{editorType === EDITOR_TYPE__INLINE &&
 						<ScrollView

package/src/Components/Messages/ConfirmationMessage.js

@@ -12,12 +12,13 @@ export default function ConfirmationMessage(props) {
 			onOk = emptyFn,
 		} = props;
 
-	return <Modal {...props} _backdrop={{ bg: "#000" }}>
+	return <Modal isOpen={true} {...props} _backdrop={{ bg: "#000" }}>
 				<Modal.Content maxWidth="400px">
+					<Modal.Header>Confirm</Modal.Header>
 					<Modal.Body p={5} pb={0} borderTopWidth={0}>
 						<Text color="#000">{textMessage}</Text>
 					</Modal.Body>
-					<Modal.Footer p={0} pr={4} borderTopWidth={0}>
+					<Modal.Footer py={2} pr={4}>
 						<Button variant="ghost" color="primary.800" onPress={onCancel}>Cancel</Button>
 						<Button variant="ghost" color="primary.800" onPress={onOk}>OK</Button>
 					</Modal.Footer>

package/src/Components/Messages/ErrorMessage.js

@@ -1,15 +1,36 @@
 import {
+	Button,
 	Icon,
-	Row,
+	Modal,
 	Text,
 } from 'native-base';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 
 export default function ErrorMsg(props) {
-	return <Row justifyContent="center" alignItems="center" my={2} w="100%">
-				<Icon as={TriangleExclamation} color="red.500" size="sm" mr={1} />
-				<Text color="red.500">
-					{props.children}
-				</Text>
-			</Row>;
+	const {
+			text = 'Error',
+			color = 'red.500',
+			onOk,
+		} = props;
+console.log('render ErrorMessage text', text);
+	return <Modal isOpen={true} {...props} _backdrop={{ bg: "#000" }}>
+				<Modal.Content>
+					<Modal.Header>Alert</Modal.Header>
+					<Modal.Body
+						borderTopWidth={0}
+						bg="#fff"
+						p={3}
+						justifyContent="center"
+						alignItems="center"
+						borderRadius={5}
+						flexDirection="row"
+					>
+						<Icon as={TriangleExclamation} color="red.500" size="md" mr={1} />
+						<Text color={color} fontSize="18px">{text}</Text>
+					</Modal.Body>
+					<Modal.Footer py={2} pr={4}>
+						<Button color="primary.800" onPress={onOk}>OK</Button>
+					</Modal.Footer>
+				</Modal.Content>
+			</Modal>;
 }