Fix flex issue of TextField when rendered (#2391)

* Fix flex issue of TextField when rendered

* Fix NumberInput with TextField's new flexness

Co-authored-by: M-i-k-e-l <[email protected]>

Author: ethanshar

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -282,9 +282,9 @@ export default class TextFieldScreen extends Component {
 
           <Text marginB-s1>Inline</Text>
           <View row>
-            <TextField placeholder="hours" inline/>
+            <TextField placeholder="hours"/>
             <Text marginT-s1> : </Text>
-            <TextField placeholder="minutes" inline/>
+            <TextField placeholder="minutes"/>
           </View>
         </View>
         <KeyboardAwareInsetsView/>

src/components/numberInput/index.tsx

@@ -94,16 +94,22 @@ function NumberInput(props: NumberInputProps, ref: any) {
       processInput(data.userInput);
     }
   }, [options]);
+
+  const hasText = useMemo(() => {
+    // Render (none or) both leading and trailing accessories together for flexness (especially when validation message is long)
+    return !isEmpty(leadingText) || !isEmpty(trailingText);
+  }, [leadingText, trailingText]);
+
   const leadingAccessory = useMemo(() => {
-    if (leadingText) {
-      return <Text style={leadingTextStyle}>{leadingText}</Text>;
+    if (hasText) {
+      return <Text style={[styles.accessory, {textAlign: 'right'}, leadingTextStyle]}>{leadingText}</Text>;
     }
-  }, [leadingText, leadingTextStyle]);
+  }, [hasText, leadingText, leadingTextStyle]);
   const trailingAccessory = useMemo(() => {
-    if (trailingText) {
-      return <Text style={trailingTextStyle}>{trailingText}</Text>;
+    if (hasText) {
+      return <Text style={[styles.accessory, trailingTextStyle]}>{trailingText}</Text>;
     }
-  }, [trailingText, trailingTextStyle]);
+  }, [hasText, trailingText, trailingTextStyle]);
 
   const _containerStyle = useMemo(() => {
     return [styles.containerStyle, containerStyle];
@@ -149,5 +155,8 @@ export default React.forwardRef<TextFieldProps, NumberInputProps>(NumberInput);
 const styles = StyleSheet.create({
   containerStyle: {
     overflow: 'hidden'
+  },
+  accessory: {
+    flexGrow: 999
   }
 });

src/incubator/TextField/index.tsx

@@ -72,8 +72,7 @@ const TextField = (props: InternalTextFieldProps) => {
     // Input
     placeholder,
     children,
-    centered = false,
-    inline = false,
+    centered,
     ...others
   } = usePreset(props);
   const {ref: leadingAccessoryRef, measurements: leadingAccessoryMeasurements} = useMeasure();
@@ -135,11 +134,14 @@ const TextField = (props: InternalTextFieldProps) => {
         <View style={[paddings, fieldStyle]} row centerV centerH={centered}>
           {/* <View row centerV> */}
           {leadingAccessoryClone}
-          {/* Note: We should avoid flexing this when the input is inlined or centered*/}
+
+          {/* Note: We're passing flexG to the View to support properly inline behavior - so the input will be rendered correctly in a row container.
+            Known Issue: This slightly push the trailing accessory when entering a long text
+          */}
           {children || (
-            <View flex={!centered && !inline}>
+            <View flexG>
               {/* Note: Render dummy placeholder for Android center issues */}
-              {Constants.isAndroid && (centered || inline) && (
+              {Constants.isAndroid && centered && (
                 <Text marginR-s1 style={styles.dummyPlaceholder}>
                   {placeholder}
                 </Text>

src/incubator/TextField/textField.api.json

@@ -93,11 +93,6 @@
       "type": "boolean",
       "description": "Whether to center the TextField - container and label"
     },
-    {
-      "name": "inline",
-      "type": "boolean",
-      "description": "Set an alignment for inline behavior (when rendered inside a row container)"
-    },
     {
       "name": "useGestureHandlerInput",
       "type": "boolean",

src/incubator/TextField/types.ts

@@ -222,6 +222,7 @@ export type TextFieldProps = MarginModifiers &
      */
     centered?: boolean;
     /**
+     * @deprecated
      * Set an alignment fit for inline behavior (when rendered inside a row container)
      */
     inline?: boolean;