[Form Provider Refactor] RoomNameInput

src/components/Form/FormProvider.js

@@ -229,13 +229,15 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
  .first()
  .value() || '';
 
+ const value = !_.isUndefined(inputValues[`${inputID}ToDisplay`]) ? inputValues[`${inputID}ToDisplay`] : inputValues[inputID];
+
  return {
  ...propsToParse,
  ref: newRef,
  inputID,
  key: propsToParse.key || inputID,
  errorText: errors[inputID] || fieldErrorMessage,
- value: inputValues[inputID],
+ value,
  // As the text input is controlled, we never set the defaultValue prop
  // as this is already happening by the value prop.
  defaultValue: undefined,
@@ -275,13 +277,19 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
  propsToParse.onBlur(event);
  }
  },
- onInputChange: (value, key) => {
+ onInputChange: (inputValue, key) => {
  const inputKey = key || inputID;
  setInputValues((prevState) => {
- const newState = {
- ...prevState,
- [inputKey]: value,
- };
+ const newState = _.isFunction(propsToParse.valueParser)
+ ? {
+ ...prevState,
+ [inputKey]: propsToParse.valueParser(inputValue),
+ [`${inputKey}ToDisplay`]: inputValue,
+ }
+ : {
+ ...prevState,
+ [inputKey]: inputValue,
+ };
 
  if (shouldValidateOnChange) {
  onValidate(newState);
@@ -290,11 +298,11 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
  });
 
  if (propsToParse.shouldSaveDraft) {
- FormActions.setDraftValues(propsToParse.formID, {[inputKey]: value});
+ FormActions.setDraftValues(propsToParse.formID, {[inputKey]: inputValue});
  }
 
  if (_.isFunction(propsToParse.onValueChange)) {
- propsToParse.onValueChange(value, inputKey);
+ propsToParse.onValueChange(inputValue, inputKey);
  }
  },
  };

src/components/Form/InputWrapper.js

@@ -7,11 +7,13 @@ const propTypes = {
  inputID: PropTypes.string.isRequired,
  valueType: PropTypes.string,
  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+ valueParser: PropTypes.func,
 };
 
 const defaultProps = {
  forwardedRef: undefined,
  valueType: 'string',
+ valueParser: undefined,
 };
 
 function InputWrapper(props) {

src/components/RoomNameInput/index.js

@@ -1,68 +1,40 @@
-import React, {useState} from 'react';
-import _ from 'underscore';
+import React from 'react';
 import CONST from '../../CONST';
 import TextInput from '../TextInput';
 import useLocalize from '../../hooks/useLocalize';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
+import InputWrapper from '../Form/InputWrapper';
+import getOperatingSystem from '../../libs/getOperatingSystem';
 import * as RoomNameInputUtils from '../../libs/RoomNameInputUtils';
 
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, onBlur, shouldDelayFocus, inputID}) {
  const {translate} = useLocalize();
 
- const [selection, setSelection] = useState();
+ const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
 
- /**
- * 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);
- }
- };
+ const valueParser = (roomName) => RoomNameInputUtils.modifyRoomName(roomName);
 
  return (
- <TextInput
+ <InputWrapper
+ InputComponent={TextInput}
+ inputID={inputID}
  ref={forwardedRef}
  disabled={disabled}
  label={translate('newRoomPage.roomName')}
  accessibilityLabel={translate('newRoomPage.roomName')}
  accessibilityRole={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}
  autoCapitalize="none"
  onBlur={() => isFocused && onBlur()}
  shouldDelayFocus={shouldDelayFocus}
  autoFocus={isFocused && autoFocus}
  maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
  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/roomNameInputPropTypes.js

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

src/pages/settings/Report/RoomNamePage.js

@@ -7,7 +7,6 @@ import CONST from '../../../CONST';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Form from '../../../components/Form';
 import ONYXKEYS from '../../../ONYXKEYS';
 import styles from '../../../styles/styles';
 import Navigation from '../../../libs/Navigation/Navigation';
@@ -21,6 +20,7 @@ import * as Report from '../../../libs/actions/Report';
 import RoomNameInput from '../../../components/RoomNameInput';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView';
+import FormProvider from '../../../components/Form/FormProvider';
 
 const propTypes = {
  ...withLocalizePropTypes,
@@ -90,7 +90,7 @@ function RoomNamePage(props) {
  title={translate('newRoomPage.roomName')}
  onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report.reportID))}
  />
- <Form
+ <FormProvider
  style={[styles.flexGrow1, styles.ph5]}
  formID={ONYXKEYS.FORMS.ROOM_NAME_FORM}
  onSubmit={(values) => Report.updatePolicyRoomNameAndNavigate(report, values.roomName)}
@@ -100,13 +100,13 @@ function RoomNamePage(props) {
  >
  <View style={styles.mb4}>
  <RoomNameInput
- ref={(ref) => (roomNameInputRef.current = ref)}
+ ref={roomNameInputRef}
  inputID="roomName"
  defaultValue={report.reportName}
  isFocused={isFocused}
  />
  </View>
- </Form>
+ </FormProvider>
  </FullPageNotFoundView>
  </ScreenWrapper>
  );

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -20,13 +20,14 @@ import * as ErrorUtils from '../../libs/ErrorUtils';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as PolicyUtils from '../../libs/PolicyUtils';
-import Form from '../../components/Form';
 import policyMemberPropType from '../policyMemberPropType';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import compose from '../../libs/compose';
 import variables from '../../styles/variables';
 import useDelayedInputFocus from '../../hooks/useDelayedInputFocus';
 import ValuePicker from '../../components/ValuePicker';
+import FormProvider from '../../components/Form/FormProvider';
+import InputWrapper from '../../components/Form/InputWrapper';
 
 const propTypes = {
  /** All reports shared with the user */
@@ -183,7 +184,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}
  >
- <Form
+ <FormProvider
  formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
  submitButtonText={translate('newRoomPage.createRoom')}
  style={[styles.mh5, styles.flexGrow1]}
@@ -193,15 +194,16 @@ function WorkspaceNewRoomPage(props) {
  >
  <View style={styles.mb5}>
  <RoomNameInput
- ref={(el) => (roomNameInputRef.current = el)}
+ ref={roomNameInputRef}
  inputID="roomName"
  isFocused={props.isFocused}
  shouldDelayFocus
  autoFocus
  />
  </View>
  <View style={styles.mb5}>
- <TextInput
+ <InputWrapper
+ InputComponent={TextInput}
  inputID="welcomeMessage"
  label={translate('welcomeMessagePage.welcomeMessageOptional')}
  accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
@@ -214,7 +216,8 @@ function WorkspaceNewRoomPage(props) {
  />
  </View>
  <View style={[styles.mhn5]}>
- <ValuePicker
+ <InputWrapper
+ InputComponent={ValuePicker}
  inputID="policyID"
  label={translate('workspace.common.workspace')}
  items={workspaceOptions}
@@ -223,7 +226,8 @@ function WorkspaceNewRoomPage(props) {
  </View>
  {isPolicyAdmin && (
  <View style={styles.mhn5}>
- <ValuePicker
+ <InputWrapper
+ InputComponent={ValuePicker}
  inputID="writeCapability"
  label={translate('writeCapabilityPage.label')}
  items={writeCapabilityOptions}
@@ -233,7 +237,8 @@ function WorkspaceNewRoomPage(props) {
  </View>
  )}
  <View style={[styles.mb1, styles.mhn5]}>
- <ValuePicker
+ <InputWrapper
+ InputComponent={ValuePicker}
  inputID="visibility"
  label={translate('newRoomPage.visibility')}
  items={visibilityOptions}
@@ -242,7 +247,7 @@ function WorkspaceNewRoomPage(props) {
  />
  </View>
  <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
- </Form>
+ </FormProvider>
  </KeyboardAvoidingView>
  )}
  </ScreenWrapper>