75 lines
2.9 KiB
TypeScript
75 lines
2.9 KiB
TypeScript
import { useState } from 'react'
|
||
import './App.css'
|
||
import { Button } from 'react-bootstrap';
|
||
import Accordion from 'react-bootstrap/Accordion';
|
||
import Form from 'react-bootstrap/Form';
|
||
import { initials, finales } from './Data';
|
||
import { Btn, BtnSimple } from './Btn';
|
||
import { isEnabled, toggle } from './Utils';
|
||
|
||
function App() {
|
||
|
||
const [count, setCount] = useState(10)
|
||
const [pause, setPause] = useState(3)
|
||
|
||
const [ enabledInitials, setInitialsState ] = useState([] as String[])
|
||
const toggleInitialsState = (caption: String) => setInitialsState(toggle(enabledInitials,caption))
|
||
|
||
const [ enabledFinals, setFinalsState ] = useState([] as String[])
|
||
const toggleFinalsState = (caption: String) => setFinalsState(toggle(enabledFinals,caption))
|
||
|
||
return (
|
||
<>
|
||
<h1>Диктант pīnyīn</h1>
|
||
<Accordion defaultActiveKey="0">
|
||
<Accordion.Item eventKey="0">
|
||
<Accordion.Header>Выберите инициали</Accordion.Header>
|
||
<Accordion.Body>
|
||
<Btn type="primary" text="Выбрать все" altText="Снять все"/>
|
||
{initials.map( (text) => <BtnSimple
|
||
type="primary"
|
||
text={text}
|
||
enabled={isEnabled(enabledInitials, text)}
|
||
onclick={toggleInitialsState}/>
|
||
)}
|
||
</Accordion.Body>
|
||
</Accordion.Item>
|
||
<Accordion.Item eventKey="1">
|
||
<Accordion.Header>Выберите финали</Accordion.Header>
|
||
<Accordion.Body>
|
||
<Btn type="success" text="Выбрать все" altText="Снять все"/>
|
||
{finales.map( (text) => <BtnSimple
|
||
type="success"
|
||
text={text}
|
||
enabled={isEnabled(enabledFinals, text)}
|
||
onclick={toggleFinalsState}/>
|
||
)}
|
||
</Accordion.Body>
|
||
</Accordion.Item>
|
||
<Accordion.Item eventKey="2">
|
||
<Accordion.Header>Параметры</Accordion.Header>
|
||
<Accordion.Body>
|
||
<Form.Label>Количество слогов {count}</Form.Label>
|
||
<Form.Range defaultValue={10} min={5} max={50} step={5}/>
|
||
<Form.Label>Пауза между слогами {pause} секунд</Form.Label>
|
||
<Form.Range defaultValue={3} min={1} max={10} step={1}/>
|
||
</Accordion.Body>
|
||
</Accordion.Item>
|
||
</Accordion>
|
||
<div className="card">
|
||
<Button variant="success" onClick={() => setCount((count) => count + 1)}>
|
||
count is {count}
|
||
</Button>
|
||
<p>
|
||
Edit <code>src/App.tsx</code> and save to test HMR
|
||
</p>
|
||
</div>
|
||
<p className="read-the-docs">
|
||
Click on the Vite and React logos to learn more
|
||
</p>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default App
|