From 02871ac9d817b17ca21a4e8bf1cbd4f38469403f Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Fri, 27 Oct 2023 18:17:30 +0200
Subject: [PATCH 1/3] Add FormProvider to BankAccountManualStep
---
.../BankAccountManualStep.js | 16 ++++++++++------
1 file changed, 10 insertions(+), 6 deletions(-)
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 9d0b0c1f5bed..dd46bd3d22c0 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -15,10 +15,11 @@ import {withLocalizePropTypes} from '../../components/withLocalize';
import * as ValidationUtils from '../../libs/ValidationUtils';
import ONYXKEYS from '../../ONYXKEYS';
import exampleCheckImage from './exampleCheckImage';
-import Form from '../../components/Form';
import shouldDelayFocus from '../../libs/shouldDelayFocus';
import ScreenWrapper from '../../components/ScreenWrapper';
import StepPropTypes from './StepPropTypes';
+import FormProvider from '../../components/Form/FormProvider';
+import InputWrapper from '../../components/Form/InputWrapper';
const propTypes = {
..._.omit(StepPropTypes, _.keys(withLocalizePropTypes)),
@@ -84,7 +85,7 @@ function BankAccountManualStep(props) {
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
onBackButtonPress={props.onBackButtonPress}
/>
-
-
-
-
-
+
);
}
From 241793718d6f274ea70e229b915bee5e4961946c Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 30 Oct 2023 13:18:37 +0100
Subject: [PATCH 2/3] fix CheckboxWithLabel forwardedRef typing
---
src/components/CheckboxWithLabel.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 4bffadecb733..f18ec346dfa2 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -7,6 +7,7 @@ import variables from '@styles/variables';
import Checkbox from './Checkbox';
import FormHelpMessage from './FormHelpMessage';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import refPropTypes from './refPropTypes';
import Text from './Text';
/**
@@ -54,7 +55,7 @@ const propTypes = {
defaultValue: PropTypes.bool,
/** React ref being forwarded to the Checkbox input */
- forwardedRef: PropTypes.func,
+ forwardedRef: refPropTypes,
/** The ID used to uniquely identify the input in a Form */
/* eslint-disable-next-line react/no-unused-prop-types */
From 86c4e977abf67eea8b3d1405295072e90ea8201f Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 20 Nov 2023 13:36:25 +0100
Subject: [PATCH 3/3] fix draft saving
---
src/components/Form/FormProvider.js | 17 +++++++++++++----
1 file changed, 13 insertions(+), 4 deletions(-)
diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js
index e8f8fdc1ea96..27d8a2e2f406 100644
--- a/src/components/Form/FormProvider.js
+++ b/src/components/Form/FormProvider.js
@@ -47,6 +47,9 @@ const propTypes = {
errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
}),
+ /** Contains draft values for each input in the form */
+ draftValues: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.objectOf(Date)])),
+
/** Should the button be enabled when offline */
enabledWhenOffline: PropTypes.bool,
@@ -77,6 +80,7 @@ const defaultProps = {
formState: {
isLoading: false,
},
+ draftValues: {},
enabledWhenOffline: false,
isSubmitActionDangerous: false,
scrollContextEnabled: false,
@@ -100,7 +104,7 @@ function getInitialValueByType(valueType) {
}
}
-function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, onSubmit, ...rest}) {
+function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, draftValues, onSubmit, ...rest}) {
const inputRefs = useRef({});
const touchedInputs = useRef({});
const [inputValues, setInputValues] = useState({});
@@ -208,7 +212,9 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
if (!_.isUndefined(propsToParse.value)) {
inputValues[inputID] = propsToParse.value;
- } else if (propsToParse.shouldUseDefaultValue) {
+ } else if (propsToParse.shouldSaveDraft && !_.isUndefined(draftValues[inputID]) && _.isUndefined(inputValues[inputID])) {
+ inputValues[inputID] = draftValues[inputID];
+ } else if (propsToParse.shouldUseDefaultValue && _.isUndefined(inputValues[inputID])) {
// We force the form to set the input value from the defaultValue props if there is a saved valid value
inputValues[inputID] = propsToParse.defaultValue;
} else if (_.isUndefined(inputValues[inputID])) {
@@ -300,7 +306,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
});
if (propsToParse.shouldSaveDraft) {
- FormActions.setDraftValues(propsToParse.formID, {[inputKey]: value});
+ FormActions.setDraftValues(formID, {[inputKey]: value});
}
if (_.isFunction(propsToParse.onValueChange)) {
@@ -309,7 +315,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
},
};
},
- [errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange],
+ [draftValues, formID, errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange],
);
const value = useMemo(() => ({registerInput}), [registerInput]);
@@ -340,5 +346,8 @@ export default compose(
formState: {
key: (props) => props.formID,
},
+ draftValues: {
+ key: (props) => `${props.formID}Draft`,
+ },
}),
)(FormProvider);