@hoddy-ui/core 1.0.35 → 1.0.36

package/index.ts

@@ -19,6 +19,7 @@ export { default as Spinner } from "./src/Components/Spinner";
 export * from "./src/Components/TextField";
 export { default as TextField } from "./src/Components/TextField";
 export { default as Typography } from "./src/Components/Typography";
+export * from "./src/Components/OTPInput";
 // Others
 // export * from "./src/config";
 export * from "./src/hooks";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/Components/OTPInput.tsx

@@ -1,47 +1,82 @@
-import React, { useState } from "react";
-import { View, TextInput, StyleSheet, Button } from "react-native";
+import React, { FC, useMemo, useState } from "react";
+import { TextInput, View } from "react-native";
+import { ScaledSheet, ms } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { OTPInputProps } from "../types";
 
-export const OTPInput = () => {
-  const [numFields, setNumFields] = useState(1);
-  const [inputTexts, setInputTexts] = useState(Array(numFields).fill(""));
-
-  const handleInputChange = (text, index) => {
-    const updatedInputTexts = [...inputTexts];
-    updatedInputTexts[index] = text;
-    setInputTexts(updatedInputTexts);
-  };
+export const OTPInput: FC<OTPInputProps> = ({
+  length = 6,
+  onChange = () => {},
+  value = "",
+  variant = "outlined",
+  spacing = 1,
+  size = 45,
+}) => {
+  const inputRefs = useMemo(
+    () =>
+      Array(length)
+        .fill(0)
+        .map((_) => React.createRef<TextInput>()),
+    [length]
+  );
 
-  const addField = () => {
-    setNumFields(numFields + 1);
-    setInputTexts([...inputTexts, ""]);
-  };
+  const colors = useColors();
+  const styles = ScaledSheet.create({
+    root: {},
+    container: { flexDirection: "row" },
+    input: {
+      height: ms(size),
+      width: ms(size),
+      borderColor: colors.white[5],
+      backgroundColor: variant === "contained" ? colors.white[3] : undefined,
+      borderWidth: variant === "outlined" ? 1 : 0,
+      borderBottomWidth: variant === "contained" ? 0 : 1,
+      marginHorizontal: ms(spacing * 5),
+      textAlign: "center",
+      borderRadius: variant === "text" ? 0 : 10,
+      color: colors.dark.main,
+      fontSize: ms(size * 0.5),
+    },
+  });
 
   return (
-    <View style={styles.container}>
-      {inputTexts.map((inputText, index) => (
-        <TextInput
-          key={index}
-          style={styles.input}
-          placeholder={`Enter text ${index + 1}`}
-          value={inputText}
-          onChangeText={(text) => handleInputChange(text, index)}
-        />
-      ))}
-      <Button title="Add Field" onPress={addField} />
+    <View style={styles.root}>
+      <View style={styles.container}>
+        {[...Array(length)].map((_, index) => (
+          <TextInput
+            ref={inputRefs[index]}
+            onChangeText={(val) => {
+              if (val.length === 1) {
+                if (index !== length - 1) inputRefs[index + 1].current?.focus();
+                let text = value;
+
+                text = text.slice(0, index) + val + text.slice(index + 1);
+                onChange(text);
+              } else if (val.length === 0) {
+                if (index !== 0) {
+                  inputRefs[index - 1].current?.focus();
+                  let text = value;
+
+                  text = text.slice(0, index);
+                  onChange(text);
+                } else onChange("");
+              } else {
+                let text = val.replace(/\D/g, "").slice(0, length);
+                onChange(text);
+                inputRefs[
+                  text.length < length - 1 ? text.length : length - 1
+                ]?.current?.focus();
+              }
+            }}
+            value={value[index] || ""}
+            // maxLength={1}
+            blurOnSubmit={false}
+            keyboardType="number-pad"
+            key={index}
+            style={[styles.input]}
+          />
+        ))}
+      </View>
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 20,
-    paddingHorizontal: 16,
-  },
-  input: {
-    height: 40,
-    borderColor: "gray",
-    borderWidth: 1,
-    paddingHorizontal: 10,
-    marginBottom: 10,
-  },
-});

package/src/theme/index.tsx

@@ -22,7 +22,6 @@ function themeReducer(
   state: ThemeState,
   { type, payload }: ThemeActionTypes
 ): ThemeState {
-  console.log(type, payload);
   // Platform
   if (payload === "dark" || type === "dark") {
     SystemUI.setBackgroundColorAsync("#000000");

package/src/types.ts

@@ -283,3 +283,12 @@ export interface SelectMenuProps {
   secondary?: string;
   helperText?: string;
 }
+
+export interface OTPInputProps {
+  length?: number;
+  onChange: (value: string) => void;
+  value: string;
+  variant?: "outlined" | "text" | "contained";
+  spacing?: number;
+  size?: number;
+}