@onehat/ui 0.4.40 → 0.4.42

package/src/Components/Toolbar/Pagination.js

@@ -70,14 +70,23 @@ export default function Pagination(props) {
 			}
 			if (!Repository.isLocal) {
 				items.push(<ReloadButton
-					key="reloadPageBtn"
-					className="Pagination-reloadPageBtn"
-					_icon={iconProps}
-					Repository={Repository}
-					self={self}
-				/>);
+								key="reloadPageBtn"
+								className="Pagination-reloadPageBtn"
+								_icon={iconProps}
+								Repository={Repository}
+								self={self}
+							/>);
 			}
 		} else {
+			if (!Repository.isLocal) {
+				items.push(<ReloadButton
+								key="reloadPageBtn"
+								className="Pagination-reloadPageBtn"
+								_icon={iconProps}
+								Repository={Repository}
+								self={self}
+							/>);
+			}
 			isDisabled = page === 1;
 			if (showPagination) {
 				items.push(<IconButton
@@ -104,41 +113,6 @@ export default function Pagination(props) {
 								onPress={() => Repository.prevPage()}
 								tooltip="Previous 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={`
-							Pagination-pageInput
-							min-w-[40px]
-							w-[40px]
-							text-center
-							bg-grey-100
-						`}
-						textAlignIsCenter={true}
-						tooltip="Set Page"
-					/>);
-					items.push(<Text
-						key="totalPages"
-						className={`
-							Pagination-totalPages
-							whitespace-nowrap
-							inline-flex
-							mx-1
-						`}
-					>{`of ${totalPages}`}</Text>);
-				}
 
 				isDisabled = page === totalPages || totalPages <= 1;
 				items.push(<IconButton
@@ -165,17 +139,44 @@ export default function Pagination(props) {
 								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={`
+										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={`
+										Pagination-totalPages
+										whitespace-nowrap
+										inline-flex
+										mx-1
+									`}
+								>{`of ${totalPages}`}</Text>);
+				}
 			}
 
-			if (!Repository.isLocal) {
-				items.push(<ReloadButton
-					key="reloadPageBtn"
-					className="Pagination-reloadPageBtn"
-					_icon={iconProps}
-					Repository={Repository}
-					self={self}
-				/>);
-			}
 			if (showPagination && !minimize && !disablePageSize) {
 				items.push(<PageSizeSelect
 								{...testProps('pageSize')}
@@ -203,15 +204,14 @@ export default function Pagination(props) {
 			}
 		}
 		return <HStack
-					style={{ userSelect: 'none', }}
+					style={{
+						userSelect: 'none',
+					}}
 					className={`
 						Pagination
-						flex-none
-						gap-1
-						justify-start
 						items-center
-						px-2
-						mr-3
+						shrink-0
+						gap-2
 					`}
 				>
 					{items}

package/src/Components/Toolbar/PaginationToolbar.js

@@ -10,11 +10,15 @@ export default function PaginationToolbar(props) {
 	const {
 			toolbarItems = [],
 			disablePageSize = false,
+			minimize,
 		} = props,
-		[minimize, setMinimize] = useState(false),
+		[minimizeLocal, setMinimizeLocal] = useState(minimize),
 		propsToPass = _.omit(props, 'toolbarItems'),
 		showPagination = true,//props.Repository?.totalPages > 1,
 		onLayout = (e) => {
+			if (minimize) {
+				return; // skip if already minimized
+			}
 			// Note to future self: this is using hard-coded values.
 			// Eventually might want to make it responsive to actual sizes
 
@@ -28,7 +32,7 @@ export default function PaginationToolbar(props) {
 				shouldMinimize = width < threshold;
 
 			if (shouldMinimize !== minimize) {
-				setMinimize(shouldMinimize);
+				setMinimizeLocal(shouldMinimize);
 			}
 		};
 
@@ -36,27 +40,26 @@ export default function PaginationToolbar(props) {
 				className={`
 					border-t
 					border-t-grey-400
-					w-full
 				`}
 				onLayout={(e) => onLayout(e)}
 			>
+				{toolbarItems.length ?
+					<HStack
+						className={`
+							PaginationToolbar-HStack
+							shrink-0
+							border-r
+							border-r-grey-400
+							mr-3
+							pr-3
+						`}
+					>{toolbarItems}</HStack> : null}
 				<Pagination
 					{...propsToPass}
 					showPagination={showPagination}
 					w={toolbarItems.length ? null : '100%'}
-					minimize={minimize}
+					minimize={minimizeLocal}
 					disablePageSize={disablePageSize}
 				/>
-				{toolbarItems.length ?
-					<HStack className={`
-						PaginationToolbar-HStack
-						flex-1
-						space-x-1
-						border-l
-						border-l-grey-400
-						ml-3
-						pl-3
-					`}
-					>{toolbarItems}</HStack> : null}
 			</Toolbar>;
 };

package/src/Components/Toolbar/Toolbar.js

@@ -9,14 +9,11 @@ export default function Toolbar(props) {
 	
 	let className = `
 		Toolbar
-		flex
-		w-full
-		justify-start
-		items-center
 		overflow-auto
-		space-x-2
-		px-2
-		py-2
+		items-center
+		justify-start
+		gap-2
+		p-2
 		border-b
 		border-solid
 		border-b-grey-400

package/src/Components/Tooltip/Tooltip.js

@@ -1,5 +1,8 @@
-import { forwardRef, cloneElement } from 'react';
-import { Tooltip, TooltipContent, TooltipText } from '@project-components/Gluestack';
+import { forwardRef } from 'react';
+import {
+	BoxNative as Box,
+	Tooltip, TooltipContent, TooltipText,
+} from '@project-components/Gluestack';
 
 const TooltipElement = forwardRef((props, ref) => {
 	const {
@@ -12,18 +15,18 @@ const TooltipElement = forwardRef((props, ref) => {
 	if (props.className) {
 		className += ' ' + props.className;
 	}
+
+	let triggerClassName = 'Tooltip-trigger';
+	if (props.className) {
+		triggerClassName += ' ' + props.className;
+	}
 	
 	return <Tooltip
 				placement={placement}
 				trigger={(triggerProps) => {
-					const propsToPass = {
-						...triggerProps,
-						...children.props,
-					};
-					if (ref) {
-						propsToPass.ref = ref;
-					}
-					return cloneElement(children, propsToPass);
+					return <Box className={triggerClassName} {...triggerProps}>
+								{children}
+							</Box>;
 				}}
 			>
 				<TooltipContent className={className}>

package/src/Components/Tree/Tree.js

@@ -534,10 +534,12 @@ function TreeComponent(props) {
 		buildAndSetTreeNodeData = async () => {
 			let nodes = [];
 			if (Repository) {
-				if (!Repository.areRootNodesLoaded) {
-					nodes = await Repository.loadRootNodes(1);
-				} else {
-					nodes = Repository.getRootNodes();
+				if (!Repository.isDestroyed) {
+					if (!Repository.areRootNodesLoaded) {
+						nodes = await Repository.loadRootNodes(1);
+					} else {
+						nodes = Repository.getRootNodes();
+					}
 				}
 			} else {
 				nodes = assembleDataTreeNodes();
@@ -611,7 +613,9 @@ function TreeComponent(props) {
 		},
 		getTreeNodeByNodeId = (node_id) => {
 			if (Repository) {
-				return Repository.getById(node_id);
+				if (!Repository.isDestroyed) {
+					return Repository.getById(node_id);
+				}
 			}
 			return data[node_id]; // TODO: This is probably not right!
 		},
@@ -1217,11 +1221,11 @@ function TreeComponent(props) {
 				dropRowRecord = dropRowDatum.item;
 
 			if (Repository) {
-				
-				const commonAncestorId = await Repository.moveTreeNode(dragRowRecord, dropRowRecord.id);
-				const commonAncestorDatum = getDatumById(commonAncestorId);
-				reloadNode(commonAncestorDatum.item);
-
+				if (!Repository.isDestroyed) {
+					const commonAncestorId = await Repository.moveTreeNode(dragRowRecord, dropRowRecord.id);
+					const commonAncestorDatum = getDatumById(commonAncestorId);
+					reloadNode(commonAncestorDatum.item);
+				}
 			} else {
 
 				throw Error('Not yet implemented');

package/src/Components/Viewer/MeterTypeText.js

@@ -1,5 +1,5 @@
 import {
-	Text,
+	TextNative,
 } from '@project-components/Gluestack';
 import UiGlobals from '../../UiGlobals';
 
@@ -16,8 +16,8 @@ export default function MeterTypeText(props) {
 	if (props.className) {
 		className += ' ' + props.className;
 	}
-	return <Text
+	return <TextNative
 				{...props}
 				className={className}
-			>{props.value ? 'Time (hrs)' : 'Distance (mi/km)'}</Text>;
+			>{props.value ? 'Time (hrs)' : 'Distance (mi/km)'}</TextNative>;
 };

package/src/Constants/Styles.js

@@ -78,6 +78,8 @@ const defaults = {
 	GRID_ROW_BG_HOVER: '#ccc', // must be hex
 	GRID_ROW_SELECTED_BG: '#ff0', // must be hex
 	GRID_ROW_SELECTED_BG_HOVER: '#cc0', // must be hex
+	GRID_ROW_MAX_HEIGHT_NORMAL: 'max-h-[40px]',
+	GRID_ROW_MAX_HEIGHT_EXTRA: 'max-h-[80px]',
 	GRID_REORDER_BORDER_COLOR: 'border-[#23d9ea]',
 	GRID_REORDER_BORDER_WIDTH: 'border-4',
 	GRID_REORDER_BORDER_STYLE: 'border-dashed',