move otp state to parent

mui · Jan 16, 2024 · 51965ca · 51965ca
1 parent 82fb39f
commit 51965ca
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/docs/data/base/components/input/OTPInput.js b/docs/data/base/components/input/OTPInput.js
@@ -2,9 +2,8 @@ import * as React from 'react';
 import { Input as BaseInput } from '@mui/base/Input';
 import { Box, styled } from '@mui/system';
 
-function OTP({ seperator, inputCount }) {
+function OTP({ seperator, inputCount, otp, setOtp }) {
   const inputRefs = React.useRef(new Array(inputCount).fill(null));
-  const [otp, setOtp] = React.useState(new Array(inputCount).fill(''));
 
   const focusInput = (targetIndex) => {
     const targetInput = inputRefs.current[targetIndex];
@@ -105,9 +104,16 @@ function OTP({ seperator, inputCount }) {
 }
 
 export default function OTPInput() {
+  const inputCount = 5;
+  const [otp, setOtp] = React.useState(new Array(inputCount).fill(''));
   return (
     <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-      <OTP seperator={<span>-</span>} inputCount={5} />
+      <OTP
+        seperator={<span>-</span>}
+        otp={otp}
+        setOtp={setOtp}
+        inputCount={inputCount}
+      />
     </Box>
   );
 }

diff --git a/docs/data/base/components/input/OTPInput.tsx b/docs/data/base/components/input/OTPInput.tsx
@@ -5,14 +5,17 @@ import { Box, styled } from '@mui/system';
 function OTP({
   seperator,
   inputCount,
+  otp,
+  setOtp,
 }: {
   seperator: React.ReactNode;
   inputCount: number;
+  otp: string[];
+  setOtp: React.Dispatch<React.SetStateAction<string[]>>;
 }) {
   const inputRefs = React.useRef<HTMLInputElement[]>(
     new Array(inputCount).fill(null),
   );
-  const [otp, setOtp] = React.useState<string[]>(new Array(inputCount).fill(''));
 
   const focusInput = (targetIndex: number) => {
     const targetInput = inputRefs.current[targetIndex];
@@ -122,9 +125,16 @@ function OTP({
 }
 
 export default function OTPInput() {
+  const inputCount = 5;
+  const [otp, setOtp] = React.useState<string[]>(new Array(inputCount).fill(''));
   return (
     <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-      <OTP seperator={<span>-</span>} inputCount={5} />
+      <OTP
+        seperator={<span>-</span>}
+        otp={otp}
+        setOtp={setOtp}
+        inputCount={inputCount}
+      />
     </Box>
   );
 }

diff --git a/docs/data/base/components/input/OTPInput.tsx.preview b/docs/data/base/components/input/OTPInput.tsx.preview
@@ -1 +1,6 @@
-<OTP seperator={<span>-</span>} inputCount={5} />
+<OTP
+  seperator={<span>-</span>}
+  otp={otp}
+  setOtp={setOtp}
+  inputCount={inputCount}
+/>