@onehat/ui 0.4.101 → 0.4.103

package/package.json

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

package/src/Components/Accordion/Accordion.js

@@ -1,14 +1,21 @@
 import { useState, useEffect, useRef, } from 'react';
 import {
+	Box,
 	HStack,
-	ScrollView,
+	Icon,
 	Pressable,
+	ScrollView,
+	Text,
+	TextNative,
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import Plus from '../Icons/Plus.js';
+import Minus from '../Icons/Minus.js';
 import inArray from '../../Functions/inArray.js';
 import emptyFn from '../../Functions/emptyFn.js';
+import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
 // The Accordion has two modes.
@@ -25,11 +32,61 @@ import _ from 'lodash';
 
 export default function Accordion(props) {
 	const {
+			styles = UiGlobals.styles,
 			sections = [],
 			activeSections = [],
 			setActiveSections = emptyFn,
-			renderHeader = emptyFn,
-			renderContent = emptyFn,
+			renderHeader = (section, ix, isActive) => {
+				return <HStack
+							className={clsx(
+								'Header',
+								'bg-grey-300',
+								'items-center',
+								'justify-start',
+								'py-1',
+								'px-2',
+								'border-b-grey-400',
+								'border-b-1',
+								styles.PANEL_HEADER_BG,
+							)}
+						>
+							{/* <Text className="text-white flex-1">{section.header}</Text> */}
+							
+							<TextNative
+								numberOfLines={1}
+								ellipsizeMode="head"
+								className={clsx(
+									'Header-TextNative1',
+									'flex-1',
+									'font-bold',
+									styles.PANEL_HEADER_TEXT_CLASSNAME,
+								)}>{section.header}</TextNative>
+							<Icon
+								as={isActive ? Minus : Plus} 
+								className={clsx(
+									'text-black',
+								)}
+							/>
+						</HStack>;
+			},
+			unmountInactiveContent = true,
+			renderContent = (section, ix, isActive, ref) => {
+				if (unmountInactiveContent) {
+					if (!isActive) {
+						return null;
+					}
+					return section.content;
+				}
+
+				// This keeps all content rendered, just hidden (zero height) if it's inActive
+				let className = 'w-full overflow-hidden';
+				if (!isActive) {
+					className += ' h-[0px]';
+				}
+				return <Box className={className}>
+							{section.content}
+						</Box>;
+			},
 			onAnimationEnd = emptyFn,
 			onLayout,
 			onlyOne = true,
@@ -67,7 +124,9 @@ export default function Accordion(props) {
 
 			// TODO: Animate height. Possible help here: https://stackoverflow.com/a/57333550 and https://stackoverflow.com/a/64797961
 			if (isActive) {
-				rowProps.flex = 1;
+				if (onlyOne) {
+					rowProps.flex = 1;
+				}
 			} else {
 				rowProps.h = 0;
 				rowProps.overflow = 'hidden'; // otherwise some elements mistakenly show
@@ -94,7 +153,7 @@ export default function Accordion(props) {
 						>
 							{header}
 						</Pressable>
-						<HStack {...rowProps} className="bg-[#f00]">
+						<HStack {...rowProps}>
 							{content}
 						</HStack>
 					</VStack>;
@@ -129,7 +188,7 @@ export default function Accordion(props) {
 				keyboardShouldPersistTaps="always"
 				className="Accordion-ScrollView flex-1 w-full"
 				contentContainerStyle={{
-					height: '100%',
+					height: onlyOne ? '100%' : undefined,
 				}}
 			>
 				<VStackNative

package/src/Components/Container/Container.js

@@ -125,16 +125,20 @@ function Container(props) {
 		localSouthIsCollapsedRef = useRef(southInitialIsCollapsed),
 		localEastIsCollapsedRef = useRef(eastInitialIsCollapsed),
 		localWestIsCollapsedRef = useRef(westInitialIsCollapsed),
+		isSplitterDraggingRef = useRef(false),
 		onLayout = async (e) => {
-			console.log('Container onLayout', e.nativeEvent.layout.width);
+			if (isSplitterDraggingRef.current) {
+				return;
+			}
 			if (id) {
 				// save prevScreenSize if changed
 				const
-					height = parseFloat(e.nativeEvent.layout.height),
-					width = parseFloat(e.nativeEvent.layout.width),
+					height = windowSize?.height ?? parseFloat(e.nativeEvent.layout.height),
+					width = windowSize?.width ?? parseFloat(e.nativeEvent.layout.width),
 					key = id + '-prevScreenSize',
 					prevScreenSize = await getSaved(key);
-				if (!prevScreenSize || prevScreenSize.width !== width || prevScreenSize.height !== height) {
+				const hasChanged = !prevScreenSize || Math.abs((prevScreenSize.width ?? 0) - width) > 1 || Math.abs((prevScreenSize.height ?? 0) - height) > 1;
+				if (hasChanged) {
 					await setSaved(key, {
 						height,
 						width,
@@ -300,10 +304,12 @@ function Container(props) {
 			}
 		},
 		onSplitterDragStart = () => {
+			isSplitterDraggingRef.current = true;
 			setIsComponentsDisabled(true);
 		},
 		onSplitterDragStop = (delta, which) => {
 			setIsComponentsDisabled(false);
+			isSplitterDraggingRef.current = false;
 			switch(which) {
 				case 'north':
 					onNorthResize(delta);

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

@@ -100,6 +100,8 @@ export const ComboComponent = forwardRef((props, ref) => {
 			onGridSave, // to hook into when menu saves (ComboEditor only)
 			onGridDelete, // to hook into when menu deletes (ComboEditor only)
 			onSubmit, // when Combo is used in a Tag, call this when the user submits the Combo value (i.e. presses Enter or clicks a row)
+			displayProperty, // override for Repository.schema.model.displayProperty
+			valueProperty, // override for Repository.schema.model.idProperty
 			newEntityDisplayProperty,
 			testID,
 
@@ -242,7 +244,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 						displayValue = _.each(value, (id) => {
 							const entity = Repository.getById(id);
 							if (entity) {
-								displayValue.push(entity.displayValue);
+								displayValue.push((displayProperty ? entity?.[displayProperty] : entity?.displayValue) || '');
 							}
 						});
 					}
@@ -272,7 +274,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 								}
 							}
 						}
-						displayValue = entity?.displayValue || '';
+						displayValue = (displayProperty ? entity?.[displayProperty] : entity?.displayValue) || '';
 					}
 				} else {
 					const item = _.find(data, (datum) => datum[idIx] === value);
@@ -318,7 +320,11 @@ export const ComboComponent = forwardRef((props, ref) => {
 
 					let id = null;
 					if (gridSelection.length) {
-						id = Repository ? gridSelection[0].id : gridSelection[0][idIx];
+						if (Repository) {
+							id = valueProperty ? gridSelection[0][valueProperty] : gridSelection[0].id;
+						} else {
+							id = gridSelection[0][idIx];
+						}
 					}
 					if (id !== value) {
 						setValue(id);
@@ -863,7 +869,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 								return;
 							}
 
-							setValue(selection[0] ? selection[0].id : null);
+							setValue(selection[0] ? (valueProperty ? selection[0][valueProperty] : selection[0].id) : null);
 
 						} else {
 

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

@@ -545,10 +545,16 @@ function TagComponent(props) {
 
 function withAdditionalProps(WrappedComponent) {
 	return (props) => {
+		const tooltipTriggerClassName = clsx(
+			'w-full',
+			'flex-1',
+			props.tooltipTriggerClassName,
+		);
 		return <WrappedComponent
 					isValueAlwaysArray={true}
 					isValueAsStringifiedJson={true}
 					{...props}
+					tooltipTriggerClassName={tooltipTriggerClassName}
 				/>;
 	};
 }

package/src/Components/Form/Form.js

@@ -1213,6 +1213,10 @@ function Form(props) {
 		style.maxHeight = maxHeight;
 	}
 
+	const
+		// allow horizontal layouts only if there are top-level columns, and screen is wide enough
+		hasTopLevelColumns = _.some(items, (item) => item?.type === 'Column'),
+		shouldUseHorizontalFormLayout = !isItemsCustomLayout && hasTopLevelColumns && containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD;
 	let modeHeader = null,
 		formButtons = null,
 		scrollButtons = null,
@@ -1246,8 +1250,8 @@ function Form(props) {
 			formComponents = buildFromItems();
 			const formAncillaryComponents = buildAncillary();
 			editor = <>
-						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD && !isItemsCustomLayout ? <HStack className="Form-formComponents-HStack p-4 gap-4 justify-center">{formComponents}</HStack> : null}
-						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD || isItemsCustomLayout ? <VStack className="Form-formComponents-VStack p-4">{formComponents}</VStack> : null}
+						{shouldUseHorizontalFormLayout ? <HStack className="Form-formComponents-HStack w-full min-w-0 p-4 gap-4 justify-start items-stretch">{formComponents}</HStack> : null}
+						{!shouldUseHorizontalFormLayout ? <VStack className="Form-formComponents-VStack p-4">{formComponents}</VStack> : null}
 						{formAncillaryComponents.length ? <VStack className="Form-AncillaryComponents m-2 pt-4 px-2">{formAncillaryComponents}</VStack> : null}
 					</>;
 
@@ -1532,7 +1536,8 @@ function Form(props) {
 							onScroll={onScroll}
 							scrollEventThrottle={16 /* ms */}
 							contentContainerStyle={{
-								// height: '100%',
+								width: '100%',
+								minWidth: '100%',
 							}}
 						>
 							{scrollToTopAnchor}