@onehat/ui 0.4.82 → 0.4.84

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/Toolbar/Pagination.js

@@ -56,8 +56,8 @@ export default function Pagination(props) {
 		let items = [],
 			isDisabled = false;
 		if (showMoreOnly) {
-			isDisabled = (pageEnd === total);
-			if (showPagination) {
+			if (totalPages > 1 && showPagination) {
+				isDisabled = (pageEnd === total);
 				items.push(<Button
 								{...testProps('showMoreBtn')}
 								key="showMoreBtn"
@@ -88,120 +88,122 @@ export default function Pagination(props) {
 								self={self}
 							/>);
 			}
-			isDisabled = page === 1;
-			if (showPagination) {
-				items.push(<IconButton
-								{...testProps('firstPageBtn')}
-								key="firstPageBtn"
-								reference="firstPageBtn"
-								className="Pagination-firstPageBtn"
-								parent={self}
-								isDisabled={isDisabled}
-								icon={AnglesLeft}
-								_icon={iconProps}
-								onPress={() => Repository.setPage(1)}
-								tooltip="First Page"
-							/>);
-				items.push(<IconButton
-								{...testProps('prevPageBtn')}
-								key="prevPageBtn"
-								reference="prevPageBtn"
-								className="Pagination-prevPageBtn"
-								parent={self}
-								isDisabled={isDisabled}
-								icon={AngleLeft}
-								_icon={iconProps}
-								onPress={() => Repository.prevPage()}
-								tooltip="Previous Page"
-							/>);
+			if (totalPages > 1) {
+				isDisabled = page === 1;
+				if (showPagination) {
+					items.push(<IconButton
+									{...testProps('firstPageBtn')}
+									key="firstPageBtn"
+									reference="firstPageBtn"
+									className="Pagination-firstPageBtn"
+									parent={self}
+									isDisabled={isDisabled}
+									icon={AnglesLeft}
+									_icon={iconProps}
+									onPress={() => Repository.setPage(1)}
+									tooltip="First Page"
+								/>);
+					items.push(<IconButton
+									{...testProps('prevPageBtn')}
+									key="prevPageBtn"
+									reference="prevPageBtn"
+									className="Pagination-prevPageBtn"
+									parent={self}
+									isDisabled={isDisabled}
+									icon={AngleLeft}
+									_icon={iconProps}
+									onPress={() => Repository.prevPage()}
+									tooltip="Previous Page"
+								/>);
 
-				isDisabled = page === totalPages || totalPages <= 1;
-				items.push(<IconButton
-								{...testProps('nextPageBtn')}
-								key="nextPageBtn"
-								reference="nextPageBtn"
-								className="Pagination-nextPageBtn"
-								parent={self}
-								isDisabled={isDisabled}
-								icon={AngleRight}
-								_icon={iconProps}
-								onPress={() => Repository.nextPage()}
-								tooltip="Next Page"
-							/>);
-				items.push(<IconButton
-								{...testProps('lastPageBtn')}
-								key="lastPageBtn"
-								reference="lastPageBtn"
-								className="Pagination-lastPageBtn"
-								parent={self}
-								isDisabled={isDisabled}
-								icon={AnglesRight}
-								_icon={iconProps}
-								onPress={() => Repository.setPage(totalPages)}
-								tooltip="Last Page"
-							/>);
-				if (!minimize) {
-					items.push(<Text
-									key="page"
-									className="Pagination-page mx-1"
-								>Page</Text>);
-					items.push(<Input
-									{...testProps('pageInput')}
-									key="pageInput"
-									reference="pageInput"
+					isDisabled = page === totalPages || totalPages <= 1;
+					items.push(<IconButton
+									{...testProps('nextPageBtn')}
+									key="nextPageBtn"
+									reference="nextPageBtn"
+									className="Pagination-nextPageBtn"
 									parent={self}
-									keyboardType="numeric"
-									value={page?.toString()}
-									onChangeValue={(value) => Repository.setPage(value)}
-									maxValue={totalPages}
-									isDisabled={totalPages === 1}
-									className={clsx(
-										'Pagination-pageInput',
-										'min-w-[40px]',
-										'w-[40px]',
-										'text-center',
-										'bg-grey-100',
-									)}
-									textAlignIsCenter={true}
-									tooltip="Set Page"
-									tooltipClassName="w-[40px]"
+									isDisabled={isDisabled}
+									icon={AngleRight}
+									_icon={iconProps}
+									onPress={() => Repository.nextPage()}
+									tooltip="Next Page"
+								/>);
+					items.push(<IconButton
+									{...testProps('lastPageBtn')}
+									key="lastPageBtn"
+									reference="lastPageBtn"
+									className="Pagination-lastPageBtn"
+									parent={self}
+									isDisabled={isDisabled}
+									icon={AnglesRight}
+									_icon={iconProps}
+									onPress={() => Repository.setPage(totalPages)}
+									tooltip="Last Page"
+								/>);
+					if (!minimize) {
+						items.push(<Text
+										key="page"
+										className="Pagination-page mx-1"
+									>Page</Text>);
+						items.push(<Input
+										{...testProps('pageInput')}
+										key="pageInput"
+										reference="pageInput"
+										parent={self}
+										keyboardType="numeric"
+										value={page?.toString()}
+										onChangeValue={(value) => Repository.setPage(value)}
+										maxValue={totalPages}
+										isDisabled={totalPages === 1}
+										className={clsx(
+											'Pagination-pageInput',
+											'min-w-[40px]',
+											'w-[40px]',
+											'text-center',
+											'bg-grey-100',
+										)}
+										textAlignIsCenter={true}
+										tooltip="Set Page"
+										tooltipClassName="w-[40px]"
+									/>);
+						items.push(<Text
+										key="totalPages"
+										className={clsx(
+											'Pagination-totalPages',
+											'whitespace-nowrap',
+											'inline-flex',
+											'mx-1',
+										)}
+									>{`of ${totalPages}`}</Text>);
+					}
+				}
+
+				if (showPagination && !minimize && !disablePageSize) {
+					items.push(<PageSizeSelect
+									{...testProps('pageSize')}
+									key="pageSize"
+									reference="pageSize"
+									parent={self}
+									pageSize={pageSize}
+									Repository={Repository}
 								/>);
+				}
+				if (showPagination && !minimize) {
+					let pageSpan = `${pageStart} – ${pageEnd}`;
+					if (pageStart === pageEnd) {
+						pageSpan = pageStart;
+					}
 					items.push(<Text
-									key="totalPages"
+									key="pageDisplay"
 									className={clsx(
-										'Pagination-totalPages',
+										'Pagination-pageDisplay',
 										'whitespace-nowrap',
 										'inline-flex',
 										'mx-1',
 									)}
-								>{`of ${totalPages}`}</Text>);
-				}
-			}
-
-			if (showPagination && !minimize && !disablePageSize) {
-				items.push(<PageSizeSelect
-								{...testProps('pageSize')}
-								key="pageSize"
-								reference="pageSize"
-								parent={self}
-								pageSize={pageSize}
-								Repository={Repository}
-							/>);
-			}
-			if (showPagination && !minimize) {
-				let pageSpan = `${pageStart} – ${pageEnd}`;
-				if (pageStart === pageEnd) {
-					pageSpan = pageStart;
+								>{`Displaying ${pageSpan} of ${total}`}</Text>);
 				}
-				items.push(<Text
-								key="pageDisplay"
-								className={clsx(
-									'Pagination-pageDisplay',
-									'whitespace-nowrap',
-									'inline-flex',
-									'mx-1',
-								)}
-							>{`Displaying ${pageSpan} of ${total}`}</Text>);
 			}
 		}
 		return <HStack

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/Tree/TreeNode.js

@@ -1,6 +1,7 @@
 import { useMemo, useEffect, } from 'react';
 import {
 	Box,
+	BoxNative,
 	HStackNative,
 	Icon,
 	Spinner,
@@ -185,7 +186,7 @@ export default function TreeNode(props) {
 								styles.TREE_NODE_EXPAND_BTN_CLASSNAME,
 							)}
 						/> :
-						<Box
+						<BoxNative
 							{...testProps('spacer')}
 							className={clsx(
 								'TreeNode-spacer',

package/src/Components/Viewer/Viewer.js

@@ -161,11 +161,8 @@ function Viewer(props) {
 				viewerTypeProps.isViewOnly = true;
 				viewerTypeProps.SourceRepository = Repository;
 			}
-			if (type?.match(/(GridEditor)$/)) {
-				viewerTypeProps.disableAdd = true;
-				viewerTypeProps.disableEdit = true;
-				viewerTypeProps.disableDelete = true;
-				viewerTypeProps.disableDuplicate = true;
+			if (type?.match(/(Grid|GridEditor)$/)) {
+				viewerTypeProps.canEditorViewOnly = true;
 			}
 			const Element = getComponentFromType(type);
 

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,