Add input type functionality (#61)

* feat: add type property * test: add tests to useOtpInput * docs: update README * refactor: improve code scalability
anday013 · Jun 23, 2024 · 3b43c34 · 3b43c34
1 parent 25c0df9
commit 3b43c34
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 13 deletions.
diff --git a/README.MD b/README.MD
@@ -80,19 +80,20 @@ yarn add react-native-otp-entry
 
 The `react-native-otp-entry` component accepts the following props:
 
-| Prop                         | Type                   | Description                                                                                                    |
-| ---------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `numberOfDigits`             | number                 | The number of digits to be displayed in the OTP entry.                                                         |
-| `textInputProps`             | TextInputProps         | Extra props passed to underlying hidden TextInput (see: https://reactnative.dev/docs/textinput)                |
-| `autoFocus`                  | boolean                | _Default: true_. Sets autofocus.                                                                               |
-| `focusColor`                 | ColorValue             | The color of the input field border and stick when it is focused.                                              |
-| `onTextChange`               | (text: string) => void | A callback function is invoked when the OTP text changes. It receives the updated text as an argument.         |
-| `onFilled`                   | (text: string) => void | A callback function is invoked when the OTP input is fully filled. It receives a full otp code as an argument. |
-| `blurOnFilled`               | boolean                | _Default: false_. Blurs (unfocuses) the input when the OTP input is fully filled.                              |
-| `hideStick`                  | boolean                | _Default: false_. Hides cursor of the focused input.                                                           |
-| `theme`                      | Theme                  | Custom styles for each element.                                                                                |
-| `focusStickBlinkingDuration` | number                 | The duration (in milliseconds) for the focus stick to blink.                                                   |
-| `disabled`                   | boolean                | _Default: false_. Disables the input                                                                           |
+| Prop                         | Type                                   | Description                                                                                                    |
+| ---------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `numberOfDigits`             | number                                 | The number of digits to be displayed in the OTP entry.                                                         |
+| `textInputProps`             | TextInputProps                         | Extra props passed to underlying hidden TextInput (see: https://reactnative.dev/docs/textinput)                |
+| `autoFocus`                  | boolean                                | _Default: true_. Sets autofocus.                                                                               |
+| `focusColor`                 | ColorValue                             | The color of the input field border and stick when it is focused.                                              |
+| `onTextChange`               | (text: string) => void                 | A callback function is invoked when the OTP text changes. It receives the updated text as an argument.         |
+| `onFilled`                   | (text: string) => void                 | A callback function is invoked when the OTP input is fully filled. It receives a full otp code as an argument. |
+| `blurOnFilled`               | boolean                                | _Default: false_. Blurs (unfocuses) the input when the OTP input is fully filled.                              |
+| `hideStick`                  | boolean                                | _Default: false_. Hides cursor of the focused input.                                                           |
+| `theme`                      | Theme                                  | Custom styles for each element.                                                                                |
+| `focusStickBlinkingDuration` | number                                 | The duration (in milliseconds) for the focus stick to blink.                                                   |
+| `disabled`                   | boolean                                | _Default: false_. Disables the input                                                                           |
+| `type`                       | 'alpha' \| 'numeric' \| 'alphanumeric' | The type of input. 'alpha': letters only, 'numeric': numbers only, 'alphanumeric': letters or numbers.         |
 
 | Theme                           | Type      | Description                                                                        |
 | ------------------------------- | --------- | ---------------------------------------------------------------------------------- |

diff --git a/src/OtpInput/OtpInput.types.ts b/src/OtpInput/OtpInput.types.ts
@@ -13,6 +13,7 @@ export interface OtpInputProps {
   theme?: Theme;
   disabled?: boolean;
   textInputProps?: TextInputProps;
+  type?: "alpha" | "numeric" | "alphanumeric";
 }
 
 export interface OtpInputRef {

diff --git a/src/OtpInput/__tests__/useOtpInput.test.ts b/src/OtpInput/__tests__/useOtpInput.test.ts
@@ -107,6 +107,90 @@ describe("useOtpInput", () => {
     });
   });
 
+  test("handleTextChange() should call setText() and onTextChange() with value when type is alpha and value has only letters", () => {
+    const value = "abcdef";
+    const mockOnTextChange = jest.fn();
+    jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
+
+    const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "alpha" });
+    result.current.actions.handleTextChange(value);
+
+    act(() => {
+      expect(result.current.forms.setText).toHaveBeenCalledWith(value);
+      expect(mockOnTextChange).toHaveBeenCalledWith(value);
+    });
+  });
+
+  test("handleTextChange() should call setText() and onTextChange() with value when type is numeric and value has only numbers", () => {
+    const value = "123456";
+    const mockOnTextChange = jest.fn();
+    jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
+
+    const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "numeric" });
+    result.current.actions.handleTextChange(value);
+
+    act(() => {
+      expect(result.current.forms.setText).toHaveBeenCalledWith(value);
+      expect(mockOnTextChange).toHaveBeenCalledWith(value);
+    });
+  });
+
+  test("handleTextChange() should call setText() and onTextChange() with value when type is alphanumeric and value has letters and numbers", () => {
+    const value = "abc123";
+    const mockOnTextChange = jest.fn();
+    jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
+
+    const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "alphanumeric" });
+    result.current.actions.handleTextChange(value);
+
+    act(() => {
+      expect(result.current.forms.setText).toHaveBeenCalledWith(value);
+      expect(mockOnTextChange).toHaveBeenCalledWith(value);
+    });
+  });
+
+  test("handleTextChange() should NOT call setText() and onTextChange() with value when type is alpha and value has numbers", () => {
+    const value = "abc123";
+    const mockOnTextChange = jest.fn();
+    jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
+
+    const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "alpha" });
+    result.current.actions.handleTextChange(value);
+
+    act(() => {
+      expect(result.current.forms.setText).not.toHaveBeenCalledWith(value);
+      expect(mockOnTextChange).not.toHaveBeenCalledWith(value);
+    });
+  });
+
+   test("handleTextChange() should NOT call setText() and onTextChange() with value when type is numeric and value has letters", () => {
+     const value = "abc123";
+     const mockOnTextChange = jest.fn();
+     jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
+
+     const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "numeric" });
+     result.current.actions.handleTextChange(value);
+
+     act(() => {
+       expect(result.current.forms.setText).not.toHaveBeenCalledWith(value);
+       expect(mockOnTextChange).not.toHaveBeenCalledWith(value);
+     });
+   });
+
+   test("handleTextChange() should NOT call setText() and onTextChange() with value when type is alphanumeric and value has special characters", () => {
+     const value = "a1/*-+";
+     const mockOnTextChange = jest.fn();
+     jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
+
+     const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "alphanumeric" });
+     result.current.actions.handleTextChange(value);
+
+     act(() => {
+       expect(result.current.forms.setText).not.toHaveBeenCalledWith(value);
+       expect(mockOnTextChange).not.toHaveBeenCalledWith(value);
+     });
+   });
+
   test("handleTextChange() should not proceed if the input is disabled", () => {
     const value = "123456";
     const mockOnTextChange = jest.fn();

diff --git a/src/OtpInput/useOtpInput.ts b/src/OtpInput/useOtpInput.ts
@@ -9,11 +9,17 @@ export const useOtpInput = ({
   disabled,
   autoFocus = true,
   blurOnFilled,
+  type,
 }: OtpInputProps) => {
   const [text, setText] = useState("");
   const [isFocused, setIsFocused] = useState(autoFocus);
   const inputRef = useRef<TextInput>(null);
   const focusedInputIndex = text.length;
+  const regexMap = {
+    alpha: /[^a-zA-Z]/,
+    numeric: /[^\d]/,
+    alphanumeric: /[^a-zA-Z\d]/,
+  };
 
   const handlePress = () => {
     // To fix bug when keyboard is not popping up after being dismissed
@@ -24,6 +30,7 @@ export const useOtpInput = ({
   };
 
   const handleTextChange = (value: string) => {
+    if (type && regexMap[type].test(value)) return;
     if (disabled) return;
     setText(value);
     onTextChange?.(value);