Incubator.TextField - should float with defaultValue (#2344)

* Incubator.TextField - should float with defaultValue

* Handle edge cases

* Fix comment

* Move logic to the Presenter

Author: M-i-k-e-l

src/incubator/TextField/FloatingPlaceholder.tsx

@@ -2,7 +2,7 @@ import React, {useContext, useRef, useCallback, useState, useMemo} from 'react';
 import {Animated, LayoutChangeEvent, StyleSheet, Platform} from 'react-native';
 import {useDidUpdate} from 'hooks';
 import {FloatingPlaceholderProps, ValidationMessagePosition} from './types';
-import {getColorByState} from './Presenter';
+import {getColorByState, shouldPlaceholderFloat} from './Presenter';
 import {Colors} from '../../style';
 import {Constants} from '../../commons/new';
 import View from '../../components/view';
@@ -11,31 +11,32 @@ import FieldContext from './FieldContext';
 
 const FLOATING_PLACEHOLDER_SCALE = 0.875;
 
-const FloatingPlaceholder = ({
-  placeholder,
-  floatingPlaceholderColor = Colors.$textNeutralLight,
-  floatingPlaceholderStyle,
-  floatOnFocus,
-  validationMessagePosition,
-  extraOffset = 0,
-  testID
-}: FloatingPlaceholderProps) => {
+const FloatingPlaceholder = (props: FloatingPlaceholderProps) => {
+  const {
+    placeholder,
+    floatingPlaceholderColor = Colors.$textNeutralLight,
+    floatingPlaceholderStyle,
+    validationMessagePosition,
+    extraOffset = 0,
+    testID
+  } = props;
   const context = useContext(FieldContext);
   const [placeholderOffset, setPlaceholderOffset] = useState({
     top: 0,
     left: 0
   });
-  const animation = useRef(new Animated.Value(Number((floatOnFocus && context.isFocused) || context.hasValue))).current;
+
+  const shouldFloat = shouldPlaceholderFloat(props, context.isFocused, context.hasValue, context.value);
+  const animation = useRef(new Animated.Value(Number(shouldFloat))).current;
   const hidePlaceholder = !context.isValid && validationMessagePosition === ValidationMessagePosition.TOP;
 
   useDidUpdate(() => {
-    const toValue = floatOnFocus ? context.isFocused || context.hasValue : context.hasValue;
     Animated.timing(animation, {
-      toValue: Number(toValue),
+      toValue: Number(shouldFloat),
       duration: 200,
       useNativeDriver: true
     }).start();
-  }, [floatOnFocus, context.isFocused, context.hasValue]);
+  }, [shouldFloat]);
 
   const animatedStyle = useMemo(() => {
     return {

src/incubator/TextField/Presenter.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import {Colors} from './../../style';
-import {ColorType, Validator, FieldContextType} from './types';
+import {ColorType, Validator, FieldContextType, FloatingPlaceholderProps} from './types';
 // TODO: Fix this import after moving all TextField types to a single file after we move to the new docs
 import {TextFieldProps} from './index';
 import formValidators from './validators';
@@ -75,3 +75,11 @@ export function shouldHidePlaceholder({floatingPlaceholder, hint, floatOnFocus}:
     return false;
   }
 }
+
+export function shouldPlaceholderFloat({defaultValue, floatOnFocus}: FloatingPlaceholderProps,
+  isFocused: boolean,
+  hasValue: boolean,
+  value?: string) {
+  const useDefaultValue = !_.isEmpty(defaultValue) && value === undefined; // To consider a user that has deleted the defaultValue (and then the placeholder should un-float when losing focus)
+  return (floatOnFocus && isFocused) || hasValue || useDefaultValue;
+}

src/incubator/TextField/index.tsx

@@ -133,6 +133,7 @@ const TextField = (props: InternalTextFieldProps) => {
           {children || <View flex={!centered} flexG={centered} /* flex row */>
             {floatingPlaceholder && (
               <FloatingPlaceholder
+                defaultValue={others.defaultValue}
                 placeholder={placeholder}
                 floatingPlaceholderStyle={_floatingPlaceholderStyle}
                 floatingPlaceholderColor={floatingPlaceholderColor}

src/incubator/TextField/types.ts

@@ -86,6 +86,7 @@ export interface FloatingPlaceholderProps {
   floatOnFocus?: boolean;
   validationMessagePosition?: ValidationMessagePosition;
   extraOffset?: number;
+  defaultValue?: TextInputProps['defaultValue'];
   testID: string;
 }