Infra/textfield complete migration (#2806)

* Move text field from incubator to components folder

* Fix usages and imports

* Fix TS

Author: ethanshar

demo/src/screens/SettingsScreen.js

@@ -80,7 +80,6 @@ class SettingsScreen extends Component {
             value={defaultScreen?.value}
             label={'Default Screen'}
             onChange={this.setDefaultScreen}
-            migrateTextField
           >
             {_.map(filteredScreens, screen => (
               <Picker.Item key={screen.value} value={screen.value} label={screen.label}/>

demo/src/screens/componentScreens/DateTimePickerScreen.tsx

@@ -62,14 +62,12 @@ export default class DateTimePickerScreen extends Component<{}, State> {
         <View padding-page>
           <Text text40>Date Time Picker</Text>
           <DateTimePicker
-            migrateTextField
             containerStyle={{marginVertical: 20}}
             label={'Date'}
             placeholder={'Select a date'}
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker
-            migrateTextField
             mode={'time'}
             label={'Time'}
             placeholder={'Select time'}
@@ -80,14 +78,12 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             Disabled
           </Text>
           <DateTimePicker
-            migrateTextField
             containerStyle={{marginBottom: 20}}
             editable={false}
             label={'Date'}
             placeholder={'Select a date'}
           />
           <DateTimePicker
-            migrateTextField
             editable={false}
             mode={'time'}
             label={'Time'}
@@ -108,7 +104,6 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             </View>
           </View>
           <DateTimePicker
-            migrateTextField
             containerStyle={{marginVertical: 20}}
             renderInput={this.renderCustomInput}
             mode={mode}

demo/src/screens/componentScreens/TextFieldScreen.tsx

@@ -59,6 +59,7 @@ export default class TextFieldScreen extends Component {
           <Text h3 blue50 marginV-s4>
             Default
           </Text>
+          {/* @ts-expect-error */}
           <TextField ref={this.input} label="Name" placeholder="Enter full name"/>
 
           <Text h3 blue50 marginV-s4>
@@ -88,6 +89,7 @@ export default class TextFieldScreen extends Component {
           </Text>
 
           <TextField
+            // @ts-expect-error
             ref={this.input2}
             placeholder="Enter search term"
             text70
@@ -97,6 +99,7 @@ export default class TextFieldScreen extends Component {
           />
 
           <TextField
+            // @ts-expect-error
             ref={this.input2}
             placeholder="Enter URL"
             floatingPlaceholder
@@ -111,6 +114,7 @@ export default class TextFieldScreen extends Component {
           />
 
           <TextField
+            // @ts-expect-error
             ref={this.input2}
             placeholder="Enter weight"
             text70
@@ -162,6 +166,7 @@ export default class TextFieldScreen extends Component {
 
           <View row top marginT-s4>
             <TextField
+              // @ts-expect-error
               ref={this.inputWithValidation}
               placeholder="Enter full name"
               validate="required"

src/components/chipsInput/index.tsx

@@ -3,7 +3,7 @@ import {StyleSheet, NativeSyntheticEvent, TextInputKeyPressEventData} from 'reac
 import {isUndefined, map} from 'lodash';
 import {Constants} from '../../commons/new';
 import {useCombinedRefs} from '../../hooks';
-import TextField, {TextFieldProps} from '../../incubator/TextField';
+import TextField, {TextFieldProps} from '../textField';
 import Chip, {ChipProps} from '../chip';
 
 const removeIcon = require('./assets/xSmall.png');

src/components/dateTimePicker/index.tsx

@@ -14,12 +14,11 @@ import {useDidUpdate} from '../../hooks';
 import {Colors} from '../../style';
 import Assets from '../../assets';
 import {Constants, asBaseComponent, BaseComponentInjectedProps} from '../../commons/new';
-import TextField from '../textField/TextFieldMigrator';
+import TextField, {TextFieldProps, TextFieldMethods} from '../textField';
 import {DialogProps} from '../dialog';
 import View from '../view';
 import Button from '../button';
 import ExpandableOverlay, {ExpandableOverlayMethods, RenderCustomOverlayProps} from '../../incubator/expandableOverlay';
-import type {TextFieldProps, TextFieldMethods} from '../../incubator/TextField';
 import useOldApi, {OldApiProps} from './useOldApi';
 
 export type DateTimePickerMode = 'date' | 'time';
@@ -91,10 +90,6 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
    * The component testID
    */
   testID?: string;
-  /**
-   * Should migrate to the new TextField implementation
-   */
-  migrateTextField?: boolean;
 };
 
 type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
@@ -131,7 +126,6 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     dialogProps,
     headerStyle,
     testID,
-    migrateTextField = true,
     ...others
   } = props;
 
@@ -315,11 +309,8 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
             {...others}
             // @ts-expect-error
             ref={textField}
-            migrate={migrateTextField}
             testID={testID}
             editable={editable}
-            // @ts-expect-error should be remove after completing TextField migration
-            expandable={migrateTextField ? undefined : !!others.renderExpandableInput}
             value={getStringValue()}
           />
         )}

src/components/numberInput/NumberInput.driver.ts

@@ -1,6 +1,6 @@
 import {NumberInputProps} from './index';
 import {ComponentDriver, ComponentDriverArgs} from '../../testkit/Component.driver';
-import {TextFieldDriver} from '../../incubator/TextField/TextField.driver';
+import {TextFieldDriver} from '../textField/TextField.driver';
 
 export class NumberInputDriver extends ComponentDriver<NumberInputProps> {
   private readonly maskedInputDriver: TextFieldDriver;

src/components/numberInput/index.tsx

@@ -4,7 +4,7 @@ import {StyleSheet, StyleProp, ViewStyle, TextStyle} from 'react-native';
 import {useDidUpdate, useThemeProps} from '../../hooks';
 import {Colors} from '../../style';
 import MaskedInput from '../maskedInput/new';
-import TextField, {TextFieldProps, TextFieldRef} from '../../incubator/TextField';
+import TextField, {TextFieldProps, TextFieldRef} from '../textField';
 import View from '../view';
 import Text from '../text';
 import {parseInput, generateOptions, getInitialNumber, Options, NumberInputData} from './Presenter';

src/components/picker/helpers/useImperativePickerHandle.ts

@@ -1,6 +1,6 @@
 import React, {useImperativeHandle, useRef} from 'react';
 import {ExpandableOverlayMethods} from '../../../incubator/expandableOverlay';
-import {TextFieldMethods} from '../../../incubator/TextField';
+import {TextFieldMethods} from '../../textField';
 
 const useImperativePickerHandle = (ref: React.Ref<any>,
   expandableRef: React.MutableRefObject<ExpandableOverlayMethods | null>) => {

src/components/picker/index.tsx

@@ -11,9 +11,7 @@ import {Typography} from 'style';
 import {useThemeProps} from 'hooks';
 import {Constants} from '../../commons/new';
 import ExpandableOverlay, {ExpandableOverlayProps, ExpandableOverlayMethods} from '../../incubator/expandableOverlay';
-// @ts-expect-error
-import {TextField} from '../inputs';
-import TextFieldMigrator from '../textField/TextFieldMigrator';
+import TextField from '../textField';
 import Icon from '../icon';
 import View from '../view';
 import Text from '../text';
@@ -87,7 +85,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     useSafeArea,
     // TODO: Remove migrate props and migrate code
     migrate = true,
-    migrateTextField = true,
     accessibilityLabel,
     accessibilityHint,
     items: propItems,
@@ -301,9 +298,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
           // @ts-expect-error - hopefully will be solved after the picker migration ends
           renderPicker(value, label)
         ) : (
-          <TextFieldMigrator
-            migrate={migrateTextField}
-            // customWarning="RNUILib Picker component's internal TextField will soon be replaced with a new implementation, in order to start the migration - please pass to Picker the 'migrateTextField' prop"
+          <TextField
             // @ts-expect-error
             ref={pickerRef}
             // {...textInputProps}
@@ -321,7 +316,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
             // topBarProps={undefined}
           >
             {renderPickerInnerInput()}
-          </TextFieldMigrator>
+          </TextField>
         )}
       </ExpandableOverlay>
     </PickerContext.Provider>
@@ -331,7 +326,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
 // @ts-expect-error
 Picker.Item = PickerItem;
 Picker.defaultProps = {
-  ...TextField.defaultProps,
   mode: PickerModes.SINGLE
 };
 Picker.displayName = 'Picker';

src/components/picker/types.tsx

@@ -4,7 +4,7 @@ import {ExpandableOverlayProps, ExpandableOverlayMethods} from '../../incubator/
 import {ModalTopBarProps} from '../modal/TopBar';
 // TODO: Replace with new TextField Props after migration to new TextField has completed
 // import {TextFieldProps} from '../../../typings/components/Inputs';
-import {TextFieldMethods, TextFieldProps as NewTextFieldProps} from '../../incubator/TextField';
+import {TextFieldMethods, TextFieldProps as NewTextFieldProps} from '../textField';
 import {TouchableOpacityProps} from '../touchableOpacity';
 
 // Note: enum values are uppercase due to legacy
@@ -54,10 +54,6 @@ export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> & {
    * Temporary prop required for migration to Picker's new API
    */
   migrate?: boolean;
-  /**
-   * Temporary prop required for inner text field migration
-   */
-  migrateTextField?: boolean;
   /**
    * Pass for different field type UI (form, filter or settings)
    */

src/incubator/TextField/CharCounter.tsx renamed to src/components/textField/CharCounter.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import {StyleSheet} from 'react-native';
 import _ from 'lodash';
-import Text from '../../components/text';
+import Text from '../text';
 import FieldContext from './FieldContext';
 import {CharCounterProps} from './types';
 

src/incubator/TextField/FieldContext.ts renamed to src/components/textField/FieldContext.ts

@@ -5,8 +5,8 @@ import {FloatingPlaceholderProps, ValidationMessagePosition} from './types';
 import {getColorByState, shouldPlaceholderFloat} from './Presenter';
 import {Colors} from '../../style';
 import {Constants} from '../../commons/new';
-import View from '../../components/view';
-import Text from '../../components/text';
+import View from '../view';
+import Text from '../text';
 import FieldContext from './FieldContext';
 
 const FLOATING_PLACEHOLDER_SCALE = 0.875;

src/incubator/TextField/FloatingPlaceholder.tsx renamed to src/components/textField/FloatingPlaceholder.tsx

@@ -1,7 +1,7 @@
 import React, {useContext, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import {Colors} from '../../style';
-import Text from '../../components/text';
+import Text from '../text';
 import {ColorType, LabelProps, ValidationMessagePosition} from './types';
 import {getColorByState} from './Presenter';
 import FieldContext from './FieldContext';

src/incubator/TextField/Input.tsx renamed to src/components/textField/Input.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import {Colors} from './../../style';
+import {Colors} from '../../style';
 import {ColorType, Validator, FieldContextType, FloatingPlaceholderProps} from './types';
 // TODO: Fix this import after moving all TextField types to a single file after we move to the new docs
 import {TextFieldProps} from './index';

src/incubator/TextField/Label.tsx renamed to src/components/textField/Label.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import {TextFieldProps} from './types';
 import {ComponentDriver, ComponentDriverArgs} from '../../testkit/Component.driver';
-import {TextDriver} from '../../components/text/Text.driver';
+import {TextDriver} from '../text/Text.driver';
 
 
 export class TextFieldDriver extends ComponentDriver<TextFieldProps> {

src/incubator/TextField/Presenter.ts renamed to src/components/textField/Presenter.ts

@@ -1,6 +1,6 @@
 import React, {useContext, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
-import Text from '../../components/text';
+import Text from '../text';
 import FieldContext from './FieldContext';
 import {getRelevantValidationMessage} from './Presenter';
 import {ValidationMessageProps} from './types';