@onehat/ui 0.3.100 → 0.3.103

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.100",
+	"version": "0.3.103",
 	"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/Hoc/withFilters.js

@@ -265,11 +265,10 @@ export default function withFilters(WrappedComponent) {
 								field,
 								type: filterType,
 								title,
-							} = filter,
-
-							propertyDef = Repository.getSchema().getPropertyDefinition(field);
+							} = filter;
 						
 						if (!title) {
+							const propertyDef = Repository.getSchema().getPropertyDefinition(field);
 							title = propertyDef?.title;
 						}
 
@@ -328,7 +327,7 @@ export default function withFilters(WrappedComponent) {
 
 					if (!isReady) {
 						const savedFilters = await getSaved(id + '-filters');
-						if (!_.isEmpty(savedFilters)) {
+						if (!_.isEmpty(savedFilters) && !isUsingCustomFilters) {
 							// load saved filters
 							filtersToUse = savedFilters;
 							setFilters(savedFilters, true, false); // false to skip save
@@ -337,7 +336,7 @@ export default function withFilters(WrappedComponent) {
 
 					if (isUsingCustomFilters) {
 						_.each(filtersToUse, (filter) => {
-							const repoFiltersFromFilter = filter.getRepoFilters(value);
+							const repoFiltersFromFilter = filter.getRepoFilters(filter.value);
 							_.each(repoFiltersFromFilter, (repoFilter) => { // one custom filter might generate multiple filters for the repository
 								newRepoFilters.push(repoFilter);
 							});
@@ -410,10 +409,12 @@ export default function withFilters(WrappedComponent) {
 			const
 				renderedFilters = renderFilters(),
 				hasFilters = !!renderedFilters.length;
-			topToolbar = <Toolbar justifyContent="space-between" alignItems="center">
-							<Text pr={2} userSelect="none">Filters:{hasFilters ? '' : ' None'}</Text>
-							{renderedFilters}
-							<Row flex={hasFilters ? null : 1} justifyContent="flex-end">
+			topToolbar = <Toolbar>
+							<Row flex={1} alignItems="center">
+								<Text pr={2} userSelect="none">Filters:{hasFilters ? '' : ' None'}</Text>
+								{renderedFilters}
+							</Row>
+							<Row flex={hasFilters ? null : 1} alignItems="center" alignSelf="flex-end">
 								<IconButton
 									key="clear"
 									_icon={{

package/src/Components/Icons/Bell.js

@@ -0,0 +1,23 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      height={16}
+      width={14}
+      viewBox="0 0 448 512"
+      {...props}
+    >
+      <Path
+        fill="#1E3050"
+        d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416h384c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3c-31.2-35.2-48.5-80.5-48.5-127.6V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7z"
+      />
+    </Icon>
+  )
+}
+
+export default SvgComponent

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/Components/Screens/Manager.js

@@ -22,7 +22,7 @@ function ManagerScreen(props) {
 			title,
 			sideModeComponent,
 			fullModeComponent,
-			id,
+			reference,
 		} = props,
 		styles = UiGlobals.styles,
 		[isReady, setIsReady] = useState(false),
@@ -32,18 +32,22 @@ function ManagerScreen(props) {
 				return; // no change
 			}
 			setModeRaw(newMode);
-			setSaved(id + '-mode', newMode);
+			if (reference) {
+				setSaved(reference + '-mode', newMode);
+			}
 		};
 
 	useEffect(() => {
 		// Restore saved settings
 		(async () => {
 
-			let key, val;
-			key = id + '-mode';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setMode(val);
+			if (reference) {
+				const
+					key = reference + '-mode',
+					val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setMode(val);
+				}
 			}
 
 			if (!isReady) {

package/src/Components/Tab/TabBar.js

@@ -432,7 +432,7 @@ function TabBar(props) {
 					p={2}
 					pb={0}
 					bg={styles.TAB_BAR_BG}
-					h={isCollapsed ? '30px' : tabHeight}
+					h={isCollapsed ? '38px' : tabHeight}
 				>
 					<ScrollView
 						horizontal={true}

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';