danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

revision: auth page components

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-01 17:34:44 +03:30
parent b5ee3a6b26
commit f11d85cb0b
8 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/MultiInputField.tsx
+5 -4
View File
@@ -12,7 +12,7 @@ type Props = {
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;
function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className, value = '' }: Props) {
function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className, value = '', ...restProps }: Props) {
const values = value?.toString().split('').slice(0, maxLength);
const inputRefs = useRef(Array.from({ length: maxLength }, () => createRef<HTMLInputElement>()));
const [prevLength, setPrevLength] = useState(0);
@@ -54,15 +54,16 @@ function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className,
htmlFor={htmlFor}>
{labelText}
</label>
<div className='inline-flex justify-between items-center gap-2'>
<div id={htmlFor} className='inline-flex justify-between items-center gap-2'>
{inputRefs?.current?.map((ref, i) => {
return (
<input
{...restProps}
key={i}
onKeyDown={keyDown}
onChange={onChange}
id={`${htmlFor}-data-${i}`}
readOnly={Math.max(0, values?.length) != i && prevLength != i}
name={`${htmlFor}-data-${i}`}
readOnly={i != maxLength - 1 && Math.max(0, values?.length) != i && prevLength != i}
ref={ref}
value={values?.at(i) ?? ''}
maxLength={1}