@onehat/ui 0.4.93 → 0.4.96

package/package.json

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

package/src/Components/Container/Container.js

@@ -368,7 +368,7 @@ function Container(props) {
 		wrapperProps = {};
 		
 		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = (north.props.className || '') + ' h-full w-full';
+		componentProps.className = 'h-full w-full ' + (north.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== northHeight) {
@@ -406,7 +406,7 @@ function Container(props) {
 		wrapperProps = {};
 		
 		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = (south.props.className || '') + ' h-full w-full';
+		componentProps.className = 'h-full w-full ' + (south.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== getSouthHeight()) {
@@ -444,7 +444,7 @@ function Container(props) {
 		wrapperProps = {};
 		
 		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = (east.props.className || '') + ' h-full w-full';
+		componentProps.className = 'h-full w-full ' + (east.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getEastWidth()) {
@@ -482,7 +482,7 @@ function Container(props) {
 		wrapperProps = {};
 		
 		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = (west.props.className || '') + ' h-full w-full';
+		componentProps.className = 'h-full w-full ' + (west.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getWestWidth()) {

package/src/Components/Form/Form.js

@@ -1247,7 +1247,7 @@ function Form(props) {
 
 			if (inArray(editorType, [EDITOR_TYPE__SIDE, EDITOR_TYPE__SMART, EDITOR_TYPE__WINDOWED]) && 
 				isSingle && getEditorMode() === EDITOR_MODE__EDIT && 
-				(onBack || (onViewMode && !disableView))) {
+				(onBack || onViewMode)) {
 				modeHeader = <Toolbar>
 								<HStack className="flex-1 items-center">
 									{onBack &&

package/src/Components/Grid/Grid.js

@@ -5,6 +5,7 @@ import {
 	HStack,
 	Pressable,
 	// ScrollView,
+	Text,
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
@@ -187,7 +188,17 @@ function GridComponent(props) {
 			canRowsReorder = false,
 			canRowDrag, // optional fn to customize whether each row can be dragged
 			canRowAcceptDrop, // optional fn to customize whether each node can accept a dropped item: (targetItem, draggedItem) => boolean
-			getCustomDragProxy, // optional fn to render custom drag preview: (item, selection) => ReactElement
+			dragProxyField,
+			getCustomDragProxy = (item, selection) => { // optional fn to render custom drag preview: (item, selection) => ReactElement
+				let selectionCount = selection?.length || 1,
+					displayText = dragProxyField ? item[dragProxyField] : (item.displayValue || 'Selected Row');
+				return <VStack className="bg-white border border-gray-300 rounded-lg p-3 shadow-lg max-w-[200px]">
+							<Text className="font-semibold text-gray-800">{displayText}</Text>
+							{selectionCount > 1 && 
+								<Text className="text-sm text-gray-600">(+{selectionCount -1} more item{selectionCount > 2 ? 's' : ''})</Text>
+							}
+						</VStack>;
+			},
 			dragPreviewOptions, // optional object for drag preview positioning options
 			areRowsDragSource = false,
 			rowDragSourceType,
@@ -260,6 +271,7 @@ function GridComponent(props) {
 		} = props,
 		styles = UiGlobals.styles,
 		id = props.id || props.self?.path,
+		entities = Repository ? (Repository.isRemote ? Repository.entities : Repository.getEntitiesOnPage()) : data,
 		localColumnsConfigKey = id && id + '-localColumnsConfig',
 		[hasUnserializableColumns] = useState(() => {
 			return !isSerializable(columnsConfig); // (runs only once, when the component is first created)
@@ -280,6 +292,8 @@ function GridComponent(props) {
 		measuredRowsRef = useRef([]),
 		footerToolbarRef = useRef(null),
 		rowRefs = useRef([]),
+		previousEntitiesLength = useRef(0),
+		hasRemeasuredAfterRowsAppeared = useRef(false),
 		[isInited, setIsInited] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
@@ -1118,12 +1132,12 @@ function GridComponent(props) {
 				// Keep the current estimated pageSize, just hide the loading overlay
 			}
 		},
-		adjustPageSizeToHeight = (containerHeight) => {
+		adjustPageSizeToHeight = (containerHeight, forceRemeasure = false) => {
 			if (!Repository || Repository.isDestroyed) { // This method gets delayed, so it's possible for Repository to have been destroyed. Check for this
 				return;
 			}
 			if (DEBUG) {
-				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A`);
+				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A forceRemeasure=${forceRemeasure}`);
 			}
 
 			let doAdjustment = autoAdjustPageSizeToHeight;
@@ -1135,11 +1149,11 @@ function GridComponent(props) {
 				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A2 doAdjustment=${doAdjustment}, autoAdjustPageSizeToHeight=${autoAdjustPageSizeToHeight}, UiGlobals.autoAdjustPageSizeToHeight=${UiGlobals.autoAdjustPageSizeToHeight}, containerHeight=${containerHeight}`);
 			}
 			
-			// Only proceed if height changed significantly
+			// Only proceed if height changed significantly or forced
 			const
 				heightChanged = Math.abs(containerHeight - lastMeasuredContainerHeight) > 5, // 5px tolerance
 				isFirstMeasurement = lastMeasuredContainerHeight === 0;
-			if (containerHeight > 0 && (isFirstMeasurement || heightChanged)) {
+			if (containerHeight > 0 && (isFirstMeasurement || heightChanged || forceRemeasure)) {
 				if (editorType === EDITOR_TYPE__SIDE && getIsEditorShown()) {
 					// When side editor is shown, skip adjustment to avoid layout thrashing
 					console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A4 height changed significantly, but side editor is shown, skipping remeasurement`);
@@ -1543,6 +1557,34 @@ function GridComponent(props) {
 		}
 	}, [autoAdjustPageSizeToHeight]);
 
+	// Reset measurement when rows were first empty then became populated
+	useEffect(() => {
+		const
+			currentLength = entities?.length || 0,
+			wasEmpty = previousEntitiesLength.current === 0,
+			isNowPopulated = currentLength > 0;
+		
+		// Only remeasure the FIRST time rows appear after being empty
+		if (autoAdjustPageSizeToHeight && wasEmpty && isNowPopulated && !hasRemeasuredAfterRowsAppeared.current) {
+			// Rows just appeared for the first time - restart measurement cycle to use actual heights
+			if (DEBUG) {
+				console.log(`${getMeasurementPhase()}, useEffect 5 - rows appeared for first time, restarting measurement cycle`);
+			}
+			hasRemeasuredAfterRowsAppeared.current = true;
+			
+			setMeasurementPhase(PHASES__INITIAL);
+			setMeasuredRowHeight(null);
+			measuredRowsRef.current = [];
+			
+			// Trigger remeasurement with force flag since actual rows are now available
+			if (lastMeasuredContainerHeight > 0) {
+				adjustPageSizeToHeight(lastMeasuredContainerHeight, true);
+			}
+		}
+		
+		previousEntitiesLength.current = currentLength;
+	}, [entities?.length, autoAdjustPageSizeToHeight]);
+
 	if (canUser && !canUser('view')) {
 		return <Unauthorized />;
 	}
@@ -1579,7 +1621,6 @@ function GridComponent(props) {
 	}
 
 	// Actual data to show in the grid
-	const entities = Repository ? (Repository.isRemote ? Repository.entities : Repository.getEntitiesOnPage()) : data;
 	let rowData = [...entities]; // don't use the original array, make a new one so alterations to it are temporary
 	if (showHeaders) {
 		rowData.unshift({ id: 'headerRow' });

package/src/Components/Grid/GridRow.js

@@ -14,6 +14,7 @@ import {
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
 import * as colourMixer from '@k-renwick/colour-mixer';
+import Tooltip from '../Tooltip/Tooltip.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
 import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
@@ -457,16 +458,20 @@ const GridRow = forwardRef((props, ref) => {
 		if (isOver) {
 			rowClassName += ' border-4 border-[#0ff]';
 		}
-		return <HStackNative
-					ref={ref}
-					{...testProps('Row ' + (isSelected ? 'row-selected' : ''))}
-					{...rowProps}
-					key={hash}
-					className={rowClassName}
-					style={{
-						backgroundColor: bg,
-					}}
-				>{rowContents}</HStackNative>;
+		let row = <HStackNative
+						ref={ref}
+						{...testProps('Row ' + (isSelected ? 'row-selected' : ''))}
+						{...rowProps}
+						key={hash}
+						className={rowClassName}
+						style={{
+							backgroundColor: bg,
+						}}
+					>{rowContents}</HStackNative>;
+		if (rowProps.tooltip) {
+			row = <Tooltip label={rowProps.tooltip} placement="bottom left">{row}</Tooltip>;
+		}
+		return row;
 	}, [
 		columnsConfig,
 		asyncResults,

package/src/Components/Hoc/withAlert.js

@@ -61,6 +61,7 @@ function withAlert(WrappedComponent) {
 								'flex-1',
 								'items-start',
 								'justify-center',
+								'p-4',
 							)}>
 								<Text className={clsx(
 									'withAlert-Text',
@@ -164,7 +165,7 @@ function withAlert(WrappedComponent) {
 					}),
 					onOk: () => hideModal(),
 					canClose: true,
-					h: 200,
+					h: 250,
 					w: 400,
 					whichModal: 'info',
 				});

package/src/Components/Hoc/withEditor.js

@@ -30,6 +30,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				userCanView = true,
 				canEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
 				canProceedWithCrud, // fn returns bool on if the CRUD operation can proceed
+				canRecordBeEdited, // fn(selection) returns bool on if the current record(s) can be edited
+				canRecordBeDeleted, // fn(selection) returns bool on if the current record(s) can be deleted
 				disableAdd = false,
 				disableEdit = false,
 				disableDelete = false,
@@ -87,6 +89,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			editorModeRef = useRef(initialEditorMode),
 			isIgnoreNextSelectionChangeRef = useRef(false),
 			isEditorShownRef = useRef(false),
+			canEditorBeInEditModeRef = useRef(true), // whether the editor is allowed to be in edit mode based on canRecordBeEdited
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isAdding, setIsAdding] = useState(false),
 			[isSaving, setIsSaving] = useState(false),
@@ -108,6 +111,13 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			getIsEditorShown = () => {
 				return isEditorShownRef.current;
 			},
+			setCanEditorBeInEditMode = (bool) => {
+				canEditorBeInEditModeRef.current = bool;
+				forceUpdate();
+			},
+			getCanEditorBeInEditMode = () => {
+				return canEditorBeInEditModeRef.current;
+			},
 			setIsWaitModalShown = (bool) => {
 				const
 					dispatch = UiGlobals.redux?.dispatch,
@@ -624,6 +634,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				});
 			},
 			calculateEditorMode = () => {
+				if (!getCanEditorBeInEditMode()) { // this is a result of canRecordBeEdited returning false
+					return EDITOR_MODE__VIEW;
+				}
 
 				let isIgnoreNextSelectionChange = getIsIgnoreNextSelectionChange(),
 					doStayInEditModeOnSelectionChange = stayInEditModeOnSelectionChange;
@@ -691,7 +704,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 		useEffect(() => {
 
 			if (editorType === EDITOR_TYPE__SIDE) {
-				if (selection?.length) { //  || isAdding
+				if (selection?.length) { // || isAdding
 					// there is a selection, so show the editor
 					setIsEditorShown(true);
 				} else {
@@ -700,6 +713,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 			}
 
+			if (canRecordBeEdited && canRecordBeEdited(selection) === false) {
+				setCanEditorBeInEditMode(false);
+			} else {
+				setCanEditorBeInEditMode(true);
+			}
 			setEditorMode(calculateEditorMode());
 			setLastSelection(selection);
 			
@@ -749,8 +767,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					setIsEditorShown={setIsEditorShown}
 					setIsIgnoreNextSelectionChange={setIsIgnoreNextSelectionChange}
 					onAdd={(!userCanEdit || disableAdd) ? null : doAdd}
-					onEdit={(!userCanEdit || disableEdit) ? null : doEdit}
-					onDelete={(!userCanEdit || disableDelete) ? null : doDelete}
+					onEdit={(!userCanEdit || disableEdit || (canRecordBeEdited && !canRecordBeEdited(selection))) ? null : doEdit}
+					onDelete={(!userCanEdit || disableDelete || (canRecordBeDeleted && !canRecordBeDeleted(selection))) ? null : doDelete}
 					onView={doView}
 					onDuplicate={doDuplicate}
 					onEditorSave={doEditorSave}

package/src/Components/Hoc/withPresetButtons.js

@@ -48,7 +48,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 		}
 
 		const {
-				// extract and pass
+				// for local use
 				contextMenuItems = [],
 				additionalToolbarButtons = [],
 				useUploadDownload = false,
@@ -59,18 +59,18 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				downloadHeaders,
 				downloadParams,
 				onChangeColumnsConfig,
-				canRecordBeEdited,
-				canRecordBeDeleted,
-				canRecordBeDuplicated,
 				...propsToPass
 			} = props,
 			{
-				// for local use
+				// extract and pass down
 				isEditor = false,
 				isTree = false,
 				canDeleteRootNode = false,
 				isSideEditor = false,
 				canEditorViewOnly = false,
+				canRecordBeEdited, // fn(selection) returns bool on if the current record(s) can be edited
+				canRecordBeDeleted, // fn(selection) returns bool on if the current record(s) can be deleted
+				canRecordBeDuplicated, // fn(selection) returns bool on if the current record(s) can be duplicated
 				disableAdd = !isEditor,
 				disableEdit = !isEditor,
 				disableDelete = !isEditor,

package/src/Components/Panel/GridPanel.js

@@ -11,6 +11,8 @@ export function GridPanel(props) {
 	const {
 			isEditor = false,
 			editorType = EDITOR_TYPE__WINDOWED,
+			_panel = {},
+			_grid = {},
 		} = props;
 
 	let WhichGrid = Grid;
@@ -28,12 +30,8 @@ export function GridPanel(props) {
 		}
 	}
 
-	if (!props._panel) {
-		props._panel = {};
-	}
-
-	return <Panel {...props} {...props._panel}>
-				<WhichGrid {...props} />
+	return <Panel {...props} {..._panel}>
+				<WhichGrid {...props} {..._grid} />
 			</Panel>;
 }
 

package/src/Components/Panel/TabPanel.js

@@ -3,7 +3,11 @@ import Panel from './Panel.js';
 
 
 export default function TabPanel(props) {
-	return <Panel className="w-full flex" {...props._panel}>
-				<TabBar {...props} {...props._tab} />
+	const {
+			_panel = {},
+			_tab = {},
+		} = props;
+	return <Panel className="w-full flex" {..._panel}>
+				<TabBar {...props} {..._tab} />
 			</Panel>;
 }

package/src/Components/Panel/TreePanel.js

@@ -10,6 +10,8 @@ export function TreePanel(props) {
 	const {
 			isEditor = false,
 			editorType = EDITOR_TYPE__WINDOWED,
+			_panel = {},
+			_tree = {},
 		} = props;
 
 	let WhichTree = Tree;
@@ -24,8 +26,8 @@ export function TreePanel(props) {
 		}
 	}
 
-	return <Panel {...props._panel}>
-				<WhichTree {...props} {...props._tree} />
+	return <Panel {..._panel}>
+				<WhichTree {...props} {..._tree} />
 			</Panel>;
 }
 

package/src/Components/Tree/Tree.js

@@ -3,6 +3,7 @@ import {
 	HStack,
 	Pressable,
 	ScrollView,
+	Text,
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
@@ -133,7 +134,17 @@ function TreeComponent(props) {
 			canNodeMoveInternally, // optional fn to customize whether each node can be dragged INternally
 			canNodeMoveExternally, // optional fn to customize whether each node can be dragged EXternally
 			canNodeAcceptDrop, // optional fn to customize whether each node can accept a dropped item: (targetItem, draggedItem) => boolean
-			getCustomDragProxy, // optional fn to render custom drag preview: (item, selection) => ReactElement
+			dragProxyField,
+			getCustomDragProxy = (item, selection) => { // optional fn to render custom drag preview: (item, selection) => ReactElement
+				let selectionCount = selection?.length || 1,
+					displayText = dragProxyField ? item[dragProxyField] : (item.displayValue || 'Selected TreeNode');
+				return <VStack className="bg-white border border-gray-300 rounded-lg p-3 shadow-lg max-w-[200px]">
+							<Text className="font-semibold text-gray-800">{displayText}</Text>
+							{selectionCount > 1 && 
+								<Text className="text-sm text-gray-600">(+{selectionCount -1} more item{selectionCount > 2 ? 's' : ''})</Text>
+							}
+						</VStack>;
+			},
 			dragPreviewOptions, // optional object for drag preview positioning options
 			areNodesDragSource = false,
 			nodeDragSourceType,

package/src/Components/Viewer/Viewer.js

@@ -543,26 +543,27 @@ function Viewer(props) {
 						)}
 					>
 						{scrollToTopAnchor}
-						{canEdit && onEditMode &&
-							<Toolbar className="justify-end">
-								<HStack className="flex-1 items-center">
-									<Text className="text-[20px] ml-1 text-grey-500">View Mode</Text>
-								</HStack>
-								{(!canUser || canUser(EDIT)) &&
-									<Button
-										{...testProps('toEditBtn')}
-										key="editBtn"
-										onPress={onEditMode}
-										icon={Pencil}
-										_icon={{ 
-											size: 'sm',
-											className: 'text-white'
-										}}
-										className="text-white"
-										text="To Edit"
-										tooltip="Switch to Edit Mode"
-									/>}
-							</Toolbar>}
+
+						<Toolbar className="justify-end">
+							<HStack className="flex-1 items-center">
+								<Text className="text-[20px] ml-1 text-grey-500">View Mode</Text>
+							</HStack>
+							{onEditMode && (!canUser || canUser(EDIT)) && 
+								<Button
+									{...testProps('toEditBtn')}
+									key="editBtn"
+									onPress={onEditMode}
+									icon={Pencil}
+									_icon={{ 
+										size: 'sm',
+										className: 'text-white'
+									}}
+									className="text-white"
+									text="To Edit"
+									tooltip="Switch to Edit Mode"
+									isDisabled={!canEdit}
+								/>}
+						</Toolbar>
 						
 						{!_.isEmpty(additionalButtons) && 
 							<Toolbar className="justify-end flex-wrap gap-2">