@onehat/ui 0.2.22 → 0.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.22",
+	"version": "0.2.24",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -22,7 +22,6 @@
 		"@ckeditor/ckeditor5-react": "^5.0.6",
 		"@onehat/data": "^1.13.6",
 		"@hookform/resolvers": "^2.9.11",
-		"browser-or-node": "^2.1.1",
 		"ckeditor5-custom-build": "file:ckeditor5",
 		"js-cookie": "^3.0.1",
 		"native-base": "^3.4.25",

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,4 +1,4 @@
-import { isBrowser, isNode, isWebWorker, isJsDom, isDeno } from "browser-or-node";
+import { isBrowser, isNode, isWebWorker, } from '../Functions/PlatformDetector.js';
 
 
 export const UI_MODE_WEB = 'Web';

package/src/Functions/PlatformDetector.js

@@ -0,0 +1,29 @@
+// Taken from https://github.com/flexdinesh/browser-or-node/blob/master/src/index.js
+
+const isBrowser =
+  typeof window !== "undefined" && typeof window.document !== "undefined";
+
+const isNode =
+  typeof process !== "undefined" &&
+  process.versions != null &&
+  process.versions.node != null;
+
+const isWebWorker =
+  typeof self === "object" &&
+  self.constructor &&
+  self.constructor.name === "DedicatedWorkerGlobalScope";
+
+/**
+ * @see https://github.com/jsdom/jsdom/releases/tag/12.0.0
+ * @see https://github.com/jsdom/jsdom/issues/1537
+ */
+const isJsDom =
+  (typeof window !== "undefined" && window.name === "nodejs") ||
+  (typeof navigator !== "undefined" &&
+    (navigator.userAgent?.includes("Node.js") ||
+      navigator.userAgent?.includes("jsdom")));
+
+const isDeno =
+	typeof Deno !== "undefined" && Deno.version?.deno;
+
+export { isBrowser, isWebWorker, isNode, isJsDom, isDeno };

package/src/Functions/registerWebComponents.js

@@ -2,7 +2,7 @@ import UiGlobals from '../UiGlobals.js';
 import CKEditor from '../Components/Form/Field/CKEditor/CKEditor.js';
 import Datetime from '../PlatformImports/Web/Datetime.js';
 import Draggable from '../PlatformImports/Web/Draggable.js';
-import File from './Form/Field/File.js';
+import File from '../Components/Form/Field/File.js';
 import _ from 'lodash';
 
 export default function registerWebComponents() {

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