64 lines
1.6 KiB
JavaScript
64 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import './Controls.css'
|
|
import emoji from 'react-easy-emoji'
|
|
import { connect } from 'react-redux'
|
|
import { startConversation } from 'Actions/actions'
|
|
import { animated, Spring } from 'react-spring'
|
|
import { makeJsx } from 'Engine/evaluation'
|
|
|
|
function Controls({ blockingInputControls, controls, startConversation }) {
|
|
return (
|
|
<div id="controlsBlock">
|
|
{blockingInputControls && (
|
|
<p className="blockingControl">{blockingInputControls[0].message}</p>
|
|
)}
|
|
{!blockingInputControls && (
|
|
<Spring
|
|
to={{
|
|
height: controls?.length ? 'auto' : 0,
|
|
opacity: controls?.length ? 1 : 0
|
|
}}
|
|
native>
|
|
{styles =>
|
|
controls?.length ? (
|
|
<animated.div id="control" style={styles}>
|
|
<div id="controlContent">
|
|
{do {
|
|
let { level, solution, evaluated } = controls[0]
|
|
;<>
|
|
<h3>
|
|
{level === 'avertissement'
|
|
? 'Attention !'
|
|
: 'Information'}
|
|
</h3>
|
|
<p>{makeJsx(evaluated)}</p>
|
|
{solution && (
|
|
<div id="solution">
|
|
{emoji('💡')}
|
|
<button
|
|
key={solution.cible}
|
|
className="ui__ link-button"
|
|
onClick={() => startConversation(solution.cible)}>
|
|
{solution.texte}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
}}
|
|
</div>
|
|
</animated.div>
|
|
) : null
|
|
}
|
|
</Spring>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(
|
|
(state, props) => ({ key: props.language }),
|
|
{
|
|
startConversation
|
|
}
|
|
)(Controls)
|