@onehat/ui 0.2.80 → 0.2.81

package/package.json

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

package/src/Components/Hoc/withSideEditor.js

@@ -1,3 +1,4 @@
+import { useState, } from 'react';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
@@ -12,20 +13,27 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 				Editor,
 				editorProps = {},
 				sideFlex = 100,
-			} = props;
+			} = props,
+			[selection, setSelection] = useState(null);
+
 
 		if (!Editor) {
 			throw Error('Editor is not defined');
 		}
 
 		return <Container
-					center={<WrappedComponent {...props} />}
+					center={<WrappedComponent
+								isTree={isTree}
+								{...props}
+								onSelectionChange={setSelection}	
+							/>}
 					east={<Editor
 								editorType={EDITOR_TYPE__SIDE}
 								flex={sideFlex}
-								{...props}
+								selection={selection} // This needs to be whatever the selection is in the center component
+								// {...props}
 								{...editorProps}
 							/>}
 				/>;
-	}, isTree);
+	});
 }

package/src/Components/Icons/FullWidth.js

@@ -0,0 +1,28 @@
+import * as React from "react"
+import Svg, { Defs, G, Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      id="Layer_2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 237.17 235.06"
+      {...props}
+    >
+      <Defs></Defs>
+      <G id="Layer_1-2">
+        <Path
+          className="cls-1"
+          d="M237.17 235.06H0V0h237.17v235.06zM13.46 221.59H223.7V13.47H13.47V221.6z"
+        />
+        <Path
+          className="cls-1"
+          d="M200.77 192.33H36.4V42.74h164.36v149.59zm-150.9-13.47H187.3V56.2H49.87v122.66z"
+        />
+      </G>
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/SideBySide.js

@@ -0,0 +1,23 @@
+import * as React from "react"
+import Svg, { G, Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      id="Layer_2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 237.17 235.06"
+      {...props}
+    >
+      <G id="Layer_1-2">
+        <Path
+          d="M85.22 235.06H0V0h85.22v235.06zm-71.75-13.47h58.29V13.47H13.47V221.6zM237.17 235.06H109.74V0h127.43v235.06zm-113.96-13.47h100.5V13.47h-100.5V221.6z"
+          strokeWidth={0}
+        />
+      </G>
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Screens/Manager.js

@@ -0,0 +1,92 @@
+import React, { useState, useEffect, useMemo, useId, } from 'react';
+import {
+	Column,
+	Row,
+	Text,
+} from 'native-base';
+import IconButton from '../Buttons/IconButton';
+import FullWidth from '../Icons/FullWidth';
+import SideBySide from '../Icons/SideBySide';
+import getSaved from '../../Functions/getSaved.js';
+import setSaved from '../../Functions/setSaved.js';
+import _ from 'lodash';
+
+const
+	MODE_FULL = 'MODE_FULL',
+	MODE_SIDE = 'MODE_SIDE';
+
+export default function ManagerScreen(props) {
+	const {
+			title,
+			sideModeComponent,
+			fullModeComponent,
+		} = props,
+		id = useId(),
+		[isReady, setIsReady] = useState(false),
+		[mode, setModeRaw] = useState(MODE_FULL),
+		setMode = (newMode) => {
+			if (newMode === mode) {
+				return; // no change
+			}
+			setModeRaw(newMode);
+			setSaved(id + '-mode', newMode);
+		};
+
+	useEffect(() => {
+		// Restore saved settings
+		(async () => {
+
+			let key, val;
+			key = id + '-mode';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setMode(val);
+			}
+
+			if (!isReady) {
+				setIsReady(true);
+			}
+		})();
+	}, []);
+
+	if (!isReady) {
+		return null;
+	}
+
+	let whichComponent;
+	if (mode === MODE_FULL) {
+		whichComponent = fullModeComponent;
+	} else if (mode === MODE_SIDE) {
+		whichComponent = sideModeComponent;
+	}
+
+	return <Column flex={1} w="100%">
+				<Row
+					h="80px"
+					py={2}
+				>
+					<Text p={4} fontSize="26" fontWeight={700}>{title}</Text>
+					<IconButton
+						icon={FullWidth}
+						_icon={{
+							size: '30px',
+							color: mode === MODE_FULL ? 'primary.100' : '#000',
+						}}
+						disabled={mode === MODE_FULL}
+						onPress={() => setMode(MODE_FULL)}
+						tooltip="Full Width"
+					/>
+					<IconButton
+						icon={SideBySide}
+						_icon={{
+							size: '30px',
+							color: mode === MODE_SIDE ? 'primary.100' : '#000',
+						}}
+						disabled={mode === MODE_SIDE}
+						onPress={() => setMode(MODE_SIDE)}
+						tooltip="Side Editor"
+					/>
+				</Row>
+				{whichComponent}
+			</Column>;
+}

package/src/Components/Tab/TabBar.js

@@ -32,7 +32,6 @@ export default function TabBar(props) {
 			startsCollapsed = true,
 			onChangeCurrentTab,
 			onChangeIsCollapsed,
-			saveCurrentTab = true,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
@@ -55,15 +54,16 @@ export default function TabBar(props) {
 			return currentTabIx;
 		},
 		setCurrentTab = (ix) => {
+			if ((useLocal && ix === currentTabIxLocal) || ix === currentTabIx) {
+				return; // no change
+			}
 			if (useLocal) {
 				setCurrentTabIxLocal(ix);
+				setSaved(id + '-currentTabIx', ix);
 			}
 			if (onChangeCurrentTab) {
 				onChangeCurrentTab(ix);
 			}
-			if (saveCurrentTab) {
-				setSaved(id + '-currentTabIx', ix);
-			}
 		},
 		onToggleCollapse = () => {
 			setIsCollapsed(!isCollapsed);
@@ -310,7 +310,7 @@ export default function TabBar(props) {
 				setIsCollapsed(val);
 			}
 
-			if (saveCurrentTab) {
+			if (useLocal) {
 				key = id + '-currentTabIx';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {