@onehat/ui 0.4.21 → 0.4.23

package/package.json

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

package/src/Components/Grid/GridRow.js

@@ -53,7 +53,7 @@ function GridRow(props) {
 		hash = item?.hash || item;
 	return useMemo(() => {
 
-		let bg = props.bg || styles.GRID_ROW_BG,
+		let bg = rowProps.bg || props.bg || styles.GRID_ROW_BG,
 			mixWith;
 		if (isSelected) {
 			if (showHovers && isHovered) {
@@ -137,7 +137,7 @@ function GridRow(props) {
 								extraProps._web.style = {};
 							}
 							extraProps._web.style = {
-								userSelect: 'none',
+								// userSelect: 'none',
 							};
 
 							return <HStackNative
@@ -171,7 +171,7 @@ function GridRow(props) {
 												key={key}
 												overflow="hidden"
 												style={{
-													userSelect: 'none',
+													// userSelect: 'none',
 													...colStyle,
 												}}
 												minimizeForRow={true}
@@ -217,7 +217,7 @@ function GridRow(props) {
 								{...testProps('cell-' + config.fieldName)}
 								key={key}
 								style={{
-									userSelect: 'none',
+									// userSelect: 'none',
 									...colStyle,
 								}}
 								numberOfLines={1}

package/src/Components/Screens/Manager.js

@@ -23,6 +23,7 @@ function ManagerScreen(props) {
 			title,
 			sideModeComponent,
 			fullModeComponent,
+			onChangeMode,
 
 			// withComponent
 			self,
@@ -33,6 +34,7 @@ function ManagerScreen(props) {
 		[isModeSet, setIsModeSet] = useState(false),
 		[allowSideBySide, setAllowSideBySide] = useState(false),
 		[mode, setModeRaw] = useState(MODE_FULL),
+		actualMode = (!allowSideBySide || mode === MODE_FULL) ? MODE_FULL : MODE_SIDE,
 		setMode = (newMode) => {
 			if (!allowSideBySide && newMode === MODE_SIDE) {
 				return;
@@ -44,6 +46,9 @@ function ManagerScreen(props) {
 			if (id) {
 				setSaved(id + '-mode', newMode);
 			}
+			if (onChangeMode) {
+				onChangeMode(newMode);
+			}
 		},
 		onLayout = (e) => {
 			if (sideModeComponent) {
@@ -74,14 +79,13 @@ function ManagerScreen(props) {
 		})();
 	}, [isRendered]);
 
-	let whichComponent;
-	if (!allowSideBySide || mode === MODE_FULL) {
-		whichComponent = fullModeComponent;
-	} else if (mode === MODE_SIDE) {
-		whichComponent = sideModeComponent;
+	if (self) {
+		self.mode = actualMode;
 	}
 
-	const textProps = {};
+	const
+		whichComponent = actualMode === MODE_FULL ? fullModeComponent : sideModeComponent,
+		textProps = {};
 	if (styles.MANAGER_SCREEN_TITLE) {
 		textProps.style = {
 			fontFamily: styles.MANAGER_SCREEN_TITLE,
@@ -104,7 +108,7 @@ function ManagerScreen(props) {
 									size: 'xl',
 									className: 'text-black',
 								}}
-								isDisabled={mode === MODE_FULL}
+								isDisabled={actualMode === MODE_FULL}
 								onPress={() => setMode(MODE_FULL)}
 								tooltip="To full width"
 								className="ml-5"
@@ -116,7 +120,7 @@ function ManagerScreen(props) {
 									size: 'xl',
 									className: 'text-black',
 								}}
-								isDisabled={mode === MODE_SIDE}
+								isDisabled={actualMode === MODE_SIDE}
 								onPress={() => setMode(MODE_SIDE)}
 								tooltip="To side editor"
 							/>

package/src/Components/Tree/Tree.js

@@ -121,6 +121,7 @@ function TreeComponent(props) {
 			initialSelection,
 			canRecordBeEdited,
 			onTreeLoad,
+			onLayout,
 			
 			selectorId,
 			selectorSelected,
@@ -515,7 +516,7 @@ function TreeComponent(props) {
 					iconCollapsed: getNodeIcon(COLLAPSED, treeNode),
 					iconExpanded: getNodeIcon(EXPANDED, treeNode),
 					iconLeaf: getNodeIcon(LEAF, treeNode),
-					isExpanded: defaultToExpanded || isRoot, // all non-root treeNodes are collapsed by default
+					isExpanded: treeNode.isExpanded || defaultToExpanded || isRoot, // all non-root treeNodes are collapsed by default
 					isVisible: isRoot ? areRootsVisible : true,
 					isLoading: false,
 					children,
@@ -548,7 +549,7 @@ function TreeComponent(props) {
 			buildRowToDatumMap();
 
 			if (onTreeLoad) {
-				onTreeLoad();
+				onTreeLoad(self);
 			}
 			return treeNodeData;
 		},
@@ -1380,6 +1381,7 @@ function TreeComponent(props) {
 	return <VStackNative
 				{...testProps(self)}
 				className={className}
+				onLayout={onLayout}
 			>
 				{topToolbar}
 

package/src/Components/Tree/TreeNode.js

@@ -43,7 +43,7 @@ export default function TreeNode(props) {
 
 	return useMemo(() => {
 		const icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf;
-		let bg = props.bg || styles.TREE_NODE_BG,
+		let bg = props.nodeProps?.bg || props.bg || styles.TREE_NODE_BG,
 			mixWith;
 		if (isSelected) {
 			if (isHovered) {