27 lines
782 B
JavaScript
27 lines
782 B
JavaScript
import React, { useRef, useCallback } from 'react';
|
|
|
|
export default function LetterInput({ highlighted, onNext, onPrev, inputRef }) {
|
|
const handleKeyUp = useCallback((e) => {
|
|
if (e.key === 'Backspace') {
|
|
e.target.value = '';
|
|
onPrev?.();
|
|
} else if (e.key.length === 1 && /[a-zA-Z]/.test(e.key)) {
|
|
e.target.value = e.key.toUpperCase();
|
|
onNext?.();
|
|
}
|
|
}, [onNext, onPrev]);
|
|
|
|
return (
|
|
<td>
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
maxLength={1}
|
|
className={`letter-input${highlighted ? ' letter-highlighted' : ''}`}
|
|
onKeyUp={handleKeyUp}
|
|
autoComplete="off"
|
|
/>
|
|
</td>
|
|
);
|
|
}
|