@onehat/ui 0.2.13 → 0.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.13",
+	"version": "0.2.15",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -32,6 +32,7 @@
 	  "react-color": "^2.19.3",
 	  "react-datetime": "^3.2.0",
 	  "react-draggable": "^4.4.5",
+	  "react-native-draggable": "^3.3.0",
 	  "react-dom": "*",
 	  "react-native": "*"
 	},

package/src/Components/Form/Field/RadioGroup/RadioGroup.js

@@ -50,7 +50,8 @@ const
 			setRadioes(radios);
 		}, [value]);
 
-		return <Radio.Group onChange={props.setValue} accessibilityLabel={props.name} ref={props.outerRef} {...props}>
+		// return <Radio.Group onChange={props.setValue} accessibilityLabel={props.name} ref={props.outerRef} {...props}> // RadioGroup from NativeBase doesn't yet allow refs
+		return <Radio.Group onChange={props.setValue} accessibilityLabel={props.name} {...props}>
 					{radios}
 				</Radio.Group>;
 	},

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/UiGlobals.js

@@ -1,4 +1,4 @@
-import { CURRENT_MODE } from './Constants/UiModes';
+import { CURRENT_MODE } from './Constants/UiModes.js';
 
 
 const Globals = {