Merge pull request #34 from EddWills95/allow-styling-when-filled

feat: allow styles when digit has value
anday013 · Jan 7, 2024 · f8e7dbb · f8e7dbb
2 parents 1ab3759 + 46a9486
commit f8e7dbb
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 0 deletions.
diff --git a/README.MD b/README.MD
@@ -87,6 +87,7 @@ The `react-native-otp-entry` component accepts the following props:
 | `pinCodeTextStyle`             | TextStyle | Custom styles for the text within each individual digit in the OTP entry.          |
 | `focusStickStyle`              | ViewStyle | Custom styles for the focus stick, which indicates the focused input field.        |
 | `focusedPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it is focused.                              |
+| `filledPinCodeContainerStyle`  | ViewStyle | Custom styles for the input field when it has a value.                             |
 
 Note: The `ViewStyle` and `TextStyle` types are imported from `react-native` and represent the style objects used in React Native for views and text, respectively.
 

diff --git a/src/OtpInput/OtpInput.test.tsx b/src/OtpInput/OtpInput.test.tsx
@@ -81,6 +81,20 @@ describe("OtpInput", () => {
         expect(inputs).toHaveLength(numberOfDigits);
       }
     );
+
+    test("filledPinCodeContainerStyle should allow for new style when digit is present", () => {
+      renderOtpInput({
+        theme: { filledPinCodeContainerStyle: { borderBottomColor: "red" } },
+      });
+
+      const input = screen.getByTestId("otp-input-hidden");
+      fireEvent.changeText(input, "12");
+
+      const inputs = screen.getAllByTestId("otp-input");
+      expect(inputs[0]).toHaveStyle({ borderBottomColor: "red" });
+      expect(inputs[1]).toHaveStyle({ borderBottomColor: "red" });
+      expect(inputs[2]).not.toHaveStyle({ borderBottomColor: "red" });
+    });
   });
 
   describe("Logic", () => {

diff --git a/src/OtpInput/OtpInput.tsx b/src/OtpInput/OtpInput.tsx
@@ -27,6 +27,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
     pinCodeTextStyle,
     focusStickStyle,
     focusedPinCodeContainerStyle,
+    filledPinCodeContainerStyle,
   } = theme;
 
   useImperativeHandle(ref, () => ({ clear, focus, setValue: setTextWithRef }));
@@ -51,6 +52,9 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
                   focusedPinCodeContainerStyle && isFocusedInput
                     ? { ...focusedPinCodeContainerStyle }
                     : {},
+                  filledPinCodeContainerStyle && Boolean(char)
+                    ? { ...filledPinCodeContainerStyle }
+                    : {},
                 ]}
                 testID="otp-input"
               >

diff --git a/src/OtpInput/OtpInput.types.ts b/src/OtpInput/OtpInput.types.ts
@@ -22,6 +22,7 @@ export interface Theme {
   containerStyle?: ViewStyle;
   inputsContainerStyle?: ViewStyle;
   pinCodeContainerStyle?: ViewStyle;
+  filledPinCodeContainerStyle?: ViewStyle;
   pinCodeTextStyle?: TextStyle;
   focusStickStyle?: ViewStyle;
   focusedPinCodeContainerStyle?: ViewStyle;

diff --git a/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap b/src/OtpInput/__snapshots__/OtpInput.test.tsx.snap
@@ -69,6 +69,7 @@ exports[`OtpInput UI should render correctly 1`] = `
             "borderColor": "#A4D0A4",
           },
           {},
+          {},
         ]
       }
       testID="otp-input"
@@ -143,6 +144,7 @@ exports[`OtpInput UI should render correctly 1`] = `
           undefined,
           {},
           {},
+          {},
         ]
       }
       testID="otp-input"
@@ -202,6 +204,7 @@ exports[`OtpInput UI should render correctly 1`] = `
           undefined,
           {},
           {},
+          {},
         ]
       }
       testID="otp-input"
@@ -261,6 +264,7 @@ exports[`OtpInput UI should render correctly 1`] = `
           undefined,
           {},
           {},
+          {},
         ]
       }
       testID="otp-input"
@@ -320,6 +324,7 @@ exports[`OtpInput UI should render correctly 1`] = `
           undefined,
           {},
           {},
+          {},
         ]
       }
       testID="otp-input"
@@ -379,6 +384,7 @@ exports[`OtpInput UI should render correctly 1`] = `
           undefined,
           {},
           {},
+          {},
         ]
       }
       testID="otp-input"