@onehat/ui 0.4.83 → 0.4.84

package/src/Components/Grid/Grid.js

@@ -77,6 +77,7 @@ import Toolbar from '../Toolbar/Toolbar.js';
 import NoReorderRows from '../Icons/NoReorderRows.js';
 import ReorderRows from '../Icons/ReorderRows.js';
 import Unauthorized from '../Messages/Unauthorized.js';
+import Mask from '../Panel/Mask.js';
 import _ from 'lodash';
 
 
@@ -147,6 +148,7 @@ function GridComponent(props) {
 			showSelectHandle = true,
 			isRowSelectable = true,
 			isRowHoverable = true,
+			isDisabled = false,
 			canColumnsSort = true,
 			canColumnsReorder = true,
 			canColumnsResize = true,
@@ -522,6 +524,33 @@ function GridComponent(props) {
 							onContextMenu(item, e, newSelection);
 						}
 					}}
+					onContextMenu={(e) => {
+						// web only; happens before onLongPress triggers
+						// different behavior here than onLongPress:
+						// if user clicks on a header row or phantom record, or if onContextMenu is not set, pass to the browser's context menu
+						if (isHeaderRow || isReorderMode) {
+							return
+						}
+						if (selection && selection[0] && selection[0].isRemotePhantom) {
+							return; // block context menu or changing selection when a remote phantom is already selected
+						}
+						if (onContextMenu) {
+							e.preventDefault();
+							e.stopPropagation(); // disallow browser's default behavior for context menu
+
+							// if the right-clicked item is not in the current selection,
+							// set the selection only to this one item.
+							let newSelection = selection;
+							if (!isInSelection(item)) {
+								newSelection = [item];
+								if (!disableWithSelection) {
+									setSelection(newSelection);
+								}
+							}
+
+							onContextMenu(item, e, newSelection);
+						}
+					}}
 					className={clsx(
 						'Pressable',
 						'Row',
@@ -1679,51 +1708,55 @@ function GridComponent(props) {
 		className += ' ' + props.className;
 	}
 
-	grid = <VStackNative
-				{...testProps(self)}
-				ref={containerRef}
-				tabIndex={0}
-				onKeyDown={onGridKeyDown}
-				onLayout={(e) => debouncedAdjustPageSizeToHeight(e)}
-				className={className}
-				style={style}
-			>
-				{topToolbar &&
-					<VStack ref={topToolbarRef}>
-						{topToolbar}
-					</VStack>}
-
-				<VStack
-					ref={gridContainerRef}
-					onClick={() => {
-						if (!isReorderMode && !isInlineEditorShown && deselectAll) {
-							deselectAll();
-						}
-					}}
-					className={clsx(
-						'gridContainer',
-						'w-full',
-						// 'h-full',
-						'flex-1',
-						'min-h-[40px]',
-						'relative', // Enable positioning for overlay
-						gridContainerBorderClassName,
-					)}
-				>
-					{grid}
-					{/* Loading overlay during measurement phases to prevent visual flashing */}
-					{autoAdjustPageSizeToHeight && 
-					 (getMeasurementPhase() === PHASES__INITIAL || getMeasurementPhase() === PHASES__MEASURING) && 
-					 entities?.length > 0 && (
-						<VStack className="absolute inset-0 z-10 bg-white">
-							<Loading isScreen={true} />
+	if (isDisabled) {
+		grid = <Mask />;
+	} else {
+		grid = <VStackNative
+						{...testProps(self)}
+						ref={containerRef}
+						tabIndex={0}
+						onKeyDown={onGridKeyDown}
+						onLayout={(e) => debouncedAdjustPageSizeToHeight(e)}
+						className={className}
+						style={style}
+					>
+						{topToolbar &&
+							<VStack ref={topToolbarRef}>
+								{topToolbar}
+							</VStack>}
+
+						<VStack
+							ref={gridContainerRef}
+							onClick={() => {
+								if (!isReorderMode && !isInlineEditorShown && deselectAll) {
+									deselectAll();
+								}
+							}}
+							className={clsx(
+								'gridContainer',
+								'w-full',
+								// 'h-full',
+								'flex-1',
+								'min-h-[40px]',
+								'relative', // Enable positioning for overlay
+								gridContainerBorderClassName,
+							)}
+						>
+							{grid}
+							{/* Loading overlay during measurement phases to prevent visual flashing */}
+							{autoAdjustPageSizeToHeight && 
+							(getMeasurementPhase() === PHASES__INITIAL || getMeasurementPhase() === PHASES__MEASURING) && 
+							entities?.length > 0 && (
+								<VStack className="absolute inset-0 z-10 bg-white">
+									<Loading isScreen={true} />
+								</VStack>
+							)}
 						</VStack>
-					)}
-				</VStack>
 
-				{listFooterComponent}
+						{listFooterComponent}
 
-			</VStackNative>
+					</VStackNative>;
+	}
 
 	if (isDropTarget) {
 		grid = <VStackNative

package/src/Components/Grid/GridRow.js

@@ -286,7 +286,7 @@ const GridRow = forwardRef((props, ref) => {
 										'block',
 										areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 										'[&::-webkit-scrollbar]:h-2',
-										'[&::-webkit-scrollbar-thumb]:bg-gray-400',
+										'[&::-webkit-scrollbar-thumb]:bg-gray-300',
 										'[&::-webkit-scrollbar-thumb]:rounded-full',
 										colClassName,
 										styles.GRID_CELL_CLASSNAME,
@@ -350,10 +350,17 @@ const GridRow = forwardRef((props, ref) => {
 					if (config.getCellProps) {
 						_.assign(elementProps, config.getCellProps(item));
 					}
+
+					// TODO: incorporate better scrollbar formatting with
+					// tailwind plugin 'tailwind-scrollbar' (already installed, just not yet used here)
+
 					let textClassName = clsx(
 						'GridRow-TextNative',
 						'self-center',
 						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
+						'[&::-webkit-scrollbar]:h-2',
+						'[&::-webkit-scrollbar-thumb]:bg-gray-300',
+						'[&::-webkit-scrollbar-thumb]:rounded-full',
 						colClassName,
 						styles.GRID_CELL_CLASSNAME,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,

package/src/Components/Hoc/Secondary/withSecondarySideEditor.js

@@ -47,11 +47,12 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 			throw Error('SecondaryEditor is not defined');
 		}
 
+		const containerProps = {};
 		if (isResizable) {
-			secondaryEditorProps.w = 500;
-			secondaryEditorProps.isResizable = true;
+			containerProps.eastIsResizable = true;
+			containerProps.eastInitialWidth = 500;
 		} else {
-			secondaryEditorProps.flex = secondarySideFlex;
+			containerProps.eastInitialFlex = secondarySideFlex;
 		}
 
 		if (!secondaryEditorProps.className) {
@@ -75,6 +76,7 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 								parent={self}
 								reference="secondaryEditor"
 							/>}
+					{...containerProps}
 				/>;
 	});
 	return withAdditionalProps(withSecondaryEditor(SideEditor, isTree));

package/src/Components/Hoc/withContextMenu.js

@@ -95,9 +95,8 @@ export default function withContextMenu(WrappedComponent) {
 								action="secondary"
 							/>;
 				});
-				const showId = true; // TODO: This should only be for local dev
-				if (showId) {
-					contextMenuItemComponents.push(<Text key="idViewer" className="flex-1 py-2 px-4 select-none">id: {selection?.[0]?.id}</Text>);
+				if (UiGlobals.isLocal) {
+					contextMenuItemComponents.push(<Text key="idViewer" className="flex-1 py-2 px-4 select-none">id: {selection?.[0]?.actualId || selection?.[0]?.id}</Text>);
 				}
 				return contextMenuItemComponents;
 			};
@@ -122,9 +121,19 @@ export default function withContextMenu(WrappedComponent) {
 			// may change based on the selection; and this is why we're using 
 			// useEffect to show the context menu instead of onContextMenu.
 
+			// TODO: There might be a bug here. As the comment above suggests, useEffect()
+			// was running if contextMenuItems changed. But the comment next to the args
+			// for useEffect() says we're not including contextMenuItems in the args
+			// to avoid infinite loops. Is this a problem??
+
+			const contextMenuItemComponents = createContextMenuItemComponents();
+			if (contextMenuItemComponents.length === 0) {
+				// No items to show
+				return;
+			}
+			
 			// show context menu
 			const
-				contextMenuItemComponents = createContextMenuItemComponents(),
 				className = clsx(
 					'context-menu-container',
 					'absolute',

package/src/Components/Hoc/withDraggable.js

@@ -14,8 +14,6 @@ import {
 } from 'uuid';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 
-
-
 // Note on modes:
 // HORIZONTAL means the component moves along the X axis.
 // VERTICAL means the component moves along the Y axis.
@@ -62,6 +60,8 @@ export default function withDraggable(WrappedComponent) {
 				if (isDragging) {
 					return;
 				}
+
+				// console.log('start x', info.x);
 				
 				const
 					node = getDraggableNodeFromNode(info.node),
@@ -132,6 +132,9 @@ export default function withDraggable(WrappedComponent) {
 					deltaY,
 				} = info;
 
+
+				// console.log('drag x', info.x);
+
 				// Move the proxy to where it should be
 				const
 					proxy = document.getElementById('dragproxy'),
@@ -157,7 +160,8 @@ export default function withDraggable(WrappedComponent) {
 					return;
 				}
 
-				// console.log('end', info);
+				// console.log('end x', info.x);
+
 				// remove proxy
 				const proxy = document.getElementById('dragproxy');
 				proxy.remove();

package/src/Components/Hoc/withSideEditor.js

@@ -45,11 +45,12 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 			throw Error('Editor is not defined');
 		}
 
+		const containerProps = {};
 		if (isResizable) {
-			_editor.w = 500;
-			_editor.isResizable = true;
+			containerProps.eastIsResizable = true;
+			containerProps.eastInitialWidth = 500;
 		} else {
-			_editor.flex = sideFlex;
+			containerProps.eastInitialFlex = sideFlex;
 		}
 
 		if (!_editor.className) {
@@ -61,10 +62,10 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 					parent={self}
 					reference="SideEditor"
 					center={<WrappedComponent
+								{...props}
 								ref={ref}
 								isTree={isTree}
 								isSideEditor={true}
-								{...props}
 							/>}
 					east={props.isEditorShown && <Editor
 								{...propsToPass}
@@ -73,6 +74,8 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 								parent={self}
 								reference="editor"
 							/>}
+					{...containerProps}
+					isDisabled={props.isDisabled}
 				/>;
 	});
 	return withAdditionalProps(withEditor(SideEditor, isTree));

package/src/Components/Layout/AsyncOperation.js

@@ -9,6 +9,9 @@ import {
 import clsx from 'clsx';
 import * as Progress from 'react-native-progress';
 import useForceUpdate from '../../Hooks/useForceUpdate';
+import {
+	EDITOR_TYPE__PLAIN,
+} from '../../Constants/Editor.js';
 import {
 	PROGRESS__NONE_FOUND,
 	PROGRESS__IN_PROCESS,
@@ -16,10 +19,15 @@ import {
 	PROGRESS__FAILED,
 	PROGRESS__STUCK,
 	PROGRESS__UNSTUCK,
+	ASYNC_OPERATION_MODES__INIT,
+	ASYNC_OPERATION_MODES__START,
+	ASYNC_OPERATION_MODES__PROCESSING,
+	ASYNC_OPERATION_MODES__RESULTS,
 } from '../../Constants/Progress.js';
 import {
 	MOMENT_DATE_FORMAT_2,
 } from '../../Constants/Dates.js';
+import inArray from '../../Functions/inArray.js';
 import isJson from '../../Functions/isJson.js';
 import Form from '../Form/Form.js';
 import Button from '../Buttons/Button.js';
@@ -38,11 +46,12 @@ import Toolbar from '../Toolbar/Toolbar.js';
 import moment from 'moment';
 import _ from 'lodash';
 
-const
-	INIT = 'INIT', // no footer shown; used when component initially loads, to see if operation is already in progress
-	START = 'START', // shows the start form
-	PROCESSING = 'PROCESSING', // shows the loading indicator while starting the operation
-	RESULTS = 'RESULTS'; // shows the results of the operation, or any in-progress updates
+// MODES:
+// ASYNC_OPERATION_MODES__INIT - no footer shown; used when component initially loads, to see if operation is already in progress
+// ASYNC_OPERATION_MODES__START - shows the start form
+// ASYNC_OPERATION_MODES__PROCESSING - shows the loading indicator while starting the operation
+// ASYNC_OPERATION_MODES__RESULTS - shows the results of the operation, or any in-progress updates
+
 
 // If getProgressUpdates is false, the component will show the start form initially.
 // If getProgressUpdates is true, the component will initially query the server to see if
@@ -63,9 +72,11 @@ function AsyncOperation(props) {
 			formStartingValues = {},
 			_form = {},
 			getProgressUpdates = false,
+			getInitialProgress = true, // applies only if getProgressUpdates is true
 			parseProgress, // optional fn, accepts 'response' as arg and returns an object like this: { status, errors, started, lastUpdated, timeElapsed, count, current, total, percentage }
 			updateInterval = 10000, // ms
 			progressColor = '#666',
+			onChangeMode,
 
 			// withComponent
 			self,
@@ -81,15 +92,18 @@ function AsyncOperation(props) {
 		getIsValid = () => {
 			return isValid.current;
 		},
-		mode = useRef(INIT),
-		setMode = (newMode) => {
-			mode.current = newMode;
+		modeRef = useRef(ASYNC_OPERATION_MODES__INIT),
+		setMode = (mode) => {
+			modeRef.current = mode;
+
+			if (onChangeMode) {
+				onChangeMode(mode);
+			}
 		},
 		getMode = () => {
-			return mode.current;
+			return modeRef.current;
 		},
-		isInProcess = getMode() === PROCESSING,
-		currentTabIx = (getMode() === PROCESSING ? 1 : (getMode() === RESULTS ? 2 : 0)),
+		isInProcess = getMode() === ASYNC_OPERATION_MODES__PROCESSING,
 		intervalRef = useRef(null),
 		getInterval = () => {
 			return intervalRef.current;
@@ -113,9 +127,9 @@ function AsyncOperation(props) {
 		},
 		getFooter = () => {
 			switch(getMode()) {
-				case INIT:
+				case ASYNC_OPERATION_MODES__INIT:
 					return null;
-				case START:
+				case ASYNC_OPERATION_MODES__START:
 					return <Toolbar>
 								<Button
 									text="Start"
@@ -124,7 +138,7 @@ function AsyncOperation(props) {
 									isDisabled={!getIsValid()}
 								/>
 							</Toolbar>;
-				case PROCESSING:
+				case ASYNC_OPERATION_MODES__PROCESSING:
 					// TODO: Add a cancellation option to the command.
 					// would require a backend controller action to support it
 					return null;
@@ -135,7 +149,7 @@ function AsyncOperation(props) {
 					// 				variant="link"
 					// 			/>
 					// 		</Toolbar>;
-				case RESULTS:
+				case ASYNC_OPERATION_MODES__RESULTS:
 					let button;
 					if (getIsStuck()) {
 						button = <Button
@@ -160,13 +174,13 @@ function AsyncOperation(props) {
 		[progress, setProgress] = useState(null),
 		[isReady, setIsReady] = useState(false),
 		showResults = (results) => {
-			setMode(RESULTS);
+			setMode(ASYNC_OPERATION_MODES__RESULTS);
 			setFooter(getFooter());
 			setResults(results);
 		},
 		startProcess = async () => {
 			stopGettingProgress();
-			setMode(PROCESSING);
+			setMode(ASYNC_OPERATION_MODES__PROCESSING);
 			setFooter(getFooter());
 			
 			const
@@ -264,11 +278,11 @@ function AsyncOperation(props) {
 					statusMessage = '',
 					errorMessage = null;
 				if (status === PROGRESS__IN_PROCESS) {
-					setMode(PROCESSING);
+					setMode(ASYNC_OPERATION_MODES__PROCESSING);
 					color = 'text-green-600';
 					statusMessage = 'In process...';
 				} else {
-					setMode(RESULTS);
+					setMode(ASYNC_OPERATION_MODES__RESULTS);
 					stopGettingProgress();
 					if (status === PROGRESS__COMPLETED) {
 						statusMessage = 'Completed';
@@ -328,7 +342,7 @@ function AsyncOperation(props) {
 										})}
 									</VStack>);
 				}
-				if (getMode() === PROCESSING) {
+				if (getMode() === ASYNC_OPERATION_MODES__PROCESSING) {
 					setProgress(renderItems);
 				} else {
 					setResults(renderItems);
@@ -351,7 +365,7 @@ function AsyncOperation(props) {
 		},
 		unstick = async () => {
 			stopGettingProgress();
-			setMode(PROCESSING);
+			setMode(ASYNC_OPERATION_MODES__PROCESSING);
 			setFooter(getFooter());
 			
 			const
@@ -379,7 +393,7 @@ function AsyncOperation(props) {
 			resetToInitialState();
 		},
 		resetToInitialState = () => {
-			setMode(START);
+			setMode(ASYNC_OPERATION_MODES__START);
 			setFooter(getFooter());
 			setIsStuck(false);
 			stopGettingProgress();
@@ -394,10 +408,10 @@ function AsyncOperation(props) {
 		};
 
 	useEffect(() => {
-		if (getProgressUpdates) {
+		if (getProgressUpdates && getInitialProgress) {
 			getProgress(true);
 		} else {
-			setMode(START);
+			setMode(ASYNC_OPERATION_MODES__START);
 			setIsReady(true);
 		}
 		return () => {
@@ -409,6 +423,20 @@ function AsyncOperation(props) {
 		};
 	}, []);
 
+	let currentTabIx = 0;
+	switch(getMode()) {
+		case ASYNC_OPERATION_MODES__INIT:
+		case ASYNC_OPERATION_MODES__START:
+			currentTabIx = 0;
+			break;
+		case ASYNC_OPERATION_MODES__PROCESSING:
+			currentTabIx = 1;
+			break;
+		case ASYNC_OPERATION_MODES__RESULTS:
+			currentTabIx = 2;
+			break;
+	}
+
 	return <Panel
 				{...props}
 				footer={footer}
@@ -421,10 +449,11 @@ function AsyncOperation(props) {
 								title: 'Start',
 								icon: Play,
 								isDisabled: currentTabIx !== 0,
-								content: getMode() === INIT ? 
+								content: inArray(getMode(), [ASYNC_OPERATION_MODES__INIT, ASYNC_OPERATION_MODES__PROCESSING, ASYNC_OPERATION_MODES__RESULTS]) ? 
 										<Loading /> :
 										<ScrollView className="ScrollView h-full w-full">
 											<Form
+												editorType={EDITOR_TYPE__PLAIN}
 												reference="form"
 												parent={self}
 												className="w-full h-full flex-1"

package/src/Components/Panel/Mask.js

@@ -2,20 +2,7 @@ import {
 	Box,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
-import {
-	CURRENT_MODE,
-	UI_MODE_WEB,
-	UI_MODE_NATIVE,
-} from '../../Constants/UiModes.js';
 
 export default function Mask(props) {
-	if (CURRENT_MODE === UI_MODE_WEB) {
-
-		return <div className="mask"></div>;
-
-	} else if (CURRENT_MODE === UI_MODE_NATIVE) {
-
-		return <Box className="absolute h-full w-full bg-grey-400:alpha.20 z-100000"></Box>;
-
-	}
+	return <Box className="mask flex-none absolute h-full w-full bg-grey-400/20 z-[100000]"></Box>;
 }

package/src/Components/Screens/Manager.js

@@ -1,8 +1,8 @@
+import { cloneElement, useState, useEffect, } from 'react';
 import {
 	VStackNative,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
-import React, { useState, useEffect, } from 'react';
 import {
 	SCREEN_MODES__FULL,
 	SCREEN_MODES__SIDE,
@@ -21,10 +21,9 @@ function ManagerScreen(props) {
 			sideModeComponent,
 			fullModeComponent,
 			onChangeMode,
-
-			// withComponent
-			self,
+			...propsToPass
 		} = props,
+		self = props.self,
 		id = props.id || props.self?.path,
 		[isRendered, setIsRendered] = useState(false),
 		[isModeSet, setIsModeSet] = useState(false),
@@ -79,7 +78,7 @@ function ManagerScreen(props) {
 		self.mode = actualMode;
 	}
 
-	const whichComponent = actualMode === SCREEN_MODES__FULL ? fullModeComponent : sideModeComponent;
+	const whichComponent = cloneElement((actualMode === SCREEN_MODES__FULL ? fullModeComponent : sideModeComponent), propsToPass);
 
 	return <VStackNative
 				{...testProps(self)}

package/src/Components/Tree/Tree.js

@@ -1106,6 +1106,30 @@ function TreeComponent(props) {
 								onContextMenu(item, e, selection);
 							}
 						}}
+						onContextMenu={(e) => {
+							// web only; happens before onLongPress triggers
+							// different behavior here than onLongPress:
+							// if user clicks on a phantom record, or if onContextMenu is not set, pass to the browser's context menu
+							if (selection && selection[0] && selection[0].isRemotePhantom) {
+								return; // block context menu or changing selection when a remote phantom is already selected
+							}
+							if (onContextMenu) {
+								e.preventDefault();
+								e.stopPropagation(); // disallow browser's default behavior for context menu
+
+								// if the right-clicked item is not in the current selection,
+								// set the selection only to this one item.
+								let newSelection = selection;
+								if (!isInSelection(item)) {
+									newSelection = [item];
+									setSelection(newSelection);
+								}
+
+								if (onContextMenu) {
+									onContextMenu(item, e, newSelection);
+								}
+							}
+						}}
 						className={clsx(
 							'Pressable',
 							'Node',

package/src/Components/index.js

@@ -264,6 +264,7 @@ import FiltersForm from './Form/FiltersForm.js';
 import Form from './Form/Form.js';
 import Grid from './Grid/Grid.js';
 import GridPanel from './Panel/GridPanel.js';
+import Hidden from './Form/Field/Hidden.js';
 import IconButton from './Buttons/IconButton.js';
 import Input from './Form/Field/Input.js';
 import IntervalsCombo from './Form/Field/Combo/IntervalsCombo.js';
@@ -558,6 +559,7 @@ const components = {
 	Form,
 	Grid,
 	GridPanel,
+	Hidden,
 	IconButton,
 	Input,
 	IntervalsCombo,

package/src/Constants/Progress.js

@@ -3,4 +3,9 @@ export const PROGRESS__IN_PROCESS = 'IN_PROCESS';
 export const PROGRESS__COMPLETED = 'COMPLETED';
 export const PROGRESS__FAILED = 'FAILED';
 export const PROGRESS__STUCK = 'STUCK';
-export const PROGRESS__UNSTUCK = 'UNSTUCK';
+export const PROGRESS__UNSTUCK = 'UNSTUCK';
+
+export const ASYNC_OPERATION_MODES__INIT = 'INIT';
+export const ASYNC_OPERATION_MODES__START = 'START';
+export const ASYNC_OPERATION_MODES__PROCESSING = 'PROCESSING';
+export const ASYNC_OPERATION_MODES__RESULTS = 'RESULTS';

package/src/PlatformImports/Web/Attachments.js

@@ -474,9 +474,9 @@ function AttachmentsElement(props) {
 				},
 				isPdf = currentFile.attachments__mimetype === 'application/pdf';
 				
-			let url = currentFile.attachments__uri;
+			let url = encodeURI(currentFile.attachments__uri);
 			try {
-				const response = await fetch(currentFile.attachments__uri, {
+				const response = await fetch(url, {
 					headers: Attachments.headers // Use your repository's headers
 				});
 				
@@ -1019,7 +1019,7 @@ function AttachmentsElement(props) {
 							},
 							{
 								"id": "attachments__size_formatted",
-								"header": "Size Formatted",
+								"header": "Size",
 								"fieldName": "attachments__size_formatted",
 								"isSortable": false,
 								"isEditable": false,