@onehat/ui 0.2.24 → 0.2.26

package/package.json

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

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

@@ -9,6 +9,7 @@ import Editor from 'ckeditor5-custom-build/build/ckeditor.js'; // built using ht
 import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
 import withValue from '../../../Hoc/withValue.js';
 import withTooltip from '../../../Hoc/withTooltip.js';
+import _ from 'lodash';
 import './styles.css';
 
 const

package/src/Components/Hoc/withInlineEditor.js

@@ -18,9 +18,6 @@ import withEditor from './withEditor.js';
 import _ from 'lodash';
 
 export default function withInlineEditor(WrappedComponent) {
-	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
-		throw new Error('Not yet implemented for RN.');
-	}
 	return withEditor((props) => {
 		const {
 				useEditor = false,
@@ -69,6 +66,9 @@ export default function withInlineEditor(WrappedComponent) {
 		if (isEditorShown && selection.length !== 1) {
 			throw new Error('Can only edit one at a time with inline editor!');
 		}
+		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+			throw new Error('Not yet implemented for RN.');
+		}
 	
 		return <>
 					<WrappedComponent

package/src/Components/Panel/Header.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {
 	Column,
 	Icon,
+	Pressable,
 	Row,
 	Text,
 } from 'native-base';
@@ -106,7 +107,90 @@ export default function Header(props) {
 
 	} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
 
-		return null;
+		if (isCollapsed) {
+			if (collapseDirection === HORIZONTAL) {
+				collapseBtn = React.cloneElement(collapseBtn, { my: 2, mr: 1, });
+				return <Pressable
+							testID={testID}
+							flex={1}
+							w="100%"
+							style={{ userSelect: 'none', ...doubleClickStyle, }}
+							onPress={(e) => {
+								switch (e.detail) {
+									case 1: // single click
+										break;
+									case 2: // double click
+										if (isCollapsible) {
+											onToggleCollapse(e);
+										}
+										break;
+									case 3: // triple click
+										break;
+									default:
+								}
+							}}
+						>
+							 <Column
+							 	alignItems="center"
+								justifyContent="flex-start"
+								h="100%" 
+								w="100%"
+								bg={styles.PANEL_HEADER_BG_VERTICAL}
+								style={{ userSelect: 'none', }}
+							>
+								{collapseBtn}
+								<Text
+									flex={1}
+									fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE}
+									color={styles.PANEL_HEADER_TEXT_COLOR}
+									numberOfLines={1}
+									ellipsizeMode="head"
+									style={{transform: [{ rotate: '-90deg'}]}}
+								>{title}</Text>
+							</Column>
+						</Pressable>;
+			}
+		}
+	
+		return <Pressable
+					testID={testID}
+					flex={1}
+					w="100%"
+					style={{ userSelect: 'none', ...doubleClickStyle, }}
+					onPress={(e) => {
+						switch (e.detail) {
+							case 1: // single click
+								break;
+							case 2: // double click
+								if (isCollapsible) {
+									onToggleCollapse(e);
+								}
+								break;
+							case 3: // triple click
+								break;
+							default:
+						}
+					}}
+				>
+					<Row
+						alignItems="center"
+						justifyContent="flex-start"
+						px={styles.PANEL_HEADER_PX}
+						py={styles.PANEL_HEADER_PY}
+						bg={styles.PANEL_HEADER_BG}
+						style={{ userSelect: 'none', }}
+					>
+						{closeBtn}
+						<Text
+							flex={1}
+							fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE}
+							color={styles.PANEL_HEADER_TEXT_COLOR}
+							numberOfLines={1}
+							ellipsizeMode="head"
+						>{title}</Text>
+						{collapseBtn}
+					</Row>
+				</Pressable>;
 
 	}
 

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/Functions/getComponentFromType.js

@@ -1,4 +1,5 @@
 import UiGlobals from '../UiGlobals.js';
+import _ from 'lodash';
 
 export default function getComponentFromType(type) {
 	if (_.isString(type)) {

package/src/Functions/registerReactNativeComponents.js

@@ -3,7 +3,7 @@ import Datetime from '../PlatformImports/ReactNative/Datetime';
 import Draggable from '../PlatformImports/ReactNative/Draggable';
 import _ from 'lodash';
 
-export function registerReactNativeComponents() {
+export default function registerReactNativeComponents() {
 	_.merge(UiGlobals.components, {
 		Datetime,
 		Draggable,