@onehat/ui 0.3.66 → 0.3.67

package/package.json

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

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

@@ -61,7 +61,7 @@ export function ComboComponent(props) {
 		inputRef = useRef(),
 		triggerRef = useRef(),
 		menuRef = useRef(),
-		displayValueRef = useRef(null),
+		displayValueRef = useRef(),
 		typingTimeout = useRef(),
 		[isMenuShown, setIsMenuShown] = useState(false),
 		[isRendered, setIsRendered] = useState(false),
@@ -118,6 +118,58 @@ export function ComboComponent(props) {
 		toggleMenu = () => {
 			setIsMenuShown(!isMenuShown);
 		},
+		getDisplayValue = () => {
+			return displayValueRef.current;
+		},
+		setDisplayValue = async (value) => {
+			let displayValue = '';
+			if (_.isNil(value)) {
+				// do nothing
+			} else if (_.isArray(value)) {
+				displayValue = [];
+				if (Repository) {
+					if (!Repository.isLoaded) {
+						throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
+					}
+					if (Repository.isLoading) {
+						await Repository.waitUntilDoneLoading();
+					}
+					displayValue = _.each(value, (id) => {
+						const entity = Repository.getById(id);
+						if (entity) {
+							displayValue.push(entity.displayValue)
+						}
+					});
+				} else {
+					displayValue = _.each(value, (id) => {
+						const item = _.find(data, (datum) => datum[idIx] === id);
+						if (item) {
+							displayValue.push(item[displayIx]);
+						}
+					});
+				}
+				displayValue = displayValue.join(', ');
+			} else {
+				if (Repository) {
+					let entity;
+					if (!Repository.isLoaded) {
+						entity = await Repository.getSingleEntityFromServer(value);
+					} else {
+						if (Repository.isLoading) {
+							await Repository.waitUntilDoneLoading();
+						}
+						entity = Repository.getById(value);
+					}
+					displayValue = entity?.displayValue || '';
+				} else {
+					const item = _.find(data, (datum) => datum[idIx] === value);
+					displayValue = (item && item[displayIx]) || '';
+				}
+			}
+
+			displayValueRef.current = displayValue;
+			resetInputTextValue();
+		},
 		resetInputTextValue = () => {
 			setTextInputValue(getDisplayValue());
 		},
@@ -344,57 +396,6 @@ export function ComboComponent(props) {
 				// 	setTextInputValue(newTextValue);
 				// }
 			}
-		},
-		getDisplayValue = () => {
-			return displayValueRef.current;
-		},
-		setDisplayValue = async (value) => {
-			let displayValue = '';
-			if (_.isNil(value)) {
-				// do nothing
-			} else if (_.isArray(value)) {
-				displayValue = [];
-				if (Repository) {
-					if (!Repository.isLoaded) {
-						throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
-					}
-					if (Repository.isLoading) {
-						await Repository.waitUntilDoneLoading();
-					}
-					displayValue = _.each(value, (id) => {
-						const entity = Repository.getById(id);
-						if (entity) {
-							displayValue.push(entity.displayValue)
-						}
-					});
-				} else {
-					displayValue = _.each(value, (id) => {
-						const item = _.find(data, (datum) => datum[idIx] === id);
-						if (item) {
-							displayValue.push(item[displayIx]);
-						}
-					});
-				}
-				displayValue = displayValue.join(', ');
-			} else {
-				if (Repository) {
-					let entity;
-					if (!Repository.isLoaded) {
-						entity = await Repository.getSingleEntityFromServer(value);
-					} else {
-						if (Repository.isLoading) {
-							await Repository.waitUntilDoneLoading();
-						}
-						entity = Repository.getById(value);
-					}
-					displayValue = entity?.displayValue || '';
-				} else {
-					const item = _.find(data, (datum) => datum[idIx] === value);
-					displayValue = (item && item[displayIx]) || '';
-				}
-			}
-
-			displayValueRef.current = displayValue;
 		};
 
 	useEffect(() => {
@@ -412,7 +413,6 @@ export function ComboComponent(props) {
 		(async () => {
 			setIsSearchMode(false);
 			await setDisplayValue(value);
-			resetInputTextValue();
 			if (!isReady) {
 				setIsReady(true);
 			}

package/src/Components/Hoc/withComponent.js

@@ -1,4 +1,7 @@
 import React, { useState, useRef, useEffect, } from 'react';
+import {
+	v4 as uuid,
+} from 'uuid';
 import _ from 'lodash';
 
 // This HOC establishes a parent-child relationship between components.
@@ -7,13 +10,14 @@ import _ from 'lodash';
 
 export default function withComponent(WrappedComponent) {
 	return (props) => {
+
 		const {
 				// self: parent,
 				parent,
 				componentMethods,
 				...propsToPass
 			} = props,
-			{ reference } = props,
+			reference = _.isEmpty(props.reference) ? uuid() : props.reference,
 			childrenRef = useRef({}),
 			selfRef = useRef({
 				parent,

package/src/Components/Hoc/withPdfButton.js

@@ -187,7 +187,7 @@ export default function withPdfButton(WrappedComponent) {
 								startingValues={startingValues}
 								validator={validator}
 								checkIsEditingDisabled={false}
-								onCancel={(e) => {
+								onClose={(e) => {
 									setIsModalShown(false);
 								}}
 								onSubmit={(data, e) => {