@hero-design/rn 7.9.0 → 7.10.2-rc.0

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

@@ -1,17 +1,352 @@
+import { fireEvent, within } from '@testing-library/react-native';
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import TextInput from '../index';
+import Icon from '../../Icon';
+import TextInput, { getVariant } from '../index';
+
+describe('getVariant', () => {
+  it.each`
+    disabled | error                       | editable | isFocused | isEmptyValue | expected
+    ${false} | ${undefined}                | ${true}  | ${false}  | ${true}      | ${'default'}
+    ${false} | ${undefined}                | ${true}  | ${false}  | ${false}     | ${'filled'}
+    ${false} | ${undefined}                | ${true}  | ${true}   | ${true}      | ${'focused'}
+    ${false} | ${undefined}                | ${false} | ${true}   | ${true}      | ${'readonly'}
+    ${false} | ${'This field is required'} | ${false} | ${true}   | ${true}      | ${'error'}
+    ${true}  | ${'This field is required'} | ${false} | ${true}   | ${true}      | ${'disabled'}
+  `(
+    'should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isFocused $isFocused, isEmptyValue $isEmptyValue',
+    ({ disabled, error, editable, isFocused, isEmptyValue, expected }) => {
+      expect(
+        getVariant({
+          disabled,
+          error,
+          editable,
+          isFocused,
+          isEmptyValue,
+        })
+      ).toBe(expected);
+    }
+  );
+});
 
 describe('TextInput', () => {
-  it('renders label, prefix and native TextInput', () => {
-    const { queryAllByTestId, queryAllByText } = renderWithTheme(
-      <TextInput label="Input Label" prefix="user" suffix="arrow-down" />
-    );
-
-    expect(queryAllByText('Input Label')).toHaveLength(1);
-    expect(queryAllByTestId('input-label')).toHaveLength(1);
-    expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-    expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-    expect(queryAllByTestId('text-input')).toHaveLength(1);
+  describe('idle', () => {
+    it('renders correctly', () => {
+      const { getByTestId, toJSON } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          testID="idle-text-input"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByTestId('idle-text-input')).toBeTruthy();
+      expect(
+        within(getByTestId('idle-text-input')).queryAllByTestId('text-input')
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-text-input')).queryAllByText('Amount (AUD)')
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-label')
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-prefix')
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
+      ).toHaveLength(1);
+    });
+
+    it('onChangeText, onBlur, onFocus', () => {
+      const onChangeText = jest.fn();
+      const onBlur = jest.fn();
+      const onFocus = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          testID="idle-text-input"
+          onChangeText={onChangeText}
+          onBlur={onBlur}
+          onFocus={onFocus}
+        />
+      );
+
+      const testInput = within(getByTestId('idle-text-input')).getByTestId(
+        'text-input'
+      );
+
+      fireEvent.changeText(testInput, 'Thong Quach');
+      expect(onChangeText).toHaveBeenCalledWith('Thong Quach');
+
+      fireEvent(testInput, 'blur');
+      expect(onBlur).toHaveBeenCalledTimes(1);
+
+      fireEvent(testInput, 'focus');
+      expect(onFocus).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('idle with suffix and prefix are React Element', () => {
+    it('renders correctly', () => {
+      const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix={<Icon icon="eye-circle" testID="prefix-element" />}
+          suffix={<Icon icon="eye-invisible" testID="suffix-element" />}
+          required
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('*')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('prefix-element')).toHaveLength(1);
+      expect(queryAllByTestId('suffix-element')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+    });
+  });
+  describe('required', () => {
+    it('renders correctly', () => {
+      const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          required
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('*')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+    });
+  });
+
+  describe('filled', () => {
+    it('renders correctly', () => {
+      const {
+        toJSON,
+        queryAllByTestId,
+        queryAllByText,
+        queryAllByDisplayValue,
+      } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          value="100"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByDisplayValue('100')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+    });
+  });
+
+  describe('readonly', () => {
+    it('renders correctly', () => {
+      const onChangeText = jest.fn();
+      const {
+        toJSON,
+        queryAllByTestId,
+        queryAllByText,
+        queryAllByDisplayValue,
+        getByTestId,
+      } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          editable={false}
+          value="100"
+          required
+          onChangeText={onChangeText}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByDisplayValue('100')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+
+      expect(getByTestId('text-input')).not.toHaveProp('editable', 'false');
+    });
+  });
+
+  describe('max length', () => {
+    it('renders correctly', () => {
+      const {
+        toJSON,
+        queryAllByTestId,
+        queryAllByText,
+        queryAllByDisplayValue,
+        getByTestId,
+      } = renderWithTheme(
+        <TextInput
+          label="Shout out"
+          value="shout out Tung Van"
+          required
+          maxLength={255}
+          multiline
+          error="must not exceed character limit"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Shout out')).toHaveLength(1);
+      expect(queryAllByDisplayValue('shout out Tung Van')).toHaveLength(1);
+      expect(queryAllByText('18/255')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
+    });
+  });
+
+  describe('disabled', () => {
+    it('renders correctly', () => {
+      const {
+        toJSON,
+        queryAllByTestId,
+        queryAllByText,
+        getByTestId,
+      } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          required
+          disabled
+          value="100"
+          testID="disabled-text-input"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(getByTestId('disabled-text-input')).toBeDisabled();
+
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
+    });
+  });
+
+  describe('error', () => {
+    it('renders correctly', () => {
+      const { toJSON, queryAllByText } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          required
+          error="This field is required"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('This field is required')).toHaveLength(1);
+    });
+  });
+  describe('helper text', () => {
+    it('renders correctly', () => {
+      const { toJSON, queryAllByText } = renderWithTheme(
+        <TextInput
+          label="Amount (AUD)"
+          prefix="dollar-sign"
+          required
+          helpText="This is helper text"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('This is helper text')).toHaveLength(1);
+    });
+  });
+
+  describe('placeholder', () => {
+    describe('TextInput is idle', () => {
+      it('renders correctly', () => {
+        const wrapper = renderWithTheme(
+          <TextInput
+            label="Amount (AUD)"
+            prefix="dollar-sign"
+            required
+            helpText="This is helper text"
+            placeholder="Enter Amount"
+          />
+        );
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+
+        fireEvent(wrapper.getByTestId('text-input'), 'focus');
+        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeTruthy();
+
+        fireEvent(wrapper.getByTestId('text-input'), 'blur');
+        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+      });
+    });
+  });
+
+  describe('defaultValue', () => {
+    describe('TextInput is idle', () => {
+      it('renders correctly', () => {
+        const wrapper = renderWithTheme(
+          <TextInput
+            label="Amount (AUD)"
+            prefix="dollar-sign"
+            required
+            helpText="This is helper text"
+            placeholder="Enter Amount"
+            defaultValue="1000"
+            maxLength={255}
+          />
+        );
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+        expect(wrapper.queryByDisplayValue('1000')).toBeTruthy();
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
+      });
+    });
+
+    describe('default Value and Value', () => {
+      it('renders correctly with 2000', () => {
+        const wrapper = renderWithTheme(
+          <TextInput
+            label="Amount (AUD)"
+            prefix="dollar-sign"
+            required
+            helpText="This is helper text"
+            placeholder="Enter Amount"
+            defaultValue="1000"
+            value="2000"
+            maxLength={255}
+          />
+        );
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+        expect(wrapper.queryByDisplayValue('2000')).toBeTruthy();
+        expect(wrapper.queryByDisplayValue('1000')).toBeFalsy();
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
+      });
+    });
   });
 });

package/src/components/TextInput/index.tsx

@@ -1,12 +1,33 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
+  TextInput as RNTextInput,
+  StyleSheet,
 } from 'react-native';
-import { Container, Label, StyledTextInput } from './StyledTextInput';
+import {
+  StyledTextInputContainer,
+  StyledLabel,
+  StyledLabelContainer,
+  StyledLabelInsideTextInput,
+  StyledAsteriskLabel,
+  StyledError,
+  StyledTextInput,
+  Variant,
+  StyledContainer,
+  StyledMaxLengthMessage,
+  StyledErrorContainer,
+  StyledHelperText,
+  StyledAsteriskLabelInsideTextInput,
+  StyledTextInputAndLabelContainer,
+  StyledLabelContainerInsideTextInput,
+  StyledErrorAndHelpTextContainer,
+  StyledBorderBackDrop,
+} from './StyledTextInput';
 import Icon, { IconName } from '../Icon';
+import { useTheme } from '../../theme';
 
 export interface TextInputProps extends NativeTextInputProps {
   /**
@@ -14,13 +35,13 @@ export interface TextInputProps extends NativeTextInputProps {
    */
   label?: string;
   /**
-   * Name of Icon to render on the left side of the input, before the user's cursor.
+   * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
    */
-  prefix?: IconName;
+  prefix?: IconName | React.ReactElement;
   /**
-   * Name of Icon to render on the right side of the input.
+   * Name of Icon or ReactElement to render on the right side of the input.
    */
-  suffix?: IconName;
+  suffix?: IconName | React.ReactElement;
   /**
    * Additional wrapper style.
    */
@@ -37,8 +58,68 @@ export interface TextInputProps extends NativeTextInputProps {
    * Accessibility label for the input (Android).
    */
   accessibilityLabelledBy?: string;
+  /**
+   * Error message to display.
+   */
+  error?: string;
+  /**
+   *  Whether the input is required, if true, an asterisk will be appended to the label.
+   * */
+  required?: boolean;
+  /**
+   *  Placeholder text to display.
+   * */
+  placeholder?: string;
+  /**
+   * Whether the input is editable.
+   * */
+  editable?: boolean;
+  /*
+   * Whether the input is disabled.
+   */
+  disabled?: boolean;
+  /*
+   * The max length of the input.
+   * If the max length is set, the input will display the current length and the max length.
+   * */
+  maxLength?: number;
+  /*
+   * The helper text to display.
+   */
+  helpText?: string;
 }
 
+export const getVariant = ({
+  disabled,
+  error,
+  editable,
+  isFocused,
+  isEmptyValue,
+}: {
+  disabled?: boolean;
+  error?: string;
+  editable?: boolean;
+  isFocused?: boolean;
+  isEmptyValue?: boolean;
+}): Variant => {
+  if (disabled) {
+    return 'disabled';
+  }
+  if (error) {
+    return 'error';
+  }
+  if (!editable) {
+    return 'readonly';
+  }
+  if (isFocused) {
+    return 'focused';
+  }
+  if (!isEmptyValue) {
+    return 'filled';
+  }
+  return 'default';
+};
+
 const TextInput = ({
   label,
   prefix,
@@ -47,28 +128,154 @@ const TextInput = ({
   textStyle,
   testID,
   accessibilityLabelledBy,
+  error,
+  required,
+  editable = true,
+  disabled = false,
+  maxLength,
+  helpText,
+  value,
+  defaultValue,
   ...nativeProps
-}: TextInputProps) => (
-  <Container style={style} testID={testID}>
-    {label && (
-      <Label
-        nativeID={accessibilityLabelledBy}
-        testID="input-label"
-        fontSize="small"
-      >
-        {label}
-      </Label>
-    )}
-    {prefix && <Icon testID="input-prefix" icon={prefix} size="xsmall" />}
-    <StyledTextInput
-      style={textStyle}
-      testID="text-input"
-      // @ts-ignore
-      accessibilityLabelledBy={accessibilityLabelledBy}
-      {...nativeProps}
-    />
-    {suffix && <Icon testID="input-suffix" icon={suffix} size="xsmall" />}
-  </Container>
-);
+}: TextInputProps): JSX.Element => {
+  const textInputReference = useRef<RNTextInput | null>(null);
+  const displayText = value || defaultValue || '';
+
+  const isEmptyValue = displayText.length === 0;
+
+  const [isFocused, setIsFocused] = React.useState(false);
+
+  const variant = getVariant({
+    disabled,
+    error,
+    editable,
+    isFocused,
+    isEmptyValue,
+  });
+
+  const shouldShowMaxLength = maxLength !== undefined;
+
+  const theme = useTheme();
+  return (
+    <StyledContainer
+      style={style}
+      pointerEvents={variant === 'disabled' ? 'none' : 'auto'}
+      testID={testID}
+    >
+      <StyledTextInputContainer>
+        <StyledBorderBackDrop themeVariant={variant} />
+        {(isFocused || (label && !isEmptyValue)) && (
+          <StyledLabelContainer pointerEvents="none">
+            {required && (
+              <StyledAsteriskLabel themeVariant={variant} fontSize="small">
+                *
+              </StyledAsteriskLabel>
+            )}
+            <StyledLabel
+              nativeID={accessibilityLabelledBy}
+              testID="input-label"
+              fontSize="small"
+              themeVariant={variant}
+            >
+              {label}
+            </StyledLabel>
+          </StyledLabelContainer>
+        )}
+        {typeof prefix === 'string' ? (
+          <Icon
+            intent={disabled ? 'disabled-text' : 'text'}
+            testID="input-prefix"
+            icon={prefix}
+            size="xsmall"
+          />
+        ) : (
+          prefix
+        )}
+
+        <StyledTextInputAndLabelContainer>
+          {!isFocused && isEmptyValue && (
+            <StyledLabelContainerInsideTextInput pointerEvents="none">
+              {required && (
+                <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                  *
+                </StyledAsteriskLabelInsideTextInput>
+              )}
+              <StyledLabelInsideTextInput
+                nativeID={accessibilityLabelledBy}
+                testID="input-label"
+                fontSize="medium"
+                themeVariant={variant}
+              >
+                {label}
+              </StyledLabelInsideTextInput>
+            </StyledLabelContainerInsideTextInput>
+          )}
+          <StyledTextInput
+            // when input is not editable on Android, the text color is gray
+            // hence, adding this to make the text color the same as iOS
+            style={StyleSheet.flatten([
+              { color: theme.__hd__.textInput.colors.text },
+              textStyle,
+            ])}
+            testID="text-input"
+            accessibilityState={{ disabled }}
+            // @ts-ignore
+            accessibilityLabelledBy={accessibilityLabelledBy}
+            {...nativeProps}
+            onFocus={event => {
+              setIsFocused(true);
+              nativeProps.onFocus?.(event);
+            }}
+            onBlur={event => {
+              setIsFocused(false);
+              nativeProps.onBlur?.(event);
+            }}
+            ref={textInputReference}
+            editable={editable}
+            maxLength={maxLength}
+            value={value}
+            onChangeText={text => {
+              nativeProps.onChangeText?.(text);
+            }}
+            defaultValue={defaultValue}
+            placeholder={
+              variant === 'focused' ? nativeProps.placeholder : undefined
+            }
+          />
+        </StyledTextInputAndLabelContainer>
+        {typeof suffix === 'string' ? (
+          <Icon
+            intent={disabled ? 'disabled-text' : 'text'}
+            testID="input-suffix"
+            icon={suffix}
+            size="xsmall"
+          />
+        ) : (
+          suffix
+        )}
+      </StyledTextInputContainer>
+      <StyledErrorAndHelpTextContainer>
+        {error && (
+          <StyledErrorContainer>
+            <Icon
+              testID="input-error-icon"
+              icon="circle-info"
+              size="xsmall"
+              intent="danger"
+            />
+
+            <StyledError testID="input-error-message">{error}</StyledError>
+          </StyledErrorContainer>
+        )}
+        {shouldShowMaxLength && (
+          <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
+            {displayText.length}/{maxLength}
+          </StyledMaxLengthMessage>
+        )}
+        {helpText && <StyledHelperText>{helpText}</StyledHelperText>}
+      </StyledErrorAndHelpTextContainer>
+    </StyledContainer>
+  );
+};
 
 export default TextInput;