@onehat/ui 0.3.104 → 0.3.106

package/package.json

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

package/src/Components/Container/Container.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useId, } from 'react';
+import React, { useState, useEffect, } from 'react';
 import {
 	Column,
 	Row,
@@ -35,7 +35,7 @@ function Container(props) {
 			isWestCollapsed,
 			setIsWestCollapsed,
 		} = props,
-		id = useId(),
+		id = props.id || props.self?.path,
 		canResize = CURRENT_MODE === UI_MODE_WEB,
 		[isReady, setIsReady] = useState(false),
 		[localIsNorthCollapsed, setLocalIsNorthCollapsedRaw] = useState(north ? north.props.startsCollapsed : false),
@@ -48,35 +48,52 @@ function Container(props) {
 		[westWidth, setWestWidthRaw] = useState(west ? west.props.w : 0),
 		setLocalIsNorthCollapsed = (bool) => {
 			setLocalIsNorthCollapsedRaw(bool);
-			setSaved(id + '-localIsNorthCollapsed', bool);
+
+			if (id) {
+				setSaved(id + '-localIsNorthCollapsed', bool);
+			}
 		},
 		setLocalIsSouthCollapsed = (bool) => {
 			setLocalIsSouthCollapsedRaw(bool);
-			setSaved(id + '-localIsSouthCollapsed', bool);
+			if (id) {
+				setSaved(id + '-localIsSouthCollapsed', bool);
+			}
 		},
 		setLocalIsEastCollapsed = (bool) => {
 			setLocalIsEastCollapsedRaw(bool);
-			setSaved(id + '-localIsEastCollapsed', bool);
+			if (id) {
+				setSaved(id + '-localIsEastCollapsed', bool);
+			}
 		},
 		setLocalIsWestCollapsed = (bool) => {
 			setLocalIsWestCollapsedRaw(bool);
-			setSaved(id + '-localIsWestCollapsed', bool);
+			if (id) {
+				setSaved(id + '-localIsWestCollapsed', bool);
+			}
 		},
 		setNorthHeight = (height) => {
 			setNorthHeightRaw(height);
-			setSaved(id + '-northHeight', height);
+			if (id) {
+				setSaved(id + '-northHeight', height);
+			}
 		},
 		setSouthHeight = (height) => {
 			setSouthHeightRaw(height);
-			setSaved(id + '-southHeight', height);
+			if (id) {
+				setSaved(id + '-southHeight', height);
+			}
 		},
 		setEastWidth = (width) => {
 			setEastWidthRaw(width);
-			setSaved(id + '-eastWidth', width);
+			if (id) {
+				setSaved(id + '-eastWidth', width);
+			}
 		},
 		setWestWidth = (width) => {
 			setWestWidthRaw(width);
-			setSaved(id + '-westWidth', width);
+			if (id) {
+				setSaved(id + '-westWidth', width);
+			}
 		},
 		onNorthResize = (delta) => {
 			const newHeight = northHeight + delta;
@@ -98,53 +115,56 @@ function Container(props) {
 	useEffect(() => {
 		// Restore saved settings
 		(async () => {
-			let key, val;
-			key = id + '-localIsNorthCollapsed';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setLocalIsNorthCollapsedRaw(val);
-			}
 
-			key = id + '-localIsSouthCollapsed';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setLocalIsSouthCollapsedRaw(val);
-			}
+			if (id) {
+				let key, val;
+				key = id + '-localIsNorthCollapsed';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setLocalIsNorthCollapsedRaw(val);
+				}
 
-			key = id + '-localIsEastCollapsed';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setLocalIsEastCollapsedRaw(val);
-			}
+				key = id + '-localIsSouthCollapsed';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setLocalIsSouthCollapsedRaw(val);
+				}
 
-			key = id + '-localIsWestCollapsed';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setLocalIsWestCollapsedRaw(val);
-			}
+				key = id + '-localIsEastCollapsed';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setLocalIsEastCollapsedRaw(val);
+				}
 
-			key = id + '-northHeight';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setNorthHeightRaw(val);
-			}
+				key = id + '-localIsWestCollapsed';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setLocalIsWestCollapsedRaw(val);
+				}
 
-			key = id + '-southHeight';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setSouthHeightRaw(val);
-			}
+				key = id + '-northHeight';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setNorthHeightRaw(val);
+				}
 
-			key = id + '-eastWidth';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setEastWidthRaw(val);
-			}
+				key = id + '-southHeight';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setSouthHeightRaw(val);
+				}
 
-			key = id + '-westWidth';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setWestWidthRaw(val);
+				key = id + '-eastWidth';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setEastWidthRaw(val);
+				}
+
+				key = id + '-westWidth';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setWestWidthRaw(val);
+				}
 			}
 
 			if (!isReady) {

package/src/Components/Hoc/withComponent.js

@@ -20,7 +20,7 @@ export default function withComponent(WrappedComponent) {
 			selfRef = useRef({
 				parent,
 				reference,
-				path: (parent?.path || '' ) + '/' + reference,
+				path: reference ? (parent?.path || '' ) + '/' + reference : null,
 				hasChild: (childRef) => {
 					const {
 							reference,

package/src/Components/Hoc/withEditor.js

@@ -87,7 +87,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			getNewEntityDisplayValue = () => {
 				return newEntityDisplayValueRef.current;
 			},
-			onAdd = async (values) => {
+			onAdd = async (e, values) => {
 				const defaultValues = Repository.getSchema().getDefaultValues();
 				let addValues = values || _.clone(defaultValues);
 

package/src/Components/Hoc/withFilters.js

@@ -1,8 +1,9 @@
-import { useState, useEffect, useId, useRef, } from 'react';
+import { useState, useEffect, useRef, } from 'react';
 import {
 	Column,
 	Modal,
 	Row,
+	ScrollView,
 	Text,
 } from 'native-base';
 import {
@@ -62,7 +63,7 @@ export default function withFilters(WrappedComponent) {
 					defaultFilters: modelDefaultFilters,
 					ancillaryFilters: modelAncillaryFilters,
 				} = Repository.getSchema().model,
-				id = props.id || props.path || useId(),
+				id = props.id || props.self?.path,
 
 				// determine the starting filters
 				startingFilters = !_.isEmpty(customFilters) ? customFilters : // custom filters override component filters
@@ -188,7 +189,7 @@ export default function withFilters(WrappedComponent) {
 						}
 						setSlots(newSlots);
 					}
-					if (save) {
+					if (save && id) {
 						setSaved(id + '-filters', filters);
 					}
 				},
@@ -325,9 +326,9 @@ export default function withFilters(WrappedComponent) {
 					const newRepoFilters = [];
 					let filtersToUse = filters
 
-					if (!isReady) {
+					if (!isReady && id && !isUsingCustomFilters) { // can't save custom filters bc we can't save JS fns in Repository (e.g. getRepoFilters)
 						const savedFilters = await getSaved(id + '-filters');
-						if (!_.isEmpty(savedFilters) && !isUsingCustomFilters) {
+						if (!_.isEmpty(savedFilters)) {
 							// load saved filters
 							filtersToUse = savedFilters;
 							setFilters(savedFilters, true, false); // false to skip save
@@ -411,8 +412,10 @@ export default function withFilters(WrappedComponent) {
 				hasFilters = !!renderedFilters.length;
 			topToolbar = <Toolbar>
 							<Row flex={1} alignItems="center">
-								<Text pr={2} userSelect="none">Filters:{hasFilters ? '' : ' None'}</Text>
-								{renderedFilters}
+								<ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }}>
+									<Text fontStyle="italic" pr={2} userSelect="none">Filters:{hasFilters ? '' : ' None'}</Text>
+									{renderedFilters}
+								</ScrollView>
 							</Row>
 							<Row flex={hasFilters ? null : 1} alignItems="center" alignSelf="flex-end">
 								<IconButton

package/src/Components/Screens/DataMgt.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useId, } from 'react';
+import React, { useState, useEffect, useMemo, } from 'react';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -42,7 +42,7 @@ export default function DataMgt(props) {
 		} = props;
 
 	const
-		id = useId(),
+		id = props.id || props.self?.path,
 		// westRef = useRef(),
 		[isReady, setIsReady] = useState(false),
 		[isWestCollapsed, setIsWestCollapsedRaw] = useState(westStartsCollapsed),
@@ -52,15 +52,21 @@ export default function DataMgt(props) {
 		[centerSelected, setCenterSelected] = useState(),
 		setIsWestCollapsed = (bool) => {
 			setIsWestCollapsedRaw(bool);
-			setSaved(id + '-isWestCollapsed', bool);
+			if (id) {
+				setSaved(id + '-isWestCollapsed', bool);
+			}
 		},
 		setIsEastCollapsed = (bool) => {
 			setIsEastCollapsedRaw(bool);
-			setSaved(id + '-isEastCollapsed', bool);
+			if (id) {
+				setSaved(id + '-isEastCollapsed', bool);
+			}
 		},
 		setIsFullscreen = (bool) => {
 			setIsFullscreenRaw(bool);
-			setSaved(id + '-isFullscreen', isFullscreen);
+			if (id) {
+				setSaved(id + '-isFullscreen', isFullscreen);
+			}
 		},
 		setWestSelected = (selected) => {
 			setWestSelectedRaw(selected);
@@ -110,35 +116,37 @@ export default function DataMgt(props) {
 		// Restore saved settings
 		(async () => {
 
-			let key, val;
-			key = id + '-isWestCollapsed';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setIsWestCollapsedRaw(val);
-			}
+			if (id) {
+				let key, val;
+				key = id + '-isWestCollapsed';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setIsWestCollapsedRaw(val);
+				}
 
-			key = id + '-isEastCollapsed';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setIsEastCollapsedRaw(val);
-			}
+				key = id + '-isEastCollapsed';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setIsEastCollapsedRaw(val);
+				}
 
-			key = id + '-isFullscreen';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setIsFullscreenRaw(val);
-			}
+				key = id + '-isFullscreen';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setIsFullscreenRaw(val);
+				}
 
-			key = id + '-westSelected';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setWestSelectedRaw(val);
-			}
+				key = id + '-westSelected';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setWestSelectedRaw(val);
+				}
 
-			key = id + '-centerSelected';
-			val = await getSaved(key);
-			if (!_.isNil(val)) {
-				setCenterSelectedRaw(val);
+				key = id + '-centerSelected';
+				val = await getSaved(key);
+				if (!_.isNil(val)) {
+					setCenterSelectedRaw(val);
+				}
 			}
 
 			if (!isReady) {

package/src/Components/Screens/Manager.js

@@ -22,9 +22,9 @@ function ManagerScreen(props) {
 			title,
 			sideModeComponent,
 			fullModeComponent,
-			reference,
 		} = props,
 		styles = UiGlobals.styles,
+		id = props.id || props.self?.path,
 		[isReady, setIsReady] = useState(false),
 		[mode, setModeRaw] = useState(MODE_FULL),
 		setMode = (newMode) => {
@@ -32,8 +32,8 @@ function ManagerScreen(props) {
 				return; // no change
 			}
 			setModeRaw(newMode);
-			if (reference) {
-				setSaved(reference + '-mode', newMode);
+			if (id) {
+				setSaved(id + '-mode', newMode);
 			}
 		};
 
@@ -41,9 +41,9 @@ function ManagerScreen(props) {
 		// Restore saved settings
 		(async () => {
 
-			if (reference) {
+			if (id) {
 				const
-					key = reference + '-mode',
+					key = id + '-mode',
 					val = await getSaved(key);
 				if (!_.isNil(val)) {
 					setMode(val);

package/src/Components/Tab/TabBar.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useId, } from 'react';
+import React, { useState, useEffect, } from 'react';
 import {
 	Button,
 	Column,
@@ -43,7 +43,7 @@ function TabBar(props) {
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
-		id = useId(),
+		id = props.id || props.self?.path,
 		useLocal = _.isNil(currentTabIx),
 		[isReady, setIsReady] = useState(false),
 		[currentTabIxLocal, setCurrentTabIxLocal] = useState(initialTabIx),
@@ -53,7 +53,9 @@ function TabBar(props) {
 			if (onChangeIsCollapsed) {
 				onChangeIsCollapsed(isCollapsed);
 			}
-			setSaved(id + '-isCollapsed', isCollapsed);
+			if (id) {
+				setSaved(id + '-isCollapsed', isCollapsed);
+			}
 		},
 		getCurrentTab = () => {
 			if (useLocal) {
@@ -70,7 +72,10 @@ function TabBar(props) {
 			}
 			if (useLocal) {
 				setCurrentTabIxLocal(ix);
-				setSaved(id + '-currentTabIx', ix);
+
+				if (id) {
+					setSaved(id + '-currentTabIx', ix);
+				}
 			}
 			if (onChangeCurrentTab) {
 				onChangeCurrentTab(ix);
@@ -361,18 +366,21 @@ function TabBar(props) {
 	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';
+			if (id) {
+				let key, val;
+				key = id + '-isCollapsed';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {
-					setCurrentTab(val);
+					setIsCollapsed(val);
+				}
+
+				if (useLocal) {
+					key = id + '-currentTabIx';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setCurrentTab(val);
+					}
 				}
 			}