@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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

@@ -4,7 +4,15 @@ import { TextInput as RNTextInput } from 'react-native';
 import { theme } from '../../..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Icon from '../../Icon';
-import TextInput, { getState, TextInputHandles } from '../index';
+import TextInput, {
+  getState,
+  renderErrorOrHelpText,
+  renderInput,
+  renderMaxLengthMessage,
+  renderPrefix,
+  renderSuffix,
+  TextInputHandles,
+} from '../index';
 
 describe('getState', () => {
   it.each`
@@ -432,10 +440,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,
       });
     });
@@ -443,17 +451,12 @@ describe('TextInput', () => {
 
   describe('ref', () => {
     it('ref methods work correctly', () => {
-      const mockChildMethod = jest.fn();
-      jest.spyOn(React, 'useRef').mockReturnValue({
-        current: {
-          clear: mockChildMethod,
-        },
-      });
       const ref = React.createRef<
         TextInputHandles & {
           getNativeTextInputRef(): RNTextInput;
         }
       >();
+
       const wrapper = renderWithTheme(
         <TextInput label="Amount (AUD)" value="2000" ref={ref} />
       );
@@ -496,3 +499,142 @@ describe('TextInput', () => {
     });
   });
 });
+
+describe('renderErrorOrHelpText', () => {
+  it('renders correctly with error', () => {
+    const { queryAllByText } = renderWithTheme(
+      <>
+        {renderErrorOrHelpText({
+          error: 'This is error',
+          helpText: 'This is help text',
+        })}
+      </>
+    );
+
+    expect(queryAllByText('This is error')).toHaveLength(1);
+    expect(queryAllByText('This is help text')).toHaveLength(0);
+  });
+
+  it('renders correctly with help text', () => {
+    const { queryAllByText } = renderWithTheme(
+      <>
+        {renderErrorOrHelpText({
+          error: '',
+          helpText: 'This is help text',
+        })}
+      </>
+    );
+
+    expect(queryAllByText('This is help text')).toHaveLength(1);
+  });
+});
+
+describe('renderInput', () => {
+  it('renders correctly with renderInputValue', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderInput({
+          variant: 'textarea',
+          nativeInputProps: {},
+          renderInputValue: (props) => {
+            return (
+              <RNTextInput
+                {...props}
+                value="customised text"
+                testID="custom-text-input"
+              />
+            );
+          },
+        })}
+      </>
+    );
+
+    expect(wrapper.queryAllByTestId('custom-text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('customised text')).toHaveLength(1);
+  });
+
+  it('renders correctly without renderInputValue', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderInput({
+          variant: 'textarea',
+          nativeInputProps: {
+            testID: 'text-input',
+            value: 'text input value',
+          },
+        })}
+      </>
+    );
+
+    expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('text input value')).toHaveLength(1);
+  });
+});
+describe('renderSuffix', () => {
+  it('renders loading icon with loading', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderSuffix({
+          loading: true,
+          suffix: 'dollar-sign',
+          state: 'default',
+        })}
+      </>
+    );
+
+    expect(wrapper.getByTestId('input-suffix')).toHaveProp('name', 'loading');
+  });
+
+  it('renders suffix icon', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderSuffix({
+          loading: false,
+          suffix: 'dollar-sign',
+          state: 'default',
+        })}
+      </>
+    );
+
+    // verify element has prop name = icon
+    expect(wrapper.getByTestId('input-suffix')).toHaveProp(
+      'name',
+      'dollar-sign'
+    );
+  });
+});
+
+describe('renderPrefix', () => {
+  it('renders prefix icon', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderPrefix({
+          prefix: 'dollar-sign',
+          state: 'default',
+        })}
+      </>
+    );
+
+    expect(wrapper.getByTestId('input-prefix')).toHaveProp(
+      'name',
+      'dollar-sign'
+    );
+  });
+});
+
+describe('renderMaxLengthMessage', () => {
+  it('renders correctly with maxLength', () => {
+    const { queryAllByText } = renderWithTheme(
+      <>
+        {renderMaxLengthMessage({
+          maxLength: 10,
+          state: 'default',
+          currentLength: 5,
+          hideCharacterCount: false,
+        })}
+      </>
+    );
+
+    expect(queryAllByText('5/10')).toHaveLength(1);
+  });
+});

package/src/components/TextInput/index.tsx

@@ -1,29 +1,39 @@
-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,
   StyledMaxLengthMessage,
   StyledErrorContainer,
-  StyledHelperText,
   StyledAsteriskLabelInsideTextInput,
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
   StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
+  StyledHelperText,
 } from './StyledTextInput';
 import Icon from '../Icon';
 import { useTheme } from '../../theme';
@@ -36,6 +46,8 @@ export type TextInputHandles = Pick<
   'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
 >;
 
+export type TextInputVariant = 'text' | 'textarea';
+
 export interface TextInputProps extends NativeTextInputProps {
   /**
    * Field label.
@@ -113,7 +125,7 @@ export interface TextInputProps extends NativeTextInputProps {
   /**
    * Component variant.
    */
-  variant?: 'text' | 'textarea';
+  variant?: TextInputVariant;
 }
 
 export const getState = ({
@@ -149,6 +161,122 @@ export const getState = ({
 // https://github.com/callstack/react-native-paper/pull/3331
 const EMPTY_PLACEHOLDER_VALUE = ' ';
 
+export const LABEL_ANIMATION_DURATION = 150;
+
+export const renderErrorOrHelpText = ({
+  error,
+  helpText,
+}: {
+  error?: string;
+  helpText?: string;
+}) => {
+  return error ? (
+    <StyledErrorContainer>
+      <Icon
+        testID="input-error-icon"
+        icon="circle-info"
+        size="xsmall"
+        intent="danger"
+      />
+
+      <StyledError testID="input-error-message">{error}</StyledError>
+    </StyledErrorContainer>
+  ) : (
+    !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
+  );
+};
+
+export const renderInput = ({
+  variant,
+  nativeInputProps,
+  renderInputValue,
+  ref,
+}: {
+  variant: TextInputVariant;
+  nativeInputProps: NativeTextInputProps;
+  multiline?: boolean;
+  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  ref?: React.Ref<RNTextInput>;
+}) => {
+  return renderInputValue ? (
+    renderInputValue(nativeInputProps)
+  ) : (
+    <StyledTextInput
+      {...nativeInputProps}
+      themeVariant={variant}
+      multiline={variant === 'textarea' || nativeInputProps.multiline}
+      ref={ref}
+    />
+  );
+};
+
+export const renderSuffix = ({
+  state,
+  loading,
+  suffix,
+}: {
+  state: State;
+  loading: boolean;
+  suffix?: IconName | React.ReactElement;
+}) => {
+  const actualSuffix = loading ? 'loading' : suffix;
+  return typeof actualSuffix === 'string' ? (
+    <Icon
+      intent={state === 'disabled' ? 'disabled-text' : 'text'}
+      testID="input-suffix"
+      icon={actualSuffix}
+      spin={actualSuffix === 'loading'}
+      size="medium"
+    />
+  ) : (
+    suffix
+  );
+};
+
+export const renderPrefix = ({
+  state,
+  prefix,
+}: {
+  state: State;
+  prefix?: IconName | React.ReactElement;
+}) => {
+  return typeof prefix === 'string' ? (
+    <Icon
+      intent={state === 'disabled' ? 'disabled-text' : 'text'}
+      testID="input-prefix"
+      icon={prefix}
+      size="xsmall"
+    />
+  ) : (
+    prefix
+  );
+};
+
+export const renderMaxLengthMessage = ({
+  maxLength,
+  state,
+  currentLength,
+  hideCharacterCount,
+}: {
+  state: State;
+  currentLength: number;
+  maxLength?: number;
+  hideCharacterCount: boolean;
+}) => {
+  const shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
+  return (
+    shouldShowMaxLength && (
+      <StyledMaxLengthMessage themeState={state}>
+        {currentLength}/{maxLength}
+      </StyledMaxLengthMessage>
+    )
+  );
+};
+
+export const getDisplayText = (value?: string, defaultValue?: string) => {
+  return (value !== undefined ? value : defaultValue) ?? '';
+};
+
 const TextInput = forwardRef<TextInputHandles, TextInputProps>(
   (
     {
@@ -176,9 +304,15 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
     }: TextInputProps,
     ref?: React.Ref<TextInputHandles>
   ) => {
-    const displayText = (value !== undefined ? value : defaultValue) ?? '';
+    const displayText = getDisplayText(value, defaultValue);
     const isEmptyValue = displayText.length === 0;
-    const actualSuffix = loading ? 'loading' : suffix;
+
+    const [inputSize, setInputSize] = React.useState<{
+      height: number;
+      width: number;
+    }>({ height: 0, width: 0 });
+    const [labelWidth, setLabelWidth] = React.useState<number>(0);
+    const [prefixWidth, setPrefixWidth] = React.useState<number>(0);
 
     const [isFocused, setIsFocused] = React.useState(false);
 
@@ -191,10 +325,33 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       isEmptyValue,
     });
 
-    const shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
-
     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, width } = event.nativeEvent.layout;
+      setInputSize((prev) => ({ ...prev, height, width }));
+    }, []);
+
+    const onPrefixLayout = useCallback((event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      setPrefixWidth(width);
+    }, []);
+    const onLabelLayout = useCallback((event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      setLabelWidth(width);
+    }, []);
+
     const innerTextInput = React.useRef<RNTextInput | undefined | null>();
     React.useImperativeHandle(
       ref,
@@ -293,113 +450,104 @@ 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}>
+            {renderPrefix({ state, prefix })}
+          </View>
+          <StyledLabelContainerInsideTextInput
+            themeVariant={variant}
+            pointerEvents="none"
+            style={[
+              {
+                position: 'absolute',
+              },
+              {
+                transform: [
+                  {
+                    translateY: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        variant !== 'textarea'
+                          ? inputSize.height / 2
+                          : theme.space.large,
+                        0,
+                      ],
+                    }),
+                  },
+                  {
+                    translateX: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        -inputSize.width / 2 +
+                          labelWidth / 2 +
+                          prefixWidth +
+                          theme.space.large,
+                        -inputSize.width / 2 +
+                          labelWidth / 2 +
+                          theme.space.small,
+                      ],
+                    }),
+                  },
+                  {
+                    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"
-                    fontSize="medium"
-                    themeState={state}
-                  >
-                    {label}
-                  </StyledLabelInsideTextInput>
-                )}
-              </StyledLabelContainerInsideTextInput>
+                *
+              </StyledAsteriskLabelInsideTextInput>
             )}
-            {renderInputValue ? (
-              renderInputValue(nativeInputProps)
-            ) : (
-              <StyledTextInput
-                {...nativeInputProps}
-                themeVariant={variant}
-                multiline={variant === 'textarea' || nativeProps.multiline}
-                ref={(reference) => {
-                  innerTextInput.current = reference;
-                }}
-              />
+            {!!label && (
+              <StyledLabelInsideTextInput
+                style={{ backgroundColor }}
+                nativeID={accessibilityLabelledBy}
+                testID="input-label"
+                themeState={state}
+                onLayout={onLabelLayout}
+              >
+                {label}
+              </StyledLabelInsideTextInput>
             )}
+          </StyledLabelContainerInsideTextInput>
+
+          <StyledTextInputAndLabelContainer>
+            {renderInput({
+              variant,
+              nativeInputProps,
+              renderInputValue,
+              ref: (rnTextInputRef) => {
+                innerTextInput.current = rnTextInputRef;
+              },
+            })}
           </StyledTextInputAndLabelContainer>
-          {typeof actualSuffix === 'string' ? (
-            <Icon
-              intent={state === 'disabled' ? 'disabled-text' : 'text'}
-              testID="input-suffix"
-              icon={actualSuffix}
-              spin={actualSuffix === 'loading'}
-              size="medium"
-            />
-          ) : (
-            suffix
-          )}
+          {renderSuffix({ state, loading, suffix })}
         </StyledTextInputContainer>
         <StyledErrorAndHelpTextContainer>
           <StyledErrorAndMaxLengthContainer>
-            {error ? (
-              <StyledErrorContainer>
-                <Icon
-                  testID="input-error-icon"
-                  icon="circle-info"
-                  size="xsmall"
-                  intent="danger"
-                />
-
-                <StyledError testID="input-error-message">{error}</StyledError>
-              </StyledErrorContainer>
-            ) : (
-              !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
-            )}
-            {shouldShowMaxLength && (
-              <StyledMaxLengthMessage themeState={state} fontSize="small">
-                {displayText.length}/{maxLength}
-              </StyledMaxLengthMessage>
-            )}
+            {renderErrorOrHelpText({ error, helpText })}
+            {renderMaxLengthMessage({
+              state,
+              currentLength: displayText.length,
+              maxLength,
+              hideCharacterCount,
+            })}
           </StyledErrorAndMaxLengthContainer>
         </StyledErrorAndHelpTextContainer>
       </StyledContainer>