@onehat/ui 0.3.150 → 0.3.152

package/package.json

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

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

@@ -61,11 +61,40 @@ export function DateElement(props) {
 		pickerRef = useRef(),
 		[isPickerShown, setIsPickerShown] = useState(false),
 		[isRendered, setIsRendered] = useState(false),
+		[localValue, setLocalValue] = useState(value),
 		[textInputValue, setTextInputValue] = useState(value),
 		[isTranslateX, setIsTranslateX] = useState(false),
 		[isTranslateY, setIsTranslateY] = useState(false),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
+		setBothValues = (value) => {
+			setLocalValue(value);
+			setValue(value);
+		},
+		formatByMode = (value) => {
+			switch(mode) {
+				case DATE:
+					if (!_.isNil(value)) {
+						value = Parsers.ParseDate(value);
+						value = Formatters.FormatDate(value, 'YYYY-MM-DD');
+					}
+					break;
+				case TIME:
+					if (!_.isNil(value)) {
+						value = Parsers.ParseTime(value);
+						value = Formatters.FormatTime(value);
+					}
+					break;
+				case DATETIME:
+					if (!_.isNil(value)) {
+						value = Parsers.ParseDate(value);
+						value = Formatters.FormatDate(value, 'YYYY-MM-DD HH:mm:ss');
+					}
+					break;
+				default:
+			}
+			return value;
+		},
 		showPicker = () => {
 			if (isPickerShown) {
 				return;
@@ -140,34 +169,14 @@ export function DateElement(props) {
 				return;
 			}
 			if (_.isEmpty(value)) {
-				setValue(null);
+				setBothValues(null);
 				setTextInputValue('');
 				return;
 			}
-			switch(mode) {
-				case DATE:
-					if (!_.isNil(value)) {
-						value = Parsers.ParseDate(value);
-						value = Formatters.FormatDate(value, 'YYYY-MM-DD');
-					}
-					break;
-				case TIME:
-					if (!_.isNil(value)) {
-						value = Parsers.ParseTime(value);
-						value = Formatters.FormatTime(value);
-					}
-					break;
-				case DATETIME:
-					if (!_.isNil(value)) {
-						value = Parsers.ParseDate(value);
-						value = Formatters.FormatDate(value, 'YYYY-MM-DD HH:mm:ss');
-					}
-					break;
-				default:
-			}
+			value = formatByMode(value);
 			
 			if (value !== 'Invalid date') {
-				setValue(value);
+				setBothValues(value);
 			}
 
 			setTextInputValue(value);
@@ -219,10 +228,23 @@ export function DateElement(props) {
 			}
 
 			if (moment && moment?.isValid()) {
-				setValue(value);
+				setBothValues(value);
 				setTextInputValue(value);
 			}
 		};
+
+
+	useEffect(() => {
+
+		// When value changes from outside, adjust text value
+		if (value !== localValue) {
+			setLocalValue(value);
+
+			const textValue = formatByMode(value);
+			setTextInputValue(textValue);
+		}
+
+	}, [value]);
 	
 	// Format the display date/time/datetime
 	let title = placeholder,

package/src/Components/Hoc/withWindowedEditor.js

@@ -42,7 +42,8 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 				h,
 
 				...propsToPass
-			} = props;
+			} = props,
+			onEditorCancel = props.onEditorCancel;
 
 		if (!Editor) {
 			throw Error('Editor is not defined');
@@ -53,7 +54,7 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 					{isEditorShown && 
 						<Modal
 							isOpen={true}
-							onClose={() => setIsEditorShown(false)}
+							onClose={onEditorCancel}
 						>
 							<Editor
 								editorType={EDITOR_TYPE__WINDOWED}