@onehat/ui 0.4.68 → 0.4.70

package/package.json

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

package/src/Components/Accordion/Accordion.js

@@ -84,7 +84,7 @@ export default function Accordion(props) {
 									if (isActive) {
 										newActiveSections = _.without(activeSections, ix);
 									} else {
-										newActiveSections = _.clone(activeSections);
+										newActiveSections = [...activeSections]; // clone
 										newActiveSections.push(ix);
 									}
 								}

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/Field/Tag/Tag.js

@@ -144,7 +144,7 @@ function TagComponent(props) {
 
 
 			// add new value
-			const newValue = _.clone(value); // so we trigger a re-render
+			const newValue = [...value]; // clone, so we trigger a re-render
 			newValue.push({
 				id,
 				text: displayValue,
@@ -165,7 +165,7 @@ function TagComponent(props) {
 			const
 				entity = selection[0],
 				id = entity.id,
-				newValue = _.clone(valueRef.current);
+				newValue = [...valueRef.current]; // clone
 			newValue.push({
 				id,
 				text: entity.displayValue,
@@ -190,7 +190,7 @@ function TagComponent(props) {
 				return;
 			}
 			
-			const newValue = _.clone(valueRef.current);
+			const newValue = [...valueRef.current]; // clone
 			newValue[ix] = {
 				id,
 				text: entity.displayValue,

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo, useCallback, } from 'react';
+import { useState, useEffect, useRef, useMemo, useCallback, } from 'react';
 import {
 	Box,
 	FlatList,
@@ -194,6 +194,7 @@ function GridComponent(props) {
 			onView,
 			onContextMenu,
 			isAdding,
+			isEditorViewOnly,
 
 			// withData
 			Repository,
@@ -266,7 +267,7 @@ function GridComponent(props) {
 		},
 		setLocalColumnsConfig = (config) => {
 			if (localColumnsConfigKey) {
-				const localConfig = _.clone(config); // clone it so we don't alter the original
+				const localConfig = [...config]; // clone it so we don't alter the original
 				if (hasUnserializableColumns) {
 					// just save the data needed to later reconstruct the columns
 					const usedIds = [];
@@ -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) {
@@ -1166,7 +1167,7 @@ function GridComponent(props) {
 
 	// Actual data to show in the grid
 	const entities = Repository ? (Repository.isRemote ? Repository.entities : Repository.getEntitiesOnPage()) : data;
-	let rowData = _.clone(entities); // don't use the original array, make a new one so alterations to it are temporary
+	let rowData = [...entities]; // don't use the original array, make a new one so alterations to it are temporary
 	if (showHeaders) {
 		rowData.unshift({ id: 'headerRow' });
 	}

package/src/Components/Grid/GridHeaderRow.js

@@ -86,7 +86,7 @@ export default function GridHeaderRow(props) {
 			if (isDragging) {
 				return;
 			}
-			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
+			const columnsConfig = [...localColumnsConfig]; // work with a copy, so that setter forces rerender
 			columnsConfig[ix].isOver = true;
 			setLocalColumnsConfig(columnsConfig);
 		},
@@ -94,7 +94,7 @@ export default function GridHeaderRow(props) {
 			if (isDragging) {
 				return;
 			}
-			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
+			const columnsConfig = [...localColumnsConfig]; // work with a copy, so that setter forces rerender
 			columnsConfig[ix].isOver = false;
 			setLocalColumnsConfig(columnsConfig);
 		},
@@ -240,7 +240,7 @@ export default function GridHeaderRow(props) {
 			setDragColumnSlot({ ix: newIx, marker, });
 		},
 		onColumnReorderDragStop = (delta, e, config) => {
-			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
+			const columnsConfig = [...localColumnsConfig]; // work with a copy, so that setter forces rerender
 
 			 _.pull(columnsConfig, config);
 
@@ -256,7 +256,7 @@ export default function GridHeaderRow(props) {
 			setDragColumnSlot(null);
 		},
 		onColumnResize = (delta, e, node, config) => {
-			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
+			const columnsConfig = [...localColumnsConfig]; // work with a copy, so that setter forces rerender
 			if (config.w) {
 				config.w = Math.round(config.w + delta);
 			} else if (config.flex) {

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 {
@@ -11,17 +12,28 @@ import {
 	UI_MODE_NATIVE,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 import * as colourMixer from '@k-renwick/colour-mixer';
 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
+let getEmptyImage;
+if (CURRENT_MODE === UI_MODE_WEB) {
+	import('react-dnd-html5-backend').then((module) => {
+		getEmptyImage = module.getEmptyImage;
+	}).catch(() => {
+		getEmptyImage = null;
+	});
+}
+
 // This was broken out from Grid simply so we can memoize it
 
 function GridRow(props) {
@@ -55,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;
@@ -150,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 = {};
@@ -176,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)}
@@ -183,7 +228,7 @@ function GridRow(props) {
 										{...propsToPass}
 										{...extraProps}
 										style={colStyle}
-									>{config.renderer(item)}</HStackNative>;
+									>{content}</HStackNative>;
 						}
 						if (config.fieldName) {
 
@@ -381,6 +426,8 @@ function GridRow(props) {
 				>{rowContents}</HStackNative>;
 	}, [
 		columnsConfig,
+		asyncResults,
+		asyncLoading,
 		columnProps,
 		fields,
 		rowProps,

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -169,7 +169,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					if (secondaryDefaultValues) {
 						_.merge(defaultValuesToUse, secondaryDefaultValues);
 					}
-					addValues = _.clone(defaultValuesToUse);
+					addValues = [...defaultValuesToUse];
 				}
 
 				if (secondarySelectorId && !_.isEmpty(secondarySelectorSelected)) {

package/src/Components/Hoc/Secondary/withSecondarySelection.js

@@ -111,7 +111,7 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			secondaryAddToSelection = (item) => {
-				const newSelection = _.clone(secondaryGetSelection()); // so we get a new object, so descendants rerender
+				const newSelection = [...secondaryGetSelection()]; // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				secondarySetSelection(newSelection);
 			},
@@ -175,7 +175,7 @@ export default function withSelection(WrappedComponent) {
 				const
 					currentSelectionLength = secondaryGetSelection().length,
 					index = getIndexOfSelectedItem(item);
-				let newSelection = _.clone(secondaryGetSelection()); // so we get a new object, so descendants rerender
+				let newSelection = [...secondaryGetSelection()]; // so we get a new object, so descendants rerender
 
 				if (currentSelectionLength) {
 					const { items, max, min, } = getMaxMinSelectionIndices();

package/src/Components/Hoc/withEditor.js

@@ -179,7 +179,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					if (defaultValues) {
 						_.merge(defaultValuesToUse, defaultValues);
 					}
-					addValues = _.clone(defaultValuesToUse);
+					addValues = [...defaultValuesToUse];
 				}
 
 				if (selectorId && !_.isEmpty(selectorSelected)) {

package/src/Components/Hoc/withFilters.js

@@ -228,7 +228,7 @@ export default function withFilters(WrappedComponent) {
 			filterById = (id, cb) => {
 				onClearFilters();
 				filterCallbackRef.current = cb; // store the callback, so we can call it the next time this HOC renders with new filters
-				const newFilters = _.clone(filters);
+				const newFilters = [...filters];
 				_.remove(newFilters, (filter) => {
 					return filter.field === 'q';
 				});
@@ -410,8 +410,8 @@ export default function withFilters(WrappedComponent) {
 						data,
 						onChange: (value) => {
 							const
-								newFilters = _.clone(modalFilters),
-								newSlots = _.clone(modalSlots),
+								newFilters = [...modalFilters],
+								newSlots = [...modalSlots],
 								i = ix;//searchAllText ? ixPlusOne : ix; // compensate for 'q' filter's possible presence
 
 							newFilters[i] = getFormattedFilter(value);
@@ -447,7 +447,7 @@ export default function withFilters(WrappedComponent) {
 							if (!canAddSlot) {
 								return;
 							}
-							const newSlots = _.clone(modalSlots);
+							const newSlots = [...modalSlots];
 							newSlots.push(null);
 							rebuildModalBody(modalFilters, newSlots);
 						},
@@ -456,8 +456,8 @@ export default function withFilters(WrappedComponent) {
 								return;
 							}
 							const
-								newFilters = _.clone(modalFilters),
-								newSlots = _.clone(modalSlots);
+								newFilters = [...modalFilters],
+								newSlots = [...modalSlots];
 							newFilters.pop();
 							newSlots.pop();
 							rebuildModalBody(newFilters, newSlots);

package/src/Components/Hoc/withSelection.js

@@ -109,7 +109,7 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			addToSelection = (item) => {
-				const newSelection = _.clone(getSelection()); // so we get a new object, so descendants rerender
+				const newSelection = [...getSelection()]; // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				setSelection(newSelection);
 			},
@@ -175,7 +175,7 @@ export default function withSelection(WrappedComponent) {
 				const
 					currentSelectionLength = getSelection().length,
 					index = getIndexOfSelectedItem(item);
-				let newSelection = _.clone(getSelection()); // so we get a new object, so descendants rerender
+				let newSelection = [...getSelection()]; // so we get a new object, so descendants rerender
 
 				if (currentSelectionLength) {
 					const { items, max, min, } = getMaxMinSelectionIndices();

package/src/Components/Tab/TabBar.js

@@ -244,7 +244,7 @@ function TabBar(props) {
 				const
 					isCurrentTab = ix === getCurrentTab(),
 					useIconTab = (isCollapsed || !tab.title),
-					tabIcon = tab._icon ? _.clone(tab._icon) : {};
+					tabIcon = tab._icon ? [...tab._icon] : {};
 				if (tabIcon.as && _.isString(tabIcon.as)) {
 					const Type = getComponentFromType(tabIcon.as);
 					if (Type) {
@@ -307,7 +307,7 @@ function TabBar(props) {
 
 					const
 						useIconTab = (isCollapsed || !additionalButton.text),
-						additionalButtonIcon = _.clone(additionalButton._icon);
+						additionalButtonIcon = [...additionalButton._icon];
 
 					if (additionalButtonIcon.as && _.isString(additionalButtonIcon.as)) {
 						const Type = getComponentFromType(additionalButtonIcon.as);

package/src/Components/Tree/Tree.js

@@ -384,13 +384,13 @@ function TreeComponent(props) {
 			forceUpdate();
 		},
 		onCollapseAll = () => {
-			const newTreeNodeData = _.clone(getTreeNodeData());
+			const newTreeNodeData = [...getTreeNodeData()];
 			collapseNodes(newTreeNodeData);
 			setTreeNodeData(newTreeNodeData);
 		},
 		onExpandAll = () => {
 			confirm('Are you sure you want to expand the whole tree? This may take a while.', async () => {
-				const newTreeNodeData = _.clone(getTreeNodeData());
+				const newTreeNodeData = [...getTreeNodeData()];
 				await expandNodes(newTreeNodeData);
 				setTreeNodeData(newTreeNodeData);
 			});
@@ -678,7 +678,7 @@ function TreeComponent(props) {
 			// NOTE: This is only for 'data', not for Repositories!
 			// 'data' is essentially an Adjacency List, not a ClosureTable.
 
-			const clonedData = _.clone(data);
+			const clonedData = [...data];
 
 			// Reset all parent/child relationships
 			_.each(clonedData, (treeNode) => {
@@ -831,7 +831,7 @@ function TreeComponent(props) {
 		},
 		expandPath = async (cPath, highlight = true) => {
 			// First, close the whole tree.
-			let newTreeNodeData = _.clone(getTreeNodeData());
+			let newTreeNodeData = [...getTreeNodeData()];
 			collapseNodes(newTreeNodeData);
 
 			// As it navigates down, it will expand the appropriate branches,

package/src/Components/Tree/TreeNode.js

@@ -11,7 +11,6 @@ import {
 	UI_MODE_WEB,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -22,6 +21,16 @@ import ChevronRight from '../Icons/ChevronRight.js';
 import ChevronDown from '../Icons/ChevronDown.js';
 import _ from 'lodash';
 
+// Conditional import for web only
+let getEmptyImage;
+if (CURRENT_MODE === UI_MODE_WEB) {
+	import('react-dnd-html5-backend').then((module) => {
+		getEmptyImage = module.getEmptyImage;
+	}).catch(() => {
+		getEmptyImage = null;
+	});
+}
+
 // This was broken out from Tree simply so we can memoize it
 
 export default function TreeNode(props) {

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