Merge pull request #30355 from software-mansion-labs/form-refactor/wo…

…rkspace-settings-page [Form Provider Refactor] WorkspaceSettingsPage
Expensify · Nov 6, 2023 · 8d6e85a · 8d6e85a
2 parents 9dfe8d9 + 26edafa
commit 8d6e85a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js
@@ -56,6 +56,9 @@ const propTypes = {
     /** Container styles */
     style: stylePropTypes,
 
+    /** Submit button styles */
+    submitButtonStyles: stylePropTypes,
+
     /** Custom content to display in the footer after submit button */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
@@ -74,10 +77,25 @@ const defaultProps = {
     scrollContextEnabled: false,
     footerContent: null,
     style: [],
+    submitButtonStyles: [],
 };
 
 function FormWrapper(props) {
-    const {onSubmit, children, formState, errors, inputRefs, submitButtonText, footerContent, isSubmitButtonVisible, style, enabledWhenOffline, isSubmitActionDangerous, formID} = props;
+    const {
+        onSubmit,
+        children,
+        formState,
+        errors,
+        inputRefs,
+        submitButtonText,
+        footerContent,
+        isSubmitButtonVisible,
+        style,
+        submitButtonStyles,
+        enabledWhenOffline,
+        isSubmitActionDangerous,
+        formID,
+    } = props;
     const formRef = useRef(null);
     const formContentRef = useRef(null);
     const errorMessage = useMemo(() => {
@@ -129,7 +147,7 @@ function FormWrapper(props) {
                                 focusInput.focus();
                             }
                         }}
-                        containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
+                        containerStyles={[styles.mh0, styles.mt5, styles.flex1, ...submitButtonStyles]}
                         enabledWhenOffline={enabledWhenOffline}
                         isSubmitActionDangerous={isSubmitActionDangerous}
                         disablePressOnEnter
@@ -151,6 +169,7 @@ function FormWrapper(props) {
             isSubmitButtonVisible,
             onSubmit,
             style,
+            submitButtonStyles,
             submitButtonText,
         ],
     );

diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -6,7 +6,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Avatar from '@components/Avatar';
 import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -98,7 +99,7 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
         >
             {(hasVBA) => (
-                <Form
+                <FormProvider
                     formID={ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM}
                     submitButtonText={translate('workspace.editor.save')}
                     style={[styles.flexGrow1, styles.ph5]}
@@ -139,14 +140,15 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
                         originalFileName={policy.originalFileName}
                     />
                     <OfflineWithFeedback pendingAction={lodashGet(policy, 'pendingFields.generalSettings')}>
-                        <TextInput
+                        <InputWrapper
+                            InputComponent={TextInput}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             inputID="name"
                             label={translate('workspace.editor.nameInputLabel')}
                             accessibilityLabel={translate('workspace.editor.nameInputLabel')}
-                            containerStyles={[styles.mt4]}
                             defaultValue={policy.name}
                             maxLength={CONST.WORKSPACE_NAME_CHARACTER_LIMIT}
+                            containerStyles={[styles.mt4]}
                             spellCheck={false}
                         />
                         <View style={[styles.mt4, styles.mhn5]}>
@@ -162,7 +164,7 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
                             </Text>
                         </View>
                     </OfflineWithFeedback>
-                </Form>
+                </FormProvider>
             )}
         </WorkspacePageWithSections>
     );