106 lines
2.7 KiB
React
106 lines
2.7 KiB
React
import React, { useState, useRef, useCallback } from 'react';
|
|
import './CodeInput.css';
|
|
|
|
function buildCells(v, length) {
|
|
const arr = (v || '').split('').slice(0, length);
|
|
while (arr.length < length) arr.push('');
|
|
return arr;
|
|
}
|
|
|
|
export default function CodeInput({
|
|
value = '',
|
|
length = 6,
|
|
masked = false,
|
|
tip = '',
|
|
hasError = false,
|
|
onChange
|
|
}) {
|
|
const inputsRef = useRef([]);
|
|
const [cells, setCells] = useState(() => buildCells(value, length));
|
|
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
|
|
const emit = useCallback(
|
|
(next) => {
|
|
const code = next.join('');
|
|
if (onChange) onChange(code);
|
|
},
|
|
[onChange]
|
|
);
|
|
|
|
const focus = (i) => {
|
|
const el = inputsRef.current[i];
|
|
if (el) el.focus();
|
|
};
|
|
|
|
const onInput = (e, i) => {
|
|
const ch = (e.target.value || '').slice(-1);
|
|
const next = cells.slice();
|
|
next[i] = ch;
|
|
e.target.value = ch;
|
|
setCells(next);
|
|
if (ch && i < length - 1) focus(i + 1);
|
|
emit(next);
|
|
};
|
|
|
|
const onKeydown = (e, i) => {
|
|
if (e.key === 'Backspace') {
|
|
e.preventDefault();
|
|
const next = cells.slice();
|
|
if (next[i]) {
|
|
next[i] = '';
|
|
} else if (i > 0) {
|
|
next[i - 1] = '';
|
|
focus(i - 1);
|
|
}
|
|
setCells(next);
|
|
emit(next);
|
|
} else if (e.key === 'ArrowLeft' && i > 0) {
|
|
focus(i - 1);
|
|
} else if (e.key === 'ArrowRight' && i < length - 1) {
|
|
focus(i + 1);
|
|
}
|
|
};
|
|
|
|
const onPaste = (e) => {
|
|
e.preventDefault();
|
|
const text = (e.clipboardData || window.clipboardData).getData('text') || '';
|
|
const digits = text.replace(/\D/g, '').slice(0, length).split('');
|
|
const next = cells.slice();
|
|
for (let k = 0; k < length; k++) next[k] = digits[k] || '';
|
|
setCells(next);
|
|
focus(Math.min(digits.length, length - 1));
|
|
emit(next);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="aa-code" onPaste={onPaste}>
|
|
{cells.map((c, i) => (
|
|
<div
|
|
key={i}
|
|
className={
|
|
'aa-code-cell' +
|
|
(focusedIndex === i ? ' is-focus' : '') +
|
|
(c ? ' is-filled' : '') +
|
|
(masked ? ' is-masked' : '')
|
|
}
|
|
>
|
|
<input
|
|
ref={(el) => (inputsRef.current[i] = el)}
|
|
className="aa-code-input"
|
|
value={c}
|
|
maxLength={1}
|
|
inputMode="numeric"
|
|
aria-label={'验证码第 ' + (i + 1) + ' 位'}
|
|
onFocus={() => setFocusedIndex(i)}
|
|
onInput={(e) => onInput(e, i)}
|
|
onKeyDown={(e) => onKeydown(e, i)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className={'aa-code-tip' + (hasError ? ' error' : '')}>{tip}</div>
|
|
</div>
|
|
);
|
|
}
|