Untitled
unknown
plain_text
a year ago
2.1 kB
5
Indexable
import React, { useState } from "react"; import { SHORT_DELAY_IN_MS } from "../../constants/delays"; import { ElementStates } from "../../types/element-states"; import { sleep } from "../../utils/utils-functions"; import { Button } from "../ui/button/button"; import { Circle } from "../ui/circle/circle"; import { Input } from "../ui/input/input"; import { SolutionLayout } from "../ui/solution-layout/solution-layout"; import styles from './string.module.css' import { reverseStringSteps } from "./utils"; export const StringComponent: React.FC = () => { const [word, setWord] = useState<string>(''); const [lettersState, setLettersState] = useState<{ letter: string, state: ElementStates }[]>([]); const [isLoading, setIsLoading] = useState<boolean>(false); const reverseString = async () => { setIsLoading(true); const steps = reverseStringSteps(word); console.log(steps) await (async () => { for (let i = 0; i < steps.length; i++) { setLettersState([...steps[i]]); await sleep(SHORT_DELAY_IN_MS); } })(); setIsLoading(false); }; const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const newWord = e.target.value; setWord(newWord); }; return ( <SolutionLayout title="Строка"> <div className={styles.inputZone}> <Input type="text" maxLength={11} isLimitText={true} onChange={handleChange} data-cy = 'string_input' /> <Button type="button" text="развернуть" disabled={word.length === 0 || isLoading} onClick={reverseString} isLoader={isLoading} data-cy = 'string_button' /> </div> <div className={styles.sequence} data-cy = {'letters'}> {lettersState.map((item, index) => ( <Circle key={index} letter={item.letter} state={item.state} isSmall={false} extraClass={styles.circleMargin} /> ))} </div> </SolutionLayout> ); };
Editor is loading...
Leave a Comment