@onehat/ui 0.3.288 → 0.3.290

package/package.json

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

package/src/Components/Buttons/ReloadButton.js

@@ -5,11 +5,12 @@ import testProps from '../../Functions/testProps.js';
 import IconButton from './IconButton.js';
 import Rotate from '../Icons/Rotate.js';
 
-export default function ReloadButton(props, isTree = false) {
+export default function ReloadButton(props) {
 	const {
 			iconProps ={},
 			self,
 			Repository,
+			isTree = false,
 		} = props,
 		onPress = () => {
 			if (isTree) {

package/src/Components/Form/Form.js

@@ -134,8 +134,8 @@ function Form(props) {
 	}
 	const
 		isMultiple = _.isArray(record),
-		isSingle = !isMultiple, // for convenience
-		isPhantom = !skipAll && !!record?.isPhantom, //
+		isSingle = _.isNil(record) || !_.isArray(record),
+		isPhantom = !skipAll && !!record?.isPhantom,
 		forceUpdate = useForceUpdate(),
 		[previousRecord, setPreviousRecord] = useState(record),
 		[containerWidth, setContainerWidth] = useState(),
@@ -949,6 +949,9 @@ function Form(props) {
 				const formIsDirty = formState.isDirty;
 				// console.log('formIsDirty', formIsDirty);
 				// console.log('isPhantom', isPhantom);
+				if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
+					showCancelBtn = true;
+				}
 				if (formIsDirty || isPhantom) {
 					if (isSingle && onCancel) {
 						showCancelBtn = true;

package/src/Components/Tree/Tree.js

@@ -70,6 +70,9 @@ function TreeComponent(props) {
 				}
 				return item[displayIx];
 			},
+			getDisplayTextFromSearchResults = (item) => {
+				return item.id
+			},
 			getNodeIcon = (which, item) => { // decides what icon to show for this node
 				// TODO: Allow for dynamic props on the icon (e.g. special color for some icons)
 				let icon;
@@ -383,7 +386,7 @@ function TreeComponent(props) {
 			// Show modal so user can select which node to go to
 			const searchFormData = [];
 			_.each(found, (item) => {
-				searchFormData.push([item.id, getNodeText(item)]);
+				searchFormData.push([item.id, getDisplayTextFromSearchResults(item)]);
 			});
 			setSearchFormData(searchFormData);
 			setSearchResults(found);
@@ -699,8 +702,9 @@ function TreeComponent(props) {
 				
 				currentNode = currentDatum.item;
 				
-				// THE MAGIC!
-				currentDatum.isExpanded = true;
+				if (!currentDatum.isExpanded) {
+					await loadChildren(currentDatum, 1);
+				}
 				
 				cPath = cPathParts.slice(1).join('/'); // put the rest of it back together
 				currentLevelData = currentDatum.children;
@@ -1252,38 +1256,42 @@ function TreeComponent(props) {
 				>
 					<Column bg="#fff" w={300}>
 						<FormPanel
-							title="Choose Tree Node"
+							_panel={{ 
+								title: 'Choose Tree Node',
+							}}
 							instructions="Multiple tree nodes matched your search. Please select which one to show."
-							flex={1}
-							items={[
-								{
-									type: 'Column',
-									flex: 1,
-									items: [
-										{
-											key: 'node_id',
-											name: 'node_id',
-											type: 'Combo',
-											label: 'Tree Node',
-											data: searchFormData,
-										}
-									],
+							_form={{ 
+								flex: 1,
+								items: [
+									{
+										type: 'Column',
+										flex: 1,
+										items: [
+											{
+												key: 'node_id',
+												name: 'node_id',
+												type: 'Combo',
+												label: 'Tree Node',
+												data: searchFormData,
+											}
+										],
+									},
+								],
+								onCancel: (e) => {
+									setHighlitedDatum(null);
+									setIsModalShown(false);
+								},
+								onSave: (data, e) => {
+									const
+										treeNode = _.find(searchResults, (item) => {
+											return item.id === data.node_id;
+										}),
+										cPath = treeNode.cPath;
+									expandPath(cPath);
+	
+									// Close the modal
+									setIsModalShown(false);
 								},
-							]}
-							onCancel={(e) => {
-								setHighlitedDatum(null);
-								setIsModalShown(false);
-							}}
-							onSave={(data, e) => {
-								const
-									treeNode = _.find(searchResults, (item) => {
-										return item.id === data.node_id;
-									}),
-									cPath = treeNode.cPath;
-								expandPath(cPath);
-
-								// Close the modal
-								setIsModalShown(false);
 							}}
 						/>
 					</Column>