@onehat/ui 0.2.79 → 0.2.81

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.79",
+	"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/Panel/GridPanel.js

@@ -1,6 +1,5 @@
-import { useEffect, useState, } from 'react';
 import Panel from './Panel.js';
-import Grid, { InlineGridEditor, SideGridEditor, } from '../Grid/Grid.js';
+import Grid, { InlineGridEditor, WindowedGridEditor, SideGridEditor, } from '../Grid/Grid.js';
 import {
 	EDITOR_TYPE__INLINE,
 	EDITOR_TYPE__WINDOWED,
@@ -10,47 +9,26 @@ import _ from 'lodash';
 
 export function GridPanel(props) {
 	const {
+			isEditor = false,
 			editorType = EDITOR_TYPE__WINDOWED,
-			disableTitleChange = false,
-			selectorSelected,
-		} = props,
-		originalTitle = props.title,
-		[isReady, setIsReady] = useState(disableTitleChange),
-		[title, setTitle] = useState(originalTitle);
+		} = props;
 
-	let WhichGrid;
-	switch(editorType) {
-		case EDITOR_TYPE__INLINE:
-			WhichGrid = InlineGridEditor;
-			break;
-		case EDITOR_TYPE__WINDOWED:
-			WhichGrid = Grid;
-			break;
-		case EDITOR_TYPE__SIDE:
-			WhichGrid = SideGridEditor;
-			break;
-	}
-
-	useEffect(() => {
-		if (!disableTitleChange && originalTitle) {
-			let newTitle = originalTitle;
-			if (selectorSelected?.[0]?.displayValue) {
-				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
-			}
-			if (newTitle !== title) {
-				setTitle(newTitle);
-			}
+	let WhichGrid = Grid;
+	if (isEditor) {
+		switch(editorType) {
+			case EDITOR_TYPE__INLINE:
+				WhichGrid = InlineGridEditor;
+				break;
+			case EDITOR_TYPE__WINDOWED:
+				WhichGrid = WindowedGridEditor;
+				break;
+			case EDITOR_TYPE__SIDE:
+				WhichGrid = SideGridEditor;
+				break;
 		}
-		if (!isReady) {
-			setIsReady(true);
-		}
-	}, [selectorSelected, disableTitleChange, originalTitle]);
-
-	if (!isReady) {
-		return null;
 	}
 
-	return <Panel {...props} title={title}>
+	return <Panel {...props} {..._panel}>
 				<WhichGrid {...props} />
 			</Panel>;
 }

package/src/Components/Panel/Panel.js

@@ -1,3 +1,4 @@
+import { useEffect, useState, } from 'react';
 import {
 	Column,
 	Row,
@@ -33,7 +34,6 @@ function Panel(props) {
 			
 			// Header
 			title = props.model,
-			titleSuffix = '',
 			showHeader = true,
 			header = null,
 			isClosable = false,
@@ -42,6 +42,7 @@ function Panel(props) {
 			isCollapsed = false,
 			setIsCollapsed,
 			collapseDirection = VERTICAL, // HORIZONTAL, VERTICAL
+			disableTitleChange = false,
 
 			// Content
 			topToolbar = null,
@@ -51,10 +52,32 @@ function Panel(props) {
 
 			...propsToPass
 		} = props,
+		[titleSuffix, setTitleSuffix] = useState(''),
 		onToggleCollapse = () => {
 			setIsCollapsed(!isCollapsed);
 		};
 
+	if (!disableTitleChange) {
+		const
+			selectorSelected = props.selectorSelected,
+			[isReady, setIsReady] = useState(disableTitleChange);
+
+		useEffect(() => {
+			let titleSuffix = '';
+			if (selectorSelected?.[0]?.displayValue) {
+				titleSuffix = ' for ' + selectorSelected[0].displayValue;
+			} 
+			setTitleSuffix(titleSuffix);
+			if (!isReady) {
+				setIsReady(true);
+			}
+		}, [selectorSelected, disableTitleChange]);
+	
+		if (!isReady) {
+			return null;
+		}
+	}
+
 	let headerComponent = header;
 	if (showHeader && title) {
 		headerComponent = <Header

package/src/Components/Panel/TabPanel.js

@@ -1,365 +1,9 @@
-import React, { useState, useEffect, useId, } from 'react';
-import {
-	Button,
-	Column,
-	Icon,
-	Pressable,
-	Row,
-	Text,
-} from 'native-base';
-import {
-	HORIZONTAL,
-	VERTICAL,
-} from '../../Constants/Directions.js';
-import UiGlobals from '../../UiGlobals.js';
-import IconButton from '../Buttons/IconButton.js';
-import Minimize from '../Icons/Minimize.js';
-import Maximize from '../Icons/Maximize.js';
+import TabBar from '../Tab/TabBar.js'
 import Panel from './Panel.js';
-import getSaved from '../../Functions/getSaved.js';
-import setSaved from '../../Functions/setSaved.js';
-import _ from 'lodash';
 
 
 export default function TabPanel(props) {
-	const {
-			tabs = [],
-			direction = HORIZONTAL,
-			tabWidth = 150, // used on VERTICAL mode only
-			tabHeight = '44px', // used on HORIZONTAL mode only
-			additionalButtons,
-			initialTab = 0,
-			startsCollapsed = true,
-			onChangeCurrentTab,
-			onChangeIsCollapsed,
-			saveCurrentTab = true,
-			...propsToPass
-		} = props,
-		styles = UiGlobals.styles,
-		id = useId(),
-		[isReady, setIsReady] = useState(false),
-		[currentTab, setCurrentTabRaw] = useState(initialTab),
-		[isCollapsed, setIsCollapsedRaw] = useState(startsCollapsed),
-		setIsCollapsed = (isCollapsed) => {
-			setIsCollapsedRaw(isCollapsed);
-			if (onChangeIsCollapsed) {
-				onChangeIsCollapsed(isCollapsed);
-			}
-			setSaved(id + '-isCollapsed', isCollapsed);
-		},
-		setCurrentTab = (ix) => {
-			setCurrentTabRaw(ix);
-			if (onChangeCurrentTab) {
-				onChangeCurrentTab(ix);
-			}
-			if (saveCurrentTab) {
-				setSaved(id + '-currentTab', ix);
-			}
-		},
-		getButtonProps = () => {
-			const
-				iconProps = {
-					size: 'md',
-				},
-				textProps = {},
-				buttonProps = {
-					bg: styles.TAB_BG,
-					color: styles.TAB_COLOR,
-					fontSize: styles.TAB_FONTSIZE,
-					textAlign: 'left',
-					justifyContent: isCollapsed ? 'center' : 'flex-start',
-				};
-			switch(direction) {
-				case VERTICAL:
-					buttonProps.borderLeftRadius = 4;
-					buttonProps.borderRightRadius = 0;
-					buttonProps.w = '100%';
-					buttonProps.mb = 1;
-					textProps.w = '100%';
-					textProps.py = 0;
-					textProps.pl = 3;
-					textProps.mb = 1;
-					break;
-				case HORIZONTAL:
-					buttonProps.borderTopRadius = 4;
-					buttonProps.borderBottomRadius = 0;
-					textProps.borderTopRadius = 4;
-					buttonProps.mr = 1;
-					buttonProps.py = 1;
-					textProps.mr = 1;
-					textProps.px = 1;
-					textProps.py = 1;
-					break;
-				default:
-			}
-			return {
-				buttonProps,
-				textProps,
-				iconProps,
-			};
-		},
-		renderTabs = () => {
-			const
-				{
-					buttonProps,
-					textProps,
-					iconProps,
-				} = getButtonProps(),
-				buttons = [];
-			
-			_.each(tabs, (tab, ix) => {
-				if (!tab._icon) {
-					throw new Error('tab._icon required!');
-				}
-				let button;
-				const
-					isCurrentTab = ix === currentTab,
-					thisButtonProps = {};
-				if (isCollapsed) {
-					button = <IconButton
-								key={'tab' + ix}
-								onPress={() => setCurrentTab(ix)}
-								{...buttonProps}
-								// {...thisButtonProps}
-								_icon={{
-									color: isCurrentTab ? styles.TAB_ACTIVE_ICON_COLOR : styles.TAB_ICON_COLOR,
-									...iconProps,
-									...tab._icon,
-								}}
-								_hover={{
-									bg: isCurrentTab? styles.TAB_ACTIVE_HOVER_BG : styles.TAB_HOVER_BG,
-								}}
-								bg={isCurrentTab ? styles.TAB_ACTIVE_BG : styles.TAB_BG}
-								tooltip={tab.title}
-							/>;
-				} else {
-					button = <Button
-								key={'tab' + ix}
-								onPress={() => setCurrentTab(ix)}
-								leftIcon={<Icon
-											color={isCurrentTab ? styles.TAB_ACTIVE_ICON_COLOR : styles.TAB_ICON_COLOR}
-											{...iconProps}
-											{...tab._icon}
-										/>}
-								{...buttonProps}
-								{...thisButtonProps}
-								_hover={{
-									bg: isCurrentTab? styles.TAB_ACTIVE_HOVER_BG : styles.TAB_HOVER_BG,
-								}}
-								bg={isCurrentTab ? styles.TAB_ACTIVE_BG : styles.TAB_BG}
-							>
-								<Text
-									color={isCurrentTab ? styles.TAB_ACTIVE_COLOR : styles.TAB_COLOR}
-									fontSize={styles.TAB_FONTSIZE}
-									numberOfLines={1}
-									ellipsizeMode="head"
-									{...textProps}
-					 			>{tab.title}</Text>
-							</Button>;
-				}
-				buttons.push(button);
-			});
-
-			if (additionalButtons) {
-				_.each(additionalButtons, (additionalButton, ix) => {
-					if (!additionalButton._icon) {
-						throw new Error('additionalButton._icon required!');
-					}
-					let button;
-					const thisButtonProps = {};
-					if (!ix) {
-						// First button should have gap before it
-						switch(direction) {
-							case VERTICAL:
-								thisButtonProps.mt = 6;
-								break;
-							case HORIZONTAL:
-								thisButtonProps.ml = 6;
-								break;
-							default:
-						}
-					}
-					if (isCollapsed) {
-						button = <IconButton
-									key={'additionalBtn' + ix}
-									onPress={additionalButton.onPress}
-									{...buttonProps}
-									{...thisButtonProps}
-									_icon={{
-										...additionalButton._icon,
-										color: styles.TAB_ICON_COLOR,
-									}}
-									_hover={{
-										bg: styles.TAB_HOVER_BG,
-									}}
-									bg={styles.TAB_BG}
-									tooltip={additionalButton.text}
-								/>;
-					} else {
-						button = <Button
-									key={'additionalBtn' + ix}
-									onPress={additionalButton.onPress}
-									leftIcon={<Icon
-												color={styles.TAB_ICON_COLOR}
-												{...additionalButton._icon}
-											/>}
-									_hover={{
-										bg: styles.TAB_HOVER_BG,
-									}}
-									bg={styles.TAB_BG}
-									{...buttonProps}
-									{...thisButtonProps}
-								>
-									<Text
-										color={styles.TAB_COLOR}
-										fontSize={styles.TAB_FONTSIZE}
-										numberOfLines={1}
-										ellipsizeMode="head"
-										{...textProps}
-									>{additionalButton.text}</Text>
-								</Button>;
-					}
-					buttons.push(button);
-				});
-			}
-
-			return buttons;
-		},
-		renderCurrentTabContent = () => {
-			if (tabs[currentTab].content) {
-				return tabs[currentTab].content;
-			}
-			return _.map(tabs[currentTab].items, (item, ix) => {
-				return React.cloneElement(item, { key: ix });
-			});
-		},
-		renderToggleButton = () => {
-			const
-				{
-					buttonProps,
-					textProps,
-				} = getButtonProps();
-
-			let button;
-			if (isCollapsed) {
-				button = <IconButton
-							key="toggleBtn"
-							onPress={onToggleCollapse}
-							{...buttonProps}
-							_icon={{
-								as: Maximize,
-								color: styles.TAB_ICON_COLOR,
-							}}
-							_hover={{
-								bg: styles.TAB_HOVER_BG,
-							}}
-							bg={styles.TAB_BG}
-							tooltip={isCollapsed ? 'Expand' : 'Collapse'}
-						/>;
-			} else {
-				button = <Button
-							key="toggleBtn"
-							onPress={onToggleCollapse}
-							leftIcon={<Icon
-										as={Minimize}
-										color={styles.TAB_ICON_COLOR}
-									/>}
-							_hover={{
-								bg: styles.TAB_HOVER_BG,
-							}}
-							bg={styles.TAB_BG}
-							{...buttonProps}
-							// {...thisButtonProps}
-						>
-							<Text
-								color={styles.TAB_COLOR}
-								fontSize={styles.TAB_FONTSIZE}
-								numberOfLines={1}
-								ellipsizeMode="head"
-								{...textProps}
-							>Collapse</Text>
-						</Button>;
-			}
-			return button;
-		},
-		onToggleCollapse = () => {
-			setIsCollapsed(!isCollapsed);
-		};
-
-	useEffect(() => {
-		// Restore saved settings
-		(async () => {
-			let key, val;
-			key = id + '-isCollapsed';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setIsCollapsed(val);
-			}
-
-			key = id + '-currentTab';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setCurrentTab(val);
-			}
-
-			if (!isReady) {
-				setIsReady(true);
-			}
-		})();
-	}, []);
-
-	if (!isReady) {
-		return null;
-	}
-
-	if (direction === VERTICAL) {
-		return <Panel {...propsToPass}>
-					<Row flex={1} w="100%">
-						<Column
-							alignItems="center"
-							justifyContent="flex-start"
-							py={2}
-							pl={isCollapsed ? 1 : 4}
-							bg={styles.TAB_BAR_BG}
-							w={isCollapsed ? '50px' : tabWidth}
-						>
-							{renderTabs()}
-							<Column flex={1} w="100%" justifyContent="flex-end">
-								{renderToggleButton()}
-							</Column>
-						</Column>
-						<Column
-							alignItems="center"
-							justifyContent="flex-start"
-							flex={1}
-						>
-							{renderCurrentTabContent()}
-						</Column>
-					</Row>
-				</Panel>;
-	}
-
-	// HORIZONTAL
-	return <Panel flex={1} w="100%" {...propsToPass} {...props._panel}>
-				<Column flex={1} w="100%">
-					<Row
-						alignItems="center"
-						justifyContent="flex-start"
-						p={2}
-						pb={0}
-						bg={styles.TAB_BAR_BG}
-						h={isCollapsed ? '30px' : tabHeight}
-					>
-						{renderTabs()}
-						<Row flex={1} h="100%" justifyContent="flex-end">
-							<Row h="100%">
-								{renderToggleButton()}
-							</Row>
-						</Row>
-					</Row>
-					<Row flex={1}>
-						{renderCurrentTabContent()}
-					</Row>
-				</Column>
+	return <Panel flex={1} w="100%" {...props._panel}>
+				<TabBar {...props} />
 			</Panel>;
 }

package/src/Components/Panel/TreePanel.js

@@ -1,38 +1,31 @@
-import { useEffect, useState, } from 'react';
 import Panel from './Panel.js';
-import { Tree, } from '../Tree/Tree.js';
+import Tree, { WindowedTreeEditor, SideTreeEditor, } from '../Tree/Tree.js';
+import {
+	EDITOR_TYPE__WINDOWED,
+	EDITOR_TYPE__SIDE,
+} from '../../Constants/Editor.js';
 import _ from 'lodash';
 
 export function TreePanel(props) {
 	const {
-			disableTitleChange = false,
-			selectorSelected,
-		} = props,
-		originalTitle = props.title,
-		[isReady, setIsReady] = useState(disableTitleChange),
-		[title, setTitle] = useState(originalTitle);
+			isEditor = false,
+			editorType = EDITOR_TYPE__WINDOWED,
+		} = props;
 
-	useEffect(() => {
-		if (!disableTitleChange && originalTitle) {
-			let newTitle = originalTitle;
-			if (selectorSelected?.[0]?.displayValue) {
-				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
-			}
-			if (newTitle !== title) {
-				setTitle(newTitle);
-			}
+	let WhichTree = Tree;
+	if (isEditor) {
+		switch(editorType) {
+			case EDITOR_TYPE__WINDOWED:
+				WhichTree = WindowedTreeEditor;
+				break;
+			case EDITOR_TYPE__SIDE:
+				WhichTree = SideTreeEditor;
+				break;
 		}
-		if (!isReady) {
-			setIsReady(true);
-		}
-	}, [selectorSelected, disableTitleChange, originalTitle]);
-
-	if (!isReady) {
-		return null;
 	}
 
-	return <Panel {...props} title={title}>
-				<Tree {...props} />
+	return <Panel {...props._panel}>
+				<WhichTree {...props} />
 			</Panel>;
 }
 

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

@@ -0,0 +1,389 @@
+import React, { useState, useEffect, useId, } from 'react';
+import {
+	Button,
+	Column,
+	Icon,
+	Row,
+	Text,
+} from 'native-base';
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions.js';
+import UiGlobals from '../../UiGlobals.js';
+import IconButton from '../Buttons/IconButton.js';
+import Minimize from '../Icons/Minimize.js';
+import Maximize from '../Icons/Maximize.js';
+import getSaved from '../../Functions/getSaved.js';
+import setSaved from '../../Functions/setSaved.js';
+import _ from 'lodash';
+
+
+export default function TabBar(props) {
+	const {
+			tabs = [], // { _icon, title, content, path, items, }
+			content, // e.g. Expo Router slot
+			direction = HORIZONTAL,
+			tabWidth = 150, // used on VERTICAL mode only
+			tabHeight = '44px', // used on HORIZONTAL mode only
+			additionalButtons,
+			initialTabIx = 0,
+			currentTabIx,
+			startsCollapsed = true,
+			onChangeCurrentTab,
+			onChangeIsCollapsed,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles,
+		id = useId(),
+		useLocal = _.isNil(currentTabIx),
+		[isReady, setIsReady] = useState(false),
+		[currentTabIxLocal, setCurrentTabIxLocal] = useState(initialTabIx),
+		[isCollapsed, setIsCollapsedRaw] = useState(startsCollapsed),
+		setIsCollapsed = (isCollapsed) => {
+			setIsCollapsedRaw(isCollapsed);
+			if (onChangeIsCollapsed) {
+				onChangeIsCollapsed(isCollapsed);
+			}
+			setSaved(id + '-isCollapsed', isCollapsed);
+		},
+		getCurrentTab = () => {
+			if (useLocal) {
+				return currentTabIxLocal;
+			}
+			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);
+			}
+		},
+		onToggleCollapse = () => {
+			setIsCollapsed(!isCollapsed);
+		},
+		renderToggleButton = () => {
+			const
+				{
+					buttonProps,
+					textProps,
+				} = getButtonProps();
+
+			let button;
+			if (isCollapsed) {
+				button = <IconButton
+							key="toggleBtn"
+							onPress={onToggleCollapse}
+							{...buttonProps}
+							_icon={{
+								as: Maximize,
+								color: styles.TAB_ICON_COLOR,
+							}}
+							_hover={{
+								bg: styles.TAB_HOVER_BG,
+							}}
+							bg={styles.TAB_BG}
+							tooltip={isCollapsed ? 'Expand' : 'Collapse'}
+						/>;
+			} else {
+				button = <Button
+							key="toggleBtn"
+							onPress={onToggleCollapse}
+							leftIcon={<Icon
+										as={Minimize}
+										color={styles.TAB_ICON_COLOR}
+									/>}
+							_hover={{
+								bg: styles.TAB_HOVER_BG,
+							}}
+							bg={styles.TAB_BG}
+							{...buttonProps}
+							// {...thisButtonProps}
+						>
+							<Text
+								color={styles.TAB_COLOR}
+								fontSize={styles.TAB_FONTSIZE}
+								numberOfLines={1}
+								ellipsizeMode="head"
+								{...textProps}
+							>Collapse</Text>
+						</Button>;
+			}
+			return button;
+		},
+		getButtonProps = () => {
+			const
+				iconProps = {
+					size: 'md',
+				},
+				textProps = {},
+				buttonProps = {
+					bg: styles.TAB_BG,
+					color: styles.TAB_COLOR,
+					fontSize: styles.TAB_FONTSIZE,
+					textAlign: 'left',
+					justifyContent: isCollapsed ? 'center' : 'flex-start',
+				};
+			switch(direction) {
+				case VERTICAL:
+					buttonProps.borderLeftRadius = 4;
+					buttonProps.borderRightRadius = 0;
+					buttonProps.w = '100%';
+					buttonProps.mb = 1;
+					textProps.w = '100%';
+					textProps.py = 0;
+					textProps.pl = 3;
+					textProps.mb = 1;
+					break;
+				case HORIZONTAL:
+					buttonProps.borderTopRadius = 4;
+					buttonProps.borderBottomRadius = 0;
+					textProps.borderTopRadius = 4;
+					buttonProps.mr = 1;
+					buttonProps.py = 1;
+					textProps.mr = 1;
+					textProps.px = 1;
+					textProps.py = 1;
+					break;
+				default:
+			}
+			return {
+				buttonProps,
+				textProps,
+				iconProps,
+			};
+		},
+		renderTabs = () => {
+			const
+				{
+					buttonProps,
+					textProps,
+					iconProps,
+				} = getButtonProps(),
+				buttons = [];
+			
+			_.each(tabs, (tab, ix) => {
+				if (!tab._icon) {
+					throw new Error('tab._icon required!');
+				}
+				let button;
+				const
+					isCurrentTab = ix === getCurrentTab(),
+					thisButtonProps = {};
+				if (isCollapsed) {
+					button = <IconButton
+								key={'tab' + ix}
+								onPress={() => setCurrentTab(ix)}
+								{...buttonProps}
+								// {...thisButtonProps}
+								_icon={{
+									color: isCurrentTab ? styles.TAB_ACTIVE_ICON_COLOR : styles.TAB_ICON_COLOR,
+									...iconProps,
+									...tab._icon,
+								}}
+								_hover={{
+									bg: isCurrentTab? styles.TAB_ACTIVE_HOVER_BG : styles.TAB_HOVER_BG,
+								}}
+								bg={isCurrentTab ? styles.TAB_ACTIVE_BG : styles.TAB_BG}
+								tooltip={tab.title}
+							/>;
+				} else {
+					button = <Button
+								key={'tab' + ix}
+								onPress={() => setCurrentTab(ix)}
+								leftIcon={<Icon
+											color={isCurrentTab ? styles.TAB_ACTIVE_ICON_COLOR : styles.TAB_ICON_COLOR}
+											{...iconProps}
+											{...tab._icon}
+										/>}
+								{...buttonProps}
+								{...thisButtonProps}
+								_hover={{
+									bg: isCurrentTab? styles.TAB_ACTIVE_HOVER_BG : styles.TAB_HOVER_BG,
+								}}
+								bg={isCurrentTab ? styles.TAB_ACTIVE_BG : styles.TAB_BG}
+							>
+								<Text
+									color={isCurrentTab ? styles.TAB_ACTIVE_COLOR : styles.TAB_COLOR}
+									fontSize={styles.TAB_FONTSIZE}
+									numberOfLines={1}
+									ellipsizeMode="head"
+									{...textProps}
+					 			>{tab.title}</Text>
+							</Button>;
+				}
+				buttons.push(button);
+			});
+
+			if (additionalButtons) {
+				_.each(additionalButtons, (additionalButton, ix) => {
+					if (!additionalButton._icon) {
+						throw new Error('additionalButton._icon required!');
+					}
+					let button;
+					const thisButtonProps = {};
+					if (!ix) {
+						// First button should have gap before it
+						switch(direction) {
+							case VERTICAL:
+								thisButtonProps.mt = 6;
+								break;
+							case HORIZONTAL:
+								thisButtonProps.ml = 6;
+								break;
+							default:
+						}
+					}
+					if (isCollapsed) {
+						button = <IconButton
+									key={'additionalBtn' + ix}
+									onPress={additionalButton.onPress}
+									{...buttonProps}
+									{...thisButtonProps}
+									_icon={{
+										...additionalButton._icon,
+										color: styles.TAB_ICON_COLOR,
+									}}
+									_hover={{
+										bg: styles.TAB_HOVER_BG,
+									}}
+									bg={styles.TAB_BG}
+									tooltip={additionalButton.text}
+								/>;
+					} else {
+						button = <Button
+									key={'additionalBtn' + ix}
+									onPress={additionalButton.onPress}
+									leftIcon={<Icon
+												color={styles.TAB_ICON_COLOR}
+												{...additionalButton._icon}
+											/>}
+									_hover={{
+										bg: styles.TAB_HOVER_BG,
+									}}
+									bg={styles.TAB_BG}
+									{...buttonProps}
+									{...thisButtonProps}
+								>
+									<Text
+										color={styles.TAB_COLOR}
+										fontSize={styles.TAB_FONTSIZE}
+										numberOfLines={1}
+										ellipsizeMode="head"
+										{...textProps}
+									>{additionalButton.text}</Text>
+								</Button>;
+					}
+					buttons.push(button);
+				});
+			}
+
+			return buttons;
+		},
+		renderCurrentTabContent = () => {
+			if (content) {
+				return content;
+			}
+
+			const currentTabIx = getCurrentTab();
+			if (tabs[currentTabIx].content) {
+				return tabs[currentTabIx].content;
+			}
+			return _.map(tabs[currentTabIx].items, (item, ix) => {
+				return React.cloneElement(item, { key: ix });
+			});
+		};
+
+	useEffect(() => {
+		// Restore saved settings
+		(async () => {
+			let key, val;
+			key = id + '-isCollapsed';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setIsCollapsed(val);
+			}
+
+			if (useLocal) {
+				key = id + '-currentTabIx';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setCurrentTab(val);
+				}
+			}
+
+			if (!isReady) {
+				setIsReady(true);
+			}
+		})();
+	}, []);
+
+	if (!isReady) {
+		return null;
+	}
+
+	const
+		renderedTabs = renderTabs(),
+		renderedCurrentTabContent = renderCurrentTabContent(),
+		renderedToggleButton = renderToggleButton();
+
+
+	if (direction === VERTICAL) {
+		return <Row flex={1} w="100%" {...propsToPass}>
+					<Column
+						alignItems="center"
+						justifyContent="flex-start"
+						py={2}
+						pl={isCollapsed ? 1 : 4}
+						bg={styles.TAB_BAR_BG}
+						w={isCollapsed ? '50px' : tabWidth}
+					>
+						{renderedTabs}
+						<Column flex={1} w="100%" justifyContent="flex-end">
+							{renderedToggleButton}
+						</Column>
+					</Column>
+					{renderedCurrentTabContent && 
+						<Column
+							alignItems="center"
+							justifyContent="flex-start"
+							flex={1}
+						>
+							{renderedCurrentTabContent}
+						</Column>}
+				</Row>;
+	}
+
+	// HORIZONTAL
+	return <Column flex={1} w="100%" {...propsToPass}>
+				<Row
+					alignItems="center"
+					justifyContent="flex-start"
+					p={2}
+					pb={0}
+					bg={styles.TAB_BAR_BG}
+					h={isCollapsed ? '30px' : tabHeight}
+				>
+					{renderedTabs}
+					<Row flex={1} h="100%" justifyContent="flex-end">
+						<Row h="100%">
+							{renderedToggleButton}
+						</Row>
+					</Row>
+				</Row>
+				{renderedCurrentTabContent && 
+					<Column
+						alignItems="center"
+						justifyContent="flex-start"
+						flex={1}
+					>
+						{renderedCurrentTabContent}
+					</Column>}
+			</Column>;
+}

package/src/Components/Panel/InlineGridEditorPanel.js

@@ -1,39 +0,0 @@
-import { useEffect, useState, } from 'react';
-import Panel from './Panel.js';
-import { InlineGridEditor, } from '../Grid/Grid.js';
-import _ from 'lodash';
-
-export function GridPanel(props) {
-	const {
-			disableTitleChange = false,
-			selectorSelected,
-		} = props,
-		originalTitle = props.title,
-		[isReady, setIsReady] = useState(disableTitleChange),
-		[title, setTitle] = useState(originalTitle);
-
-	useEffect(() => {
-		if (!disableTitleChange && originalTitle) {
-			let newTitle = originalTitle;
-			if (selectorSelected?.[0]?.displayValue) {
-				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
-			}
-			if (newTitle !== title) {
-				setTitle(newTitle);
-			}
-		}
-		if (!isReady) {
-			setIsReady(true);
-		}
-	}, [selectorSelected, disableTitleChange, originalTitle]);
-
-	if (!isReady) {
-		return null;
-	}
-
-	return <Panel {...props} title={title}>
-				<InlineGridEditor {...props} />
-			</Panel>;
-}
-
-export default GridPanel;

package/src/Components/Panel/SideGridEditorPanel.js

@@ -1,39 +0,0 @@
-import { useEffect, useState, } from 'react';
-import Panel from './Panel.js';
-import { SideGridEditor, } from '../Grid/Grid.js';
-import _ from 'lodash';
-
-export function GridPanel(props) {
-	const {
-			disableTitleChange = false,
-			selectorSelected,
-		} = props,
-		originalTitle = props.title,
-		[isReady, setIsReady] = useState(disableTitleChange),
-		[title, setTitle] = useState(originalTitle);
-
-	useEffect(() => {
-		if (!disableTitleChange && originalTitle) {
-			let newTitle = originalTitle;
-			if (selectorSelected?.[0]?.displayValue) {
-				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
-			}
-			if (newTitle !== title) {
-				setTitle(newTitle);
-			}
-		}
-		if (!isReady) {
-			setIsReady(true);
-		}
-	}, [selectorSelected, disableTitleChange, originalTitle]);
-
-	if (!isReady) {
-		return null;
-	}
-
-	return <Panel {...props} title={title}>
-				<SideGridEditor {...props} />
-			</Panel>;
-}
-
-export default GridPanel;

package/src/Components/Panel/SideTreeEditorPanel.js

@@ -1,39 +0,0 @@
-import { useEffect, useState, } from 'react';
-import Panel from './Panel.js';
-import { SideTreeEditor, } from '../Tree/Tree.js';
-import _ from 'lodash';
-
-export function TreePanel(props) {
-	const {
-			disableTitleChange = false,
-			selectorSelected,
-		} = props,
-		originalTitle = props.title,
-		[isReady, setIsReady] = useState(disableTitleChange),
-		[title, setTitle] = useState(originalTitle);
-
-	useEffect(() => {
-		if (!disableTitleChange && originalTitle) {
-			let newTitle = originalTitle;
-			if (selectorSelected?.[0]?.displayValue) {
-				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
-			}
-			if (newTitle !== title) {
-				setTitle(newTitle);
-			}
-		}
-		if (!isReady) {
-			setIsReady(true);
-		}
-	}, [selectorSelected, disableTitleChange, originalTitle]);
-
-	if (!isReady) {
-		return null;
-	}
-
-	return <Panel {...props} title={title}>
-				<SideTreeEditor {...props} />
-			</Panel>;
-}
-
-export default TreePanel;

package/src/Components/Panel/WindowedGridEditorPanel.js

@@ -1,39 +0,0 @@
-import { useEffect, useState, } from 'react';
-import Panel from './Panel.js';
-import { WindowedGridEditor, } from '../Grid/Grid.js';
-import _ from 'lodash';
-
-export function GridPanel(props) {
-	const {
-			disableTitleChange = false,
-			selectorSelected,
-		} = props,
-		originalTitle = props.title,
-		[isReady, setIsReady] = useState(disableTitleChange),
-		[title, setTitle] = useState(originalTitle);
-
-	useEffect(() => {
-		if (!disableTitleChange && originalTitle) {
-			let newTitle = originalTitle;
-			if (selectorSelected?.[0]?.displayValue) {
-				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
-			}
-			if (newTitle !== title) {
-				setTitle(newTitle);
-			}
-		}
-		if (!isReady) {
-			setIsReady(true);
-		}
-	}, [selectorSelected, disableTitleChange, originalTitle]);
-
-	if (!isReady) {
-		return null;
-	}
-
-	return <Panel {...props} title={title}>
-				<WindowedGridEditor {...props} />
-			</Panel>;
-}
-
-export default GridPanel;

package/src/Components/Panel/WindowedTreeEditorPanel.js

@@ -1,39 +0,0 @@
-import { useEffect, useState, } from 'react';
-import Panel from './Panel.js';
-import { WindowedTreeEditor, } from '../Tree/Tree.js';
-import _ from 'lodash';
-
-export function TreePanel(props) {
-	const {
-			disableTitleChange = false,
-			selectorSelected,
-		} = props,
-		originalTitle = props.title,
-		[isReady, setIsReady] = useState(disableTitleChange),
-		[title, setTitle] = useState(originalTitle);
-
-	useEffect(() => {
-		if (!disableTitleChange && originalTitle) {
-			let newTitle = originalTitle;
-			if (selectorSelected?.[0]?.displayValue) {
-				newTitle = originalTitle + ' for ' + selectorSelected[0].displayValue;
-			}
-			if (newTitle !== title) {
-				setTitle(newTitle);
-			}
-		}
-		if (!isReady) {
-			setIsReady(true);
-		}
-	}, [selectorSelected, disableTitleChange, originalTitle]);
-
-	if (!isReady) {
-		return null;
-	}
-
-	return <Panel {...props} title={title}>
-				<WindowedTreeEditor {...props} />
-			</Panel>;
-}
-
-export default TreePanel;