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

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import PinInput, { getState } from '..';
+
+describe('rendering', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <PinInput value="12" onChangeText={jest.fn()} />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByTestId('pin-cell-filled-mask')).toHaveLength(2);
+    expect(wrapper.queryAllByTestId('pin-cell-mask')).toHaveLength(2);
+  });
+
+  it('renders correctly when length is 6 and secure is false', () => {
+    const wrapper = renderWithTheme(
+      <PinInput
+        length={6}
+        value="123"
+        onChangeText={jest.fn()}
+        secure={false}
+      />
+    );
+
+    expect(wrapper.queryAllByText('1')).toHaveLength(1);
+    expect(wrapper.queryAllByText('2')).toHaveLength(1);
+    expect(wrapper.queryAllByText('3')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('pin-cell-mask')).toHaveLength(3);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when there is error', () => {
+    const wrapper = renderWithTheme(
+      <PinInput
+        value="12"
+        onChangeText={jest.fn()}
+        error="PIN is not correct"
+      />
+    );
+
+    expect(wrapper.queryAllByText('PIN is not correct')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('pin-error-icon')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when disabled', () => {
+    const wrapper = renderWithTheme(
+      <PinInput value="12" onChangeText={jest.fn()} disabled />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('behaviors', () => {
+  it('calls onChangeText, onFulfill with correct params', () => {
+    const onChangeText = jest.fn();
+    const onFulfill = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <PinInput value="123" onChangeText={onChangeText} onFulfill={onFulfill} />
+    );
+
+    const hiddenInput = getByTestId('pin-hidden-input');
+    fireEvent.changeText(hiddenInput, '123.4'); // 123.4 is intended to test regex behavior
+
+    expect(onChangeText).toHaveBeenCalledWith('1234');
+    expect(onFulfill).toHaveBeenCalledWith('1234');
+  });
+});
+
+describe('getState', () => {
+  it.each`
+    disabled | error                       | state
+    ${true}  | ${'PIN is not correct'}     | ${'disabled'}
+    ${true}  | ${undefined}                | ${'disabled'}
+    ${false} | ${'This field is required'} | ${'error'}
+    ${false} | ${undefined}                | ${'default'}
+  `(
+    'returns $state when disabled is $disabled, error is $error',
+    ({ disabled, error, state }) => {
+      expect(
+        getState({
+          disabled,
+          error,
+        })
+      ).toBe(state);
+    }
+  );
+});

package/src/components/PinInput/index.tsx

@@ -0,0 +1,173 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  InteractionManager,
+  StyleProp,
+  TextInput,
+  ViewStyle,
+} from 'react-native';
+import Icon from '../Icon';
+import PinCell from './PinCell';
+import {
+  StyledErrorContainer,
+  StyledErrorMessage,
+  StyledHiddenInput,
+  StyledSpacer,
+  StyledPinWrapper,
+  StyledWrapper,
+  State,
+} from './StyledPinInput';
+
+interface PinInputProps {
+  /**
+   * The value to show for the input.
+   */
+  value?: string;
+  /**
+   * Callback function that's called when the text changed.
+   */
+  onChangeText: (value: string) => void;
+  /**
+   * Callback function that's called when the input is completely filled.
+   */
+  onFulfill?: (value: string) => void;
+  /**
+   * Number of character for the input.
+   */
+  length?: number;
+  /*
+   * Whether the input is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Whether the pin value is secured using masks.
+   * By default, this is true, meaning that masks are shown to hide pin value.
+   */
+  secure?: boolean;
+  /**
+   * If true, focuses the input on componentDidMount.
+   */
+  autoFocus?: boolean;
+  /**
+   * Error message.
+   */
+  error?: string;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+export function getState({
+  disabled,
+  error,
+}: {
+  disabled?: boolean;
+  error?: string;
+}): State {
+  if (disabled) {
+    return 'disabled';
+  }
+  if (error) {
+    return 'error';
+  }
+  return 'default';
+}
+
+function PinInput({
+  value = '',
+  onChangeText,
+  onFulfill,
+  length = 4,
+  disabled = false,
+  secure = true,
+  autoFocus = false,
+  error,
+  style,
+  testID,
+}: PinInputProps) {
+  const inputRef = useRef<TextInput>(null);
+  const [focused, setFocused] = useState(autoFocus);
+  const state = getState({ disabled, error });
+
+  const focus = useCallback(() => {
+    if (inputRef?.current) {
+      inputRef.current.focus();
+      setFocused(true);
+    }
+  }, []);
+
+  const blur = useCallback(() => {
+    if (inputRef?.current) {
+      inputRef.current.blur();
+      setFocused(false);
+    }
+  }, []);
+
+  const changeText = useCallback((text: string) => {
+    const pin = (text.match(/[0-9]/g) || []).join('');
+    if (onChangeText) {
+      onChangeText(pin);
+    }
+    if (pin.length === length && onFulfill) {
+      onFulfill(pin);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Must run after animations for keyboard to automatically open
+    if (autoFocus) {
+      InteractionManager.runAfterInteractions(focus);
+    }
+  }, [inputRef]);
+
+  return (
+    <StyledWrapper style={style} testID={testID}>
+      <StyledPinWrapper>
+        {[...Array(length).keys()].map(index => (
+          <React.Fragment key={index}>
+            {index !== 0 && <StyledSpacer />}
+            <PinCell
+              value={value.charAt(index)}
+              secure={secure}
+              focused={focused && index === value.length}
+              state={state}
+            />
+          </React.Fragment>
+        ))}
+      </StyledPinWrapper>
+      {state === 'error' && (
+        <StyledErrorContainer>
+          <Icon
+            icon="circle-info"
+            size="xsmall"
+            intent="danger"
+            testID="pin-error-icon"
+          />
+          <StyledErrorMessage>{error}</StyledErrorMessage>
+        </StyledErrorContainer>
+      )}
+      <StyledHiddenInput
+        themePinLength={length}
+        ref={inputRef}
+        value={value}
+        onChangeText={changeText}
+        secureTextEntry={secure}
+        editable={!disabled}
+        autoFocus={autoFocus}
+        onFocus={focus}
+        onBlur={blur}
+        maxLength={length}
+        keyboardType="numeric"
+        contextMenuHidden
+        caretHidden
+        testID="pin-hidden-input"
+      />
+    </StyledWrapper>
+  );
+}
+
+export default PinInput;