@onehat/ui 0.4.69 → 0.4.71

package/src/Components/Toolbar/FilterToolbar.js

@@ -1,6 +1,7 @@
 import {
 	HStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 
@@ -8,17 +9,19 @@ export default function FilterToolbar(props) {
 	const {
 			toolbarItems = [],
 		} = props;
-	return <Toolbar className={`
-				bg-grey-200
-				border-t
-				border-t-grey-400
-				w-full
-			`} >
+	return <Toolbar
+				className={clsx(
+					'bg-grey-200',
+					'border-t',
+					'border-t-grey-400',
+					'w-full',
+				)}
+			>
 				{toolbarItems.length && 
-					<HStack className={`
-						flex-1
-						border
-						border-l-grey-100
-					`}>{toolbarItems}</HStack>}
+					<HStack className={clsx(
+						'flex-1',
+						'border',
+						'border-l-grey-100',
+					)}>{toolbarItems}</HStack>}
 			</Toolbar>;
 };

package/src/Components/Toolbar/Pagination.js

@@ -4,6 +4,7 @@ import {
 	HStackNative,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import testProps from '../../Functions/testProps.js';
 import Button from '../Buttons/Button.js';
@@ -154,25 +155,25 @@ export default function Pagination(props) {
 									onChangeValue={(value) => Repository.setPage(value)}
 									maxValue={totalPages}
 									isDisabled={totalPages === 1}
-									className={`
-										Pagination-pageInput
-										min-w-[40px]
-										w-[40px]
-										text-center
-										bg-grey-100
-									`}
+									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={`
-										Pagination-totalPages
-										whitespace-nowrap
-										inline-flex
-										mx-1
-									`}
+									className={clsx(
+										'Pagination-totalPages',
+										'whitespace-nowrap',
+										'inline-flex',
+										'mx-1',
+									)}
 								>{`of ${totalPages}`}</Text>);
 				}
 			}
@@ -194,12 +195,12 @@ export default function Pagination(props) {
 				}
 				items.push(<Text
 								key="pageDisplay"
-								className={`
-									Pagination-pageDisplay
-									whitespace-nowrap
-									inline-flex
-									mx-1
-								`}
+								className={clsx(
+									'Pagination-pageDisplay',
+									'whitespace-nowrap',
+									'inline-flex',
+									'mx-1',
+								)}
 							>{`Displaying ${pageSpan} of ${total}`}</Text>);
 			}
 		}
@@ -207,12 +208,12 @@ export default function Pagination(props) {
 					style={{
 						userSelect: 'none',
 					}}
-					className={`
-						Pagination
-						items-center
-						shrink-0
-						gap-2
-					`}
+					className={clsx(
+						'Pagination',
+						'items-center',
+						'shrink-0',
+						'gap-2',
+					)}
 				>
 					{items}
 				</HStack>;

package/src/Components/Toolbar/PaginationToolbar.js

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import {
 	HStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Pagination from './Pagination.js'
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
@@ -37,22 +38,22 @@ export default function PaginationToolbar(props) {
 		};
 
 	return <Toolbar
-				className={`
-					border-t
-					border-t-grey-400
-				`}
+				className={clsx(
+					'border-t',
+					'border-t-grey-400',
+				)}
 				onLayout={(e) => onLayout(e)}
 			>
 				{toolbarItems.length ?
 					<HStack
-						className={`
-							PaginationToolbar-HStack
-							shrink-0
-							border-r
-							border-r-grey-400
-							mr-3
-							pr-3
-						`}
+						className={clsx(
+							'PaginationToolbar-HStack',
+							'shrink-0',
+							'border-r',
+							'border-r-grey-400',
+							'mr-3',
+							'pr-3',
+						)}
 					>{toolbarItems}</HStack> : null}
 				<Pagination
 					{...propsToPass}

package/src/Components/Toolbar/Toolbar.js

@@ -1,24 +1,25 @@
 import {
 	HStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Toolbar(props) {
 	
 	const styles = UiGlobals.styles;
 	
-	let className = `
-		Toolbar
-		overflow-auto
-		items-center
-		justify-start
-		gap-2
-		p-2
-		border-b
-		border-solid
-		border-b-grey-400
-		${styles.TOOLBAR_CLASSNAME}
-	`;
+	let className = clsx(
+		'Toolbar',
+		'overflow-auto',
+		'items-center',
+		'justify-start',
+		'gap-2',
+		'p-2',
+		'border-b',
+		'border-solid',
+		'border-b-grey-400',
+		styles.TOOLBAR_CLASSNAME,
+	);
 	if (props.className) {
 		className += ' ' + props.className
 	}

package/src/Components/Tooltip/Tooltip.js

@@ -3,6 +3,7 @@ import {
 	BoxNative as Box,
 	Tooltip, TooltipContent, TooltipText,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 
 const TooltipElement = forwardRef((props, ref) => {
 	const {

package/src/Components/Tree/Tree.js

@@ -6,6 +6,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
@@ -1051,11 +1052,11 @@ function TreeComponent(props) {
 								onContextMenu(item, e, selection);
 							}
 						}}
-						className={`
-							Pressable
-							Node
-							flex-row
-						`}
+						className={clsx(
+							'Pressable',
+							'Node',
+							'flex-row',
+						)}
 						style={{
 							paddingLeft: (areRootsVisible ? depth : depth -1) * DEPTH_INDENT_PX,
 						}}
@@ -1400,12 +1401,12 @@ function TreeComponent(props) {
 		}
 	}
 
-	let className = `
-		Tree-VStack
-		flex-1
-		w-full
-		min-w-[300px]
-	`;
+	let className = clsx(
+		'Tree-VStack',
+		'flex-1',
+		'w-full',
+		'min-w-[300px]',
+	);
 	if (isLoading) {
 		className += ' border-t-2 border-[#f00]';
 	} else {

package/src/Components/Tree/TreeNode.js

@@ -6,6 +6,7 @@ import {
 	Spinner,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import * as colourMixer from '@k-renwick/colour-mixer';
 import {
 	UI_MODE_WEB,
@@ -114,15 +115,15 @@ export default function TreeNode(props) {
 			bg = colourMixer.blend(bg, 0.5, mixWith);
 		}
 
-		let className = `
-			TreeNode
-			items-center
-			flex-1
-			grow-1
-			select-none
-			cursor-pointer
-		`;
-		
+		let className = clsx(
+			'TreeNode',
+			'items-center',
+			'flex-1',
+			'grow-1',
+			'select-none',
+			'cursor-pointer',
+		);
+
 		// Add drop state classes for additional styling
 		if (isOver && actualCanDrop) {
 			className += ' TreeNode--dropValid border-2 border-green-400';
@@ -172,16 +173,16 @@ export default function TreeNode(props) {
 								numberOfLines={1}
 								ellipsizeMode="head"
 								// {...propsToPass}
-								className={`
-									TreeNode-TextNative
-									self-center
-									overflow-hidden
-									flex
-									flex-1
-									text-ellipsis
-									select-none
-									${styles.TREE_NODE_CLASSNAME}
-								`}
+								className={clsx(
+									'TreeNode-TextNative',
+									'self-center',
+									'overflow-hidden',
+									'flex',
+									'flex-1',
+									'text-ellipsis',
+									'select-none',
+									styles.TREE_NODE_CLASSNAME,
+								)}
 								style={{
 									userSelect: 'none',
 								}}

package/src/Components/Tree/TreeNodeDragHandle.js

@@ -2,20 +2,21 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
 function TreeNodeDragHandle(props) {
-	let className = `
-		TreeNodeDragHandle
-		h-full
-		w-[14px]
-		px-[2px]
-		border-l-2
-		items-center
-		justify-center
-		select-none
-	`;
+	let className = clsx(
+		'TreeNodeDragHandle',
+		'h-full',
+		'w-[14px]',
+		'px-[2px]',
+		'border-l-2',
+		'items-center',
+		'justify-center',
+		'select-none',
+	);
 	if (props.className) {
 		className += ' ' + props.className;
 	}

package/src/Components/Viewer/MeterTypeText.js

@@ -1,18 +1,19 @@
 import {
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import UiGlobals from '../../UiGlobals';
 
 export default function MeterTypeText(props) {
 	const styles = UiGlobals.styles;
 
-	let className = `
-		Text
-		flex-1
-		px-3
-		py-2
-		${styles.FORM_TEXT_CLASSNAME}
-	`;
+	let className = clsx(
+		'Text',
+		'flex-1',
+		'px-3',
+		'py-2',
+		styles.FORM_TEXT_CLASSNAME,
+	);
 	if (props.className) {
 		className += ' ' + props.className;
 	}

package/src/Components/Viewer/TextWithLinks.js

@@ -6,6 +6,7 @@ import {
 	Text,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';
@@ -48,11 +49,11 @@ function TextWithLinksElement(props) {
 			});
 
 			const
-				textClassName = `
-					TextWithLinks-Text
-					text-base
-					overflow-hidden
-				`,
+				textClassName = clsx(
+					'TextWithLinks-Text',
+					'text-base',
+					'overflow-hidden',
+				),
 				textSegments = modifiedText.split(/(link_\d+)/);
 			if (textSegments.length === 1) {
 				return <Text className={textClassName}>{modifiedText}</Text>;
@@ -65,10 +66,10 @@ function TextWithLinksElement(props) {
 				if (foundLink) {
 					ret = <TextNative
 								key={foundLink.key}
-								className={`
-									text-blue-600
-									${textClassName}
-								`}
+								className={clsx(
+									'text-blue-600',
+									textClassName,
+								)}
 								onPress={() => openLink(foundLink.link)}
 							>{foundLink.link}</TextNative>;
 				}
@@ -80,12 +81,12 @@ function TextWithLinksElement(props) {
 	if (UiGlobals.mode === UI_MODE_WEB) {
 		elementProps.textOverflow = 'ellipsis';
 	}
-	let className = `
-		overflow-auto
-		min-h-[40px]
-		px-3
-		py-2
-	`;
+	let className = clsx(
+		'overflow-auto',
+		'min-h-[40px]',
+		'px-3',
+		'py-2',
+	);
 	if (props.className) {
 		className += ` ${props.className}`;
 	}

package/src/Components/Viewer/Viewer.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Animated, {
 	useSharedValue,
 	useAnimatedStyle,
@@ -264,12 +265,12 @@ function Viewer(props) {
 				}
 			}
 
-			let elementClassName = `
-				Viewer-field
-				basis-auto
-				grow
-				shrink
-			`;
+			let elementClassName = clsx(
+				'Viewer-field',
+				'basis-auto',
+				'grow',
+				'shrink',
+			);
 			const defaultsClassName = defaults.className;
 			if (defaultsClassName) {
 				elementClassName += ' ' + defaultsClassName;
@@ -474,11 +475,11 @@ function Viewer(props) {
 	if (!hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
 	}
-	let className = `
-		Viewer-VStackNative
-		h-full
-		bg-white
-	`;
+	let className = clsx(
+		'Viewer-VStackNative',
+		'h-full',
+		'bg-white',
+	);
 	if (props.className) {
 		className += ' ' + props.className;
 	}
@@ -491,11 +492,11 @@ function Viewer(props) {
 							{...testProps('deleteBtn')}
 							key="deleteBtn"
 							onPress={onDelete}
-							className={`
-								text-white
-								bg-warning-500
-								hover:bg-warning-600
-							`}
+							className={clsx(
+								'text-white',
+								'bg-warning-500',
+								'hover:bg-warning-600',
+							)}
 							text="Delete"
 						/>
 					</HStack>}
@@ -523,12 +524,12 @@ function Viewer(props) {
 						ref={scrollViewRef}
 						onScroll={onScroll}
 						scrollEventThrottle={16 /* ms */}
-						className={`
-							Viewer-ScrollView
-							w-full
-							pb-1
-							flex-1
-						`}
+						className={clsx(
+							'Viewer-ScrollView',
+							'w-full',
+							'pb-1',
+							'flex-1',
+						)}
 					>
 						{scrollToTopAnchor}
 						{canEdit && onEditMode &&

package/src/Components/Window/UploadsDownloadsWindow.js

@@ -5,6 +5,7 @@
  * "LICENSE.txt" file, which is part of this source code package.
  */
 import { useState, } from 'react';
+import clsx from 'clsx';
 import Excel from '../Icons/Excel';
 import Panel from '../Panel/Panel.js';
 import Form from '../Form/Form.js';
@@ -187,11 +188,11 @@ function UploadsDownloadsWindow(props) {
 				reference="UploadsDownloadsWindow"
 				isCollapsible={false}
 				title="Uploads & Downloads"
-				className={`
-					flex-none
-					bg-white
-					shadow-lg
-				`}
+				className={clsx(
+					'flex-none',
+					'bg-white',
+					'shadow-lg',
+				)}
 				style={{
 					height,
 					width,

package/src/Components/index.js

@@ -2,6 +2,7 @@ import {
 	HStackNative,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import AddressBook from './Icons/AddressBook.js';
 import Alt from './Icons/Alt.js';
 import AngleLeft from './Icons/AngleLeft.js';

package/src/Hooks/useAsyncRenderers.js

@@ -0,0 +1,53 @@
+import { useState, useEffect, } from 'react';
+
+export default function useAsyncRenderers(columnsConfig, item) {
+	const
+		[results, setResults] = useState(new Map()),
+		[loading, setLoading] = useState(new Set());
+
+	useEffect(() => {
+		const asyncConfigs = columnsConfig.filter(config => 
+			config.renderer && typeof config.renderer === 'function'
+		);
+
+		if (asyncConfigs.length === 0) {
+			setResults(new Map());
+			setLoading(new Set());
+			return;
+		}
+
+		const newLoading = new Set();
+		asyncConfigs.forEach((config, index) => {
+			newLoading.add(index);
+		});
+		setLoading(newLoading);
+
+		const promises = asyncConfigs.map(async (config, configIndex) => {
+			try {
+				const result = await config.renderer(item);
+				return { configIndex, result, error: null };
+			} catch (error) {
+				return { configIndex, result: null, error };
+			}
+		});
+
+		Promise.allSettled(promises).then(settled => {
+			const
+				newResults = new Map(),
+				newLoading = new Set();
+
+			settled.forEach((outcome, index) => {
+				if (outcome.status === 'fulfilled') {
+					const { configIndex, result, error } = outcome.value;
+					newResults.set(configIndex, { result, error });
+				}
+			});
+
+			setResults(newResults);
+			setLoading(newLoading);
+		});
+
+	}, [columnsConfig, item]);
+
+	return { results, loading };
+}