@onehat/ui 0.4.17 → 0.4.20

package/package.json

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

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

@@ -18,6 +18,7 @@ export default function BooleanCombo(props) {
 
 	return <ArrayCombo
 				data={data}
+				menuHeight={70}
 				{...props}
 			/>;
 }

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

@@ -56,6 +56,7 @@ export function ComboComponent(props) {
 			isDisabled = false,
 			isInTag = false,
 			minimizeForRow = false,
+			menuHeight,
 			tooltipPlacement = 'bottom',
 			placeholder,
 			onRowPress,
@@ -690,7 +691,7 @@ export function ComboComponent(props) {
 		const WhichGrid = isEditor ? WindowedGridEditor : Grid;
 		const gridStyle = {};
 		if (UiGlobals.mode === UI_MODE_WEB) {
-			gridStyle.height = styles.FORM_COMBO_MENU_HEIGHT;
+			gridStyle.height = menuHeight || styles.FORM_COMBO_MENU_HEIGHT;
 		}
 		grid = <WhichGrid
 					showHeaders={false}
@@ -882,7 +883,7 @@ export function ComboComponent(props) {
 										top,
 										left,
 										width,
-										height: styles.FORM_COMBO_MENU_HEIGHT + inputHeight,
+										height: (menuHeight || styles.FORM_COMBO_MENU_HEIGHT) + inputHeight,
 										minWidth: 100,
 									}}
 								>

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

@@ -22,6 +22,7 @@ function TagComponent(props) {
 			isViewOnly = false,
 			isValueAlwaysArray,
 			isValueAsStringifiedJson,
+			showEye = true,
 			minimizeForRow = false,
 			Editor,
 			_combo = {},
@@ -231,6 +232,7 @@ function TagComponent(props) {
 						text={val.text}
 						onView={() => onView(val)}
 						onDelete={!isViewOnly ? () => onDelete(val) : null}
+						showEye={showEye}
 					/>;
 		});
 	

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

@@ -14,6 +14,7 @@ export default function ValueBox(props) {
 			text,
 			onView,
 			onDelete,
+			showEye,
 		} = props,
 		styles = UiGlobals.styles;
 	return <HStackNative
@@ -30,25 +31,26 @@ export default function ValueBox(props) {
 					${!onDelete && 'pr-4'}
 				`}
 			>
-				<IconButton
-					{...testProps('eyeBtn')}
-					icon={Eye}
-					_icon={{
-						size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
-						className: 'text-grey-600',
-					}}
-					onPress={onView}
-					className={`
-						ValueBox-eyeBtn
-						h-full
-						${styles.FORM_TAG_BTN_CLASSNAME}
-					`}
-				/>
+				{showEye && <IconButton
+								{...testProps('eyeBtn')}
+								icon={Eye}
+								_icon={{
+									size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
+									className: 'text-grey-600',
+								}}
+								onPress={onView}
+								className={`
+									ValueBox-eyeBtn
+									h-full
+									${styles.FORM_TAG_BTN_CLASSNAME}
+								`}
+							/>}
 				<Text
 					className={`
 						ValueBox-Text
 						text-grey-600
 						${styles.FORM_TAG_VALUEBOX_CLASSNAME}
+						${showEye ? 'ml-0' : 'ml-1'}
 						${onDelete ? 'mr-0' : 'mr-1'}
 					`}
 				>{text}</Text>

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

@@ -4,7 +4,7 @@ import {
 	Icon,
 	Pressable,
 	Switch,
-	Text,
+	TextNative,
 } from '@project-components/Gluestack';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
@@ -96,14 +96,14 @@ const
 						{...testProps('readoutBtn')}
 						onPress={onToggle}
 					>
-						<Text
+						<TextNative
 							{...testProps('readout')}
 							className={`
 								ml-1
 								mr-2
 								${styles.FORM_TOGGLE_READOUT_CLASSNAME}
 							`}
-						>{_.isNil(value) ? 'N/A' : (!!value ? onText : offText)}</Text>
+						>{_.isNil(value) ? 'N/A' : (!!value ? onText : offText)}</TextNative>
 					</Pressable>
 				</HStack>;
 	},

package/src/Components/Form/Form.js

@@ -471,6 +471,7 @@ function Form(props) {
 					isEditable = true,
 					isEditingEnabledInPlainEditor,
 					label,
+					labelWidth,
 					items,
 					onChange: onEditorChange,
 					useSelectorId = false,
@@ -647,9 +648,12 @@ function Form(props) {
 					if (defaults?.labelWidth) {
 						style.width = defaults.labelWidth;
 					}
+					if (labelWidth) {
+						style.width = labelWidth;
+					}
 					if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
 						if (!style.width) {
-							style.width = '120px';
+							style.width = '160px';
 						}
 						element = <HStack className="Form-HStack1 w-full py-1">
 										<Label style={style}>{label}</Label>
@@ -778,7 +782,7 @@ function Form(props) {
 							if (message) {
 								message = <Text className="text-[#f00]">{message}</Text>;
 							}
-							element = <VStack className="Form-VStack4 w-full pt-1">
+							element = <VStack className="Form-VStack4 flex-1 pt-1">
 											{element}
 											{message}
 										</VStack>;
@@ -786,14 +790,14 @@ function Form(props) {
 							if (item.additionalEditButtons) {
 								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-									element = <HStack className="Form-HStack5 w-full flex-wrap">
+									element = <HStack className="Form-HStack5 flex-1 flex-wrap">
 													{element}
 													{buttons}
 												</HStack>;
 								} else {
-									element = <VStack className="Form-VStack6 w-full">
+									element = <VStack className="Form-VStack6 flex-1">
 												{element}
-												<HStack className="Form-HStack7-VStack w-full mt-1 flex-wrap">
+												<HStack className="Form-HStack7-VStack flex-1 mt-1 flex-wrap">
 													{buttons}
 												</HStack>
 											</VStack>;
@@ -831,9 +835,12 @@ function Form(props) {
 								if (defaults?.labelWidth) {
 									style.width = defaults.labelWidth;
 								}
+								if (labelWidth) {
+									style.width = labelWidth;
+								}
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
 									if (!style.width) {
-										style.width = '120px';
+										style.width = '160px';
 									}
 									element = <HStack className="Form-HStack8 w-full">
 								 					<Label style={style}>

package/src/Components/Form/Label.js

@@ -16,8 +16,10 @@ export default function Label(props) {
 	}
 	let textClassName = `
 		Label-TextNative
-		flex
+		inline-block
 		text-ellipsis
+		text-base
+		w-full
 		${styles.FORM_LABEL_CLASSNAME}
 	`;
 	if (props._text?.className) {

package/src/Components/Hoc/withPermissions.js

@@ -12,6 +12,7 @@ import {
 	UPLOAD_DOWNLOAD,
 } from '../../Constants/Commands.js';
 import UiGlobals from '../../UiGlobals.js';
+import oneHatData from '@onehat/data';
 import _ from 'lodash';
 
 /**
@@ -22,11 +23,23 @@ import _ from 'lodash';
 export function checkPermission(permission) {
 	const
 		reduxState = UiGlobals.redux?.getState(),
-		permissions = reduxState?.app?.permissions;
-	if (!permissions) {
-		return false;
+		permissions = reduxState?.app?.permissions || [];
+	let hasPermission = inArray(permission, permissions);
+	if (hasPermission) {
+		return true;
 	}
-	return inArray(permission, permissions);
+	// check for anonymous get
+	const matches = permission.match(/^view_(.*)$/);
+	if (matches) {
+		const
+			name = Inflector.camelize(matches[1]), // 'pm_events' -> 'PmEvents'
+			repository = oneHatData.getRepository(name),
+			allowAnonymousGet = repository?.schema.repository.allowAnonymousGet;
+		if (allowAnonymousGet) {
+			hasPermission = true;
+		}
+	}
+	return hasPermission;
 }
 
 /**

package/src/Components/Panel/Header.js

@@ -45,10 +45,14 @@ export default function Header(props) {
 			self-center
 			border
 			border-grey-400
+			h-[20px]
+			w-[20px]
+			px-[2px]
+			py-[2px]
 			${styles.PANEL_HEADER_BG}
 		`;
-		if (collapseDirection !== HORIZONTAL) {
-			closeClassName += ' mr-3';
+		if (collapseDirection === HORIZONTAL && isCollapsed) {
+			closeClassName += ' mb-1';
 		}
 		closeBtn = <IconButton
 						onPress={onClose}
@@ -66,10 +70,14 @@ export default function Header(props) {
 			self-center
 			border
 			border-grey-400
+			h-[20px]
+			w-[20px]
+			px-[2px]
+			py-[2px]
 			${styles.PANEL_HEADER_BG}
 		`;
-		if (collapseDirection !== HORIZONTAL) {
-			collapseClassName += ' ml-3';
+		if (collapseDirection === HORIZONTAL && isCollapsed) {
+			collapseClassName += ' mb-1';
 		}
 		collapseBtn = <IconButton
 						onPress={onToggleCollapse}
@@ -138,6 +146,7 @@ export default function Header(props) {
 						</div>;
 			}
 		}
+		panelClassName += ' gap-2';
 		if (closeBtn) {
 			panelClassName += ' pl-[4px] pr-3';
 		} else {
@@ -217,6 +226,7 @@ export default function Header(props) {
 						</Pressable>;
 			}
 		}
+		panelClassName += ' gap-2';
 		if (closeBtn) {
 			panelClassName += ' pl-[4px] pr-3';
 		} else {

package/src/Components/Panel/Panel.js

@@ -112,8 +112,10 @@ function Panel(props) {
 	if (isCollapsed) {
 		if (collapseDirection === HORIZONTAL) {
 			className += ' w-[33px]';
+			delete style.width;
 		} else {
 			className += ' h-[33px]';
+			delete style.height;
 		}
 	}
 

package/src/Components/Tree/Tree.js

@@ -4,6 +4,7 @@ import {
 	Pressable,
 	ScrollView,
 	VStack,
+	VStackNative,
 } from '@project-components/Gluestack';
 import {
 	SELECTION_MODE_SINGLE,
@@ -49,6 +50,7 @@ import Collapse from '../Icons/Collapse.js';
 import Expand from '../Icons/Expand.js';
 import FolderClosed from '../Icons/FolderClosed.js';
 import FolderOpen from '../Icons/FolderOpen.js';
+import Gear from '../Icons/Gear.js';
 import MagnifyingGlass from '../Icons/MagnifyingGlass.js';
 import NoReorderRows from '../Icons/NoReorderRows.js';
 import ReorderRows from '../Icons/ReorderRows.js';
@@ -71,12 +73,17 @@ function TreeComponent(props) {
 			areRootsVisible = true,
 			autoLoadRootNodes = true,
 			extraParams = {}, // Additional params to send with each request ( e.g. { order: 'Categories.name ASC' })
+			isNodeTextConfigurable = false,
+			editDisplaySettings, // fn
 			getNodeText = (item) => { // extracts model/data and decides what the row text should be
 				if (Repository) {
 					return item.displayValue;
 				}
 				return item[displayIx];
 			},
+			getNodeContent = (item) => { // extracts model/data and decides what the row content should be
+				return null;
+			},
 			getDisplayTextFromSearchResults = (item) => {
 				return item.id
 			},
@@ -195,8 +202,7 @@ function TreeComponent(props) {
 				return;
 			}
 
-			const
-				{
+			const {
 					shiftKey,
 					metaKey,
 				 } = e;
@@ -464,7 +470,7 @@ function TreeComponent(props) {
 					</VStack>,
 				onCancel: hideModal,
 			});
-		};
+		},
 
 		// utilities
 		getNodeData = (id) => {
@@ -505,6 +511,7 @@ function TreeComponent(props) {
 				datum = {
 					item: treeNode,
 					text: getNodeText(treeNode),
+					content: getNodeContent ? getNodeContent(treeNode) : null,
 					iconCollapsed: getNodeIcon(COLLAPSED, treeNode),
 					iconExpanded: getNodeIcon(EXPANDED, treeNode),
 					iconLeaf: getNodeIcon(LEAF, treeNode),
@@ -873,13 +880,13 @@ function TreeComponent(props) {
 		getHeaderToolbarItems = () => {
 			const
 				buttons = [
-					{
-						key: 'searchBtn',
-						text: 'Search tree',
-						handler: () => onSearchTree(treeSearchValue),
-						icon: MagnifyingGlass,
-						isDisabled: !treeSearchValue.length,
-					},
+					// {
+					// 	key: 'searchBtn',
+					// 	text: 'Search tree',
+					// 	handler: () => onSearchTree(treeSearchValue),
+					// 	icon: MagnifyingGlass,
+					// 	isDisabled: !treeSearchValue.length,
+					// },
 					{
 						key: 'collapseAllBtn',
 						text: 'Collapse whole tree',
@@ -906,33 +913,41 @@ function TreeComponent(props) {
 					isDisabled: false,
 				});
 			}
+			if (isNodeTextConfigurable && editDisplaySettings) {
+				buttons.push({
+					key: 'editNodeTextBtn',
+					text: 'Display Settings',
+					handler: () => editDisplaySettings(),
+					icon: Gear,
+				});
+			}
 			const items = _.map(buttons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 
-			items.unshift(<Input // Add text input to beginning of header items
-				key="searchNodes"
-				className="flex-1"
-				placeholder="Find tree node"
-				onChangeText={(val) => setTreeSearchValue(val)}
-				onKeyPress={(e) => {
-					if (e.key === 'Enter') {
-						onSearchTree(treeSearchValue);
-					}
-				}}
-				value={treeSearchValue}
-				autoSubmit={false}
-			/>);
-
-			if (treeSearchValue.length) {
-				// Add 'X' button to clear search
-				items.unshift(getIconButtonFromConfig({
-					key: 'xBtn',
-					handler: () => {
-						setHighlitedDatum(null);
-						setTreeSearchValue('');
-					},
-					icon: Xmark,
-				}, 0, self));
-			}
+			// items.unshift(<Input // Add text input to beginning of header items
+			// 	key="searchNodes"
+			// 	className="flex-1"
+			// 	placeholder="Find tree node"
+			// 	onChangeText={(val) => setTreeSearchValue(val)}
+			// 	onKeyPress={(e) => {
+			// 		if (e.key === 'Enter') {
+			// 			onSearchTree(treeSearchValue);
+			// 		}
+			// 	}}
+			// 	value={treeSearchValue}
+			// 	autoSubmit={false}
+			// />);
+
+			// if (treeSearchValue.length) {
+			// 	// Add 'X' button to clear search
+			// 	items.unshift(getIconButtonFromConfig({
+			// 		key: 'xBtn',
+			// 		handler: () => {
+			// 			setHighlitedDatum(null);
+			// 			setTreeSearchValue('');
+			// 		},
+			// 		icon: Xmark,
+			// 	}, 0, self));
+			// }
 
 			return items;
 		},
@@ -1306,6 +1321,8 @@ function TreeComponent(props) {
 		self.reloadTree = reloadTree;
 		self.expandPath = expandPath;
 		self.scrollToNode = scrollToNode;
+		self.buildAndSetTreeNodeData = buildAndSetTreeNodeData;
+		self.forceUpdate = forceUpdate;
 	}
 	
 	const
@@ -1360,7 +1377,7 @@ function TreeComponent(props) {
 		className += ' ' + props.className;
 	}
 
-	return <VStack
+	return <VStackNative
 				{...testProps(self)}
 				className={className}
 			>
@@ -1388,7 +1405,7 @@ function TreeComponent(props) {
 
 				{treeFooterComponent}
 
-			</VStack>;
+			</VStackNative>;
 
 }
 

package/src/Components/Tree/TreeNode.js

@@ -1,7 +1,7 @@
 import { useMemo, } from 'react';
 import {
 	Box,
-	HStack,
+	HStackNative,
 	Icon,
 	Spinner,
 	TextNative,
@@ -35,6 +35,7 @@ export default function TreeNode(props) {
 		hasChildren = item.hasChildren,
 		depth = item.depth,
 		text = datum.text,
+		content = datum.content,
 		iconCollapsed = datum.iconCollapsed,
 		iconExpanded = datum.iconExpanded,
 		iconLeaf = datum.iconLeaf,
@@ -67,7 +68,6 @@ export default function TreeNode(props) {
 		let className = `
 			TreeNode
 			items-center
-			flex
 			flex-1
 			grow-1
 		`;
@@ -75,7 +75,7 @@ export default function TreeNode(props) {
 			className += ' ' + props.className;
 		}
 	
-		return <HStack
+		return <HStackNative
 					{...testProps('node' + (isSelected ? '-selected' : ''))}
 					{...nodeProps}
 					key={hash}
@@ -88,7 +88,7 @@ export default function TreeNode(props) {
 					
 					{isLoading ? 
 						<Spinner className="px-2" /> : 
-						(hasChildren && !isDragMode ? 
+						(icon && hasChildren && !isDragMode ? 
 							<IconButton
 								{...testProps('expandBtn')}
 								icon={icon}
@@ -96,23 +96,25 @@ export default function TreeNode(props) {
 							/> : 
 							<Icon as={icon} className="ml-4 mr-1" />)}
 
-					<TextNative
-						numberOfLines={1}
-						ellipsizeMode="head"
-						// {...propsToPass}
-						className={`
-							TreeNode-TextNative
-							self-center
-							overflow-hidden
-							flex
-							flex-1
-							text-ellipsis
-							${styles.TREE_NODE_CLASSNAME}
-						`}
-						style={{ userSelect: 'none', }}
-					>{text}</TextNative>
+					{text ? <TextNative
+								numberOfLines={1}
+								ellipsizeMode="head"
+								// {...propsToPass}
+								className={`
+									TreeNode-TextNative
+									self-center
+									overflow-hidden
+									flex
+									flex-1
+									text-ellipsis
+									${styles.TREE_NODE_CLASSNAME}
+								`}
+								style={{ userSelect: 'none', }}
+							>{text}</TextNative> : null}
 
-				</HStack>;
+					{content}
+
+				</HStackNative>;
 	}, [
 		nodeProps,
 		bg,
@@ -127,6 +129,7 @@ export default function TreeNode(props) {
 		hasChildren,
 		depth,
 		text,
+		content,
 		onToggle,
 		isLoading,
 	]);