48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
import { useSelector } from '../store'
|
|
import classNames from 'classnames'
|
|
|
|
import { getNextSmallerNumber } from '../lib/array-util.js'
|
|
import {
|
|
selectParsedText,
|
|
selectCurrentSegmentIndex,
|
|
selectSegmentWindow
|
|
} from '../store/selectors.js'
|
|
|
|
import styles from './TextOutput.css'
|
|
|
|
export const TextOutput = () => {
|
|
const { segments, offset } = useSelector(selectSegmentWindow)
|
|
const { sentences, words } = useSelector(selectParsedText)
|
|
const curSegment = useSelector(selectCurrentSegmentIndex)
|
|
return (
|
|
<>
|
|
<div>
|
|
{segments.map((segment, idx) => {
|
|
idx = idx + offset
|
|
const isCurrent = curSegment === idx
|
|
const isWordStart = words.includes(idx)
|
|
const wordBeginning = isWordStart
|
|
? idx
|
|
: getNextSmallerNumber(idx, words)
|
|
const isSentenceStart = sentences.includes(wordBeginning)
|
|
|
|
return (
|
|
<span key={idx}>
|
|
{isWordStart && ' '}
|
|
<span
|
|
className={classNames({
|
|
[styles.current]: isCurrent,
|
|
[styles.sentenceBeginning]: isSentenceStart
|
|
})}
|
|
>
|
|
{segment}
|
|
</span>
|
|
</span>
|
|
)
|
|
})}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|