display entered value

mui · Jan 17, 2024 · 50c9913 · 50c9913
1 parent 7c6a232
commit 50c9913
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 49 deletions.
diff --git a/docs/data/base/components/input/OTPInput.js b/docs/data/base/components/input/OTPInput.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Input as BaseInput } from '@mui/base/Input';
 import { Box, styled } from '@mui/system';
 
@@ -113,42 +114,60 @@ function OTP({ seperator, inputCount, value, onChange }) {
     }
   };
 
-  return new Array(inputCount).fill(null).map((_, index) => (
-    <React.Fragment key={index}>
-      <BaseInput
-        slots={{
-          input: InputElement,
-        }}
-        aria-label={`Digit ${index + 1} of OTP`}
-        slotProps={{
-          input: {
-            ref: (ele) => {
-              inputRefs.current[index] = ele;
-            },
-            onKeyDown: (event) => handleKeyDown(event, index),
-            onChange: (event) => handleChange(event, index),
-            onClick: (event) => handleClick(event, index),
-            onPaste: (event) => handlePaste(event, index),
-            value: value[index],
-          },
-        }}
-      />
-      {index === inputCount - 1 ? null : seperator}
-    </React.Fragment>
-  ));
+  return (
+    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+      {new Array(inputCount).fill(null).map((_, index) => (
+        <React.Fragment key={index}>
+          <BaseInput
+            slots={{
+              input: InputElement,
+            }}
+            aria-label={`Digit ${index + 1} of OTP`}
+            slotProps={{
+              input: {
+                ref: (ele) => {
+                  inputRefs.current[index] = ele;
+                },
+                onKeyDown: (event) => handleKeyDown(event, index),
+                onChange: (event) => handleChange(event, index),
+                onClick: (event) => handleClick(event, index),
+                onPaste: (event) => handlePaste(event, index),
+                value: value[index],
+              },
+            }}
+          />
+          {index === inputCount - 1 ? null : seperator}
+        </React.Fragment>
+      ))}
+    </Box>
+  );
 }
 
+OTP.propTypes = {
+  inputCount: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+  seperator: PropTypes.node,
+  value: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
 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' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
       <OTP
         seperator={<span>-</span>}
         value={otp}
         onChange={setOtp}
         inputCount={inputCount}
       />
+      <span>Entered value: {otp.join('')}</span>
     </Box>
   );
 }

diff --git a/docs/data/base/components/input/OTPInput.tsx b/docs/data/base/components/input/OTPInput.tsx
@@ -137,42 +137,53 @@ function OTP({
     }
   };
 
-  return new Array(inputCount).fill(null).map((_, index) => (
-    <React.Fragment key={index}>
-      <BaseInput
-        slots={{
-          input: InputElement,
-        }}
-        aria-label={`Digit ${index + 1} of OTP`}
-        slotProps={{
-          input: {
-            ref: (ele) => {
-              inputRefs.current[index] = ele!;
-            },
-            onKeyDown: (event) => handleKeyDown(event, index),
-            onChange: (event) => handleChange(event, index),
-            onClick: (event) => handleClick(event, index),
-            onPaste: (event) => handlePaste(event, index),
-            value: value[index],
-          },
-        }}
-      />
-      {index === inputCount - 1 ? null : seperator}
-    </React.Fragment>
-  ));
+  return (
+    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+      {new Array(inputCount).fill(null).map((_, index) => (
+        <React.Fragment key={index}>
+          <BaseInput
+            slots={{
+              input: InputElement,
+            }}
+            aria-label={`Digit ${index + 1} of OTP`}
+            slotProps={{
+              input: {
+                ref: (ele) => {
+                  inputRefs.current[index] = ele!;
+                },
+                onKeyDown: (event) => handleKeyDown(event, index),
+                onChange: (event) => handleChange(event, index),
+                onClick: (event) => handleClick(event, index),
+                onPaste: (event) => handlePaste(event, index),
+                value: value[index],
+              },
+            }}
+          />
+          {index === inputCount - 1 ? null : seperator}
+        </React.Fragment>
+      ))}
+    </Box>
+  );
 }
 
 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' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
       <OTP
         seperator={<span>-</span>}
         value={otp}
         onChange={setOtp}
         inputCount={inputCount}
       />
+      <span>Entered value: {otp.join('')}</span>
     </Box>
   );
 }

diff --git a/docs/data/base/components/input/OTPInput.tsx.preview b/docs/data/base/components/input/OTPInput.tsx.preview
@@ -3,4 +3,5 @@
   value={otp}
   onChange={setOtp}
   inputCount={inputCount}
-/>
+/>
+<span>Entered value: {otp.join('')}</span>