@hero-design/rn 7.10.2 → 7.12.0

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;

package/src/components/Select/MultiSelect/Option.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
+import Icon from '../../Icon';
 
 import Typography from '../../Typography';
-import Icon from '../../Icon';
 import { OptionWrapper } from '../StyledSelect';
 
 const Option = ({

package/src/components/Select/MultiSelect/OptionList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { MultiSelectProps } from '.';
-import { getKey } from '../helpers';
+
+import StyledOptionList, { RenderItemProps } from '../StyledOptionList';
 import Option from './Option';
-import { OptionListWrapper, Spacer } from '../StyledSelect';
 
 interface OptionListProps<T> extends MultiSelectProps<T> {
   /**
@@ -12,32 +12,54 @@ interface OptionListProps<T> extends MultiSelectProps<T> {
 }
 
 const OptionList = <T,>({
-  value,
-  options,
-  onPress,
   keyExtractor,
+  loading,
+  onEndReached,
+  onPress,
+  onQueryChange,
+  options,
+  value,
 }: Pick<
   OptionListProps<T>,
-  'value' | 'options' | 'onPress' | 'keyExtractor'
->) => (
-  <OptionListWrapper>
-    {options.map((opt, index) => (
-      <React.Fragment key={getKey(opt, index, keyExtractor)}>
-        {index !== 0 && <Spacer />}
-        <Option
-          text={opt.text}
-          selected={value.includes(opt.value)}
-          onPress={() => {
-            if (value.includes(opt.value)) {
-              onPress(value.filter(val => val !== opt.value));
-            } else {
-              onPress([...value, opt.value]);
-            }
-          }}
-        />
-      </React.Fragment>
-    ))}
-  </OptionListWrapper>
-);
+  | 'keyExtractor'
+  | 'loading'
+  | 'onEndReached'
+  | 'onPress'
+  | 'onQueryChange'
+  | 'options'
+  | 'value'
+>) => {
+  const firstValue = value?.[0];
+  const rawScrollIndex = firstValue
+    ? options.findIndex(option => option.value === firstValue)
+    : 0;
+  const scrollIndex = rawScrollIndex - 2 >= 0 ? rawScrollIndex - 2 : 0;
+
+  const RenderItem = React.memo(({ item }: RenderItemProps<T>) => (
+    <Option
+      text={item.text}
+      selected={value.includes(item.value)}
+      onPress={() => {
+        if (value.includes(item.value)) {
+          onPress(value.filter(val => val !== item.value));
+        } else {
+          onPress([...value, item.value]);
+        }
+      }}
+    />
+  ));
+
+  return (
+    <StyledOptionList<T>
+      keyExtractor={keyExtractor}
+      loading={loading}
+      onEndReached={onEndReached}
+      onQueryChange={onQueryChange}
+      options={options}
+      RenderItem={RenderItem}
+      scrollIndex={scrollIndex}
+    />
+  );
+};
 
 export default OptionList;

package/src/components/Select/MultiSelect/__tests__/OptionList.spec.tsx

@@ -39,4 +39,17 @@ describe('OptionList', () => {
     expect(pressFn).toBeCalledTimes(1);
     expect(pressFn).toHaveBeenCalledWith(['b']);
   });
+
+  it('render isLoading correctly', () => {
+    const pressFn = jest.fn();
+    const { toJSON } = renderWithTheme(
+      <OptionList
+        value={['a']}
+        options={mockOptions}
+        onPress={pressFn}
+        loading
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });