mirror of
https://github.com/ThomasJockin/readexpro.git
synced 2024-09-11 10:26:46 +03:00
49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import { useContext } from 'react'
|
|
import TypeChoicesContext from '../lib/useTypeChoices'
|
|
import ReadingSimulatorContext from '../lib/useReadingSimulator'
|
|
import styled from '@emotion/styled'
|
|
import Markdown from 'markdown-to-jsx'
|
|
import Highlighter from './Highlighter'
|
|
import ReadingStatistics from './ReadingStatistics'
|
|
import ReadingSimulatorControls from './ReadingSimulatorControls'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
|
|
|
|
const Simulator = ({ disabled = [], ...props }) => {
|
|
const { family, text, setText, setTypeFamily, axis, customStyles } = useContext(TypeChoicesContext)
|
|
const { words, wpm, setWPM, started, setStarted, index, errors, timer } = useContext(ReadingSimulatorContext)
|
|
const changeFamily = ({ target }) => setTypeFamily(target.value)
|
|
|
|
return (
|
|
<Container>
|
|
<ReadingSimulatorControls
|
|
disabled={disabled}
|
|
wpm={wpm}
|
|
setWPM={setWPM}
|
|
started={started}
|
|
text={text}
|
|
setText={setText}
|
|
on={() => setStarted(true)}
|
|
off={() => setStarted(false)}
|
|
family={props.family || family}
|
|
changeFamily={changeFamily}
|
|
/>
|
|
<Highlighter family={props.family || family} words={words} index={index}
|
|
errors={errors}
|
|
customStyles={customStyles}/>
|
|
<ReadingStatistics words={words} wpm={wpm} timer={timer} errors={errors} index={index}/>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
const Container = styled('section')`
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
`
|
|
|
|
export default Simulator
|