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 ? ( <> + ) : ( <> +