import React, { useState, useRef } from 'react';
import { View, navigateBack } from '@ray-js/ray';
import { NavBar, Field } from '@ray-js/smart-ui';
import { NoticeTip } from '@/components';
import styles from './index.module.less';
export function Password(props) {
const { query } = props.location;
const noticeTipRef = useRef(null);
const [focusIndex, setFocusIndex] = useState(0);
const [password, setPassword] = useState(['', '', '', '']);
const onClickLeft = () => {
navigateBack();
};
const handleInputChange = (e, index) => {
const value = e.detail;
const filtered = value.replace(/[0-9]/g, '');
if (filtered) {
setFocusIndex(index + 1);
}
setPassword(prev => {
const newArray = [...prev];
newArray[index] = filtered;
return newArray;
});
};
return (
<>
<NavBar
title="密码"
leftArrow
onClickLeft={onClickLeft}
custom-class={styles['nav-bar']}
placeholder
fixed
border={false}
/>
<NoticeTip ref={noticeTipRef} />
<View>{JSON.stringify(password)}</View>
<View className={styles.container}>
<View className={styles.body}>
{password.map((item, index) => (
<View key={index} className={styles['input-box']}>
<Field
value={item}
focus={focusIndex === index}
type="number"
hiddenLabel
label=""
placeholder=""
inputAlign="center"
maxlength={1}
onInput={e => handleInputChange(e, index)}
center
holdKeyboard
disableDefaultPadding
/>
</View>
))}
</View>
</View>
</>
);
}
export default Password;