122 lines
3.0 KiB
JavaScript
122 lines
3.0 KiB
JavaScript
import { ThemeColoursContext } from 'Components/utils/withColours'
|
|
import Value from 'Components/Value'
|
|
import { findRuleByDottedName } from 'Engine/rules'
|
|
import React, { useContext } from 'react'
|
|
import emoji from 'react-easy-emoji'
|
|
import { useSelector } from 'react-redux'
|
|
import { config, animated, useSpring } from 'react-spring'
|
|
import { flatRulesSelector } from 'Selectors/analyseSelectors'
|
|
import répartitionSelector from 'Selectors/repartitionSelectors'
|
|
import { isIE } from '../utils'
|
|
import './Distribution.css'
|
|
import './PaySlip'
|
|
import RuleLink from './RuleLink'
|
|
import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
|
|
|
|
export default function Distribution() {
|
|
const distribution = useSelector(répartitionSelector)
|
|
|
|
if (!Object.values(distribution).length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="distribution-chart__container">
|
|
{distribution.répartition.map(
|
|
([brancheDottedName, { partPatronale, partSalariale }]) => (
|
|
<DistributionBranch
|
|
key={brancheDottedName}
|
|
{...{
|
|
brancheDottedName,
|
|
partPatronale,
|
|
partSalariale,
|
|
distribution
|
|
}}
|
|
/>
|
|
)
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const ANIMATION_SPRING = config.gentle
|
|
function DistributionBranch({
|
|
brancheDottedName,
|
|
partPatronale,
|
|
partSalariale,
|
|
distribution
|
|
}) {
|
|
const rules = useSelector(flatRulesSelector)
|
|
const [intersectionRef, brancheInViewport] = useDisplayOnIntersecting({
|
|
threshold: 0.5
|
|
})
|
|
const colours = useContext(ThemeColoursContext)
|
|
const branche = findRuleByDottedName(rules, brancheDottedName)
|
|
const montant = brancheInViewport ? partPatronale + partSalariale : 0
|
|
const styles = useSpring({
|
|
config: ANIMATION_SPRING,
|
|
to: {
|
|
flex: montant / distribution.cotisationMaximum,
|
|
opacity: montant ? 1 : 0
|
|
}
|
|
})
|
|
|
|
return (
|
|
<animated.div
|
|
ref={intersectionRef}
|
|
className="distribution-chart__item"
|
|
style={{ opacity: styles.opacity }}>
|
|
<BranchIcône icône={branche.icons} />
|
|
<div className="distribution-chart__item-content">
|
|
<p className="distribution-chart__counterparts">
|
|
<span className="distribution-chart__branche-name">
|
|
<RuleLink {...branche} />
|
|
</span>
|
|
<br />
|
|
<small>{branche.summary}</small>
|
|
</p>
|
|
<ChartItemBar
|
|
{...{
|
|
styles,
|
|
colour: colours.colour,
|
|
montant,
|
|
total: distribution.total
|
|
}}
|
|
/>
|
|
</div>
|
|
</animated.div>
|
|
)
|
|
}
|
|
|
|
let ChartItemBar = ({ styles, colour, montant }) => (
|
|
<div className="distribution-chart__bar-container">
|
|
<animated.div
|
|
className="distribution-chart__bar"
|
|
style={{
|
|
backgroundColor: colour,
|
|
...(!isIE()
|
|
? { flex: styles.flex }
|
|
: { minWidth: styles.flex * 500 + 'px' })
|
|
}}
|
|
/>
|
|
<div
|
|
css={`
|
|
font-weight: bold;
|
|
margin-left: 1rem;
|
|
color: var(--textColourOnWhite);
|
|
`}>
|
|
<Value maximumFractionDigits={0} unit="€">
|
|
{montant}
|
|
</Value>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
let BranchIcône = ({ icône }) => (
|
|
<div className="distribution-chart__legend">
|
|
<span className="distribution-chart__icon">{emoji(icône)}</span>
|
|
</div>
|
|
)
|