Initiate TextField migration in DateTimePicker

Author: ethanshar

demo/src/screens/componentScreens/DateTimePickerScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {DateTimePicker, DateTimePickerProps, View, Text, TouchableOpacity} from 'react-native-ui-lib'; // eslint-disable-line
+import {DateTimePicker, DateTimePickerProps, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
 
 export default class DateTimePickerScreen extends Component {
   getCustomInputValue = (value?: string) => {
@@ -27,16 +27,17 @@ export default class DateTimePickerScreen extends Component {
         <View padding-page>
           <Text text40>Date Time Picker</Text>
           <DateTimePicker
-            // @ts-expect-error
+            migrateTextField
             containerStyle={{marginVertical: 20}}
-            title={'Date'}
+            label={'Date'}
             placeholder={'Select a date'}
             // dateFormat={'MMM D, YYYY'}
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker
+            migrateTextField
             mode={'time'}
-            title={'Time'}
+            label={'Time'}
             placeholder={'Select time'}
             // timeFormat={'h:mm A'}
             // value={new Date('2015-03-25T12:00:00-06:30')}
@@ -46,24 +47,27 @@ export default class DateTimePickerScreen extends Component {
             Disabled
           </Text>
           <DateTimePicker
+            migrateTextField
             containerStyle={{marginBottom: 20}}
             editable={false}
-            title={'Date'}
+            label={'Date'}
             placeholder={'Select a date'}
           />
           <DateTimePicker
+            migrateTextField
             editable={false}
             mode={'time'}
-            title={'Time'}
+            label={'Time'}
             placeholder={'Select time'}
             value={new Date('2015-03-25T12:00:00-06:30')}
           />
           <Text text60R marginT-40>
             Custom Input
           </Text>
           <DateTimePicker
+            migrateTextField
             containerStyle={{marginVertical: 20}}
-            title={'Date'}
+            label={'Date'}
             placeholder={'Select a date'}
             renderInput={this.renderCustomInput}
             dateFormat={'MMM D, YYYY'}

src/components/dateTimePicker/index.tsx

@@ -6,31 +6,19 @@ import {useDidUpdate} from 'hooks';
 import {Colors} from '../../style';
 import Assets from '../../assets';
 import {Constants, asBaseComponent, BaseComponentInjectedProps} from '../../commons/new';
-import TextField from '../textField';
+import TextField from '../textField/TextFieldMigrator';
 import {DialogProps} from '../dialog';
 import View from '../view';
 import Button from '../button';
 import ExpandableOverlay, {ExpandableOverlayMethods, RenderCustomOverlayProps} from '../../incubator/expandableOverlay';
+import type {TextFieldProps} from '../../incubator/TextField';
 
 const MODES = {
   DATE: 'date',
   TIME: 'time'
 };
 
-/*eslint-disable*/
-/**
- * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
- * @important: DateTimePicker uses a native library. You MUST add and link the native library to both iOS and Android projects.
- * @extends: TextField, react-native-community/datetimepicker
- * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
- */
-/*eslint-enable*/
-
-export interface DateTimePickerProps {
-  // TODO: extend TextField props
-  // ...TextField.propTypes,
+export type DateTimePickerProps = Omit<TextFieldProps, 'value' | 'onChange'> & {
   /**
    * The type of picker to display ('date' or 'time')
    */
@@ -107,10 +95,25 @@ export interface DateTimePickerProps {
    * The component testID
    */
   testID?: string;
+  /**
+   * Should migrate to the new TextField implementation
+   */
+  migrateTextField?: boolean;
 }
 
 type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
 
+
+/*eslint-disable*/
+/**
+ * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
+ * @important: DateTimePicker uses a native library. You MUST add and link the native library to both iOS and Android projects.
+ * @extends: TextField, react-native-community/datetimepicker
+ * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
+ */
+/*eslint-enable*/
 function DateTimePicker(props: DateTimePickerPropsInternal) {
   const {
     value: propsValue,
@@ -134,6 +137,7 @@ function DateTimePicker(props: DateTimePickerPropsInternal) {
     // @ts-expect-error
     useCustomTheme,
     testID,
+    migrateTextField,
     ...others
   } = props;
 
@@ -295,9 +299,9 @@ function DateTimePicker(props: DateTimePickerPropsInternal) {
         {renderInput ? (
           renderInput({...props, value: getStringValue()})
         ) : (
-          /* @ts-expect-error */
           <TextField
             {...others}
+            migrate={migrateTextField}
             testID={testID}
             editable={editable}
             // @ts-expect-error should be remove after completing TextField migration