51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { IonRow } from "@ionic/react";
|
|
import { useEffect, useRef } from "react";
|
|
import KeypadInput from "./KeypadInput";
|
|
|
|
const KeypadInputs = (props: any): JSX.Element => {
|
|
const { values, activeIndex, incorrect, correct } = props;
|
|
const keypadRef = useRef<HTMLIonRowElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (incorrect && keypadRef.current) {
|
|
keypadRef.current.classList.add("incorrect");
|
|
|
|
setTimeout(() => {
|
|
if (keypadRef.current) {
|
|
keypadRef.current.classList.remove("incorrect");
|
|
}
|
|
}, 1000);
|
|
}
|
|
}, [incorrect]);
|
|
|
|
useEffect(() => {
|
|
if (correct) {
|
|
if (keypadRef.current) {
|
|
keypadRef.current.classList.add("correct");
|
|
}
|
|
}
|
|
}, [correct]);
|
|
|
|
return (
|
|
<IonRow ref={keypadRef} className="ion-justify-content-center">
|
|
{values.map((value: string, index: number) => {
|
|
const isActive = parseInt(index.toString()) === parseInt(activeIndex);
|
|
const isFilled = value !== "" ? true : false;
|
|
|
|
return (
|
|
<KeypadInput
|
|
correct={correct}
|
|
incorrect={incorrect}
|
|
isFilled={isFilled}
|
|
isActive={isActive}
|
|
value={value}
|
|
placeholder="0"
|
|
/>
|
|
);
|
|
})}
|
|
</IonRow>
|
|
);
|
|
};
|
|
|
|
export default KeypadInputs;
|