@onehat/ui 0.2.23 → 0.2.25

package/package.json

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

package/src/Components/Panel/Mask.js

@@ -0,0 +1,20 @@
+import {
+	Box,
+} from 'native-base';
+import {
+	CURRENT_MODE,
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+} from '../../Constants/UiModes.js';
+
+export default function Mask(props) {
+	if (CURRENT_MODE === UI_MODE_WEB) {
+
+		return <div className="mask"></div>;
+
+	} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+
+		return <Box position="absolute" h="100%" w="100%" bg="trueGray.400:alpha.20" zIndex={100000}></Box>;
+
+	}
+}

package/src/Components/Panel/Panel.js

@@ -9,12 +9,8 @@ import {
 	HORIZONTAL,
 	VERTICAL,
 } from '../../Constants/Directions.js';
-import {
-	CURRENT_MODE,
-	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
-} from '../../Constants/UiModes.js';
 import Header from './Header.js';
+import Mask from './Mask.js';
 import withCollapsible from '../Hoc/withCollapsible.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';
@@ -123,36 +119,29 @@ function Panel(props) {
 		framePropsToUse = frameProps;
 	}
 
-	if (CURRENT_MODE === UI_MODE_WEB) {
-
-		if (isCollapsed) {
-			if (collapseDirection !== VERTICAL) {
-				return <Column overflow="hidden" {...framePropsToUse} w="33px" height="100%">
-							{isDisabled && <div className="mask"></div>}
-							{headerComponent}
-						</Column>;
-			}
-			return <Column overflow="hidden" {...framePropsToUse}>
-						{isDisabled && <div className="mask"></div>}
+	if (isCollapsed) {
+		if (collapseDirection !== VERTICAL) {
+			return <Column overflow="hidden" {...framePropsToUse} w="33px" height="100%">
+						{isDisabled && <Mask />}
 						{headerComponent}
 					</Column>;
 		}
-		return <Column overflow="hidden" onLayout={onLayout} {...framePropsToUse} {...sizeProps}>
-					{isDisabled && <div className="mask"></div>}
+		return <Column overflow="hidden" {...framePropsToUse}>
+					{isDisabled && <Mask />}
 					{headerComponent}
-					{topToolbar}
-					<Column flex={1} w="100%" overflow="hidden" {...propsToPass}>
-						{isScrollable ? <ScrollView>{children}</ScrollView> : children}
-					</Column>
-					{bottomToolbar}
-					{footer}
 				</Column>;
-
-	} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
-
-		return null;
-
 	}
+	return <Column overflow="hidden" onLayout={onLayout} {...framePropsToUse} {...sizeProps}>
+				{isDisabled && <Mask />}
+				{headerComponent}
+				{topToolbar}
+				<Column flex={1} w="100%" overflow="hidden" {...propsToPass}>
+					{isScrollable ? <ScrollView>{children}</ScrollView> : children}
+				</Column>
+				{bottomToolbar}
+				{footer}
+			</Column>;
+
 }
 
 export default withCollapsible(Panel);

package/src/Constants/UiModes.js

@@ -1,12 +1,12 @@
-import { isBrowser, isNode, isWebWorker, } from '../Functions/PlatformDetector.js';
+import { isReactNative, isBrowser, isWebWorker, } from '../Functions/PlatformDetector.js';
 
 
 export const UI_MODE_WEB = 'Web';
 export const UI_MODE_REACT_NATIVE = 'ReactNative';
 
 export let CURRENT_MODE;
-if (isBrowser || isWebWorker) {
-	CURRENT_MODE = UI_MODE_WEB;
-} else if (isNode) {
+if (isReactNative) {
 	CURRENT_MODE = UI_MODE_REACT_NATIVE;
+} else if (isBrowser || isWebWorker) {
+	CURRENT_MODE = UI_MODE_WEB;
 }

package/src/Functions/PlatformDetector.js

@@ -1,4 +1,7 @@
-// Taken from https://github.com/flexdinesh/browser-or-node/blob/master/src/index.js
+// Based on https://github.com/flexdinesh/browser-or-node/blob/master/src/index.js
+
+const isReactNative = 
+  typeof process !== 'undefined' && !!process.env;
 
 const isBrowser =
   typeof window !== "undefined" && typeof window.document !== "undefined";
@@ -24,6 +27,8 @@ const isJsDom =
       navigator.userAgent?.includes("jsdom")));
 
 const isDeno =
-	typeof Deno !== "undefined" && Deno.version?.deno;
+  typeof Deno !== "undefined" &&
+  typeof Deno.version !== "undefined" &&
+  typeof Deno.version.deno !== "undefined";
 
-export { isBrowser, isWebWorker, isNode, isJsDom, isDeno };
+export { isReactNative, isBrowser, isWebWorker, isNode, isJsDom, isDeno };

package/src/Components/Mask.js

@@ -1,11 +0,0 @@
-import {
-	Box,
-} from 'native-base';
-import _ from 'lodash';
-
-export default function Mask(props) {
-	const propsToPass = _.omit(props, 'children');
-	return <Box bg="trueGray.400" {...propsToPass} testID="mask">
-				{props.children}
-			</Box>;
-}