@onehat/ui 0.3.100 → 0.3.101

package/package.json

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

package/src/Components/Form/Form.js

@@ -296,6 +296,7 @@ function Form(props) {
 					onChange: onEditorChange,
 					useSelectorId = false,
 					isHidden = false,
+					getDynamicProps,
 					...propsToPass
 				} = item,
 				editorTypeProps = {};
@@ -459,6 +460,10 @@ function Form(props) {
 							if (propsToPass.selectorId || editorTypeProps.selectorId) { // editorTypeProps.selectorId causes just this one field to use selectorId
 								editorTypeProps.selectorSelected = record;
 							}
+							let dynamicProps = {};
+							if (getDynamicProps) {
+								dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
+							}
 							let element = <Element
 												name={name}
 												value={value}
@@ -478,6 +483,7 @@ function Form(props) {
 												{...defaults}
 												{...propsToPass}
 												{...editorTypeProps}
+												{...dynamicProps}
 											/>;
 							if (editorType !== EDITOR_TYPE__INLINE) {
 								let message = null;

package/src/Components/Hoc/withAlert.js

@@ -13,8 +13,10 @@ import {
 	ALERT_MODE_YES,
 	ALERT_MODE_YES_NO,
 	ALERT_MODE_CUSTOM,
+	ALERT_MODE_INFO,
 } from '../../Constants/Alert.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
+import CircleInfo from '../Icons/CircleInfo.js';
 import _ from 'lodash';
 
 export default function withAlert(WrappedComponent) {
@@ -77,6 +79,15 @@ export default function withAlert(WrappedComponent) {
 			onCancel = () => {
 				setIsAlertShown(false);
 			},
+			onInfo = (msg) => {
+				clearAll();
+				setMode(ALERT_MODE_INFO);
+				setTitle('Info');
+				setMessage(msg);
+				setIncludeCancel(false);
+				setCanClose(true);
+				showAlert();
+			},
 			onOk = () => {
 				if (okCallback) {
 					okCallback();
@@ -122,6 +133,7 @@ export default function withAlert(WrappedComponent) {
 		}
 		switch(mode) {
 			case ALERT_MODE_OK:
+			case ALERT_MODE_INFO:
 				buttons.push(<Button
 								key="okBtn"
 								ref={autoFocusRef}
@@ -171,8 +183,8 @@ export default function withAlert(WrappedComponent) {
 						alert={onAlert}
 						confirm={onConfirm}
 						hideAlert={hideAlert}
+						showInfo={onInfo}
 					/>
-
 					<AlertDialog
 						leastDestructiveRef={cancelRef}
 						isOpen={isAlertShown}
@@ -182,9 +194,9 @@ export default function withAlert(WrappedComponent) {
 							{canClose && <AlertDialog.CloseButton />}
 							<AlertDialog.Header>{title}</AlertDialog.Header>
 							<AlertDialog.Body>
-								<Row>
+								<Row alignItems="center">
 									<Column w="40px" p={0} mr={5}>
-										<Icon as={TriangleExclamation} size={10} color="#f00" />
+										<Icon as={mode === ALERT_MODE_INFO ? CircleInfo : TriangleExclamation} size={10} color={mode === ALERT_MODE_INFO ? '#000' : '#f00'} />
 									</Column>
 									<Text flex={1}>{message}</Text>
 								</Row>

package/src/Components/Messages/WaitMessage.js

@@ -1,30 +1,82 @@
 import {
-	Button,
-	Modal,
-	Row,
+	Box,
 	Text,
 } from 'native-base';
+import {
+	Modal,
+	View,
+} from 'react-native';
+import {
+	UI_MODE_REACT_NATIVE,
+	UI_MODE_WEB,
+} from '../../Constants/UiModes.js';
+import UiGlobals from '../../UiGlobals.js';
 import Loading from './Loading.js';
 
+const
+	height = 50,
+	width = 200;
+
+// NOTE: THis component does NOT use the native-base Modal
+// because we need it to appear on top of all other Modals.
+// Therefore, we're using the ReactNative Modal, which at least for web
+// we can control the zIndex of.
+
 export default function WaitMessage(props) {
 	const {
 			textMessage = 'Please wait...',
 		} = props;
 
-	return <Modal {...props} _backdrop={{ bg: "#000" }}>
-				<Modal.Content>
-					<Modal.Body
-						borderTopWidth={0}
-						bg="#fff"
-						p={3}
-						justifyContent="center"
-						alignItems="center"
-						borderRadius={5}
-						flexDirection="row"
-					>
-						<Loading minHeight="auto" h={5} w={5} mr={2} />
-						<Text color="#000">{textMessage}</Text>
-					</Modal.Body>
-				</Modal.Content>
+	let transform;
+	if (UiGlobals.mode === UI_MODE_WEB) {
+		transform = 'translateX(-50%) translateY(-50%)';
+	}
+	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+		const
+			translatePercentage = -50,
+			translateY = (height * translatePercentage) / 100,
+			translateX = (width * translatePercentage) / 100;
+		transform = [
+			{
+				translateX,
+			},
+			{
+				translateY,
+			},
+		];
+	}
+
+	return <Modal visible={true} transparent={true} {...props}>
+				<View style={{
+					flex: 1,
+					backgroundColor: 'rgba(0, 0, 0, 0.3)',
+					justifyContent: 'center',
+					alignItems: 'center',
+				}}>
+					<View style={{
+						position: 'absolute',
+						top: '50%',
+						left: '50%',
+						transform,
+						height: height + 'px',
+						width: width + 'px',
+						zIndex: 100000, // should be the highest modal
+					}}>
+						<Box
+							borderTopWidth={0}
+							bg="#fff"
+							p={3}
+							h={height + 'px'}
+							w={width + 'px'}
+							justifyContent="center"
+							alignItems="center"
+							borderRadius={5}
+							flexDirection="row"
+						>
+							<Loading minHeight="auto" h={5} w={5} mr={2} />
+							<Text color="#000">{textMessage}</Text>
+						</Box>
+					</View>
+				</View>
 			</Modal>;
 }

package/src/Constants/Alert.js

@@ -2,3 +2,4 @@ export const ALERT_MODE_OK = 'ALERT_MODE_OK';
 export const ALERT_MODE_YES = 'ALERT_MODE_YES';
 export const ALERT_MODE_YES_NO = 'ALERT_MODE_YES_NO';
 export const ALERT_MODE_CUSTOM = 'ALERT_MODE_CUSTOM';
+export const ALERT_MODE_INFO = 'ALERT_MODE_INFO';