Ajout d'un flash au changement d'un résultat

package.json

@@ -22,6 +22,7 @@
     "npm": "^5.3.0",
     "ramda": "0.24.1",
     "react": "^16.0.0",
+    "react-addons-css-transition-group": "^15.6.2",
     "react-dom": "^16.0.0",
     "react-helmet": "^5.2.0",
     "react-redux": "^5.0.6",
@@ -30,6 +31,7 @@
     "react-scroll": "^1.5.4",
     "react-select": "^1.0.0-rc.10",
     "react-select-fast-filter-options": "^0.2.3",
+    "react-transition-group": "^2.2.1",
     "react-virtualized": "^9.10.1",
     "react-virtualized-select": "^3.1.0",
     "reduce-reducers": "^0.1.2",

source/components/rule/RuleValueVignette.js

@@ -1,11 +1,13 @@
 import React from "react"
-import {Link} from 'react-router-dom'
-import {encodeRuleName} from 'Engine/rules'
-import classNames from 'classnames'
-import {capitalise0} from '../../utils'
-let fmt = new Intl.NumberFormat('fr-FR').format
-export let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
-import './RuleValueVignette2.css'
+import { Link } from "react-router-dom"
+import { encodeRuleName } from "Engine/rules"
+import classNames from "classnames"
+import { capitalise0 } from "../../utils"
+let fmt = new Intl.NumberFormat("fr-FR").format
+export let humanFigure = decimalDigits => value =>
+	fmt(value.toFixed(decimalDigits))
+import "./RuleValueVignette2.css"
+import ReactCSSTransitionGroup from "react-addons-css-transition-group"
 
 export default ({
 	name,
@@ -15,36 +17,49 @@ export default ({
 	nodeValue: ruleValue
 }) =>
 	do {
-		let
-			unsatisfied = ruleValue == null,
+		let unsatisfied = ruleValue == null,
 			irrelevant = ruleValue == 0,
-			number = typeof ruleValue == 'number' && ruleValue > 0
-
+			number = typeof ruleValue == "number" && ruleValue > 0
 		;<span
 			key={name}
-			className={classNames('RuleValueVignette', { unsatisfied, irrelevant, number })}
+			className={classNames("RuleValueVignette", {
+				unsatisfied,
+				irrelevant,
+				number
+			})}
 		>
 			<Link to={"/regle/" + encodeRuleName(name)}>
-				<div className="rule-type">
-					{type}
-				</div>
+				<div className="rule-type">{type}</div>
 				<div className="rule-box">
-					<span className="rule-name">
-						{titre || capitalise0(name)}
-					</span>
-					<span>{' '}
-						{conversationStarted &&
-							(irrelevant
-								? "Vous n'êtes pas concerné"
-								: unsatisfied
-									? <em>En attente de vos réponses...</em>
-									: <div><span className="figure">
-										<b>{humanFigure(2)(ruleValue) + " €"}</b>
-									</span>
-									{/*<p><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Pourquoi ?</em></p> */}
-									</div>)}
-					</span>
+					<span className="rule-name">{titre || capitalise0(name)}</span>
+					<RuleValue
+						{...{ unsatisfied, irrelevant, conversationStarted, ruleValue }}
+					/>
 				</div>
 			</Link>
 		</span>
 	}
+
+let RuleValue = ({ unsatisfied, irrelevant, conversationStarted, ruleValue }) =>
+	do {
+		let [className, text] = irrelevant
+			? ["irrelevant", "Vous n'êtes pas concerné"]
+			: unsatisfied
+				? ["unsatisfied", "En attente de vos réponses..."]
+				: ["figure", humanFigure(2)(ruleValue) + " €"]
+
+		{
+			/*<p><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Pourquoi ?</em></p> */
+		}
+
+		<ReactCSSTransitionGroup
+			transitionName="flash"
+			transitionEnterTimeout={100}
+			transitionLeaveTimeout={100}
+		>
+			<span key={text} className="rule-value">
+				{" "}
+				{conversationStarted && <span className={className}>{text}</span>}
+			</span>
+		</ReactCSSTransitionGroup>
+	}

source/components/rule/RuleValueVignette2.css

@@ -23,3 +23,28 @@
 .RuleValueVignette .rule-box > span {
 	display: inline-block;
 }
+
+.RuleValueVignette .rule-value {
+	transition: background .8s;
+}
+.RuleValueVignette .rule-value .unsatisfied {
+	font-style: italic;
+}
+.RuleValueVignette .rule-value .irrelevant {
+	font-style: normal;
+}
+.RuleValueVignette .rule-value .figure {
+	font-weight: bold;
+}
+
+
+
+/* Animation of summary figures changes : flash ! */
+.flash-enter {
+		background: rgba(255, 255, 255, 1);
+}
+
+.flash-leave {
+		/* Completely hide the button while it's being animated and before it's removed from the DOM. */
+		display: none;
+}