35 lines
1.2 KiB
JavaScript
35 lines
1.2 KiB
JavaScript
import React, { useCallback } from 'react';
|
|
|
|
export default function LetterInput({ highlighted, onNext, onPrev, inputRef, value, rowIndex, charIndex, revealState = null, disabled = false }) {
|
|
const handleKeyUp = useCallback((e) => {
|
|
if (disabled || value !== undefined) {
|
|
return;
|
|
}
|
|
|
|
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?.();
|
|
}
|
|
}, [disabled, onNext, onPrev, value]);
|
|
|
|
return (
|
|
<td>
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
maxLength={1}
|
|
className={`letter-input${highlighted ? ' letter-highlighted' : ''}${revealState ? ` letter-${revealState}` : ''}`}
|
|
value={value}
|
|
disabled={disabled}
|
|
readOnly={value !== undefined}
|
|
onKeyUp={handleKeyUp}
|
|
data-row-index={rowIndex}
|
|
data-char-index={charIndex}
|
|
autoComplete="off"
|
|
/>
|
|
</td>
|
|
);
|
|
}
|