Merge pull request #30167 from software-mansion-labs/form-migration/N…

…ewTaskTitlePage [Form Provider Refactor] NewTaskTitlePage
Expensify · Oct 30, 2023 · c54cbdd · c54cbdd
2 parents b321b0a + 055d5da
commit c54cbdd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/components/Form/InputWrapper.js b/src/components/Form/InputWrapper.js
@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React, {forwardRef, useContext} from 'react';
+import refPropTypes from '@components/refPropTypes';
 import FormContext from './FormContext';
 
 const propTypes = {
     InputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.elementType]).isRequired,
     inputID: PropTypes.string.isRequired,
     valueType: PropTypes.string,
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
 };
 
 const defaultProps = {

diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapperWithRef from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
@@ -79,7 +80,7 @@ function NewTaskTitlePage(props) {
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK)}
             />
-            <Form
+            <FormProvider
                 formID={ONYXKEYS.FORMS.NEW_TASK_FORM}
                 submitButtonText={props.translate('common.next')}
                 style={[styles.mh5, styles.flexGrow1]}
@@ -88,7 +89,8 @@ function NewTaskTitlePage(props) {
                 enabledWhenOffline
             >
                 <View style={styles.mb5}>
-                    <TextInput
+                    <InputWrapperWithRef
+                        InputComponent={TextInput}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         defaultValue={props.task.title}
                         ref={inputCallbackRef}
@@ -97,7 +99,7 @@ function NewTaskTitlePage(props) {
                         accessibilityLabel={props.translate('task.title')}
                     />
                 </View>
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }