import * as React from 'react' ; import State from '../../state/State' ; import { Dispatch , Action } from 'redux' ; import { connect } from 'react-redux' ; import AutoSizedText from '../common/AutoSizedText' ; import TableBorder from './TableBorder' ; import './TableText.css' ; interface TableTextProps { text : string ; animateReading : boolean ; readingSpeed : number ; } const mapStateToProps = ( state ) => ( { text : state . run . table . text , animateReading : state . run . table . animateReading , readingSpeed : state . run . readingSpeed } ) ; const mapDispatchToProps = ( dispatch ) => ( { } ) ; export function TableText ( props ) { let textElem ; if ( props . animateReading ) { const animatedText = [ ] ; const animationStep = 1 / props . readingSpeed ; let animation = 0 ; for ( let i = 0 ; i < props . text . length ; i ++ ) { animation += animationStep ; const style = { animationDelay : `${ animation }s` } ; animatedText . push ( < span key = { i } className = "animatableCharacter" style = { style } > { props . text [ i ] } < /span>); } const content = < span > { animatedText } < /span>; textElem = < AutoSizedText className = "tableText tableTextCenter" maxFontSize = { 144 } > { content } < /AutoSizedText>; } else { textElem = < AutoSizedText className = "tableText tableTextCenter" maxFontSize = { 144 } > { props . text } < /AutoSizedText>; } return ( < TableBorder > { textElem } < /TableBorder>); } export default connect ( mapStateToProps , mapDispatchToProps ) ( TableText ) ;