diff --git a/index.html b/index.html index e4b78ea..d03d427 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + Pinyin dictation
diff --git a/src/App.css b/src/App.css index b9d355d..873cac7 100644 --- a/src/App.css +++ b/src/App.css @@ -40,3 +40,7 @@ .read-the-docs { color: #888; } + +.btn { + margin-bottom: 5px; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 5e1d49a..d21f9e5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,23 +1,61 @@ import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' 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(0) + + 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 ( <> -
- - Vite logo - - - React logo - -
-

Vite + React

+

Диктант pīnyīn

+ + + Выберите инициали + + + {initials.map( (text) => + )} + + + + Выберите финали + + + {finales.map( (text) => + )} + + + + Параметры + + Количество слогов {count} + + Пауза между слогами {pause} секунд + + + +
{' '} - {' '} - {' '} - {' '} - {' '} - {' '} - {' '} - ) } diff --git a/src/Btn.tsx b/src/Btn.tsx new file mode 100644 index 0000000..2137ec7 --- /dev/null +++ b/src/Btn.tsx @@ -0,0 +1,39 @@ +import { ReactElement, useState } from 'react' +import { Button } from 'react-bootstrap'; +import { justproc, proc } from './Types'; + +interface IBtnProps { + type: String, + text: String, + altText?: String + onclick?: justproc +} + +interface IBtnSimpleProps { + type: String, + text: String, + enabled: Boolean, + onclick?: proc +} + +export function Btn ({ type, text, altText, onclick }: IBtnProps): ReactElement { + const [enabled, toggleState] = useState(false) + const alttext = altText ?? text; + const onclicklocal = () => { + toggleState(!enabled) + if (onclick) onclick!() + } + return <>{' '} +} + +export function BtnSimple ({ type, text, enabled, onclick }: IBtnSimpleProps): ReactElement { + const onclickdefault: proc = (caption: String) => {console.log(caption)} + const onclickinternal: proc = onclick ?? onclickdefault + return <> + + {' '} + + } \ No newline at end of file diff --git a/src/BtnSet.tsx b/src/BtnSet.tsx new file mode 100644 index 0000000..23a3b41 --- /dev/null +++ b/src/BtnSet.tsx @@ -0,0 +1,28 @@ +import { ReactElement, useState } from 'react' +import { Btn, BtnSimple } from './Btn' +import { isEnabled, toggle } from './Utils' + +function BtnSet(captions: String[], type: String): ReactElement { + + const [ enabledButtons, setButtonsState ] = useState([] as String[]) + const [ selectedAll, toggleSelectAll ] = useState(false) + + const toggleState = (caption: String) => setButtonsState(toggle(enabledButtons,caption)) + const toggleAll = () => { + toggleSelectAll( !selectedAll ) + if (!selectedAll) setButtonsState([... captions]) + else setButtonsState([]) + } + +return <> + + {captions.map( (text) => + )} + +} + +export default BtnSet \ No newline at end of file diff --git a/src/Data.ts b/src/Data.ts new file mode 100644 index 0000000..0a74e33 --- /dev/null +++ b/src/Data.ts @@ -0,0 +1,11 @@ +export const initials = [ + 'b', 'p', 'm', 'f', 'd', 't', 'n', 'l', 'g', 'k', + 'h', 'j', 'q', 'x', 'zh', 'ch', 'sh', 'r', 'z', 'c', 's' +] + +export const finales = [ + 'a', 'ai', 'an', 'ang', 'ao', 'e', 'ei', 'en', 'eng', 'er', + 'i', 'ia', 'ian', 'iang', 'iao', 'ie', 'in', 'ing', 'io', 'iong', 'iu', + 'o', 'ong', 'ou', 'u', 'ua', 'uai', 'uan', 'uang', 'ui', 'un', 'uo', + 'ü', 'üan', 'üe', 'ün' + ] \ No newline at end of file diff --git a/src/Types.ts b/src/Types.ts new file mode 100644 index 0000000..a743c3f --- /dev/null +++ b/src/Types.ts @@ -0,0 +1,2 @@ +export type proc = (caption: String) => void; +export type justproc = () => void; \ No newline at end of file diff --git a/src/Utils.ts b/src/Utils.ts new file mode 100644 index 0000000..b2f0e8d --- /dev/null +++ b/src/Utils.ts @@ -0,0 +1,8 @@ +export const isEnabled = (arr: String[], caption: String): Boolean => arr.some((btn) => btn==caption) + +export const toggle = ( arr: String[], caption: String ):String[] => { + if ( arr.some((btn) => btn==caption) ) + return arr.filter((el)=>el!==caption) + else + return [ ...arr, caption] +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index a7fc6fb..9873761 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,8 +7,8 @@ "skipLibCheck": true, /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, + "moduleResolution": "Node", + // "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true,