mon-entreprise/source/components/QuickLink.js

79 lines
1.8 KiB
JavaScript

/* @flow */
import { startConversation } from 'Actions/actions'
import withLanguage from 'Components/utils/withLanguage'
import { compose, toPairs } from 'ramda'
import React from 'react'
import { Trans } from 'react-i18next'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'
import { animated, Spring } from 'react-spring'
import { validInputEnteredSelector } from 'Selectors/analyseSelectors'
import type { Location } from 'react-router'
type Props = {
startConversation: (?string) => void,
location: Location,
validInputEntered: boolean
}
let quickLinks = {
CDD: 'contrat salarié . type de contrat',
Cadre: 'contrat salarié . statut cadre',
'Temps partiel': 'contrat salarié . temps partiel',
Localisation: 'établissement . localisation',
Autres: null
}
const QuickLink = ({
startConversation,
location,
validInputEntered
}: Props) => {
const show = !location.pathname.endsWith('/simulation') && validInputEntered
return (
<Spring
to={{
height: show ? 'auto' : 0,
opacity: show ? 1 : 0
}}
native>
{styles => (
<animated.div
className="ui__ button-container"
style={{
...styles,
display: 'flex',
overflow: 'hidden',
flexWrap: 'wrap-reverse',
fontSize: '110%',
justifyContent: 'space-evenly',
marginBottom: '0.6rem'
}}>
{toPairs(quickLinks).map(([label, dottedName]) => (
<button
key={label}
className="ui__ link-button"
onClick={() => startConversation(dottedName)}>
<Trans>{label}</Trans>
</button>
))}
</animated.div>
)}
</Spring>
)
}
export default compose(
withLanguage,
withRouter,
connect(
(state, props) => ({
key: props.language,
validInputEntered: validInputEnteredSelector(state)
}),
{
startConversation
}
)
)(QuickLink)