@hero-design/rn 8.44.0-alpha.0 → 8.44.1

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -432,10 +432,10 @@ describe('TextInput', () => {
       expect(wrapper.getByTestId('text-input-border')).toHaveStyle({
         backgroundColor: theme.colors.neutralGlobalSurface,
       });
-      expect(wrapper.getByTestId('label-container')).toHaveStyle({
+      expect(wrapper.getByTestId('input-label')).toHaveStyle({
         backgroundColor: theme.colors.neutralGlobalSurface,
       });
-      expect(wrapper.getByText('Amount (AUD)')).toHaveStyle({
+      expect(wrapper.getByTestId('input-label-asterisk')).toHaveStyle({
         backgroundColor: theme.colors.neutralGlobalSurface,
       });
     });

package/src/components/TextInput/index.tsx

@@ -1,17 +1,27 @@
-import React, { useMemo, forwardRef } from 'react';
-import { StyleSheet, TextInput as RNTextInput } from 'react-native';
+import React, {
+  useMemo,
+  forwardRef,
+  useRef,
+  useCallback,
+  useEffect,
+} from 'react';
+import {
+  StyleSheet,
+  TextInput as RNTextInput,
+  Animated,
+  Easing,
+  View,
+} from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
+  LayoutChangeEvent,
 } from 'react-native';
 import {
   StyledTextInputContainer,
-  StyledLabel,
-  StyledLabelContainer,
   StyledLabelInsideTextInput,
-  StyledAsteriskLabel,
   StyledError,
   StyledTextInput,
   StyledContainer,
@@ -149,6 +159,8 @@ export const getState = ({
 // https://github.com/callstack/react-native-paper/pull/3331
 const EMPTY_PLACEHOLDER_VALUE = ' ';
 
+export const LABEL_ANIMATION_DURATION = 150;
+
 const TextInput = forwardRef<TextInputHandles, TextInputProps>(
   (
     {
@@ -180,6 +192,9 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
     const isEmptyValue = displayText.length === 0;
     const actualSuffix = loading ? 'loading' : suffix;
 
+    const [inputHeight, setInputHeight] = React.useState<number>(0);
+    const [prefixWidth, setPrefixWidth] = React.useState<number>(0);
+
     const [isFocused, setIsFocused] = React.useState(false);
 
     const state = getState({
@@ -195,6 +210,27 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
 
     const theme = useTheme();
 
+    const focusAnimation = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      Animated.timing(focusAnimation, {
+        toValue: isFocused || !isEmptyValue ? 1 : 0,
+        duration: LABEL_ANIMATION_DURATION,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true,
+      }).start();
+    }, [focusAnimation, isEmptyValue, isFocused]);
+
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
+      const { height } = event.nativeEvent.layout;
+      setInputHeight(height);
+    }, []);
+
+    const onPrefixLayout = useCallback((event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      setPrefixWidth(width);
+    }, []);
+
     const innerTextInput = React.useRef<RNTextInput | undefined | null>();
     React.useImperativeHandle(
       ref,
@@ -293,66 +329,86 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
         }
         testID={testID}
       >
-        <StyledTextInputContainer>
+        <StyledTextInputContainer onLayout={onLayout}>
           <StyledBorderBackDrop
             themeFocused={isFocused}
             themeState={state}
             testID="text-input-border"
             style={[{ backgroundColor }, borderStyle]}
           />
-          {(isFocused || (label && !isEmptyValue)) && (
-            <StyledLabelContainer
-              pointerEvents="none"
-              testID="label-container"
-              style={{ backgroundColor }}
-            >
-              {required && (
-                <StyledAsteriskLabel themeState={state}>*</StyledAsteriskLabel>
-              )}
-              {!!label && (
-                <StyledLabel
-                  nativeID={accessibilityLabelledBy}
-                  testID="input-label"
-                  themeState={state}
-                  style={{ backgroundColor }}
-                >
-                  {label}
-                </StyledLabel>
-              )}
-            </StyledLabelContainer>
-          )}
-          {typeof prefix === 'string' ? (
-            <Icon
-              intent={state === 'disabled' ? 'disabled-text' : 'text'}
-              testID="input-prefix"
-              icon={prefix}
-              size="xsmall"
-            />
-          ) : (
-            prefix
-          )}
-          <StyledTextInputAndLabelContainer>
-            {!isFocused && isEmptyValue && (
-              <StyledLabelContainerInsideTextInput
-                themeVariant={variant}
-                pointerEvents="none"
+
+          <View onLayout={onPrefixLayout}>
+            {typeof prefix === 'string' ? (
+              <Icon
+                intent={state === 'disabled' ? 'disabled-text' : 'text'}
+                testID="input-prefix"
+                icon={prefix}
+                size="xsmall"
+              />
+            ) : (
+              prefix
+            )}
+          </View>
+          <StyledLabelContainerInsideTextInput
+            themeVariant={variant}
+            pointerEvents="none"
+            style={[
+              {
+                position: 'absolute',
+              },
+              {
+                transform: [
+                  {
+                    translateY: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        variant !== 'textarea'
+                          ? inputHeight / 2
+                          : theme.space.large,
+                        0,
+                      ],
+                    }),
+                  },
+                  {
+                    translateX: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        prefix ? prefixWidth * 4 : theme.space.xxxlarge,
+                        0,
+                      ],
+                    }),
+                  },
+                  {
+                    scale: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [1, 0.75],
+                    }),
+                  },
+                ],
+              },
+            ]}
+          >
+            {required && (
+              <StyledAsteriskLabelInsideTextInput
+                style={{ backgroundColor }}
+                themeState={state}
+                testID="input-label-asterisk"
               >
-                {required && (
-                  <StyledAsteriskLabelInsideTextInput themeState={state}>
-                    *
-                  </StyledAsteriskLabelInsideTextInput>
-                )}
-                {!!label && (
-                  <StyledLabelInsideTextInput
-                    nativeID={accessibilityLabelledBy}
-                    testID="input-label"
-                    themeState={state}
-                  >
-                    {label}
-                  </StyledLabelInsideTextInput>
-                )}
-              </StyledLabelContainerInsideTextInput>
+                *
+              </StyledAsteriskLabelInsideTextInput>
             )}
+            {!!label && (
+              <StyledLabelInsideTextInput
+                style={{ backgroundColor }}
+                nativeID={accessibilityLabelledBy}
+                testID="input-label"
+                themeState={state}
+              >
+                {label}
+              </StyledLabelInsideTextInput>
+            )}
+          </StyledLabelContainerInsideTextInput>
+          <StyledTextInputAndLabelContainer>
             {renderInputValue ? (
               renderInputValue(nativeInputProps)
             ) : (