Support custom passing children as custom input in Incubator.TextField (#1518)

Author: ethanshar

generatedTypes/src/incubator/TextField/index.d.ts

@@ -5,7 +5,7 @@
  * 3. Passing typography preset that includes lineHeight usually cause alignment issues with
  * other elements (leading/trailing accessories). It usually best to set lineHeight with undefined
  */
-import React, { ReactElement } from 'react';
+import React, { PropsWithChildren, ReactElement } from 'react';
 import { ViewStyle, TextStyle } from 'react-native';
 import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers } from '../../commons/new';
 import { ValidationMessagePosition, Validator } from './types';
@@ -70,7 +70,7 @@ export declare type TextFieldProps = MarginModifiers & PaddingModifiers & Typogr
      */
     preset?: 'default' | null;
 };
-export declare type InternalTextFieldProps = TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
+export declare type InternalTextFieldProps = PropsWithChildren<TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps>;
 interface StaticMembers {
     validationMessagePositions: typeof ValidationMessagePosition;
 }

generatedTypes/src/incubator/TextField/usePreset.d.ts

@@ -162,6 +162,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
     forwardedRef: any;
+    children?: import("react").ReactNode;
 } | {
     margin?: boolean | undefined;
     marginL?: boolean | undefined;
@@ -494,6 +495,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
     forwardedRef: any;
+    children?: import("react").ReactNode;
 } | {
     margin?: boolean | undefined;
     marginL?: boolean | undefined;
@@ -1062,4 +1064,5 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
     forwardedRef: any;
+    children?: import("react").ReactNode;
 };

src/incubator/TextField/index.tsx

@@ -5,7 +5,7 @@
  * 3. Passing typography preset that includes lineHeight usually cause alignment issues with
  * other elements (leading/trailing accessories). It usually best to set lineHeight with undefined
  */
-import React, {ReactElement, useMemo} from 'react';
+import React, {PropsWithChildren, ReactElement, useMemo} from 'react';
 import {ViewStyle, TextStyle} from 'react-native';
 import {omit, isFunction} from 'lodash';
 import {
@@ -95,10 +95,12 @@ export type TextFieldProps = MarginModifiers &
     preset?: 'default' | null;
   };
 
-export type InternalTextFieldProps = TextFieldProps &
-  // Omit<FieldStateInjectedProps, keyof InputProps> &
-  BaseComponentInjectedProps &
-  ForwardRefInjectedProps;
+export type InternalTextFieldProps = PropsWithChildren<
+  TextFieldProps &
+    // Omit<FieldStateInjectedProps, keyof InputProps> &
+    BaseComponentInjectedProps &
+    ForwardRefInjectedProps
+>;
 
 interface StaticMembers {
   validationMessagePositions: typeof ValidationMessagePosition;
@@ -140,6 +142,7 @@ const TextField = (props: InternalTextFieldProps) => {
     charCounterStyle,
     // Input
     placeholder,
+    children,
     ...others
   } = usePreset(props);
   const {onFocus, onBlur, onChangeText, fieldState, validateField} = useFieldState(others);
@@ -186,16 +189,18 @@ const TextField = (props: InternalTextFieldProps) => {
                   validationMessagePosition={validationMessagePosition}
                 />
               )}
-              <Input
-                placeholderTextColor={floatingPlaceholder ? 'transparent' : undefined}
-                {...others}
-                style={[typographyStyle, colorStyle, others.style]}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                onChangeText={onChangeText}
-                placeholder={placeholder}
-                hint={hint}
-              />
+              {children || (
+                <Input
+                  placeholderTextColor={floatingPlaceholder ? 'transparent' : undefined}
+                  {...others}
+                  style={[typographyStyle, colorStyle, others.style]}
+                  onFocus={onFocus}
+                  onBlur={onBlur}
+                  onChangeText={onChangeText}
+                  placeholder={placeholder}
+                  hint={hint}
+                />
+              )}
             </View>
             {trailingAccessory}
           </View>