@onehat/ui 0.4.69 → 0.4.71

package/src/Components/Form/Label.js

@@ -2,26 +2,27 @@ import {
 	HStack,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Constants/Styles.js';
 
 export default function Label(props) {
-	let className = `
-		Label
-		items-center
-		min-w-[120px]
-		pl-2
-	`;
+	let className = clsx(
+		'Label',
+		'items-center',
+		'min-w-[120px]',
+		'pl-2',
+	);
 	if (props.className) {
 		className += ' ' + props.className;
 	}
-	let textClassName = `
-		Label-TextNative
-		inline-block
-		text-ellipsis
-		text-base
-		w-full
-		${styles.FORM_LABEL_CLASSNAME}
-	`;
+	let textClassName = clsx(
+		'Label-TextNative',
+		'inline-block',
+		'text-ellipsis',
+		'text-base',
+		'w-full',
+		styles.FORM_LABEL_CLASSNAME,
+	);
 	if (props._text?.className) {
 		textClassName += ' ' + props._text.className;
 	}

package/src/Components/Grid/Grid.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	ScrollView,
 } from 'react-native';
@@ -113,10 +114,10 @@ function GridComponent(props) {
 			defaultHiddenColumns = [],
 			getRowProps = (item) => {
 				return {
-					className: `
-						border-bottom-1
-						border-bottom-grey-500
-					`,
+					className: clsx(
+						'border-bottom-1',
+						'border-bottom-grey-500',
+					),
 				};
 			},
 			flatListProps = {},
@@ -194,6 +195,7 @@ function GridComponent(props) {
 			onView,
 			onContextMenu,
 			isAdding,
+			isEditorViewOnly,
 
 			// withData
 			Repository,
@@ -432,7 +434,7 @@ function GridComponent(props) {
 									} else {
 										let canDoEdit = false,
 											canDoView = false;
-										if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit) {
+										if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit && !isEditorViewOnly) {
 											canDoEdit = true;
 										} else
 										if (onView && canUser && canUser(VIEW) && !props.disableView) {
@@ -480,12 +482,12 @@ function GridComponent(props) {
 							onContextMenu(item, e, newSelection);
 						}
 					}}
-					className={`
-						Pressable
-						Row
-						flex-row
-						grow
-					`}
+					className={clsx(
+						'Pressable',
+						'Row',
+						'flex-row',
+						'grow',
+					)}
 				>
 					{({
 						hovered,
@@ -622,21 +624,21 @@ function GridComponent(props) {
 
 			if (showRowExpander && !isHeaderRow) {
 				const isExpanded = getIsExpanded(index);
-				let className = `
-					Grid-rowExpander
-					w-full
-					flex-none
-				`;
+				let className = clsx(
+					'Grid-rowExpander',
+					'w-full',
+					'flex-none',
+				);
 				if (rowProps?.className) {
 					className += ' ' + rowProps.className;
 				}
 				rowComponent = <VStack className={className}>
 									<HStack
-										className={`
-											Grid-rowExpander-HStack
-											w-full
-											grow
-										`}
+										className={clsx(
+											'Grid-rowExpander-HStack',
+											'w-full',
+											'grow',
+										)}
 									>
 										<ExpandButton
 											{...testProps((Repository ? Repository.schema.name : 'GridRow') + '-expandBtn-' + item?.id)}
@@ -645,10 +647,10 @@ function GridComponent(props) {
 											_icon={{
 												size: 'sm',
 											}}
-											className={`
-												Grid-rowExpander-expandBtn
-												${styles.GRID_EXPAND_BTN_CLASSNAME}
-											`}
+											className={clsx(
+												'Grid-rowExpander-expandBtn',
+												styles.GRID_EXPAND_BTN_CLASSNAME,
+											)}
 											tooltip="Expand/Contract Row"
 										/>
 										{rowComponent}
@@ -1275,12 +1277,12 @@ function GridComponent(props) {
 	if (!hasHeight(props) && !hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
 	}
-	let className = `
-		Grid-VStackNative
-		w-full
-		border
-		border-grey-300
-	`;
+	let className = clsx(
+		'Grid-VStackNative',
+		'w-full',
+		'border',
+		'border-grey-300',
+	);
 	if (props.className) {
 		className += props.className;
 	}
@@ -1303,14 +1305,14 @@ function GridComponent(props) {
 							deselectAll();
 						}
 					}}
-					className={`
-						gridContainer
-						w-full
-						h-full
-						flex-1
-						min-h-[40px]
-						${gridContainerBorderClassName}
-					`}
+					className={clsx(
+						'gridContainer',
+						'w-full',
+						'h-full',
+						'flex-1',
+						'min-h-[40px]',
+						gridContainerBorderClassName,
+					)}
 				>
 					{grid}
 				</VStack>
@@ -1323,13 +1325,13 @@ function GridComponent(props) {
 		grid = <VStackNative
 					{...testProps(self, '-dropTarget')}
 					ref={dropTargetRef}
-					className={`
-						Grid-dropTarget
-						h-full
-						w-full
-						border-[#0ff]
-						${canDrop && isOver ? "border-[4px]" : "border-[0px]"}
-					`}
+					className={clsx(
+						'Grid-dropTarget',
+						'h-full',
+						'w-full',
+						'border-[#0ff]',
+						canDrop && isOver ? 'border-[4px]' : 'border-[0px]',
+					)}
 				>{grid}</VStackNative>
 	}
 	return grid;

package/src/Components/Grid/GridHeaderRow.js

@@ -6,6 +6,7 @@ import {
 	Pressable,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	SORT_ASCENDING,
 	SORT_DESCENDING,
@@ -309,10 +310,10 @@ export default function GridHeaderRow(props) {
 						isSorter = isSortable && canColumnsSort && sortField === fieldName,
 						isReorderable = canColumnsReorder && configIsReorderable,
 						isResizable = canColumnsResize && configIsResizable,
-						rowClassName = `
-							border-r-2
-							border-r-white
-						`;
+						rowClassName = clsx(
+							'border-r-2',
+							'border-r-white',
+						);
 					if (isHidden) {
 						return null;
 					}
@@ -357,16 +358,16 @@ export default function GridHeaderRow(props) {
 								}}
 								onMouseEnter={(e) => onHeaderMouseEnter(e, ix)}
 								onMouseLeave={(e) => onHeaderMouseLeave(e, ix)}
-								className={`
-									GridHeaderRow-Pressable
-									h-full
-									flex-row
-									p-0
-									items-center
-									justify-center
-									${rowClassName}
-									${styles.GRID_HEADER_PRESSABLE_CLASSNAME}
-								`}
+								className={clsx(
+									'GridHeaderRow-Pressable',
+									'h-full',
+									'flex-row',
+									'p-0',
+									'items-center',
+									'justify-center',
+									rowClassName,
+									styles.GRID_HEADER_PRESSABLE_CLASSNAME,
+								)}
 								style={rowStyle}
 							>
 								{isReorderable && isOver && 
@@ -395,20 +396,20 @@ export default function GridHeaderRow(props) {
 								<TextNative
 									key="Text"
 									numberOfLines={1}
-									className={`
-										GridHeaderRow-TextNative
-										h-auto
-										flex-1
-										items-center
-										justify-center
-										leading-tight
-										text-center
-										overflow-hidden
-										text-ellipsis
-										px-2
-										py-3
-										${styles.GRID_HEADER_CLASSNAME}
-									`}
+									className={clsx(
+										'GridHeaderRow-TextNative',
+										'h-auto',
+										'flex-1',
+										'items-center',
+										'justify-center',
+										'leading-tight',
+										'text-center',
+										'overflow-hidden',
+										'text-ellipsis',
+										'px-2',
+										py-3,
+										styles.GRID_HEADER_CLASSNAME,
+									)}
 								>{header}</TextNative>
 								
 								{isSorter && 
@@ -416,12 +417,13 @@ export default function GridHeaderRow(props) {
 										key="Icon"
 										as={isSortDirectionAsc ? SortUp : SortDown}
 										size={styles.GRID_HEADER_ICON_SIZE}
-										className={`
-											GridHeaderRow-Icon
-											text-center
-											text-grey-500
-											${styles.GRID_HEADER_ICON_CLASSNAME}
-										`} />}
+										className={clsx(
+											'GridHeaderRow-Icon',
+											'text-center',
+											'text-grey-500',
+											styles.GRID_HEADER_ICON_CLASSNAME,
+										)}
+									/>}
 								
 								{isOver && UiGlobals.mode === UI_MODE_WEB && // only works for web for now 
 										<HeaderColumnSelectorHandle
@@ -488,12 +490,12 @@ export default function GridHeaderRow(props) {
 					style={{
 						scrollbarWidth: 'none',
 					}}
-					className={`
-						GridHeaderRow-HStack
-						w-full
-						h-[40px]
-						bg-grey-200
-					`}
+					className={clsx(
+						'GridHeaderRow-HStack',
+						'w-full',
+						'h-[40px]',
+						'bg-grey-200',
+					)}
 				> 
 					{renderHeaders()}
 				</HStack>;

package/src/Components/Grid/GridRow.js

@@ -1,11 +1,13 @@
-import { useMemo, useEffect, } from 'react';
+import { useMemo, useState, useEffect, } from 'react';
 import {
 	Box,
 	HStack,
 	HStackNative,
 	Icon,
+	Text,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	UI_MODE_WEB,
 	UI_MODE_NATIVE,
@@ -16,9 +18,11 @@ import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
 import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
 import testProps from '../../Functions/testProps.js';
+import Loading from '../Messages/Loading.js';
 import AngleRight from '../Icons/AngleRight.js';
 import RowDragHandle from './RowDragHandle.js';
 import RowSelectHandle from './RowSelectHandle.js';
+import useAsyncRenderers from '../../Hooks/useAsyncRenderers.js';
 import _ from 'lodash';
 
 // Conditional import for web only
@@ -64,7 +68,11 @@ function GridRow(props) {
 			dropTargetRef,
 			...propsToPass
 		} = props,
-		styles = UiGlobals.styles;
+		styles = UiGlobals.styles,
+		{
+			results: asyncResults,
+			loading: asyncLoading,
+		} = useAsyncRenderers(columnsConfig, item);
 
 	if (item.isDestroyed) {
 		return null;
@@ -126,16 +134,16 @@ function GridRow(props) {
 						propsToPass = columnProps[key] || {},
 						colStyle = {},
 						whichCursor = showSelectHandle ? 'cursor-text' : 'cursor-pointer'; // when using rowSelectHandle, indicate that the row text is selectable, otherwise indicate that the row itself is selectable
-					let colClassName = `
-						GridRow-column
-						p-1
-						justify-center
-						border-r-black-100
-						block
-						overflow-auto
-						${whichCursor}
-						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
-					`;
+					let colClassName = clsx(
+						'GridRow-column',
+						'p-1',
+						'justify-center',
+						'border-r-black-100',
+						'block',
+						'overflow-auto',
+						whichCursor,
+						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
+					);
 					if (isOnlyOneVisibleColumn) {
 						colClassName = ' w-full';
 					} else {
@@ -159,21 +167,25 @@ function GridRow(props) {
 					}
 					if (_.isPlainObject(config)) {
 						if (config.renderer) {
-							const extraProps = _.omit(config, [
-								'header',
-								'fieldName',
-								'type',
-								'isEditable',
-								'editor',
-								'format',
-								'renderer',
-								'isReorderable',
-								'isResizable',
-								'isSortable',
-								'w',
-								'flex',
-								'isOver',
-							]);
+							const
+								asyncResult = asyncResults.get(key),
+								isLoading = asyncLoading.has(key),
+								extraProps = _.omit(config, [
+									'header',
+									'fieldName',
+									'type',
+									'isEditable',
+									'editor',
+									'format',
+									'renderer',
+									'isAsync',
+									'isReorderable',
+									'isResizable',
+									'isSortable',
+									'w',
+									'flex',
+									'isOver',
+								]);
 
 							if (!extraProps._web) {
 								extraProps._web = {};
@@ -185,6 +197,31 @@ function GridRow(props) {
 								// userSelect: 'none',
 							};
 
+							let content = null;
+							if (config.isAsync) {
+								// Async renderer
+								if (isLoading) {
+									content = <Loading />;
+								} else if (asyncResult) {
+									if (asyncResult.error) {
+										content = <Text>Render Error: {asyncResult.error.message || String(asyncResult.error)}</Text>;
+									} else {
+										content = asyncResult.result;
+									}
+								}
+							} else {
+								// Synchronous renderer
+								try {
+									const result = config.renderer(item);
+									if (result && typeof result.then === 'function') {
+										content = <Text>Error: Async renderer not properly configured</Text>;
+									} else {
+										content = result;
+									}
+								} catch (error) {
+									content = <Text>Render Error: {error}</Text>;
+								}
+							}
 							return <HStackNative
 										key={key}
 										{...testProps('rendererCol-' + key)}
@@ -192,7 +229,7 @@ function GridRow(props) {
 										{...propsToPass}
 										{...extraProps}
 										style={colStyle}
-									>{config.renderer(item)}</HStackNative>;
+									>{content}</HStackNative>;
 						}
 						if (config.fieldName) {
 
@@ -212,18 +249,18 @@ function GridRow(props) {
 									if (config.getCellProps) {
 										_.assign(cellProps, config.getCellProps(item));
 									}
-									let elementClassName = `
-										GridRow-Element
-										self-center
-										text-ellipsis
-										px-2
-										py-3
-										block
-										overflow-scroll
-										${colClassName}
-										${styles.GRID_CELL_CLASSNAME}
-										${styles.GRID_ROW_MAX_HEIGHT_NORMAL}
-									`;
+									let elementClassName = clsx(
+										'GridRow-Element',
+										'self-center',
+										'text-ellipsis',
+										'px-2',
+										'py-3',
+										'block',
+										'overflow-scroll',
+										colClassName,
+										styles.GRID_CELL_CLASSNAME,
+										styles.GRID_ROW_MAX_HEIGHT_NORMAL,
+									);
 									if (config.className) {
 										elementClassName += ' ' + config.className;
 									}
@@ -273,14 +310,14 @@ function GridRow(props) {
 					if (config.getCellProps) {
 						_.assign(elementProps, config.getCellProps(item));
 					}
-					let textClassName = `
-						GridRow-TextNative
-						self-center
-						overflow-hidden
-						${colClassName}
-						${styles.GRID_CELL_CLASSNAME}
-						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
-					`;
+					let textClassName = clsx(
+						'GridRow-TextNative',
+						'self-center',
+						'overflow-hidden',
+						colClassName,
+						styles.GRID_CELL_CLASSNAME,
+						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
+					);
 					if (config.className) {
 						textClassName += ' ' + config.className;
 					}
@@ -310,15 +347,15 @@ function GridRow(props) {
 							
 							{isPhantom && 
 								<Box
-									className={`
-										GridRow-phantom
-										absolute
-										h-2
-										w-2
-										top-0
-										left-0
-										bg-[#f00]
-									`}
+									className={clsx(
+										'GridRow-phantom',
+										'absolute',
+										'h-2',
+										'w-2',
+										'top-0',
+										'left-0',
+										'bg-[#f00]',
+									)}
 								/>}
 							
 							{renderColumns(item)}
@@ -327,25 +364,25 @@ function GridRow(props) {
 								<Icon
 									as={AngleRight}
 									variant="outline"
-									className={`
-										GridRow-Icon
-										w-30
-										self-center
-										mx-3
-										${styles.GRID_NAV_COLUMN_COLOR}
-									`}
+									className={clsx(
+										'GridRow-Icon',
+										'w-30',
+										'self-center',
+										'mx-3',
+										styles.GRID_NAV_COLUMN_COLOR,
+									)}
 								/>}
 						</>;
 
 		if (dragSourceRef) {
 			rowContents = <HStack
 								ref={dragSourceRef}
-								className={`
-									GridRow-dragSourceRef
-									w-full
-									flex-1
-									grow-1
-								`}
+								className={clsx(
+									'GridRow-dragSourceRef',
+									'w-full',
+									'flex-1',
+									'grow-1',
+								)}
 								style={{
 									backgroundColor: bg,
 								}}
@@ -354,22 +391,22 @@ function GridRow(props) {
 		if (dropTargetRef) {
 			rowContents = <HStack
 								ref={dropTargetRef}
-								className={`
-									GridRow-dropTargetRef
-									w-full
-									flex-1
-									grow-1
-								`}
+								className={clsx(
+									'GridRow-dropTargetRef',
+									'w-full',
+									'flex-1',
+									'grow-1',
+								)}
 								style={{
 									backgroundColor: bg,
 								}}
 							>{rowContents}</HStack>;
 		}
 
-		let rowClassName = `
-			GridRow-HStackNative
-			items-center
-		`;
+		let rowClassName = clsx(
+			'GridRow-HStackNative',
+			'items-center',
+		);
 		if (isOnlyOneVisibleColumn) {
 			rowClassName += ' w-full';
 		}
@@ -390,6 +427,8 @@ function GridRow(props) {
 				>{rowContents}</HStackNative>;
 	}, [
 		columnsConfig,
+		asyncResults,
+		asyncLoading,
 		columnProps,
 		fields,
 		rowProps,

package/src/Components/Grid/HeaderColumnSelectorHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	Pressable,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Gear from '../Icons/Gear.js';
 import _ from 'lodash';
 
@@ -13,14 +14,14 @@ export default function HeaderColumnSelectorHandle(props) {
 				_hover={{ bg: 'grey-200' }}
 				_pressed={{ bg: 'grey-300' }}
 				onPress={showColumnsSelector}
-				className={`
-					HeaderColumnSelectorHandle
-					bg-grey-100
-					h-full
-					w-3
-					items-center
-					justify-center
-				`}
+				className={clsx(
+					'HeaderColumnSelectorHandle',
+					'bg-grey-100',
+					'h-full',
+					'w-3',
+					'items-center',
+					'justify-center',
+				)}
 			>
 				<Icon
 					as={Gear}