@onehat/ui 0.4.81 → 0.4.83

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

@@ -8,13 +8,14 @@ import {
 } 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,
@@ -27,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';
@@ -63,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,
@@ -101,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:
@@ -126,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);
@@ -193,7 +212,6 @@ function AsyncOperation(props) {
 								<Text>{message}</Text>;
 			}
 			showResults(results);
-
 		},
 		getProgress = (immediately = false) => {
 			if (!getProgressUpdates) {
@@ -266,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);
@@ -296,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)) {
@@ -331,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/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/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;

package/src/Components/Tree/TreeNode.js

@@ -1,6 +1,7 @@
 import { useMemo, useEffect, } from 'react';
 import {
 	Box,
+	BoxNative,
 	HStackNative,
 	Icon,
 	Spinner,
@@ -128,7 +129,7 @@ export default function TreeNode(props) {
 			'items-center',
 			'flex-1',
 			'grow-1',
-			'select-none',
+			!showNodeHandle && 'select-none',
 			'cursor-pointer',
 		);
 
@@ -169,16 +170,44 @@ export default function TreeNode(props) {
 							canDrag={nodeCanDrag}
 						/>}
 
-					{hasChildren && <IconButton
-										{...testProps('expandBtn')}
-										icon={isExpanded ? ChevronDown : ChevronRight}
-										onPress={(e) => onToggle(datum, e)}
-										className="ml-2"
-									/>}
-					
+					{hasChildren ?
+						<IconButton
+							{...testProps('expandBtn')}
+							icon={isExpanded ? ChevronDown : ChevronRight}
+							_icon={{
+								className: clsx(
+									'text-gray-400',
+								),
+							}}
+							onPress={(e) => onToggle(datum, e)}
+							className={clsx(
+								'TreeNode-expandBtn',
+								'ml-2',
+								styles.TREE_NODE_EXPAND_BTN_CLASSNAME,
+							)}
+						/> :
+						<BoxNative
+							{...testProps('spacer')}
+							className={clsx(
+								'TreeNode-spacer',
+								'ml-2',
+								styles.TREE_NODE_SPACER_CLASSNAME,
+							)}
+						/>}
+
 					{isLoading && <Spinner className="px-2" />}
 
-					{!isLoading && icon && <Icon as={icon} className="ml-2 mr-1" />}
+					{!isLoading && icon && 
+						<Icon
+							as={icon}
+							className={clsx(
+								'TreeNode-icon',
+								'ml-2',
+								'mr-1',
+								styles.TREE_NODE_ICON_CLASSNAME,
+								nodeProps?._icon?.className ?? null,
+							)}
+						/>}
 
 					{text && <TextNative
 								numberOfLines={1}
@@ -192,6 +221,7 @@ export default function TreeNode(props) {
 									'flex-1',
 									'text-ellipsis',
 									styles.TREE_NODE_CLASSNAME,
+									nodeProps?._text?.className ?? null,
 								)}
 							>{text}</TextNative>}
 

package/src/Components/Viewer/Viewer.js

@@ -159,6 +159,10 @@ function Viewer(props) {
 			}
 			if (type?.match(/(Tag|TagEditor)$/)) {
 				viewerTypeProps.isViewOnly = true;
+				viewerTypeProps.SourceRepository = Repository;
+			}
+			if (type?.match(/(Grid|GridEditor)$/)) {
+				viewerTypeProps.canEditorViewOnly = true;
 			}
 			const Element = getComponentFromType(type);
 
@@ -253,9 +257,9 @@ function Viewer(props) {
 				label = propertyDef.title;
 			}
 
-			let value = record?.properties[name]?.displayValue || null;
+			let value = record?.properties?.[name]?.displayValue || record?.[name] || null;
 			const
-				schema = record?.repository.getSchema(),
+				schema = record?.repository?.getSchema(),
 				propertyDefinition = schema?.getPropertyDefinition(name);
 			if (propertyDefinition?.isFk) {
 				// value above is the id, get the actual display value
@@ -479,6 +483,7 @@ function Viewer(props) {
 		'Viewer-VStackNative',
 		'h-full',
 		'bg-white',
+		'[transform:translateZ(0)]', // so embedded FAB will be relative to this container, not to viewport
 	);
 	if (props.className) {
 		className += ' ' + props.className;

package/src/Constants/Progress.js

@@ -2,4 +2,5 @@ export const PROGRESS__NONE_FOUND = 'NONE_FOUND';
 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__STUCK = 'STUCK';
+export const PROGRESS__UNSTUCK = 'UNSTUCK';