Support passing a custom formatter to TextField (#1528)

* Support passing a static validation message (#1486)

* Support passing a static validation message regardless to the validate prop

* Fix typing

* Fix validate typing

* Add leading accessory to example

* Update TextField formatter signature

Author: ethanshar

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -5,6 +5,8 @@ import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, Incu
 const {TextField} = Incubator;
 const {KeyboardAwareInsetsView} = Keyboard;
 
+const priceFormatter = Intl.NumberFormat('en-US');
+
 export default class TextFieldScreen extends Component {
   input = React.createRef<TextInput>();
   input2 = React.createRef<TextInput>();
@@ -47,7 +49,7 @@ export default class TextFieldScreen extends Component {
   }
 
   render() {
-    const {errorPosition, shouldDisable} = this.state;
+    const {errorPosition, shouldDisable, price} = this.state;
     return (
       <ScrollView keyboardShouldPersistTaps="always">
         <View flex padding-page>
@@ -218,6 +220,21 @@ export default class TextFieldScreen extends Component {
             hint="1-6 chars including numeric chars"
             fieldStyle={styles.withUnderline}
           />
+          <Text h3 blue50 marginV-s4>
+            Formatter
+          </Text>
+          <TextField
+            value={price}
+            onChangeText={value => this.setState({price: value})}
+            label="Price"
+            placeholder="Enter price"
+            validate={'number'}
+            validationMessage="Invalid price"
+            // @ts-expect-error
+            formatter={(value) => (isNaN(value) ? value : priceFormatter.format(Number(value)))}
+            leadingAccessory={<Text marginR-s1 grey30>$</Text>}
+            fieldStyle={styles.withUnderline}
+          />
         </View>
         <KeyboardAwareInsetsView/>
       </ScrollView>

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

@@ -15,9 +15,13 @@ export interface InputProps extends Omit<TextInputProps, 'placeholderTextColor'>
      * placeholder text color
      */
     placeholderTextColor?: ColorType;
+    /**
+     * Custom formatter for the input value (used only when input if not focused)
+     */
+    formatter?: (value?: string) => string | undefined;
 }
 declare const Input: {
-    ({ style, hint, color, forwardedRef, ...props }: InputProps & ForwardRefInjectedProps): JSX.Element;
+    ({ style, hint, color, forwardedRef, formatter, ...props }: InputProps & ForwardRefInjectedProps): JSX.Element;
     displayName: string;
 };
 export default Input;

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

@@ -19,6 +19,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     hint?: string | undefined;
     color?: import("./types").ColorType | undefined;
     placeholderTextColor?: import("./types").ColorType | undefined;
+    formatter?: ((value?: string | undefined) => string | undefined) | undefined;
     style?: import("react-native").StyleProp<import("react-native").TextStyle>;
     testID?: string | undefined;
     removeClippedSubviews?: boolean | undefined;
@@ -344,6 +345,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     hint?: string | undefined;
     color?: import("./types").ColorType | undefined;
     placeholderTextColor?: import("./types").ColorType | undefined;
+    formatter?: ((value?: string | undefined) => string | undefined) | undefined;
     style?: import("react-native").StyleProp<import("react-native").TextStyle>;
     testID?: string | undefined;
     removeClippedSubviews?: boolean | undefined;
@@ -669,6 +671,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     hint?: string | undefined;
     color?: import("./types").ColorType | undefined;
     placeholderTextColor?: import("./types").ColorType | undefined;
+    formatter?: ((value?: string | undefined) => string | undefined) | undefined;
     style: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | {
         lineHeight: undefined;
         height: number | undefined;

src/components/textField/TextFieldMigrator.tsx

@@ -13,7 +13,8 @@ const propsMigrationMap: Dictionary<string> = {
   titleColor: 'labelColor',
   titleStyle: 'labelStyle',
   /* CHAR COUNTER */
-  showCharacterCounter: 'showCharCounter'
+  showCharacterCounter: 'showCharCounter',
+  transformer: 'formatter'
 };
 
 const specialMigrationMap: Dictionary<string> = {

src/incubator/TextField/Input.tsx

@@ -27,13 +27,18 @@ export interface InputProps
    * placeholder text color
    */
   placeholderTextColor?: ColorType;
+  /**
+   * Custom formatter for the input value (used only when input if not focused)
+   */
+  formatter?: (value?: string) => string | undefined;
 }
 
 const Input = ({
   style,
   hint,
   color = DEFAULT_INPUT_COLOR,
   forwardedRef,
+  formatter,
   ...props
 }: InputProps & ForwardRefInjectedProps) => {
   const inputRef = useImperativeInputHandle(forwardedRef);
@@ -42,10 +47,13 @@ const Input = ({
   const inputColor = getColorByState(color, context);
   const placeholderTextColor = getColorByState(props.placeholderTextColor, context);
 
+  const value = formatter && !context.isFocused ? formatter(props.value) : props.value;
+
   return (
     <TextInput
       style={[styles.input, !!inputColor && {color: inputColor}, style]}
       {...props}
+      value={value}
       placeholder={placeholder}
       placeholderTextColor={placeholderTextColor}
       // @ts-expect-error