@onehat/ui 0.3.108 → 0.3.111

package/package.json

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

package/src/Components/Form/Form.js

@@ -75,6 +75,7 @@ function Form(props) {
 			disableDirtyIcon = false,
 			onBack,
 			onReset,
+			onInit,
 			onViewMode,
 			submitBtnLabel,
 			onSubmit,
@@ -127,6 +128,7 @@ function Form(props) {
 		[containerWidth, setContainerWidth] = useState(),
 		initialValues =  _.merge(startingValues, (record && !record.isDestroyed ? record.submitValues : {})),
 		defaultValues = isMultiple ? getNullFieldValues(initialValues, Repository) : initialValues, // when multiple entities, set all default values to null
+		validatorToUse = validator || (isMultiple ? disableRequiredYupFields(Repository?.schema?.model?.validator) : Repository?.schema?.model?.validator) || yup.object(),
 		{
 			control,
 			formState,
@@ -142,7 +144,7 @@ function Form(props) {
 			// setFocus,
 			getValues: formGetValues,
 			// getFieldState,
-			// trigger,
+			trigger,
 		} = useForm({
 			mode: 'onChange', // onChange | onBlur | onSubmit | onTouched | all
 			// reValidateMode: 'onChange', // onChange | onBlur | onSubmit
@@ -157,7 +159,7 @@ function Form(props) {
 			// delayError: 0,
 			// shouldUnregister: false,
 			// shouldUseNativeValidation: false,
-			resolver: yupResolver(validator || (isMultiple ? disableRequiredYupFields(Repository?.schema?.model?.validator) : Repository?.schema?.model?.validator) || yup.object()),
+			resolver: yupResolver(validatorToUse),
 			context: { isPhantom },
 		}),
 		buildFromColumnsConfig = () => {
@@ -297,6 +299,7 @@ function Form(props) {
 					useSelectorId = false,
 					isHidden = false,
 					getDynamicProps,
+					getIsRequired,
 					...propsToPass
 				} = item,
 				editorTypeProps = {};
@@ -483,7 +486,7 @@ function Form(props) {
 													}
 													onChange(newValue);
 													if (onEditorChange) {
-														onEditorChange(newValue, formSetValue, formGetValues, formState);
+														onEditorChange(newValue, formSetValue, formGetValues, formState, trigger);
 													}
 												}}
 												onBlur={onBlur}
@@ -521,11 +524,11 @@ function Form(props) {
 								
 							let isRequired = false,
 								requiredIndicator = null;
-							if (editorType === EDITOR_TYPE__PLAIN) {
+							if (getIsRequired) {
+								isRequired = getIsRequired(formGetValues, formState);
+							} else if (validatorToUse?.fields && validatorToUse.fields[name]?.exclusiveTests?.required) {
 								// submitted validator
-								if (validator?.fields && validator.fields[name]?.exclusiveTests?.required) {
-									isRequired = true;
-								}
+								isRequired = true;
 							} else if ((propertyDef?.validator?.spec && !propertyDef.validator.spec.optional) ||
 								(propertyDef?.requiredIfPhantom && isPhantom) ||
 								(propertyDef?.requiredIfNotPhantom && !isPhantom)) {
@@ -612,19 +615,25 @@ function Form(props) {
 				alert(errors.message);
 			}
 		},
+		doReset = (values) => {
+			reset(values);
+			if (onReset) {
+				onReset(values, formSetValue, formGetValues);
+			}
+		},
 		onSaveDecorated = async (data, e) => {
 			// reset the form after a save
 			const result = await onSave(data, e);
 			if (result) {
 				const values = record.submitValues;
-				reset(values);
+				doReset(values);
 			}
 		},
 		onSubmitDecorated = async (data, e) => {
 			const result = await onSubmit(data, e);
 			if (result) {
 				const values = record.submitValues;
-				reset(values);
+				doReset(values);
 			}
 		},
 		onLayoutDecorated = (e) => {
@@ -636,9 +645,13 @@ function Form(props) {
 		};
 
 	useEffect(() => {
-		if (record !== previousRecord) {
+		if (record === previousRecord) {
+			if (onInit) {
+				onInit(initialValues, formSetValue, formGetValues);
+			}
+		} else {
 			setPreviousRecord(record);
-			reset(defaultValues);
+			doReset(defaultValues);
 		}
 		if (formSetup) {
 			formSetup(formSetValue, formGetValues, formState)
@@ -847,12 +860,7 @@ function Form(props) {
 						{showResetBtn && 
 							<IconButton
 								key="resetBtn"
-								onPress={() => {
-									if (onReset) {
-										onReset();
-									}
-									reset();
-								}}
+								onPress={() => doReset()}
 								icon={Rotate}
 								_icon={{
 									color: !formState.isDirty ? 'trueGray.400' : '#000',