diff --git a/package.json b/package.json
index a14abf02d..d5b9a0eae 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
"dependencies": {
"@babel/polyfill": "^7.4.0",
"@babel/runtime": "^7.3.4",
- "@researchgate/react-intersection-observer": "^0.7.3",
"classnames": "^2.2.5",
"color-convert": "^1.9.2",
"core-js": "^3.2.1",
@@ -51,7 +50,7 @@
"react-router-dom": "^5.1.1",
"react-select": "^1.2.1",
"react-select-fast-filter-options": "^0.2.3",
- "react-spring": "^5.8.0",
+ "react-spring": "=8.0.27",
"react-syntax-highlighter": "^10.1.1",
"react-transition-group": "^2.2.1",
"react-virtualized": "^9.20.0",
diff --git a/source/components/Distribution.js b/source/components/Distribution.js
index 7b9651d6b..da764350c 100644
--- a/source/components/Distribution.js
+++ b/source/components/Distribution.js
@@ -1,134 +1,98 @@
-/* @flow */
-
-import Observer from '@researchgate/react-intersection-observer'
-import withColours from 'Components/utils/withColours'
+import { ThemeColoursContext } from 'Components/utils/withColours'
import Value from 'Components/Value'
import { findRuleByDottedName } from 'Engine/rules'
-import React, { useState } from 'react'
+import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
-import { connect } from 'react-redux'
-import { config, Spring } from 'react-spring'
-import { compose } from 'redux'
+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 type { ThemeColours } from 'Components/utils/withColours'
-import type { Répartition } from 'Types/ResultViewTypes.js'
+import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
-type Props = ?Répartition & {
- colours: ThemeColours
-}
-
-const ANIMATION_SPRING = config.gentle
-function Distribution({
- colours: { colour },
- rules,
- // $FlowFixMe
- ...distribution
-}: Props) {
- const [branchesInViewport, setBranchesInViewport] = useState([])
-
- const handleBrancheInViewport = branche => (event, unobserve) => {
- if (!event.isIntersecting) {
- return
- }
- unobserve()
- setBranchesInViewport(branchesInViewport => [
- branche,
- ...branchesInViewport
- ])
- }
+export default function Distribution() {
+ const distribution = useSelector(répartitionSelector)
if (!Object.values(distribution).length) {
return null
}
- const {
- répartition,
- cotisationMaximum,
- total,
- cotisations,
- salaireChargé,
- salaireNet
- } = distribution
return (
<>
- {répartition.map(
- ([brancheDottedName, { partPatronale, partSalariale }]) => {
- const branche = findRuleByDottedName(rules, brancheDottedName),
- brancheInViewport =
- branchesInViewport.indexOf(brancheDottedName) !== -1
- const montant = brancheInViewport
- ? partPatronale + partSalariale
- : 0
-
- return (
-
-
- {styles => (
-
-
-
-
-
-
-
-
- {branche.summary}
-
-
-
-
- )}
-
-
- )
- }
+ {distribution.répartition.map(
+ ([brancheDottedName, { partPatronale, partSalariale }]) => (
+
+ )
)}
-
-
-
-
-
+
-
-
-
-
-
=
-
-
-
>
)
}
-export default compose(
- withColours,
- connect(state => ({
- ...répartitionSelector(state),
- rules: flatRulesSelector(state)
- }))
-)(Distribution)
-let ChartItemBar = ({ styles, colour, montant, total }) => (
+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 (
+
+
+
+
+
+
+
+
+ {branche.summary}
+
+
+
+
+ )
+}
+
+let ChartItemBar = ({ styles, colour, montant }) => (
-
({
- showDistributionFirst: !state.conversationSteps.foldedSteps.length
- }))
-)(function SalaryExplanation({ showDistributionFirst }) {
+export default function SalaryExplanation() {
+ const showDistributionFirst = useSelector(
+ state => !state.conversationSteps.foldedSteps.length
+ )
const distributionRef = useRef({})
return (
{showDistributionFirst ? (
<>
+
>
) : (
<>
+