Support passing custom preset and use it in fieldStyle callback (#1633)

Author: ethanshar

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -15,7 +15,8 @@ export default class TextFieldScreen extends Component {
     errorPosition: TextField.validationMessagePositions.TOP,
     shouldDisable: false,
     value: 'Initial Value',
-    searching: false
+    searching: false,
+    preset: 'withUnderline'
   };
 
   componentDidMount() {
@@ -49,7 +50,7 @@ export default class TextFieldScreen extends Component {
   }
 
   render() {
-    const {errorPosition, shouldDisable, price} = this.state;
+    const {errorPosition, shouldDisable, price, preset} = this.state;
     return (
       <ScrollView keyboardShouldPersistTaps="always">
         <View flex padding-page>
@@ -198,6 +199,25 @@ export default class TextFieldScreen extends Component {
             editable={!shouldDisable}
           />
 
+          <View row spread centerV>
+            <Text h3 blue50 marginV-s4>
+              Custom Field Style
+            </Text>
+            <Button
+              label={preset}
+              onPress={() => this.setState({preset: preset === 'withUnderline' ? 'withFrame' : 'withUnderline'})}
+              size={Button.sizes.xSmall}
+            />
+          </View>
+
+          <TextField
+            label="Label"
+            placeholder="Enter text..."
+            preset={preset}
+            fieldStyle={(_state, {preset}) => (preset === 'withUnderline' ? styles.withUnderline : styles.withFrame)}
+            editable={!shouldDisable}
+          />
+
           <Text h3 blue50 marginV-s4>
             Char Counter
           </Text>

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

@@ -60,15 +60,17 @@ export declare type TextFieldProps = MarginModifiers & PaddingModifiers & Typogr
     /**
      * Internal style for the field container
      */
-    fieldStyle?: ViewStyle | ((context: FieldContextType) => ViewStyle);
+    fieldStyle?: ViewStyle | ((context: FieldContextType, props: {
+        preset: TextFieldProps['preset'];
+    }) => ViewStyle);
     /**
      * Container style of the whole component
      */
     containerStyle?: ViewStyle;
     /**
      * Predefined preset to use for styling the field
      */
-    preset?: 'default' | null;
+    preset?: 'default' | null | string;
 };
 export declare type InternalTextFieldProps = PropsWithChildren<TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps>;
 interface StaticMembers {

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

@@ -159,7 +159,9 @@ 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) => import("react-native").ViewStyle) | undefined;
+    fieldStyle?: import("react-native").ViewStyle | ((context: import("./FieldContext").FieldContextType, props: {
+        preset: string | null | undefined;
+    }) => import("react-native").ViewStyle) | undefined;
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
     forwardedRef: any;
@@ -485,7 +487,9 @@ 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) => import("react-native").ViewStyle) | undefined;
+    fieldStyle?: import("react-native").ViewStyle | ((context: import("./FieldContext").FieldContextType, props: {
+        preset: string | null | undefined;
+    }) => import("react-native").ViewStyle) | undefined;
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
     forwardedRef: any;
@@ -1047,7 +1051,9 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
         borderBottomWidth: number;
         borderBottomColor: string;
         paddingBottom: number;
-    } | ((context: import("./FieldContext").FieldContextType) => import("react-native").ViewStyle);
+    } | ((context: import("./FieldContext").FieldContextType, props: {
+        preset: string | null | undefined;
+    }) => import("react-native").ViewStyle);
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
     forwardedRef: any;

src/incubator/TextField/index.tsx

@@ -84,15 +84,15 @@ export type TextFieldProps = MarginModifiers &
     /**
      * Internal style for the field container
      */
-    fieldStyle?: ViewStyle | ((context: FieldContextType) => ViewStyle);
+    fieldStyle?: ViewStyle | ((context: FieldContextType, props: {preset: TextFieldProps['preset']}) => ViewStyle);
     /**
      * Container style of the whole component
      */
     containerStyle?: ViewStyle;
     /**
      * Predefined preset to use for styling the field
      */
-    preset?: 'default' | null;
+    preset?: 'default' | null | string;
   };
 
 export type InternalTextFieldProps = PropsWithChildren<
@@ -154,7 +154,7 @@ const TextField = (props: InternalTextFieldProps) => {
   const typographyStyle = useMemo(() => omit(typography, 'lineHeight'), [typography]);
   const colorStyle = useMemo(() => color && {color}, [color]);
 
-  const fieldStyle = isFunction(fieldStyleProp) ? fieldStyleProp(context) : fieldStyleProp;
+  const fieldStyle = isFunction(fieldStyleProp) ? fieldStyleProp(context, {preset: props.preset}) : fieldStyleProp;
 
   return (
     <FieldContext.Provider value={context}>