Merge pull request #32440 from Expensify/revert-30996-kowczarz/room-n…

…ame-page-migration-fixes

(cherry picked from commit ba78fbc)

src/components/Form/FormProvider.js

@@ -237,8 +237,6 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                     .first()
                     .value() || '';
 
-            const value = !_.isUndefined(inputValues[`${inputID}ToDisplay`]) ? inputValues[`${inputID}ToDisplay`] : inputValues[inputID];
-
             return {
                 ...propsToParse,
                 ref:
@@ -251,7 +249,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                 inputID,
                 key: propsToParse.key || inputID,
                 errorText: errors[inputID] || fieldErrorMessage,
-                value,
+                value: inputValues[inputID],
                 // As the text input is controlled, we never set the defaultValue prop
                 // as this is already happening by the value prop.
                 defaultValue: undefined,
@@ -311,19 +309,13 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                         propsToParse.onBlur(event);
                     }
                 },
-                onInputChange: (inputValue, key) => {
+                onInputChange: (value, key) => {
                     const inputKey = key || inputID;
                     setInputValues((prevState) => {
-                        const newState = _.isFunction(propsToParse.valueParser)
-                            ? {
-                                  ...prevState,
-                                  [inputKey]: propsToParse.valueParser(inputValue),
-                                  [`${inputKey}ToDisplay`]: _.isFunction(propsToParse.displayParser) ? propsToParse.displayParser(inputValue) : inputValue,
-                              }
-                            : {
-                                  ...prevState,
-                                  [inputKey]: inputValue,
-                              };
+                        const newState = {
+                            ...prevState,
+                            [inputKey]: value,
+                        };
 
                         if (shouldValidateOnChange) {
                             onValidate(newState);
@@ -336,7 +328,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                     }
 
                     if (_.isFunction(propsToParse.onValueChange)) {
-                        propsToParse.onValueChange(inputValue, inputKey);
+                        propsToParse.onValueChange(value, inputKey);
                     }
                 },
             };

src/components/Form/InputWrapper.js

@@ -9,15 +9,11 @@ const propTypes = {
     inputID: PropTypes.string.isRequired,
     valueType: PropTypes.string,
     forwardedRef: refPropTypes,
-    valueParser: PropTypes.func,
-    displayParser: PropTypes.func,
 };
 
 const defaultProps = {
     forwardedRef: undefined,
     valueType: 'string',
-    valueParser: undefined,
-    displayParser: undefined,
 };
 
 function InputWrapper(props) {

src/components/RoomNameInput/index.js

@@ -1,43 +1,68 @@
-import React from 'react';
-import InputWrapper from '@components/Form/InputWrapper';
+import React, {useState} from 'react';
+import _ from 'underscore';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
-import getOperatingSystem from '@libs/getOperatingSystem';
 import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
 import CONST from '@src/CONST';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, onBlur, shouldDelayFocus, inputID, roomName}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
     const {translate} = useLocalize();
 
-    const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
+    const [selection, setSelection] = useState();
 
-    const valueParser = (innerRoomName) => RoomNameInputUtils.modifyRoomName(innerRoomName);
-    const displayParser = (innerRoomName) => RoomNameInputUtils.modifyRoomName(innerRoomName, true);
+    /**
+     * Calls the onChangeText callback with a modified room name
+     * @param {Event} event
+     */
+    const setModifiedRoomName = (event) => {
+        const roomName = event.nativeEvent.text;
+        const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
+        onChangeText(modifiedRoomName);
+
+        // if custom component has onInputChange, use it to trigger changes (Form input)
+        if (_.isFunction(onInputChange)) {
+            onInputChange(modifiedRoomName);
+        }
+
+        // Prevent cursor jump behaviour:
+        // Check if newRoomNameWithHash is the same as modifiedRoomName
+        // If it is then the room name is valid (does not contain unallowed characters); no action required
+        // If not then the room name contains unvalid characters and we must adjust the cursor position manually
+        // Read more: https://github.com/Expensify/App/issues/12741
+        const oldRoomNameWithHash = value || '';
+        const newRoomNameWithHash = `${CONST.POLICY.ROOM_PREFIX}${roomName}`;
+        if (modifiedRoomName !== newRoomNameWithHash) {
+            const offset = modifiedRoomName.length - oldRoomNameWithHash.length;
+            const newSelection = {
+                start: selection.start + offset,
+                end: selection.end + offset,
+            };
+            setSelection(newSelection);
+        }
+    };
 
     return (
-        <InputWrapper
-            InputComponent={TextInput}
-            inputID={inputID}
+        <TextInput
             ref={forwardedRef}
             disabled={disabled}
             label={translate('newRoomPage.roomName')}
             accessibilityLabel={translate('newRoomPage.roomName')}
             role={CONST.ACCESSIBILITY_ROLE.TEXT}
             prefixCharacter={CONST.POLICY.ROOM_PREFIX}
             placeholder={translate('newRoomPage.social')}
+            onChange={setModifiedRoomName}
+            value={value.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice.
+            selection={selection}
+            onSelectionChange={(event) => setSelection(event.nativeEvent.selection)}
             errorText={errorText}
-            valueParser={valueParser}
-            displayParser={displayParser}
             autoCapitalize="none"
             onBlur={(event) => isFocused && onBlur(event)}
             shouldDelayFocus={shouldDelayFocus}
             autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
-            defaultValue={roomName}
             spellCheck={false}
             shouldInterceptSwipe
-            keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
         />
     );
 }

src/components/RoomNameInput/index.native.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import _ from 'underscore';
+import TextInput from '@components/TextInput';
+import useLocalize from '@hooks/useLocalize';
+import getOperatingSystem from '@libs/getOperatingSystem';
+import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
+import CONST from '@src/CONST';
+import * as roomNameInputPropTypes from './roomNameInputPropTypes';
+
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+    const {translate} = useLocalize();
+
+    /**
+     * Calls the onChangeText callback with a modified room name
+     * @param {Event} event
+     */
+    const setModifiedRoomName = (event) => {
+        const roomName = event.nativeEvent.text;
+        const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
+        onChangeText(modifiedRoomName);
+
+        // if custom component has onInputChange, use it to trigger changes (Form input)
+        if (_.isFunction(onInputChange)) {
+            onInputChange(modifiedRoomName);
+        }
+    };
+
+    const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
+
+    return (
+        <TextInput
+            ref={forwardedRef}
+            disabled={disabled}
+            label={translate('newRoomPage.roomName')}
+            accessibilityLabel={translate('newRoomPage.roomName')}
+            role={CONST.ACCESSIBILITY_ROLE.TEXT}
+            prefixCharacter={CONST.POLICY.ROOM_PREFIX}
+            placeholder={translate('newRoomPage.social')}
+            onChange={setModifiedRoomName}
+            value={value.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice.
+            errorText={errorText}
+            maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
+            keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
+            onBlur={(event) => isFocused && onBlur(event)}
+            autoFocus={isFocused && autoFocus}
+            autoCapitalize="none"
+            shouldDelayFocus={shouldDelayFocus}
+        />
+    );
+}
+
+RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
+RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
+RoomNameInput.displayName = 'RoomNameInput';
+
+const RoomNameInputWithRef = React.forwardRef((props, ref) => (
+    <RoomNameInput
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));
+
+RoomNameInputWithRef.displayName = 'RoomNameInputWithRef';
+
+export default RoomNameInputWithRef;

src/components/RoomNameInput/roomNameInputPropTypes.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import refPropTypes from '@components/refPropTypes';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -15,10 +14,10 @@ const propTypes = {
     errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]),
 
     /** A ref forwarded to the TextInput */
-    forwardedRef: refPropTypes,
+    forwardedRef: PropTypes.func,
 
     /** The ID used to uniquely identify the input in a Form */
-    inputID: PropTypes.string.isRequired,
+    inputID: PropTypes.string,
 
     /** Callback that is called when the text input is blurred */
     onBlur: PropTypes.func,
@@ -31,8 +30,6 @@ const propTypes = {
 
     /** Whether navigation is focused */
     isFocused: PropTypes.bool.isRequired,
-
-    roomName: PropTypes.string,
 };
 
 const defaultProps = {
@@ -42,10 +39,10 @@ const defaultProps = {
     errorText: '',
     forwardedRef: () => {},
 
+    inputID: undefined,
     onBlur: () => {},
     autoFocus: false,
     shouldDelayFocus: false,
-    roomName: '',
 };
 
 export {propTypes, defaultProps};

src/libs/RoomNameInputUtils.ts

@@ -3,14 +3,14 @@ import CONST from '@src/CONST';
 /**
  * Replaces spaces with dashes
  */
-function modifyRoomName(roomName: string, skipPolicyPrefix?: boolean): string {
+function modifyRoomName(roomName: string): string {
     const modifiedRoomNameWithoutHash = roomName
         .replace(/ /g, '-')
 
         // Replaces the smart dash on iOS devices with two hyphens
         .replace(/—/g, '--');
 
-    return skipPolicyPrefix ? modifiedRoomNameWithoutHash : `${CONST.POLICY.ROOM_PREFIX}${modifiedRoomNameWithoutHash}`;
+    return `${CONST.POLICY.ROOM_PREFIX}${modifiedRoomNameWithoutHash}`;
 }
 
 export {

src/pages/settings/Report/RoomNamePage.js

@@ -4,7 +4,7 @@ import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import FormProvider from '@components/Form/FormProvider';
+import Form from '@components/Form';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import RoomNameInput from '@components/RoomNameInput';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -42,8 +42,13 @@ const defaultProps = {
     policy: {},
 };
 
-function RoomNamePage({policy, report, reports, translate}) {
+function RoomNamePage(props) {
     const styles = useThemeStyles();
+    const policy = props.policy;
+    const report = props.report;
+    const reports = props.reports;
+    const translate = props.translate;
+
     const roomNameInputRef = useRef(null);
     const isFocused = useIsFocused();
 
@@ -86,7 +91,7 @@ function RoomNamePage({policy, report, reports, translate}) {
                     title={translate('newRoomPage.roomName')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report.reportID))}
                 />
-                <FormProvider
+                <Form
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.ROOM_NAME_FORM}
                     onSubmit={(values) => Report.updatePolicyRoomNameAndNavigate(report, values.roomName)}
@@ -96,14 +101,13 @@ function RoomNamePage({policy, report, reports, translate}) {
                 >
                     <View style={styles.mb4}>
                         <RoomNameInput
-                            ref={roomNameInputRef}
+                            ref={(ref) => (roomNameInputRef.current = ref)}
                             inputID="roomName"
                             defaultValue={report.reportName}
                             isFocused={isFocused}
-                            roomName={report.reportName.slice(1)}
                         />
                     </View>
-                </FormProvider>
+                </Form>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -4,8 +4,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapper from '@components/Form/InputWrapper';
+import Form from '@components/Form';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import RoomNameInput from '@components/RoomNameInput';
@@ -182,7 +181,7 @@ function WorkspaceNewRoomPage(props) {
                         // This is because when wrapping whole screen the screen was freezing when changing Tabs.
                         keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                     >
-                        <FormProvider
+                        <Form
                             formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
                             submitButtonText={translate('newRoomPage.createRoom')}
                             style={[styles.mh5, styles.flexGrow1]}
@@ -200,8 +199,7 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={styles.mb5}>
-                                <InputWrapper
-                                    InputComponent={TextInput}
+                                <TextInput
                                     inputID="welcomeMessage"
                                     label={translate('welcomeMessagePage.welcomeMessageOptional')}
                                     accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
@@ -214,8 +212,7 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={[styles.mhn5]}>
-                                <InputWrapper
-                                    InputComponent={ValuePicker}
+                                <ValuePicker
                                     inputID="policyID"
                                     label={translate('workspace.common.workspace')}
                                     items={workspaceOptions}
@@ -224,8 +221,7 @@ function WorkspaceNewRoomPage(props) {
                             </View>
                             {isPolicyAdmin && (
                                 <View style={styles.mhn5}>
-                                    <InputWrapper
-                                        InputComponent={ValuePicker}
+                                    <ValuePicker
                                         inputID="writeCapability"
                                         label={translate('writeCapabilityPage.label')}
                                         items={writeCapabilityOptions}
@@ -235,8 +231,7 @@ function WorkspaceNewRoomPage(props) {
                                 </View>
                             )}
                             <View style={[styles.mb1, styles.mhn5]}>
-                                <InputWrapper
-                                    InputComponent={ValuePicker}
+                                <ValuePicker
                                     inputID="visibility"
                                     label={translate('newRoomPage.visibility')}
                                     items={visibilityOptions}
@@ -245,7 +240,7 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                        </FormProvider>
+                        </Form>
                         {isSmallScreenWidth && <OfflineIndicator />}
                     </KeyboardAvoidingView>
                 )}