@onehat/ui 0.4.80 → 0.4.82

package/src/Components/Grid/GridHeaderRow.js

@@ -105,12 +105,19 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 				columnHeaders = _.filter(columnHeader.parentElement.children, (childNode) => {
 					return childNode.getBoundingClientRect().width !== 0; // Skip zero-width children
 				}),
-				currentX = proxyRect.left; // left position of pointer
+				currentX = proxyRect.left, // left position of pointer
+				rowHandleOffset = showRowHandle ? 1 : 0; // Account for RowHandleSpacer
 		
 			// Figure out which index the user wants
 			let newIx = 0;
 			_.each(columnHeaders, (child, ix, all) => {
+				// Skip the row handle spacer if present
+				if (showRowHandle && ix === 0) {
+					return true; // continue to next iteration
+				}
+				
 				const
+					adjustedIx = ix - rowHandleOffset, // Adjust index for row handle offset
 					rect = child.getBoundingClientRect(), // rect of the columnHeader of this iteration
 					{
 						left,
@@ -119,8 +126,8 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 					} = rect,
 					halfWidth = width /2;
 
-				if (ix === 0) {
-					// first column
+				if (adjustedIx === 0) {
+					// first actual data column
 					if (currentX < left + halfWidth) {
 						newIx = 0;
 						return false;
@@ -128,22 +135,22 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 						newIx = 1;
 						return false;
 					}
-				} else if (ix === all.length -1) {
-					// last column
+				} else if (adjustedIx === all.length - 1 - rowHandleOffset) {
+					// last actual data column (account for nav column and row handle)
 					if (currentX < left + halfWidth) {
-						newIx = ix;
+						newIx = adjustedIx;
 						return false;
 					}
-					newIx = ix +1;
+					newIx = adjustedIx + 1;
 					return false;
 				}
 				
 				// all other columns
 				if (left <= currentX && currentX < left + halfWidth) {
-					newIx = ix;
+					newIx = adjustedIx;
 					return false;
 				} else if (currentX < right) {
-					newIx = ix +1;
+					newIx = adjustedIx + 1;
 					return false;
 				}
 			});
@@ -155,7 +162,8 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 
 			// Render marker showing destination location (can't use regular render cycle because this div is absolutely positioned on page)
 			const
-				columnHeaderRect = columnHeaders[newIx].getBoundingClientRect(),
+				targetColumnIndex = newIx + rowHandleOffset, // Add back offset for visual positioning
+				columnHeaderRect = columnHeaders[targetColumnIndex].getBoundingClientRect(),
 				left = columnHeaderRect.left,
 				gridRowsContainer = gridRef.current._listRef._scrollRef.childNodes[0],
 				gridRowsContainerRect = gridRowsContainer.getBoundingClientRect(),
@@ -180,12 +188,19 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 				columnHeaders = _.filter(columnHeader.parentElement.children, (childNode) => {
 					return childNode.getBoundingClientRect().width !== 0; // Skip zero-width children
 				}),
-				currentX = proxyRect.left; // left position of pointer
+				currentX = proxyRect.left, // left position of pointer
+				rowHandleOffset = showRowHandle ? 1 : 0; // Account for RowHandleSpacer
 		
 			// Figure out which index the user wants
 			let newIx = 0;
 			_.each(columnHeaders, (child, ix, all) => {
+				// Skip the row handle spacer if present
+				if (showRowHandle && ix === 0) {
+					return true; // continue to next iteration
+				}
+				
 				const
+					adjustedIx = ix - rowHandleOffset, // Adjust index for row handle offset
 					rect = child.getBoundingClientRect(), // rect of the columnHeader of this iteration
 					{
 						left,
@@ -194,8 +209,8 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 					} = rect,
 					halfWidth = width /2;
 
-				if (ix === 0) {
-					// first column
+				if (adjustedIx === 0) {
+					// first actual data column
 					if (currentX < left + halfWidth) {
 						newIx = 0;
 						return false;
@@ -203,22 +218,22 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 						newIx = 1;
 						return false;
 					}
-				} else if (ix === all.length -1) {
-					// last column
+				} else if (adjustedIx === all.length - 1 - rowHandleOffset) {
+					// last actual data column (account for nav column and row handle)
 					if (currentX < left + halfWidth) {
-						newIx = ix;
+						newIx = adjustedIx;
 						return false;
 					}
-					newIx = ix +1;
+					newIx = adjustedIx + 1;
 					return false;
 				}
 				
 				// all other columns
 				if (left <= currentX && currentX < left + halfWidth) {
-					newIx = ix;
+					newIx = adjustedIx;
 					return false;
 				} else if (currentX < right) {
-					newIx = ix +1;
+					newIx = adjustedIx + 1;
 					return false;
 				}
 			});
@@ -230,7 +245,8 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 
 			// Render marker showing destination location (can't use regular render cycle because this div is absolutely positioned on page)
 			const
-				columnHeaderRect = columnHeaders[newIx].getBoundingClientRect(),
+				targetColumnIndex = newIx + rowHandleOffset, // Add back offset for visual positioning
+				columnHeaderRect = columnHeaders[targetColumnIndex].getBoundingClientRect(),
 				left = columnHeaderRect.left;
 			let marker = dragColumnSlot && dragColumnSlot.marker;
 			if (marker) {
@@ -468,7 +484,12 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 				if (showRowHandle) {
 					headerColumns.unshift(<Box
 						key="RowHandleSpacer"
-						className="Spacer-RowHandle w-[40px] flex-none"
+						className={clsx(
+							'Spacer-RowHandle',
+							'w-[40px]',
+							'flex-none',
+							styles.ROW_HANDLE_CLASSNAME,
+						)}
 					/>);
 				}
 				if (!hideNavColumn) {
@@ -510,4 +531,3 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 		showRowHandle,
 	]);
 });
-

package/src/Components/Grid/GridRow.js

@@ -29,7 +29,7 @@ let getEmptyImage = null;
 
 // This was broken out from Grid simply so we can memoize it
 
-const GridRow = forwardRef(function GridRow(props, ref) {
+const GridRow = forwardRef((props, ref) => {
 	const {
 			columnsConfig,
 			columnProps,
@@ -37,6 +37,7 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 			rowProps,
 			hideNavColumn,
 			showRowHandle,
+			areCellsScrollable,
 			rowCanSelect,
 			rowCanDrag,
 			isRowHoverable,
@@ -141,7 +142,7 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 						'justify-center',
 						'border-r-black-100',
 						'block',
-						'overflow-auto',
+						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 						whichCursor,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
@@ -207,7 +208,7 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 							let textClassName = clsx(
 								'GridRow-TextNative',
 								'self-center',
-								'overflow-hidden',
+								areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 								colClassName,
 								styles.GRID_CELL_CLASSNAME,
 								styles.GRID_ROW_MAX_HEIGHT_EXTRA,
@@ -216,7 +217,7 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 								textClassName += ' ' + config.className;
 							}
 							const rendererProps = {
-								...testProps('rendererCol-' + config.fieldName),
+								...testProps('rendererCol-' + (config.fieldName || config.id || key)),
 								className: textClassName,
 								...propsToPass,
 								...extraProps,
@@ -283,7 +284,7 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 										'px-2',
 										'py-3',
 										'block',
-										'overflow-scroll',
+										areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 										colClassName,
 										styles.GRID_CELL_CLASSNAME,
 										styles.GRID_ROW_MAX_HEIGHT_NORMAL,
@@ -291,6 +292,9 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 									if (config.className) {
 										elementClassName += ' ' + config.className;
 									}
+									if (rowProps?._cell?.className) {
+										elementClassName += ' ' + rowProps._cell.className;
+									}
 									if (cellProps.className) {
 										elementClassName += ' ' + cellProps.className;
 									}
@@ -346,11 +350,14 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 					let textClassName = clsx(
 						'GridRow-TextNative',
 						'self-center',
-						'overflow-hidden',
+						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 						colClassName,
 						styles.GRID_CELL_CLASSNAME,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
+					if (rowProps?._cell?.className) {
+						textClassName += ' ' + rowProps._cell.className;
+					}
 					if (config.className) {
 						textClassName += ' ' + config.className;
 					}

package/src/Components/Grid/RowHandle.js

@@ -3,15 +3,17 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
-import withTooltip from '@onehat/ui/src/Components/Hoc/withTooltip';
+import withTooltip from '../Hoc/withTooltip';
 import clsx from 'clsx';
+import UiGlobals from '../../UiGlobals.js';
 import Arcs from '../Icons/Arcs.js';
 
 const RowHandle = forwardRef((props, ref) => {
 	const {
 			isDragSource,
 			isDraggable
-		} = props;
+		} = props,
+		styles = UiGlobals.styles;
 	let className = clsx(
 		'RowHandle',
 		'h-full',
@@ -20,13 +22,23 @@ const RowHandle = forwardRef((props, ref) => {
 		'items-center',
 		'justify-center',
 		'select-none',
-		'cursor-pointer'
+		'cursor-pointer',
+		styles.ROW_HANDLE_CLASSNAME,
 	);
 	return <VStack
 				ref={isDragSource || isDraggable ? ref : undefined}
 				className={className}
 			>
-				<Icon as={Arcs} size="xs" className="w-full h-full text-[#ddd]" />
+				<Icon
+					as={Arcs}
+					size="xs"
+					className={clsx(
+						'w-full',
+						'h-full',
+						'text-[#ddd]',
+						styles.ROW_HANDLE_ICON_CLASSNAME,
+					)}
+				/>
 			</VStack>;
 });
 

package/src/Components/Hoc/withData.js

@@ -130,6 +130,13 @@ export default function withData(WrappedComponent) {
 					displayField={displayField}
 					idIx={localIdIx}
 					displayIx={localDisplayIx}
+					setBaseParams={(baseParams) => {
+						// This allows components down the hierarchy to dynamically set the baseParams
+						LocalRepository.setBaseParams(baseParams);
+						if (LocalRepository.isRemote) {
+							LocalRepository.load();
+						}
+					}}
 				/>;
 	});
 }

package/src/Components/Hoc/withEditor.js

@@ -86,10 +86,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			newEntityDisplayValueRef = useRef(),
 			editorModeRef = useRef(initialEditorMode),
 			isIgnoreNextSelectionChangeRef = useRef(false),
+			isEditorShownRef = useRef(false),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isAdding, setIsAdding] = useState(false),
 			[isSaving, setIsSaving] = useState(false),
-			[isEditorShown, setIsEditorShownRaw] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(canEditorViewOnly), // current state of whether editor is in view-only mode
 			[lastSelection, setLastSelection] = useState(),
 			setIsIgnoreNextSelectionChange = (bool) => {
@@ -99,11 +99,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				return isIgnoreNextSelectionChangeRef.current;
 			},
 			setIsEditorShown = (bool) => {
-				setIsEditorShownRaw(bool);
+				isEditorShownRef.current = bool;
+				forceUpdate();
 				if (!bool && onEditorClose) {
 					onEditorClose();
 				}
 			},
+			getIsEditorShown = () => {
+				return isEditorShownRef.current;
+			},
 			setIsWaitModalShown = (bool) => {
 				const
 					dispatch = UiGlobals.redux?.dispatch,
@@ -685,8 +689,18 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			};
 
 		useEffect(() => {
-			setEditorMode(calculateEditorMode());
 
+			if (editorType === EDITOR_TYPE__SIDE) {
+				if (selection?.length) { //  || isAdding
+					// there is a selection, so show the editor
+					setIsEditorShown(true);
+				} else {
+					// no selection, so close the editor
+					setIsEditorShown(false);
+				}
+			}
+
+			setEditorMode(calculateEditorMode());
 			setLastSelection(selection);
 			
 			// Push isIgnoreNextSelectionChange until after a microtask to ensure all
@@ -722,7 +736,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					alreadyHasWithEditor={true}
 					currentRecord={currentRecord}
 					setCurrentRecord={setCurrentRecord}
-					isEditorShown={isEditorShown}
+					isEditorShown={getIsEditorShown()}
+					getIsEditorShown={getIsEditorShown}
 					isEditorViewOnly={isEditorViewOnly}
 					isAdding={isAdding}
 					isSaving={isSaving}

package/src/Components/Hoc/withPresetButtons.js

@@ -300,7 +300,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							isEmptySelection() ||
 							isMultiSelection() ||
 							isProtectedValue() ||
-							(canRecordBeEdited && !canRecordBeEdited(selection))
+							(canRecordBeDeleted && !canRecordBeDeleted(selection))
 						) {
 							isDisabled = true;
 						}

package/src/Components/Hoc/withSideEditor.js

@@ -66,7 +66,7 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 								isSideEditor={true}
 								{...props}
 							/>}
-					east={<Editor
+					east={props.isEditorShown && <Editor
 								{...propsToPass}
 								editorType={EDITOR_TYPE__SIDE}
 								{..._editor}

package/src/Components/Icons/Join.js

@@ -0,0 +1,10 @@
+import { createIcon } from "../Gluestack/icon";
+import { Path, Svg } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 77.88 66.87',
+	path: <Path d="M65.2 0c-7 0-12.68 5.68-12.68 12.68 0 2.66.82 5.13 2.23 7.17L40.94 41.67c-.65-.1-1.32-.17-2-.17s-1.35.07-2 .17L23.13 19.85c1.4-2.04 2.23-4.51 2.23-7.17C25.37 5.68 19.69 0 12.68 0S0 5.68 0 12.68s5.68 12.68 12.68 12.68c.68 0 1.35-.07 2-.17l13.81 21.82c-1.4 2.04-2.23 4.51-2.23 7.17 0 7 5.68 12.68 12.68 12.68s12.68-5.68 12.68-12.68c0-2.66-.82-5.13-2.23-7.17L63.2 25.19c.65.1 1.32.17 2 .17 7 0 12.68-5.68 12.68-12.68S72.21 0 65.2 0z"/>,
+});
+
+export default SvgComponent

package/src/Components/Layout/AsyncOperation.js

@@ -1,19 +1,21 @@
 import { useState, useRef, useEffect, } from 'react';
 import {
 	Box,
+	HStack,
 	ScrollView,
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
 import * as Progress from 'react-native-progress';
-import useForceUpdate from '@onehat/ui/src/Hooks/useForceUpdate';
+import useForceUpdate from '../../Hooks/useForceUpdate';
 import {
 	PROGRESS__NONE_FOUND,
 	PROGRESS__IN_PROCESS,
 	PROGRESS__COMPLETED,
 	PROGRESS__FAILED,
 	PROGRESS__STUCK,
+	PROGRESS__UNSTUCK,
 } from '../../Constants/Progress.js';
 import {
 	MOMENT_DATE_FORMAT_2,
@@ -26,6 +28,7 @@ import withAlert from '../Hoc/withAlert.js';
 import Loading from '../Messages/Loading.js';
 import ChevronLeft from '../Icons/ChevronLeft.js';
 import ChevronRight from '../Icons/ChevronRight.js';
+import RotateLeft from '../Icons/RotateLeft.js';
 import Play from '../Icons/Play.js';
 import EllipsisHorizontal from '../Icons/EllipsisHorizontal.js';
 import Stop from '../Icons/Stop.js';
@@ -62,6 +65,7 @@ function AsyncOperation(props) {
 			getProgressUpdates = false,
 			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',
 
 			// withComponent
 			self,
@@ -100,6 +104,13 @@ function AsyncOperation(props) {
 		setFormValues = (values) => {
 			formValuesRef.current = values;
 		},
+		isStuckRef = useRef(false),
+		getIsStuck = () => {
+			return isStuckRef.current;
+		},
+		setIsStuck = (bool) => {
+			isStuckRef.current = bool;
+		},
 		getFooter = () => {
 			switch(getMode()) {
 				case INIT:
@@ -125,19 +136,28 @@ function AsyncOperation(props) {
 					// 			/>
 					// 		</Toolbar>;
 				case RESULTS:
-					return <Toolbar>
-								<Button
+					let button;
+					if (getIsStuck()) {
+						button = <Button
+									text="Unstick"
+									icon={RotateLeft}
+									onPress={() => unstick()}
+								/>;
+					} else {
+						button = <Button
 									text="Reset"
 									icon={ChevronLeft}
 									onPress={() => resetToInitialState()}
-								/>
+								/>;
+					}
+					return <Toolbar>
+								{button}
 							</Toolbar>;
 			}
 		},
 		[footer, setFooter] = useState(getFooter()),
 		[results, setResults] = useState(null),
 		[progress, setProgress] = useState(null),
-		[isStuck, setIsStuck] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		showResults = (results) => {
 			setMode(RESULTS);
@@ -192,7 +212,6 @@ function AsyncOperation(props) {
 								<Text>{message}</Text>;
 			}
 			showResults(results);
-
 		},
 		getProgress = (immediately = false) => {
 			if (!getProgressUpdates) {
@@ -265,17 +284,17 @@ function AsyncOperation(props) {
 
 				const className = 'text-lg';
 				renderItems.push(<Text className={className + ' ' + color} key="status">Status: {statusMessage}</Text>);
-				if (!_.isNil(percentage)) {
-					renderItems.push(<HStack className="mb-2" key="progress">
+				if (!_.isNil(percentage) && status !== PROGRESS__COMPLETED) {
+					renderItems.push(<VStack key="progress">
 											<Progress.Bar
 												animated={true}
 												progress={percentage / 100}
 												width={175}
-												height={20}
-												color="#666"
+												height={15}
+												color={progressColor}
 											/>
-											<Text className={className + ' pl-1'}>{percentage}%</Text>
-										</HStack>);
+											<Text className={className}>{percentage}%</Text>
+										</VStack>);
 				}
 				if (started) {
 					const startedMoment = moment(started);
@@ -295,10 +314,10 @@ function AsyncOperation(props) {
 				if (!_.isNil(count) && count !== 0) {
 					renderItems.push(<Text className={className} key="count">Count: {count}</Text>);
 				}
-				if (!_.isNil(current) && !_.isNil(total) && current !== 0 && total !== 0) {
+				if (!_.isNil(current) && !_.isNil(total)) {
 					renderItems.push(<Text className={className} key="currentTotal">Current/Total: {current} / {total}</Text>);
 				}
-				if (!_.isNil(message)) {
+				if (!_.isNil(message) && !_.isEmpty(message)) {
 					renderItems.push(<Text className={className} key="message">{message}</Text>);
 				}
 				if (!_.isNil(errors)) {
@@ -330,6 +349,35 @@ function AsyncOperation(props) {
 				fetchProgress(true); // isInitial
 			}
 		},
+		unstick = async () => {
+			stopGettingProgress();
+			setMode(PROCESSING);
+			setFooter(getFooter());
+			
+			const
+				method = Repository.methods.edit,
+				uri = Repository.getModel() + '/unstickProcess',
+				data = {
+					process
+				};
+			const
+				result = await Repository._send(method, uri, data);
+			
+			const response = Repository._processServerResponse(result);
+			if (!response?.success) {
+				alert(response.message || 'Error unsticking process on server.');
+				resetToInitialState();
+				return;
+			}
+
+			if (response.root?.status !== PROGRESS__UNSTUCK) {
+				alert('Process could not be unstuck.');
+				return;
+			}
+
+			alert('Process unstuck.');
+			resetToInitialState();
+		},
 		resetToInitialState = () => {
 			setMode(START);
 			setFooter(getFooter());

package/src/Components/Layout/CenterBox.js

@@ -13,7 +13,7 @@ export default function CenterBox(props) {
 		'p-2',
 	);
 	if (props.className) {
-		className += props.className;
+		className += ' ' + props.className;
 	}
 	return <Box
 				{...props}

package/src/Components/Screens/Manager.js

@@ -29,7 +29,7 @@ function ManagerScreen(props) {
 		[isRendered, setIsRendered] = useState(false),
 		[isModeSet, setIsModeSet] = useState(false),
 		[allowSideBySide, setAllowSideBySide] = useState(false),
-		[mode, setModeRaw] = useState(SCREEN_MODES__FULL),
+		[mode, setModeRaw] = useState(SCREEN_MODES__SIDE),
 		actualMode = (!allowSideBySide || mode === SCREEN_MODES__FULL) ? SCREEN_MODES__FULL : SCREEN_MODES__SIDE,
 		setMode = (newMode) => {
 			if (!allowSideBySide && newMode === SCREEN_MODES__SIDE) {

package/src/Components/Toolbar/PaginationToolbar.js

@@ -7,7 +7,7 @@ import Pagination from './Pagination.js'
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 
-export default forwardRef(function PaginationToolbar(props, ref) {
+const PaginationToolbar = forwardRef((props, ref) => {
 	const {
 			toolbarItems = [],
 			disablePageSize = false,
@@ -65,3 +65,5 @@ export default forwardRef(function PaginationToolbar(props, ref) {
 				/>
 			</Toolbar>;
 });
+
+export default PaginationToolbar;

package/src/Components/Toolbar/Toolbar.js

@@ -10,9 +10,12 @@ import {
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
 
-export default forwardRef(function Toolbar(props, ref) {
-	
-	const styles = UiGlobals.styles;
+const Toolbar = forwardRef((props, ref) => {
+	const {
+			children,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles;
 	
 	let className = clsx(
 		'Toolbar',
@@ -34,11 +37,10 @@ export default forwardRef(function Toolbar(props, ref) {
 	}
 	let toolbar = <HStackNative
 						ref={ref}
+						{...propsToPass}
 						className={className}
-						style={props.style || {}}
-						onLayout={props.onLayout}
 					>
-						{props.children}
+						{children}
 					</HStackNative>;	
 
 	if (CURRENT_MODE === UI_MODE_NATIVE) {
@@ -53,3 +55,5 @@ export default forwardRef(function Toolbar(props, ref) {
 
 	return toolbar;
 });
+
+export default Toolbar;