Support dynamicFieldStyle for Incubator.TextField (#1682)

Author: ethanshar

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -214,7 +214,7 @@ export default class TextFieldScreen extends Component {
             label="Label"
             placeholder="Enter text..."
             preset={preset}
-            fieldStyle={(_state, {preset}) => (preset === 'withUnderline' ? styles.withUnderline : styles.withFrame)}
+            dynamicFieldStyle={(_state, {preset}) => (preset === 'withUnderline' ? styles.withUnderline : styles.withFrame)}
             editable={!shouldDisable}
           />
 

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

@@ -6,7 +6,7 @@
  * other elements (leading/trailing accessories). It usually best to set lineHeight with undefined
  */
 import React, { PropsWithChildren, ReactElement } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers } from '../../commons/new';
 import { ValidationMessagePosition, Validator } from './types';
 import { InputProps } from './Input';
@@ -60,9 +60,13 @@ export declare type TextFieldProps = MarginModifiers & PaddingModifiers & Typogr
     /**
      * Internal style for the field container
      */
-    fieldStyle?: ViewStyle | ((context: FieldContextType, props: {
+    fieldStyle?: StyleProp<ViewStyle>;
+    /**
+     * Internal dynamic style callback for the field container
+     */
+    dynamicFieldStyle?: (context: FieldContextType, props: {
         preset: TextFieldProps['preset'];
-    }) => ViewStyle);
+    }) => StyleProp<ViewStyle>;
     /**
      * Container style of the whole component
      */

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

@@ -159,9 +159,10 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
     onChangeValidity?: ((isValid: boolean) => void) | undefined;
-    fieldStyle?: import("react-native").ViewStyle | ((context: import("./FieldContext").FieldContextType, props: {
+    fieldStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    dynamicFieldStyle?: ((context: import("./FieldContext").FieldContextType, props: {
         preset: string | null | undefined;
-    }) => import("react-native").ViewStyle) | undefined;
+    }) => import("react-native").StyleProp<import("react-native").ViewStyle>) | undefined;
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
     forwardedRef: any;
@@ -487,9 +488,10 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
     onChangeValidity?: ((isValid: boolean) => void) | undefined;
-    fieldStyle?: import("react-native").ViewStyle | ((context: import("./FieldContext").FieldContextType, props: {
+    fieldStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    dynamicFieldStyle?: ((context: import("./FieldContext").FieldContextType, props: {
         preset: string | null | undefined;
-    }) => import("react-native").ViewStyle) | undefined;
+    }) => import("react-native").StyleProp<import("react-native").ViewStyle>) | undefined;
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
     forwardedRef: any;
@@ -1047,13 +1049,14 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validateOnChange?: boolean | undefined;
     validateOnBlur: boolean;
     onChangeValidity?: ((isValid: boolean) => void) | undefined;
-    fieldStyle: import("react-native").ViewStyle | {
+    fieldStyle: false | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<import("react-native").ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | {
         borderBottomWidth: number;
         borderBottomColor: string;
         paddingBottom: number;
-    } | ((context: import("./FieldContext").FieldContextType, props: {
+    } | null;
+    dynamicFieldStyle?: ((context: import("./FieldContext").FieldContextType, props: {
         preset: string | null | undefined;
-    }) => import("react-native").ViewStyle);
+    }) => import("react-native").StyleProp<import("react-native").ViewStyle>) | undefined;
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
     forwardedRef: any;

src/incubator/TextField/index.tsx

@@ -6,8 +6,8 @@
  * other elements (leading/trailing accessories). It usually best to set lineHeight with undefined
  */
 import React, {PropsWithChildren, ReactElement, useMemo} from 'react';
-import {ViewStyle, TextStyle} from 'react-native';
-import {omit, isFunction} from 'lodash';
+import {ViewStyle, TextStyle, StyleProp} from 'react-native';
+import {omit} from 'lodash';
 import {
   asBaseComponent,
   forwardRef,
@@ -86,7 +86,11 @@ export type TextFieldProps = MarginModifiers &
     /**
      * Internal style for the field container
      */
-    fieldStyle?: ViewStyle | ((context: FieldContextType, props: {preset: TextFieldProps['preset']}) => ViewStyle);
+    fieldStyle?: StyleProp<ViewStyle>;
+    /**
+     * Internal dynamic style callback for the field container
+     */
+    dynamicFieldStyle?: (context: FieldContextType, props: {preset: TextFieldProps['preset']}) => StyleProp<ViewStyle>;
     /**
      * Container style of the whole component
      */
@@ -120,6 +124,7 @@ const TextField = (props: InternalTextFieldProps) => {
     modifiers,
     // General
     fieldStyle: fieldStyleProp,
+    dynamicFieldStyle,
     containerStyle,
     floatingPlaceholder,
     floatingPlaceholderColor,
@@ -156,7 +161,7 @@ const TextField = (props: InternalTextFieldProps) => {
   const typographyStyle = useMemo(() => omit(typography, 'lineHeight'), [typography]);
   const colorStyle = useMemo(() => color && {color}, [color]);
 
-  const fieldStyle = isFunction(fieldStyleProp) ? fieldStyleProp(context, {preset: props.preset}) : fieldStyleProp;
+  const fieldStyle = [fieldStyleProp, dynamicFieldStyle?.(context, {preset: props.preset})];
   const hidePlaceholder = shouldHidePlaceholder(props, fieldState.isFocused);
 
   return (