@onehat/ui 0.2.12 → 0.2.14

package/package.json

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

package/src/Components/Hoc/withDraggable.js

@@ -6,14 +6,20 @@ import {
 import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
+	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
-import UiGlobals from '../../UiGlobals.js';
-import Draggable from 'react-draggable'; // https://github.com/react-grid-layout/react-draggable
 import useBlocking from '../../Hooks/useBlocking.js';
 import {
 	v4 as uuid,
 } from 'uuid';
 
+let Draggable;
+if (CURRENT_MODE === UI_MODE_WEB) {
+	Draggable = await import('react-draggable'); // https://github.com/react-grid-layout/react-draggable
+} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+	Draggable = await import('react-native-draggable'); // https://github.com/tongyy/react-native-draggable
+}
+
 // Note on modes:
 // HORIZONTAL means the component moves along the X axis.
 // VERTICAL means the component moves along the Y axis.
@@ -21,9 +27,6 @@ import {
 export default function withDraggable(WrappedComponent) {
 	return (props) => {
 
-		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
-			throw new Error('Not yet implemented for RN.');
-		}
 		const {
 				// extract and pass
 				onDragStart,
@@ -216,44 +219,54 @@ export default function withDraggable(WrappedComponent) {
 			};
 		propsToPass.isDragging = isDragging;
 
-		if (mode === VERTICAL) {
-			return <Draggable
-						axis="x"
-						onStart={handleStart}
-						onDrag={handleDrag}
-						onStop={handleStop}
-						position={{ x: 0, y: 0, /* reset to dropped position */ }}
-						// bounds={bounds}
-					>
-						<div className="nsResize" style={{ width: '100%', }}>
-							<WrappedComponent {...propsToPass} />
-						</div>
-					</Draggable>;
-		} else if (mode === HORIZONTAL) {
+		
+		if (CURRENT_MODE === UI_MODE_WEB) {
+			if (mode === VERTICAL) {
+				return <Draggable
+							axis="x"
+							onStart={handleStart}
+							onDrag={handleDrag}
+							onStop={handleStop}
+							position={{ x: 0, y: 0, /* reset to dropped position */ }}
+							// bounds={bounds}
+						>
+							<div className="nsResize" style={{ width: '100%', }}>
+								<WrappedComponent {...propsToPass} />
+							</div>
+						</Draggable>;
+			} else if (mode === HORIZONTAL) {
+				return <Draggable
+							axis="y"
+							onStart={handleStart}
+							onDrag={handleDrag}
+							onStop={handleStop}
+							position={{ x: 0, y: 0, /* reset to dropped position */ }}
+							// bounds={bounds}
+						>
+							<div className="ewResize" style={{ height: '100%', }}>
+								<WrappedComponent {...propsToPass} />
+							</div>
+						</Draggable>;
+			}
+
+			// can drag in all directions
 			return <Draggable
-						axis="y"
+						axis="both"
 						onStart={handleStart}
 						onDrag={handleDrag}
 						onStop={handleStop}
-						position={{ x: 0, y: 0, /* reset to dropped position */ }}
-						// bounds={bounds}
+						// position={{ x: 0, y: 0, /* reset to dropped position */ }}
+						handle={handle}
 					>
-						<div className="ewResize" style={{ height: '100%', }}>
-							<WrappedComponent {...propsToPass} />
-						</div>
+						<WrappedComponent {...propsToPass} />
 					</Draggable>;
-		}
+		} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
 
-		// can drag in all directions
-		return <Draggable
-					axis="both"
-					onStart={handleStart}
-					onDrag={handleDrag}
-					onStop={handleStop}
-					// position={{ x: 0, y: 0, /* reset to dropped position */ }}
-					handle={handle}
-				>
-					<WrappedComponent {...propsToPass} />
-				</Draggable>;
+			// NOT YET IMPLEMENTED
+			// Really need to replace most of this, as much of it is web-centric.
+
+			return <WrappedComponent {...propsToPass} />; // TEMP
+
+		}
 	};
 }

package/src/Constants/UiModes.js

@@ -1,2 +1,12 @@
+import { isBrowser, isNode, isWebWorker, isJsDom, isDeno } from "browser-or-node";
+
+
 export const UI_MODE_WEB = 'UI_MODE_WEB';
 export const UI_MODE_REACT_NATIVE = 'UI_MODE_REACT_NATIVE';
+
+export let CURRENT_MODE;
+if (isBrowser || isWebWorker) {
+	CURRENT_MODE = UI_MODE_WEB;
+} else if (isNode) {
+	CURRENT_MODE = UI_MODE_REACT_NATIVE;
+}

package/src/UiGlobals.js

@@ -1,18 +1,8 @@
-import { isBrowser, isNode, isWebWorker, isJsDom, isDeno } from "browser-or-node";
-import {
-	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
-} from './Constants/UiModes.js';
+import { CURRENT_MODE } from './Constants/UiModes.js';
 
 
 const Globals = {
-	mode: null,
+	mode: CURRENT_MODE,
 };
 
-if (isBrowser || isWebWorker) {
-	Globals.mode = UI_MODE_WEB;
-} else if (isNode) {
-	Globals.mode = UI_MODE_REACT_NATIVE;
-}
-
 export default Globals;