Fix de l'animation au changement de valeur du simulateur.

AnimatedTargetValue n'était pas déterministe et ne
fonctionnais pas en mode dev avec le StrictMode React.
pull/1907/head
Jérémy Rialland 2021-12-16 17:39:19 +01:00 committed by Maxime Quandalle
parent eef5462fa4
commit c9536d4e77
1 changed files with 17 additions and 15 deletions

View File

@ -18,21 +18,25 @@ export default function AnimatedTargetValue({
value,
}: AnimatedTargetValueProps) {
const previousValue = useRef<number>()
const previousDifference = useRef<number>()
const { language } = useTranslation().i18n
const unit = useSelector(targetUnitSelector)
const previousUnit = useRef(unit)
const difference =
let difference =
value == null ||
previousValue.current == null ||
// We don't want to show the animated if the difference comes from a change in the unit
previousUnit.current !== unit
? null
? undefined
: value - previousValue.current
if (previousValue.current !== value) {
previousValue.current = value
previousDifference.current = difference
} else {
difference = previousDifference.current
}
if (previousUnit.current !== unit) {
previousUnit.current = unit
@ -42,19 +46,17 @@ export default function AnimatedTargetValue({
return null
}
return (
<>
<div
key={difference}
css={`
position: relative;
text-align: right;
`}
>
<StyledEvaporate>
{formatDifference(difference ?? 0, language)}
</StyledEvaporate>
</div>
</>
<div
key={difference}
css={`
position: relative;
text-align: right;
`}
>
<StyledEvaporate>
{formatDifference(difference ?? 0, language)}
</StyledEvaporate>
</div>
)
}