@onehat/ui 0.4.69 → 0.4.70

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.69",
+	"version": "0.4.70",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Form/Field/Json.js

@@ -61,6 +61,7 @@ export function JsonElement(props) {
 					onEdit={(obj) => {
 						setValue(JSON.stringify(obj.updated_src));
 					}}
+					collapseStringsAfterLength={500}
 					{...propsToPass}
 				/>
 			</HStack>;

package/src/Components/Form/Form.js

@@ -1358,7 +1358,7 @@ function Form(props) {
 						icon={getEditorMode() === EDITOR_MODE__ADD ? Plus : FloppyDiskRegular}
 						isDisabled={isSaveDisabled}
 						className="text-white"
-						text={getEditorMode() === EDITOR_MODE__ADD ? 'Add' : 'Save'}
+						text={(getEditorMode() === EDITOR_MODE__ADD ? 'Add' : 'Save') + (props.record?.length > 1 ? ` (${props.record.length})` : '')}
 					/>}
 				
 				{showSubmitBtn && 

package/src/Components/Grid/Grid.js

@@ -194,6 +194,7 @@ function GridComponent(props) {
 			onView,
 			onContextMenu,
 			isAdding,
+			isEditorViewOnly,
 
 			// withData
 			Repository,
@@ -432,7 +433,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) {

package/src/Components/Grid/GridRow.js

@@ -1,9 +1,10 @@
-import { useMemo, useEffect, } from 'react';
+import { useMemo, useState, useEffect, } from 'react';
 import {
 	Box,
 	HStack,
 	HStackNative,
 	Icon,
+	Text,
 	TextNative,
 } from '@project-components/Gluestack';
 import {
@@ -16,9 +17,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 +67,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;
@@ -159,21 +166,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 +196,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 +228,7 @@ function GridRow(props) {
 										{...propsToPass}
 										{...extraProps}
 										style={colStyle}
-									>{config.renderer(item)}</HStackNative>;
+									>{content}</HStackNative>;
 						}
 						if (config.fieldName) {
 
@@ -390,6 +426,8 @@ function GridRow(props) {
 				>{rowContents}</HStackNative>;
 	}, [
 		columnsConfig,
+		asyncResults,
+		asyncLoading,
 		columnProps,
 		fields,
 		rowProps,

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 };
+}