Merge pull request #18 from anday013/feat/prop-on-filled-callback

feat: add `onFilled` callback to props

Author: anday013

README.MD

@@ -14,7 +14,9 @@
 - Supports OTP input with a fixed number of digits.
 - Highly customizable appearance and styling.
 - Supports autofill
+- Fully covered with unit tests.
 - Seamless integration with React Native and Expo applications.
+- Fully typed with TypeScript.
 
 ## Installation
 
@@ -50,6 +52,7 @@ yarn add react-native-otp-entry
      focusColor="green"
      focusStickBlinkingDuration={500}
      onTextChange={(text) => console.log(text)}
+     onFilled={(text) => console.log(`OTP is ${text}`)}
      theme={{
        containerStyle={styles.container},
        inputsContainerStyle={styles.inputsContainer},
@@ -64,14 +67,15 @@ 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.                                                      |
-| `focusColor`                 | ColorValue             | The color of the input field border and stick when it is focused.                                           |
-| `onTextChange`               | (text: string) => void | A callback function that is invoked when the OTP text changes. It receives the updated text as an argument. |
-| `hideStick`                  | boolean                | Hide cursor of the focused input.                                                                           |
-| `theme`                      | Theme                  | Custom styles for each element.                                                                             |
-| `focusStickBlinkingDuration` | number                 | The duration (in milliseconds) for the focus stick to blink.                                                |
+| Prop                         | Type                   | Description                                                                                                    |
+| ---------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `numberOfDigits`             | number                 | The number of digits to be displayed in the OTP entry.                                                         |
+| `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. |
+| `hideStick`                  | boolean                | Hide cursor of the focused input.                                                                              |
+| `theme`                      | Theme                  | Custom styles for each element.                                                                                |
+| `focusStickBlinkingDuration` | number                 | The duration (in milliseconds) for the focus stick to blink.                                                   |
 
 | Theme                   | Type      | Description                                                                        |
 | ----------------------- | --------- | ---------------------------------------------------------------------------------- |

dist/src/OtpInput/OtpInput.js

@@ -7,10 +7,10 @@ const OtpInput_styles_1 = require("./OtpInput.styles");
 const VerticalStick_1 = require("./VerticalStick");
 const useOtpInput_1 = require("./useOtpInput");
 exports.OtpInput = (0, react_1.forwardRef)((props, ref) => {
-    const { models: { text, inputRef, focusedInputIndex }, actions: { clear, handlePress, handleTextChange }, forms: { setText }, } = (0, useOtpInput_1.useOtpInput)(props);
+    const { models: { text, inputRef, focusedInputIndex }, actions: { clear, handlePress, handleTextChange }, forms: { setTextWithRef } } = (0, useOtpInput_1.useOtpInput)(props);
     const { numberOfDigits, hideStick, focusColor = "#A4D0A4", focusStickBlinkingDuration, theme = {}, } = props;
     const { containerStyle, inputsContainerStyle, pinCodeContainerStyle, pinCodeTextStyle, focusStickStyle, } = theme;
-    (0, react_1.useImperativeHandle)(ref, () => ({ clear, setValue: setText }));
+    (0, react_1.useImperativeHandle)(ref, () => ({ clear, setValue: setTextWithRef }));
     return (<react_native_1.View style={[OtpInput_styles_1.styles.container, containerStyle]}>
       <react_native_1.View style={[OtpInput_styles_1.styles.inputsContainer, inputsContainerStyle]}>
         {Array(numberOfDigits)

dist/src/OtpInput/OtpInput.test.js

@@ -15,6 +15,14 @@ describe("OtpInput", () => {
             const stick = react_native_1.screen.getByTestId("otp-input-stick");
             expect(stick).toBeTruthy();
         });
+        test("focusColor should not be overridden by theme", () => {
+            renderOtpInput({
+                focusColor: "#000",
+                theme: { pinCodeContainerStyle: { borderColor: "#fff" } },
+            });
+            const inputs = react_native_1.screen.getAllByTestId("otp-input");
+            expect(inputs[0]).toHaveStyle({ borderColor: "#000" });
+        });
         // Test if the number of rendered inputs is equal to the number of digits
         test.each([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])("should render the correct number of inputs: %i", (numberOfDigits) => {
             renderOtpInput({ numberOfDigits: numberOfDigits });
@@ -58,5 +66,19 @@ describe("OtpInput", () => {
             });
             expect(react_native_1.screen.getByText("1")).toBeTruthy();
         });
+        test('ref setValue() should set only the first "numberOfDigits" characters', () => {
+            const ref = React.createRef();
+            (0, react_native_1.render)(<OtpInput_1.OtpInput ref={ref} numberOfDigits={4}/>);
+            const otp = "123456";
+            (0, react_native_1.act)(() => {
+                ref.current?.setValue(otp);
+            });
+            expect(react_native_1.screen.getByText("1")).toBeTruthy();
+            expect(react_native_1.screen.getByText("2")).toBeTruthy();
+            expect(react_native_1.screen.getByText("3")).toBeTruthy();
+            expect(react_native_1.screen.getByText("4")).toBeTruthy();
+            expect(react_native_1.screen.queryByText("5")).toBeFalsy();
+            expect(react_native_1.screen.queryByText("6")).toBeFalsy();
+        });
     });
 });

dist/src/OtpInput/OtpInput.types.d.ts

@@ -3,6 +3,7 @@ export interface OtpInputProps {
     numberOfDigits: number;
     focusColor?: ColorValue;
     onTextChange?: (text: string) => void;
+    onFilled?: (text: string) => void;
     hideStick?: boolean;
     focusStickBlinkingDuration?: number;
     theme?: Theme;

dist/src/OtpInput/useOtpInput.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TextInput } from "react-native";
 import { OtpInputProps } from "./OtpInput.types";
-export declare const useOtpInput: ({ onTextChange }: OtpInputProps) => {
+export declare const useOtpInput: ({ onTextChange, onFilled, numberOfDigits }: OtpInputProps) => {
     models: {
         text: string;
         inputRef: import("react").RefObject<TextInput>;
@@ -14,5 +14,6 @@ export declare const useOtpInput: ({ onTextChange }: OtpInputProps) => {
     };
     forms: {
         setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+        setTextWithRef: (value: string) => void;
     };
 };

dist/src/OtpInput/useOtpInput.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOtpInput = void 0;
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const useOtpInput = ({ onTextChange }) => {
+const useOtpInput = ({ onTextChange, onFilled, numberOfDigits }) => {
     const [text, setText] = (0, react_1.useState)("");
     const inputRef = (0, react_1.useRef)(null);
     const focusedInputIndex = text.length;
@@ -17,14 +17,21 @@ const useOtpInput = ({ onTextChange }) => {
     const handleTextChange = (value) => {
         setText(value);
         onTextChange?.(value);
+        if (value.length === numberOfDigits) {
+            onFilled?.(value);
+        }
+    };
+    const setTextWithRef = (value) => {
+        const normalizedValue = value.length > numberOfDigits ? value.slice(0, numberOfDigits) : value;
+        handleTextChange(normalizedValue);
     };
     const clear = () => {
         setText("");
     };
     return {
         models: { text, inputRef, focusedInputIndex },
         actions: { handlePress, handleTextChange, clear },
-        forms: { setText },
+        forms: { setText, setTextWithRef },
     };
 };
 exports.useOtpInput = useOtpInput;

dist/src/OtpInput/useOtpInput.test.js

@@ -20,10 +20,17 @@ describe("useOtpInput", () => {
         const { result } = renderUseOtInput();
         result.current.actions.clear();
         (0, react_native_1.act)(() => {
-            expect(result.current.models.text).toBe("");
             expect(result.current.forms.setText).toHaveBeenCalledWith("");
         });
     });
+    test("setTextWithRef() should only call setText the first 'numberOfDigits' characters", () => {
+        jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
+        const { result } = renderUseOtInput();
+        result.current.forms.setTextWithRef("123456789");
+        (0, react_native_1.act)(() => {
+            expect(result.current.forms.setText).toHaveBeenCalledWith("123456");
+        });
+    });
     test("handlePress() should dismiss Keyboard if it's visible", () => {
         jest.spyOn(react_native_2.Keyboard, "dismiss");
         jest.spyOn(react_native_2.Keyboard, "isVisible").mockReturnValue(false);
@@ -61,4 +68,22 @@ describe("useOtpInput", () => {
             expect(mockOnTextChange).toHaveBeenCalledWith(value);
         });
     });
+    test("onFilled() should be called when the input filled", () => {
+        const value = "123456";
+        const mockOnFilled = jest.fn();
+        const { result } = renderUseOtInput({ onFilled: mockOnFilled });
+        result.current.actions.handleTextChange(value);
+        (0, react_native_1.act)(() => {
+            expect(mockOnFilled).toHaveBeenCalledWith(value);
+        });
+    });
+    test("onFilled() should NOT be called when the input is NOT filled", () => {
+        const value = "12345";
+        const mockOnFilled = jest.fn();
+        const { result } = renderUseOtInput({ onFilled: mockOnFilled });
+        result.current.actions.handleTextChange(value);
+        (0, react_native_1.act)(() => {
+            expect(mockOnFilled).not.toHaveBeenCalled();
+        });
+    });
 });